作為WEB端和移動端的組成部分，按鈕承載着引導用戶的作用，遵循怎樣的設計原則，才可以讓按鈕真正起到作用，同時不造成誤解呢？

按鈕對于現在的我們來說，不管是WEB端還是移動端，已經非常常見了。但是對于早期互聯網來說，樣式比較少。當時隻有超鍊接，也就是文字鍊接，點擊一次，就可以直接到達。

這種超鍊接也就是目前我們看到的樣式，文字 藍色下劃線。

還有一種就是Button，有方形的、圓形的、立體的、hover的、按下的、釋放的等等種樣式。

這是早期的谷歌首頁，兩種按鈕樣式還是對比很清楚的。

現在的互聯網較之前相比，按鈕樣式越來越複雜。因為現在的信息越來越多，為了更清楚讓用戶分清主次，就需要不同的樣式來表達。

現在我們常見的按鈕樣式無外乎就是文字按鈕、普通按鈕、圖标按鈕、标簽按鈕、懸浮按鈕這幾種樣式，我先簡單介紹一下。

文字按鈕

對于文字按鈕，既定的規則是通過藍色或者加下劃線表示，當然不是必須是藍色的，也可以根據産品換成其他顔色。但是需要形成對比，具有可識别性，讓用戶知道這是一個可以點擊的鍊接。

比如百度的搜索熱點，用藍色向用戶傳達：我是可以點擊的；而旁邊的不可點擊的數字則以黑色做對比，告訴用戶：你看看就好了，不要花時間來點我，對用戶來說非常直觀明了，用戶看到後基本不會去花時間去試試能不能點擊，除非個别人就想試一試的。

而對于加下劃線的超鍊接，和其他文字對比，也是直觀明了。

普通按鈕

普通按鈕則分為幽靈按鈕和填充按鈕。對于大家來說，這應該比較常見了，視覺層級上來說，填充按鈕肯定高于幽靈按鈕，一般引導性的操作都會使用填充按鈕。

在這兩種按鈕上，每個按鈕都會包含一個文本指令，它會告訴用戶這個按鈕的功能和指向。所以，按鈕上的文本要盡量簡潔、直觀，并且要符合整個網站風格的語音語調。

當用戶點擊按鈕的時候，按鈕所指示的内容和結果應當合理、迅速地呈現在用戶眼前，無論是提交表單、跳轉到新的頁面，用戶通過這個按鈕應當獲得他所預期的結果。

圖标按鈕

圖标按鈕在WEB端和移動端也非常常見，用圖标意形的方式直接告訴用戶，點擊這個按鈕可以達到什麼結果，比較形象化。

标簽按鈕

标簽按鈕則可以進行分類，标記不同的屬性和維度，可以進行編輯操作，比如“添加”和“删除”。

懸浮按鈕

而懸浮按鈕可以說是代表用戶在界面上最高頻次的操作。

由于懸浮按鈕通常承載的是主要的、有代表性的操作，通常它應該是個積極正向的交互，比如創建、分享、探索等；不應該執行破壞性的操作，比如删除。

高德高航的兩個懸浮按鈕則為“回到原位置”和“查找路線”。

總結

無論對于什麼按鈕來說。

“操作前，操作結果可預知”這個原則很重要，這個按鈕是隻放圖标就可以了？還是要寫上文字用戶才清楚？——這是經常會遇到的問題。

要做這個判斷，我們得先确定：需要讓用戶清楚到什麼程度。應該盡量讓用戶能猜到點擊後将帶來什麼結果，這樣用戶才更敢去點擊。

是不是隻放一個圖标，用戶就沒法猜到後果？那也不一定。這要看産品裡的上下文情景，還有用戶對産品的熟悉程度。相機APP裡，隻放一個拍攝的圖标，幾乎所有人都知道是拍攝。

寫到這，突然想到了之前在設計彈窗按鈕的時候，遇到的一個問題，是“确定在左，取消在右”，還是“取消在左，确定在右”？

同時用過Windows和Mac系統的用戶，應該清楚，這兩個系統對于這個設計是完全相反的。Windows是“确定在左，取消在右”，Mac則相反，那到底哪個才更合理呢？

Android 的設計規範中則規定，“‘取消’操作的按鈕始終處于左邊，當用戶執行這個操作的時候會回到上一個狀态，而正向操作的按鈕則安排在右側”。也就是說，在Android規範當中，“取消”按鈕是在“确認”按鈕的左邊。

根據古騰堡原則：人們在浏覽頁面的時候，都趨向于從上到下，從左到右的眼球運動規律。左上角是視覺的第一落點區，而右下角是視覺最終落點區。用戶的視覺中心往往在頁面的左上方，而結束浏覽時視線往往落在右下角。

既然用戶的最終操作行為是“确認”，我們是不是就應該把“确認”按鈕放在最終視覺落點區呢？這樣用戶既不會錯過“确認”這個重要操作，也保證用戶在這之前都掃描到了所有的操作。

所以根據這個原則，建議是放在右邊。但是按照遵循設計規範來說，平台的一緻性原則優先級較高，用戶有可能會有錯誤或者遲疑的風險，這個就需要通過用戶反饋來調整了。

同時在我們設計彈窗時，應該讓每個彈窗都盡可能明确，不能隻是為用戶提供選擇而已，明确的标簽能夠幫助用戶在選擇的時候不遲疑，更迅速和準确的去點擊。

比如以下這個案例：

第一個彈窗中，“No”僅僅是回答問題，但并沒有指向性，并未指出這麼選擇的後果。而第二個彈窗則好了許多，“Cancel”和“Discard”兩個選項，後者和前文所提出的問題相對應，指向性明确，Cancel 的含義更加清晰。

當然在設計彈窗時，我們還可以自定義落焦點。當首選操作是正向操作時，視覺重量要大于次要操作，比如“保存”；而反向操作時，不可逆的操作比較高，所以為了避免用戶出錯的風險，此時在速度和正确性上相比，正确則是比較重要的，比如“删除”，所以這時設計師就需要把引導性做好。

好了，按鈕設計就聊到這，下篇見。

本文由 @謙元 原創發布于人人都是産品經理，未經許可，禁止轉載。

題圖來自Unsplash，基于CC0協議。

,

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!

查看全部