本文共?2092?字，預計閱讀?10?分鐘，記得點擊上面的?藍字?關注我哦～

為了設計更好的用戶界面，我們常常需要回顧它的歷史和起源。按鈕在界面設計中很重要。在物理按鈕時期，手指的輕微觸碰可以使設備、汽車或系統處于運動狀態，即使用戶不了解其原理。在《Power Button》一書中，Rachel Plotnick回顧了整個按鈕文化的起源，他認為按鈕推動了數字技術的發展，讓復雜的命令能以輕松、便捷的方式，在生活中普及。

你只需要按一下按鈕，剩下的交給我們。? ?? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?--柯達通過直觀的Slogan來吸引用戶

通過輕微觸摸即可改變事物，讓用戶得到了強烈的即時滿足感。盡管現在觸控屏被廣泛使用，但物理按鈕并沒有完全消失。由物理按鈕所形成的行為習慣和認知，影響著按鈕設計的直觀性和易用性。

一：按鈕與鏈接的差異

按鈕傳達給用戶的是可執行性的操作，它們通常存在于表單、對話框、工具欄中。雖然在某些功能交互上很相似，但是了解兩者之間的差異也很重要：

• 導航到另一個位置時使用鏈接，比如：「查看全部」頁面
• 執行某個動作時使用按鈕設計，比如：提交、確認、新增等

二：明確按鈕的狀態并反饋給用戶為按鈕定義正確的交互和樣式是設計中最重要的部分之一。每種狀態要有明確的差異性，這樣才能與其他狀態區分開來，切記差異化的設計前提是遵守一致性原則，不要制造視覺噪點。

• 正常狀態 - 表示按鈕是可交互式的、
• 聚焦狀態?-?通過高亮的形式，告知用戶它已被鍵盤或其他方式選中
• 懸停狀態?-?當用戶將光標置于可交互式元素上方時，所展示樣式
• 點擊狀態?-?表示用戶已按下狀態，且仍未結束按的動作
• 加載狀態?-?表示該操作正在加載中
• 禁用狀態?-?表示該按鈕當前處于非交互狀態

三：按鈕有各種顏色、形狀、大小最常見的是圓角矩形按鈕，通常被置于輸入框旁邊，易于識別行為引導性強，但是按鈕的樣式、大小、顏色等，取決于產品本身的調性、設計規范、使用場景等，下面是一組常見的樣式：

四：樣式可以傳達行為的重要性按鈕的樣式可以用來區分交互的重要性和優先級。通過樣式的變化區分操作背后的優先級，營造界面的層級結構。

五：有時沒有“默認態”通常，使用頻率較高的按鈕，我們設置為【默認按鈕】，屬于強行為引導按鈕。這樣可以有效的幫助用戶更快高效的完成任務。但是也有例外，比如所有的操作都存在潛在風險點時，需要使用次要按鈕來表達。

六：不要讓用戶思考“不要讓我思考”是可用性專家Steve Krug撰寫的一本書的名字，它涉及到許多內容，但核心思想是讓設計顯而易見，不要讓用戶思考。用戶對于按鈕的功能、外觀、體驗是有期望和基礎認知的，與常規的按鈕差異過大，會讓用戶感到困惑。

避免對交互式和非交互式元素使用相同的樣式。否則用戶很難判斷哪里是可操作的。七：一致性提升了交互的準確性和效率

一致性原則是可用性原則之一：當事物始終表現相同時，用戶不必擔心會發生意外。? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??--雅各布.尼爾森一致性提升了交互的準確性和效率，有助于避免錯誤的發生，在很大程度上讓設計具備可預測性，能夠清晰的了解自己能夠做到什么。

八：保持可操作熱區，確保交互的可靠性按下按鈕應該是一個簡單的動作，如果用戶無法快速地按下按鈕或產生誤操作，將會帶來負面情緒和體驗。對于大多數平臺，使熱區至少達到48 x 48 dp。無論屏幕大小，此尺寸的熱區的物理尺寸約為9mm。觸摸屏元件的建議目標尺寸至少為7–10mm。

對于圖標按鈕，請確保觸摸區域超出了元素的可視范圍。這不僅適用于移動設備或平板電腦，也適用于鼠標進行操作。九：無障礙設計對于每個按鈕設計都應該保持足夠的可訪問性，熱區大小、字號小、顏色、對比度等是影響可訪問性的一些元素，如今有大量工具可以幫助我們測試按鈕的可訪問性是否要求。

十：交互手勢應符合用戶行為習慣手勢交互如今已經是觸摸交互的基礎了，諸如滑動、雙擊、長按這樣的交互方式已被用戶廣泛接受，并且高頻地使用在各類app中。但是對于普通用戶而言，可交互性依然不是很明顯，因為手勢是默認「隱性」的。建議對于手勢交互提供支持，但是不作為唯一的交互方式，依然以「顯性」的按鈕交互作為基礎。

十一：優秀的按鈕具有提示性

按鈕上的標簽文本和它的視覺外觀一樣重要。使用錯誤的標簽文本會讓人感到困惑。

十二：「取消/確認」還是「確認/取消」？

「確認」和「取消」到底哪個在左，哪個在右？其實都可以！只要確保產品內的「確認」和「取消」的位置始終保持一致，并不會給用戶造成很大困擾。

十三：謹慎使用禁用態

有時候我們會碰到這種情況，卡在一個頁面好久，不能保存。想搞清楚到底表單哪里填錯了導致無法保存。禁用狀態下的按鈕令人抓狂，雖然后續如果正確觸發可以啟用，但是此刻是讓人糟心的。結合信息引導和錯誤說明，讓按鈕保持正常狀態，讓「可點擊」的狀態呈現出來，會讓用戶更舒適。

本文已獲得作者正式授權(截圖如下)

原文地址：https://uxdesign.cc/button-design-user-interface-components-series-85243b6736c7

作者：Taras Bakusevych譯者：haselinaWelcome Follow me歡 | 迎 | 關?|?注

RECOMMENDED

往｜期｜精｜選

讓我們談談新擬態和可訪問性

圖標設計的7大原則

如何打造圖標設計中的視覺平衡？

設計細節：按鈕的設計技巧

新交互時代：什么是自然用戶界面？

用一篇深度好文，幫你梳理用戶體驗一詞的發展史

THE END

?

下期也許并不會更精彩，但依然值得期待。

總結

以上是生活随笔為你收集整理的spring 点击保存按钮页面禁用_用一篇深度好文，详解按钮的设计的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。