產品經理的UX——按鍵設計

一.主按鍵和次按鍵

很多按鍵是成對出現的，比如“確定”和“取消”。一般情況下，按鍵會有主次之分，一個按鍵是我們期望用戶去做的，另一個按鍵是在特殊情況下才去做的。

主次按鍵要有所區分，最簡單的做法就給它們用上不同的顏色——主按鍵用顯眼一點的顏色，而次按鍵用淡一點的顏色。

在按鍵的標簽上，應該盡可能地用清晰不易混淆的字眼，而不是簡單地“OK”，“YES”，“好”，“不”。

如果主按鍵執行的是一種積極的行為，比如保存。這很簡單，給主按鍵一個更顯眼的顏色即可。

但如果主按鍵執行的是一個消極的行為，比如用戶要刪除一個文件，需要對這個刪除進行確認。你可能會想將按鍵的顏色反過來就好了，比如下面這樣：

但有一個更好的做法，我們只提供一個主要按鍵（另一個以另一種形式表示，比如一個可點擊的鏈接，而不是同等的按鍵），但這個按鍵的標簽寫上提示信息。

這樣用戶到這一步的時候，注意力會集中在這僅有的一個按鍵上，并能夠注意到這里的提示信息（如果你想提示警告信息寫在彈框內容里，用戶極有可能沒看就點擊了按鍵）。

二.底部導航按鍵

APP的導航是很重要的部分，用戶需要能夠知道自己現在在哪里，有什么地方可以去。

PC端一般會將導航放在頭部或者側邊，而根據移動端的操作行為，將導航放在底部對移動端是一個更好的做法。

關于移動端的底部導航設計，有幾個原則可以參考借鑒。

1.只使用3~5個最重要的導航按鍵。

1,2個就太少了，如果只有1,2塊主要內容，那根本不用導航欄，直接切換即可。而如果導航按鍵有6,7個之多，則會讓導航太密集而不易操作。5個是導航按鍵的極限。

2.要讓用戶知道自己現在在哪里：

每個導航按鈕都要有狀態切換——被點擊進入時顯示高亮（或者顏色改變）的狀態，而點擊了其他的導航按鈕后，切換回原本未被點中時的狀態。

需要注意的是，導航按鈕應該只使用2種顏色——即未選中和已選中。不要使用多種顏色，否則用戶也無法區分當前的位置。如下圖，左邊是錯誤的做法。

3.標簽問題

導航按鈕需要有標簽，而但凡是標簽，規則都只有一個——短而清晰。不要太長，不要長到換行，更不要為了不換行而省略。

下面這些都是應該避免的。

4.紅點提示

如果你想要給用戶提供額外的信息，比如提示用戶某個欄目里面有新消息，你可以在導航按鍵上面加上紅點。

三.Tabs

Tabs 是一種用來切換相關內容的組件。

tabs和導航按鍵有點相似，都是切換內容。但不同的地方是，導航按鍵切換的是不同類別的內容；而tabs是在相同類別的內容之間切換。

所以當你需要對內容進行分組的時候，你就可以使用tabs：

tabs的另一種形式是scope bar ，它一般用于分類篩選。比如apple store就使用了scope bar來對應用進行免費和收費的篩選。

四.按鍵設計

按鍵是最重要的交互控件，在設計按鍵的時候以下的建議可以作為參考。

1.讓按鍵看上去像一個按鍵。

用戶要夠第一眼就發現，并知道這是一個可以點擊的按鍵，尤其是在那些需要用戶完成輸入之后確認的地方。

在移動端，有一個需要特別注意的是按鍵的大小。移動端用戶的操作是用手指來進行的，移動設備屏幕的限制，按鍵不可能做得很大（也不美觀），但也不能太小，否則手指很難操作。大小的設計需要參考手指的觸摸點大小。

一個比較糟糕的體驗來自騰訊的應用寶。

騰訊的應用寶在更新應用的時候，可以直接點擊“更新”按鈕來下載并安裝更新，如果你點擊“更新”外面的整張卡片，就會進入該應用的詳細介紹。但這個按鈕非常難點，一不小心手指的觸摸面積大了，就點到了卡片，進入了應用的詳情頁面。

必須小心翼翼地觸摸，才能保證點擊到“更新”按鈕來下載APP。

所以，一定要注意按鍵的大小！

2.按鍵的標簽

按鍵的標簽內容應該清晰地讓用戶知道點擊按鍵后會發生的事情。

3.重要按鍵

如果一個按鍵很重要，那你就必須讓它看上去很重要——更突出的顏色，更中心顯眼的位置，更強烈的提示，等等。

4.按鍵的形狀

一般情況下，按鍵是一個矩形，或者兩邊帶有圓弧的矩形。這是最讓人熟知的按鍵的形狀。

按鍵也可以是圓形，但使用的時候要十分注意。

有些扁平化的按鍵形式在Android里也很常見。

如果你真的要使用，你最好先認真了解一下google 的 Material Design的設計規范。

*著作權歸作者所有，轉載請聯系作者獲得授權。