起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識關于按鈕的細節與運用
編輯導語：按鈕是最常用的組件之一，在一個產品中，按鈕的設計也是十分重要的，它在可訪問性起著很大的作用；并且一個精致的按鈕設計，整個頁面的品質也會上升不少的檔次；本文作者分享了關于按鈕的細節與運用，我們一起來了解一下。
按鈕幾乎是每一個頁面不可或缺的元素，對于按鈕的認識基本停留在視覺層面，一個圓角矩形搭配一句文案就能拼湊成一個最基礎的按鈕。
視覺是一個觀察的切入點，但僅停留在視覺層面還是不夠的，比設計表現更重要的往往是背后支持設計的理由。
本文中的所有案例均來自線上產品，觀點僅是個人粗淺的理解，有疑問的地方歡迎大家討論指正。
一、按鈕的定義
1. 按鈕的來源
數字世界是現實世界的一種映射，許多數字概念，都可以在現實世界中找到原型，按鈕就是很生動的一個案例；在視覺表現上貼近現實生活中真實物體的外觀，擬合用戶心智模型，降低用戶的認知和理解成本。
2. 按鈕的定義
如果從視覺形式上看，按鈕的組成很簡單，一個矩形容器加上文字或圖標即可組合成一個常見的按鈕，但是僅僅從視覺層面定義按鈕是不嚴謹的。
按鈕是一種重要的控件類型，而控件是圖形用戶界面（GUI）的主要構成模塊；想要深入理解按鈕，就必須要求我們首先理解什么是控件以及控件的分類。
3. 控件分類和介紹
- 定義：控件是用戶和產品間進行交流的屏幕對象，是圖形用戶界面（GUI）的主要構成模塊。
- 分類：根據用戶目標，可將控件分為4大類。
每一類控件下又有更多具體細分。所有界面中常見的具體控件都可以根據其功能找到所屬的類別。
4. 按鈕的分類
在以上各個細分控件中，我將部分控件歸入按鈕類別：
- 命令控件下的：傳統按鈕、圖標按鈕、文字按鈕；
- 選擇控件下的：開關按鈕、單選按鈕、組合圖標按鈕、狀態切換按鈕（開關和復選框樣式比較固定，為了方便討論，姑且不算在按鈕范疇之內）。
因此如果以按鈕為主體，以功能屬性為分類條件，可將按鈕分為：
命令型按鈕和選擇型按鈕：
二、命令型按鈕與選擇型按鈕的區別
不論從功能維度、交互維度、視覺維度上看，這兩類按鈕各自都有不同的特點。
選擇型按鈕非瞬時狀態有：“選中”和“未選中”兩種互斥狀態，可以把選擇型按鈕理解為某種狀態的確認和展示。
命令型按鈕的非瞬時狀態只有一種：正常狀態，當用戶點擊命令型按鈕后，命令即可下達；可以把命令型按鈕理解為一個動作，點擊按鈕代表著立即執行這個動作。
三、常見按鈕的拆解
介紹完了命令型按鈕和選擇型按鈕在功能、交互、視覺層面的區別點后，我們再來看看實際工作中常見和常用的按鈕類型。
1. 傳統按鈕（有容器兜底的按鈕）的來源
GUI中“按鈕”的概念來源于真實世界中的按鈕。真實的按鈕具有一個非常顯而易見的特點：擁有一個適合點擊按壓的受力面，這個受力面就是可點擊感的來源。
試想一下，假設一個按鈕只有針尖般大小，且不說你是否能認出這是按鈕，即便你知道這是按鈕，你會有按下的欲望嗎？
真實情況下，擺在人們面前的按鈕面積越大，想按壓的欲望就越強；因此傳統按鈕的最顯著特點就是擁有一個承載內容的“受力面”，也就是承載文字或者圖標的“容器”。受限于早期的顯像技術，以及與真實世界的對照，這種“容器”通常一般都是矩形，后期漸漸衍生出更加柔和的圓角。
風格發展：
在相當長的一段時間里按鈕都有三維凸起的特征，進一步鞏固了按鈕的可點擊感。不過進入移動時代后，這種流行趨勢發生了改變，按鈕的三維印記被不斷移除。
用戶已經建立起了成熟的心智模型，即便按鈕在視覺上越來越“平”，也不妨礙點擊行為的發生；結合多年的使用經驗，用戶已經將矩形形狀這一特征和按鈕牢固地聯系了起來。即便現在的按鈕大多都是扁平化，用戶也能一眼就辨認出按鈕屬性。
2. 傳統按鈕的拆解：
常見按鈕一般是由容器和內容組成。
1）容器層面
容器形狀：移動端比較主流的按鈕形狀有：矩形、圓角矩形、膠囊形和圓形4種。
一般，在人們的認知里，圓角越大傳遞的感覺越圓融親切。其實形狀本身并沒有好壞區別，與單純視覺偏好相比，元素的統一性更加重要；一旦選定了某一種按鈕形狀，就需要保證所有場景中出現的按鈕都盡量看上去整體統一。
容器尺寸：視覺上，按鈕越大，越吸引用戶注意，決定按鈕大小的主要依據是按鈕在頁面中的優先級；而一個產品涉及到頁面眾多，如果不同的頁面元素之間缺乏統一的調度規則，就會出現按鈕尺寸過多，沒有規律，細節混亂，效率低下的情況。
為了既能適應不同的場景，又能保持產品級的控件統一，一般要給按鈕尺寸設定幾個檔位以適配不同頁面需求；排除個別特殊頁面，一般把按鈕設置為5個優先級梯度檔位就足以滿足設計需求。
我們可以從優先級從高到低的順序，將按鈕分為：特大、大、正常、小、特小5個尺寸檔位。
下面展示最常使用的三個檔位，大、正常、小檔位。
容器顏色：按鈕的大小、形狀、顏色三個維度中，人眼是對顏色信息最為敏感的；在一個頁面中，突出一個元素的方式有多種，其中最簡潔有效的方式就是用顏色進行突出；顏色包含了色相、飽和度和明度三種屬性，改變顏色的不同屬性，都會對按鈕的表意產生影響；同時，不同的顏色代表著不同的含義，配色時需要加以注意。
容器樣式：容器除了基本的尺寸、形狀、顏色之外，還有多種樣式。上文介紹的容器是強面性的，此外，容器還有弱面性、線性等樣式。
容器細節：雖然現階段按鈕的越來越扁平，但在扁平的趨勢下，依舊有發揮設計創意的空間；顏色漸變、投影、動效都是常用的設計手法。
2）內容層面
聊完了“容器”部分，再來看看容器承載的“內容”又有哪些細節點。
3. 圖標按鈕的介紹
并非所有按鈕都需要容器，尤其當按鈕密度較大時，去掉容器只保留內容，可以更好地提高空間利用率，簡約視覺。
4. 文字按鈕的介紹
比圖標按鈕更輕量的按鈕類型是文字按鈕，以文字的形式展示，和界面融合度更高，當用戶有需要時才會注意到文字按鈕的可點擊性。
5. 傳統按鈕與圖標按鈕的組合
這種組合形式相當常見，將多個功能整合在一個區域內，如底部工具欄（ToolBar）或者頂部導航欄（Navigation Bar）；不同按鈕承載著不同功能，側重越明顯，越利于用戶快速識別并決策。
四、特殊按鈕類型
上面介紹的是常見的按鈕形式，除了以上按鈕，有一些按鈕形式專門適用于某些特殊場景；如懸浮按鈕、膠囊按鈕等。
五、按鈕的優先級
一個頁面往往有多個按鈕，不同按鈕承載不同功能，功能之間有相同或者不同的優先級，因此按鈕之間也存在這相同或者不同的視覺優先級。
我們分兩類情況來討論：相同優先級的按鈕和不同優先級的按鈕組合。
六、按鈕樣式小結
上文羅列了實際工作中常用到的一些按鈕樣式，最重要的步驟是分清按鈕主次，使用不同的樣式進行搭配。優先級強到弱：強面性按鈕、弱面性按鈕/線性按鈕、圖標按鈕、文字按鈕。
碎碎念：本文中出現的部分名詞，比如“弱面性”、“容器”等，只是為了便于交流和統一指向，并沒有具體權威出處。
文中提及的按鈕類型均來源于線上產品，樣本有限，適用場景相對固定，還有很多樣式沒有一一遍歷；但掌握了如何選擇樣式的原理，就可以根據日后具體需求做出合理方案。
文中出現的數據都是經驗型數據，如按鈕按下狀態是在正常狀態下添加10%純黑的遮罩，文字字號大小等，這些都是建議型數據，可以根據具體情況靈活調整。
有哪里說得不對的地方，歡迎討論和指正。
參考文獻：
《About Face4 交互設計精髓》第21章：設計細節，控件與對話框
本文由 @doo_W 原創發布于人人都是產品經理，未經作者許可，禁止轉載。
題圖來自 Unsplash，基于 CC0 協議
請教博主怎么判斷按鈕什么情況跟隨頁面底部，什么時候固定手機底部
你好博主，想問一下文中圖片是用什么工具批注的啊，感覺很方便。
想請教作者一個按鈕狀態的問題。。。。。。。。
按鈕有兩種狀態：一鍵收起、一鍵展開。但是列表里面也可以單擊展開或收起某條數據。想問問大家這個按鈕狀態應該根據什么來判斷呢？怎么變化按鈕狀態用戶體驗最好。。。。求解？
不太理解你的提問。
關于數據展示的問題，我覺得根據實際情況可以大致分為三類：
1、單條數據的內容較少的，可以直接在當頁展開/收起，這樣不會影響到整體布局，下方的內容也在可見范圍之內，足以定位，不至于用戶迷失。舉例：微信朋友圈，當單條內容過多時，直接點擊“全文”，向下展開即可。
2、單條數據的內容較多的，點擊內容，直接跳轉到詳情頁。比如淘寶的訂單列表，點擊列表內容，跳轉到新頁面查看該訂單詳情。
3、單條數據的內容介于上方兩者之間的情況，可以使用彈窗。在彈窗中展示數據內容，既可以定位，又保證可以展示一定數據量。舉例：淘寶-我的訂單-物流消息-彈窗顯示詳情。
棒！期待作者更多文章
學習了，感謝