我最近做了一個迭代修訂設計，在此期間我遇到了很多問題。其中一個是我在上一篇文章《「瞬間之美」讀書筆記：Web界面設計如何讓用戶心動?》中提到的按鈕的設計。在得出結論之前，我想與大家分享我是如何解決的。這個問題。主要可歸納為以下三個步驟：

1.范式——從書籍中找到解決方案

目前公認的原則是范式。對于設計理論，不同的人會有不同的意見。什么是普遍接受的理論？專業(yè)書籍是我們獲得設計范式的最重要方式。我認為這對年輕設計師來說尤其重要。

2.廣博——看看有多好的在線產品可以解決這個問題

任何知識都在不斷迭代和完善。只有廣博才能不斷驗證和更新從本書中獲得的設計范式。優(yōu)質產品的分析是廣博的主要途徑。

3.輸出——結論和應用

根據(jù)上述兩個步驟的結論，總結分析是否可以應用于您自己的設計。

這是我目前正在學習的主要方法。如果你有更好的方法，你可以留言。

以下是我通過這三個步驟得出的關于按鈕設計的結論。

首先，按鈕的類型

按鈕是命令控件，包括普通按鈕，圖標按鈕和文本按鈕。

1.普通按鈕

2.圖標按鈕

3.文本按鈕

第二，如何確保按鈕的識別和輕松學習

1.使用視覺風格告訴人們您可以點擊這里

在平面設計之前，按鈕具有三維凸起特征，我們仍然可以學習。為按鈕添加適當?shù)年幱?，使元素從背景中脫穎而出，使用戶更容易識別其可點擊性。

2.保持一致性

網站上按鈕的形狀盡可能均勻。矩形用于矩形。圓角矩形用于圓角矩形。用戶將特定形狀的元素識別為“按鈕”。一致性將為用戶提供更熟悉的體驗。降低用戶學習成本。

一致的

不一致的

3.使用高效且易于理解的文案

按鈕上的文本“確定，取消”將替換為更生動，更準確的文本。

以下是上一篇文章的示例：

4.使用適當?shù)膱D標

指向右側的箭頭可能意味著離開頁面;向下箭頭可能意味著打開下面的內容或打開下面的菜單。

網易郵箱中的“發(fā)送”按鈕使用圖標紙飛機，不僅提高了按鈕的易讀性，而且與其他按鈕有很好的區(qū)別，增加了發(fā)送按鈕的優(yōu)先級。

三，按鈕的反饋狀態(tài)

該按鈕必須在操作期間有反饋，以便讓用戶知道他的操作發(fā)生了什么。

按鈕的狀態(tài)具有默認狀態(tài)，懸停狀態(tài)，單擊狀態(tài)，禁用狀態(tài)和忙碌狀態(tài)。

第四，殘疾人國家有以下幾點要注意

1.區(qū)別明顯

禁用狀態(tài)和可用狀態(tài)之間有明顯的區(qū)別，因此用戶清楚地知道該按鈕不可點擊。

2.在禁用狀態(tài)下為用戶提供相應的反饋

當鼠標移動到處于禁用狀態(tài)的按鈕時，使用提示工具解釋禁用用戶的原因。

如果無法下載百度中的圖片，當鼠標移動到下載按鈕時，提示工具將解釋按鈕不可用的原因。

3.禁用狀態(tài)按鈕是否可見或隱藏

處于禁用狀態(tài)的按鈕的可見性取決于其在界面中的位置和功能屬性。

例如，Google Chrome的禁用狀態(tài)按鈕可見。

Safari瀏覽器也可見。

這是因為兩個瀏覽器都有三個按鈕。如果它們在禁用狀態(tài)下不可見，則右側按鈕的位置將不固定，這違反了設計一致性原則。用戶希望在固定位置看到固定功能。如果傳入按鈕的位置每次都改變，用戶將非常困惑，有時按鈕將不存在，并且當單擊頁面時工具欄將明顯改變。不好。

在修訂之前，firfox瀏覽器的前進按鈕在禁用狀態(tài)下是不可見的。

因為Firefox在這里只有兩個按鈕，所以沒有明顯的跳躍。

以上是以前的版本，修改后的firefox如下：

因此，根據(jù)按鈕的功能和界面中的位置，具體分析處于禁用狀態(tài)的按鈕的可見性。

你確定要左轉或右轉嗎？

對于這個問題，不同的平臺和不同的軟件是不同的。

Windows在左側是正常的，在右側取消。

并且Mac系統(tǒng)在右側是正常的，在左側取消。

為了讓用戶獲得一致的體驗，最好的方法是為不同的平臺使用不同的平臺，但是當我們的設計基于網頁時，我們如何安排確定和取消的位置？

我個人更喜歡右邊的“OK”，左邊的“取消”，“OK”表示進入下一步，“取消”表示返回上一步，基于用戶的“上一個”和“下一個”的習慣使用它也應該在右邊確定并在左邊取消。

六，設計不同的優(yōu)先級按鈕

當我們的界面功能更多時，會有更多的功能按鈕，這些功能按鈕肯定會有優(yōu)先權，這次我們需要設計一套一級按鈕，兩級按鈕和三級按鈕，甚至更多。

讓我分享我在設計修訂中設置的按鈕：

以上是今天的分享。你有更好的想法嗎？如果有任何消息可以留在評論區(qū)域，我會仔細查看。我希望這篇文章會對你有所幫助。

« 618流量離線新零售場景AI商品識別技術為新零售賦權 | 招標新人在后期擴展關鍵詞的方法摘要 »