按鈕設計的7個基本原則！你知道嗎？
按鈕是 UI 和交互設計的基本元素，它們是使用者交互的時候，和系統進行溝通交流的核心元件，也是圖形化介面當中，最早出現，也是最為常見的一種交互物件。在今天的文章當中，
涉及到使用者介面交互的時候，使用者需要知道哪些是可點擊的，而哪些不是。面對著 UI 介面中的每個元素，使用者都需要對它們進行辨別和判斷，
那麼，使用者是如何判讀哪個元素是可交互的呢？通常，使用者是基於以往的經驗和視覺來對 UI 元素進行判斷，這就是為什麼需要通過合適的視覺符號來説明使用者理解（比如尺寸、形狀、顏色、陰影等），使得元素看起來像是按鈕。視覺符號為介面提供可供性。
不幸的是，在許多介面當中，按鈕的可發現性和指示性並不強，這使得交互發生的機率有所降低，
為了確定按鈕是否可用，使用者在桌面端訪問網站的時候，需要將游標移動到元素上，檢查元素狀態是否會改變，才能判斷它是否是可點擊的。而移動端使用者就麻煩了，
不要假定你的 UI 中的元素對於使用者是顯而易見的。
在很多情況下，設計師會有意識地不將某些元素的交互性凸顯出來，因為他們會認為這些東西是顯而易見的。但是事實並非如此，在設計 UI 的時候，應該牢記下面的事情。
作為設計師，是很容易搞清楚 UI 中哪些元素可交互，
儘量在按鈕中採用使用者熟悉的設計。
以下是絕大多數使用者都熟悉的按鈕樣式：
帶有矩形邊框的、填充有色彩的按鈕；
帶有圓角矩形邊框的、填充色彩的按鈕；
帶有陰影有色彩和內容填充的按鈕；
幽靈按鈕。
在這幾種常見的模式當中，帶有陰影和色彩填充的按鈕，對於使用者來說是最清晰的，因為它在視覺上是有三個維度的，用戶會感知到這是一個可按下去的元素。
不要忘記留白
按鈕本身的視覺屬性很重要，而按鈕附近的留白同樣重要，他們讓按鈕更容易被識別，也更容易交互。在下面的案例當中，使用者很可能會將文本內容和幽靈按鈕混淆。使用者在此無法判斷它到底是一個盒子元素，還是個按鈕。
使用者對於頁面交互其實是有基本的感知和期望的，也就是說使用者對於按鈕的位置是有個基本的認知的。不要讓使用者到處找按鈕，它最好在使用者所期望的位置出現。
盡可能使用傳統的佈局和標準的 UI 模式
所謂傳統的佈局也就是貼合用戶經驗的佈局，用戶在流覽的時候會對於這樣「標準」的 UI 佈局有明確的預期，在對的位置看到了對的按鈕，整體更容易理解，自然也就可以輕鬆和介面進行交互了。
想要確認設計的可用性，只需要觀察用戶在使用過程中是否會通過操作抵達你希望他們到達的位置，並且找到需要點擊的按鈕。
3. 按鈕上應該加上相應操作的標籤當按鈕的文本標籤上的內容寫的太過於寬泛，或者使用帶有誤解的內容，可能會讓使用者感到迷惑。每個標籤上的文本標籤都應該儘量準確，簡明直接地介紹清楚它的真實功能。
使用者應該清楚他們點擊按鈕之後，會發生什麼。舉個簡單的例子，想像一下，你不小心觸發了一個刪除按鈕，現在你看到了下面的報錯資訊：
在這個介面當中，「OK」是一個相當模糊的表述，並沒有說明按鈕的作用。不論是「確定」還是「取消」，都沒有說清楚這個操作的真實含義。尤其當刪除是一個存在潛在危險的操作，這個操作就更加需要精准的表述。所以，這個地方兩個按鈕應該是「刪除」和「取消」更合適，而刪除應該用紅色進行區分標識，讓使用者意識到這個操作的重要性或者獨特性。
按鈕的大小應該反映出螢幕上這一元素的優先順序，更大的按鈕應該意味著更重要的交互。
按鈕優先順序
讓更重要的按鈕在視覺上就足以體現它的重要性。始終嘗試讓主要的按鈕更加突出，增加它的尺寸，並且使用高對比的色彩來吸引用戶的注意力。
在 Dropbox 的介面上，設計師就是使用了大小和色彩的對比來創造優先順序。
讓按鈕適配使用者的手指
在許多 APP 當中，按鈕的設計太小了，這可能會導致使用者出現誤觸的情況。
△ 左側：正確的按鈕尺寸；右側：按鈕尺寸太小
麻省理工學院的實驗室研究發現，手指墊寬度的平均值在10~14mm 之間，指尖在8-10mm 之間，這使得10×10 mm 的按鈕尺寸是比較合理的。
5. 注意按鈕的次序按鈕的順序應該反映出使用者和介面之間交互的屬性，問問自己使用者期望在螢幕上看到什麼樣的順序，或者說什麼樣的順序更合理，然後進行相應的設計。
舉個例子，比如「上一步/下一步」兩個按鈕應該如何安置方位呢？通常而言，「上一步」是回卷操作，應該在左邊，而「下一步」則是前進操作，應該在右邊。
6. 避免使用太多按鈕這是許多 APP 和網站中經常出現的一個問題。當你提供太多的選擇的時候，用戶往往會無所適從。無論是設計網站還是 APP，請務必儘量考慮最重要的操作，控制好優先順序和複雜度。
△ 太多的按鈕
7. 為按鈕交互提供視覺和音訊回饋當使用者點擊按鈕的時候，他們更希望介面能夠給予適當的回饋。基於不同的操作，介面給予視覺或者音訊的回饋。當用戶沒有收穫任何回饋的時候，他們可能會覺得介面沒有收到他們的操作，從而反復點擊，執行多次不必要的操作。
人類和物理世界交互，獲得回饋，然後執行更多的操作，這種機制是人類進化中所形成的認知，這種回饋可以是視覺，也可以是聽覺，這些回饋會告訴用戶發生了什麼。
對於某些操作，比如下載，不僅要告訴用戶他們的操作執行成功了，而且要顯示當前的進度。
------
作者：Nick Babich
譯者：陳子木
商業轉載請聯繫作者獲得授權，非商業轉載請注明出處！
還是個按鈕。使用者對於頁面交互其實是有基本的感知和期望的，也就是說使用者對於按鈕的位置是有個基本的認知的。不要讓使用者到處找按鈕，它最好在使用者所期望的位置出現。
盡可能使用傳統的佈局和標準的 UI 模式
所謂傳統的佈局也就是貼合用戶經驗的佈局，用戶在流覽的時候會對於這樣「標準」的 UI 佈局有明確的預期，在對的位置看到了對的按鈕，整體更容易理解，自然也就可以輕鬆和介面進行交互了。
想要確認設計的可用性，只需要觀察用戶在使用過程中是否會通過操作抵達你希望他們到達的位置，並且找到需要點擊的按鈕。
3. 按鈕上應該加上相應操作的標籤當按鈕的文本標籤上的內容寫的太過於寬泛，或者使用帶有誤解的內容，可能會讓使用者感到迷惑。每個標籤上的文本標籤都應該儘量準確，簡明直接地介紹清楚它的真實功能。
使用者應該清楚他們點擊按鈕之後，會發生什麼。舉個簡單的例子，想像一下，你不小心觸發了一個刪除按鈕，現在你看到了下面的報錯資訊：
在這個介面當中，「OK」是一個相當模糊的表述，並沒有說明按鈕的作用。不論是「確定」還是「取消」，都沒有說清楚這個操作的真實含義。尤其當刪除是一個存在潛在危險的操作，這個操作就更加需要精准的表述。所以，這個地方兩個按鈕應該是「刪除」和「取消」更合適，而刪除應該用紅色進行區分標識，讓使用者意識到這個操作的重要性或者獨特性。
按鈕的大小應該反映出螢幕上這一元素的優先順序，更大的按鈕應該意味著更重要的交互。
按鈕優先順序
讓更重要的按鈕在視覺上就足以體現它的重要性。始終嘗試讓主要的按鈕更加突出，增加它的尺寸，並且使用高對比的色彩來吸引用戶的注意力。
在 Dropbox 的介面上，設計師就是使用了大小和色彩的對比來創造優先順序。
讓按鈕適配使用者的手指
在許多 APP 當中，按鈕的設計太小了，這可能會導致使用者出現誤觸的情況。
△ 左側：正確的按鈕尺寸；右側：按鈕尺寸太小
麻省理工學院的實驗室研究發現，手指墊寬度的平均值在10~14mm 之間，指尖在8-10mm 之間，這使得10×10 mm 的按鈕尺寸是比較合理的。
5. 注意按鈕的次序按鈕的順序應該反映出使用者和介面之間交互的屬性，問問自己使用者期望在螢幕上看到什麼樣的順序，或者說什麼樣的順序更合理，然後進行相應的設計。
舉個例子，比如「上一步/下一步」兩個按鈕應該如何安置方位呢？通常而言，「上一步」是回卷操作，應該在左邊，而「下一步」則是前進操作，應該在右邊。
6. 避免使用太多按鈕這是許多 APP 和網站中經常出現的一個問題。當你提供太多的選擇的時候，用戶往往會無所適從。無論是設計網站還是 APP，請務必儘量考慮最重要的操作，控制好優先順序和複雜度。
△ 太多的按鈕
7. 為按鈕交互提供視覺和音訊回饋當使用者點擊按鈕的時候，他們更希望介面能夠給予適當的回饋。基於不同的操作，介面給予視覺或者音訊的回饋。當用戶沒有收穫任何回饋的時候，他們可能會覺得介面沒有收到他們的操作，從而反復點擊，執行多次不必要的操作。
人類和物理世界交互，獲得回饋，然後執行更多的操作，這種機制是人類進化中所形成的認知，這種回饋可以是視覺，也可以是聽覺，這些回饋會告訴用戶發生了什麼。
對於某些操作，比如下載，不僅要告訴用戶他們的操作執行成功了，而且要顯示當前的進度。
------
作者：Nick Babich
譯者：陳子木
商業轉載請聯繫作者獲得授權，非商業轉載請注明出處！