編輯導(dǎo)語(yǔ)：按鈕是界面中運(yùn)用非常廣泛的一類組件，好的按鈕設(shè)計(jì)，能給用戶帶來(lái)更好的整體觀感和體驗(yàn)度。那么要怎么做按鈕設(shè)計(jì)呢？一起來(lái)看一下吧。

提到按鈕，你可能第一反應(yīng)是“就這？？ so easy！ ”，在深入了解按鈕前我也這么想，但是在實(shí)際工作中你會(huì)發(fā)現(xiàn)，按鈕的學(xué)問(wèn)比我們想象中的大，如果把設(shè)計(jì)精美的界面比作一首歌，那么按鈕就是音符，是基礎(chǔ)又極為重要的部分。

按鈕是界面中運(yùn)用非常廣泛的一類組件， 按鈕的設(shè)計(jì)正確與否不僅影響用戶的正常業(yè)務(wù)流程，更影響了用戶對(duì)于產(chǎn)品的整體感觀和體驗(yàn)度。

但是在企業(yè)級(jí)的軟件中，由于場(chǎng)景角色的復(fù)雜化多元化，按鈕的運(yùn)用也可能面臨著一些問(wèn)題和考驗(yàn)，你是否曾經(jīng)遇到過(guò)這樣的疑問(wèn)：

• 圖標(biāo)按鈕和文字按鈕該用哪一種呢？
• 大量按鈕需求出現(xiàn)時(shí)，該如何解決畫面過(guò)于擁擠的問(wèn)題？
• 按鈕的排序標(biāo)準(zhǔn)？
• 什么情況下該使用哪種類型的按鈕？

接下來(lái)，讓我們一起全面的了解一下按鈕的規(guī)范。

01 按鈕起源

車爾尼雪夫斯基曾說(shuō)：“藝術(shù)來(lái)源于現(xiàn)實(shí)，又高于現(xiàn)實(shí)”。 設(shè)計(jì)也不例外，比如界面中的按鈕來(lái)源于現(xiàn)實(shí)世界中的物理按鈕，如撥電話時(shí)的撥通按鍵，點(diǎn)爐灶時(shí)的旋轉(zhuǎn)開關(guān)等等，由于按鈕的設(shè)計(jì)貼合現(xiàn)實(shí)生活中真實(shí)物體的外觀，降低了用戶的認(rèn)知和理解成本，所以用戶很快就學(xué)會(huì)如何操作。

如今市面上常見的按鈕以扁平化風(fēng)格居多， 但是在互聯(lián)網(wǎng)發(fā)展早期，擬物化按鈕十分流行， 它就是“設(shè)計(jì)來(lái)源于現(xiàn)實(shí)”的體現(xiàn)，只不過(guò)后來(lái)慢慢的，為了適應(yīng)效率高、更迭快的互聯(lián)網(wǎng)時(shí)代，擬物風(fēng)格在時(shí)代的潮流中逐漸被扁平風(fēng)格取代。

02 按鈕定義

在UI設(shè)計(jì)中，按鈕是一個(gè)明確指示交互行為動(dòng)作的組件，主要用于觸發(fā)某一個(gè)即時(shí)操作，很多時(shí)候，我們需要采取下一步行動(dòng)或返回到上一步，都要通過(guò)按鈕（部分場(chǎng)景可用手勢(shì)交互）來(lái)完成。

03 按鈕類型

按鈕天生被設(shè)計(jì)來(lái)讓用戶產(chǎn)生點(diǎn)擊的欲望，因此在設(shè)計(jì)師的工具集中，按鈕是視覺(jué)上最引人矚目的控件，于是它有了不計(jì)其數(shù)的變體。去設(shè)計(jì)網(wǎng)站上隨便一搜，你就能看到眼花繚亂的按鈕樣式，這里筆者參照B端規(guī)范去歸納按鈕的分類，分別按照功能、優(yōu)先級(jí)、外觀、組成元素、特殊按鈕等類型分類。

1. 功能

按照功能的差異性可分為簡(jiǎn)單按鈕、狀態(tài)切換按鈕、組合按鈕、菜單按鈕。

1）簡(jiǎn)單按鈕

簡(jiǎn)單按鈕一次只觸發(fā)一個(gè)動(dòng)作，它通常指代特定的行為動(dòng)作如創(chuàng)建、編輯、保存、通過(guò)、拒絕、接受、確定、取消等等，它也是按鈕中最常見的類型。

2）狀態(tài)切換按鈕（Toggle Button）

狀態(tài)切換按鈕，英文叫做toggle button， 「Toggle」一詞對(duì)應(yīng)帶有短柄的撥動(dòng)式開關(guān)，撥動(dòng)它的時(shí)候，能夠在兩種不同的狀態(tài)之間切換。

狀態(tài)切換按鈕， 通過(guò)激活或者置灰一個(gè)對(duì)象，在觸發(fā)該動(dòng)作的同時(shí)， 顯示了用戶當(dāng)前的狀態(tài)， 并且它的交互方式允許用戶在兩種狀態(tài)中自由切換，還節(jié)約空間。

拿最常見的switch開關(guān)來(lái)說(shuō)， Toggle button在實(shí)際使用中常常遇到A方案的問(wèn)題，乍一看好像沒(méi)什么問(wèn)題，但是實(shí)際使用中，用戶會(huì)很迷惑，究竟這個(gè)On/Off代表當(dāng)前的狀態(tài)還是執(zhí)行的動(dòng)作呢？

B方案在A方案的基礎(chǔ)上，給On加了綠色，表明當(dāng)前的激活狀態(tài)，但是初級(jí)用戶有可能沒(méi)辦法立刻理解顏色代表狀態(tài)還是按鈕的操作，在實(shí)踐了幾次之后，建立了顏色和按鈕狀態(tài)的聯(lián)系，慢慢的習(xí)慣了這樣的用法，B方案也是目前比較流行的方案。

C方案從用戶體驗(yàn)的角度來(lái)說(shuō)是最佳方案， 它做到了把狀態(tài)和操作清楚的區(qū)分開來(lái)，讓用戶一目了然，不會(huì)感到迷惑。

3）組合按鈕（Segmented button）

組合按鈕允許用戶從一組選項(xiàng)中選擇一個(gè)動(dòng)作， 舉個(gè)例子，切換表格的視圖： 柱狀圖、餅狀圖、線性圖，一個(gè)組合中的按鈕通常是功能關(guān)聯(lián)緊密的一系列圖標(biāo)。

4）菜單按鈕（Menu button）

菜單按鈕是菜單中不可分割的一部分，菜單本身可以被單獨(dú)考慮，但菜單按鈕無(wú)法單獨(dú)存在。點(diǎn)擊菜單按鈕的箭頭，便可以彈出一個(gè)下拉框，從一堆動(dòng)作中選擇一個(gè)動(dòng)作。

菜單按鈕可以分為常規(guī)菜單按鈕和帶分割線的菜單按鈕：

常規(guī)菜單按鈕：當(dāng)用戶點(diǎn)擊按鈕后，菜單選項(xiàng)彈出，這是默認(rèn)的類型。

帶分割線的菜單按鈕：帶分割線的菜單按鈕被分為兩個(gè)區(qū)域： 文字標(biāo)簽和下拉圖標(biāo)。 文字標(biāo)簽的內(nèi)容通常是默認(rèn)選項(xiàng)（被頻繁使用到的動(dòng)作），點(diǎn)擊文字標(biāo)簽就會(huì)直接觸發(fā)這個(gè)動(dòng)作，而如果點(diǎn)擊下拉按鈕則會(huì)彈出選項(xiàng)。

這還有一個(gè)容易被設(shè)計(jì)師忽略的思考點(diǎn)，就是文字標(biāo)簽是否需要變化，文字標(biāo)簽的兩種交互變化：

1. 默認(rèn)文字標(biāo)簽固定。無(wú)論你最終在下拉框中選擇了什么動(dòng)作，文字標(biāo)簽不會(huì)改變
2. 默認(rèn)文字標(biāo)簽會(huì)隨你的點(diǎn)擊改變。 當(dāng)你選擇和默認(rèn)文字標(biāo)簽不同的選項(xiàng)時(shí)， 在點(diǎn)擊動(dòng)作完成后，菜單中的標(biāo)簽也會(huì)隨之改變

通常來(lái)說(shuō)，如果在需要告知用戶自己所處的狀態(tài)、當(dāng)前頁(yè)面處所的狀態(tài)、當(dāng)前正在使用的工具時(shí)，菜單按鈕的文字標(biāo)簽就要改變，常見的有賬戶切換、篩選過(guò)濾、工具使用等等。

除此之外的簡(jiǎn)單情形，文字標(biāo)簽則默認(rèn)不改變。

拿飛書右上角的“新建”按鈕舉個(gè)例子，點(diǎn)擊新建后，彈出下拉框，當(dāng)你選擇其中任意一個(gè)選項(xiàng)，系統(tǒng)就會(huì)完成這個(gè)任務(wù)， 所以這里不需要改變文字標(biāo)簽。

再拿Figma中的篩選菜單按鈕舉個(gè)例子，點(diǎn)擊篩選的因素，然后標(biāo)簽就改變成當(dāng)前應(yīng)用的此篩選因素。

2. 優(yōu)先級(jí)

1）主按鈕（Primary button）

在日常場(chǎng)景中，主按鈕是頁(yè)面中按鈕區(qū)最為核心的操作按鈕， 通常使用主題色填充容器吸引用戶視線聚焦， 引導(dǎo)用戶去關(guān)注、操作主流程，強(qiáng)調(diào)性較高。

一個(gè)按鈕區(qū)最多應(yīng)該使用一個(gè)主按鈕。那么一個(gè)頁(yè)面可以有多個(gè)主按鈕嗎？因?yàn)闆](méi)有足夠的反面案例支撐一個(gè)頁(yè)面不能有多個(gè)主按鈕，比較建議在一個(gè)焦點(diǎn)任務(wù)中，最多一個(gè)主按鈕，也可以沒(méi)有主按鈕。

2）次級(jí)按鈕（Secondary button）

次級(jí)按鈕是在日常場(chǎng)景中運(yùn)用最廣泛的的一種按鈕， 視覺(jué)呈現(xiàn)上相較于主按鈕較“弱”， 強(qiáng)調(diào)性中等， 可用于所有次要的按鈕行動(dòng)，如果我們有許多同等重要性的行動(dòng)在一個(gè)屏幕上，或不確定要選擇哪種按鈕，次要按鈕永遠(yuǎn)是最安全的選擇。

3）三級(jí)按鈕（Tertiary button）

三級(jí)按鈕是次于次級(jí)按鈕重要性的按鈕。 比較適合諸如“取消”、“還原”等無(wú)需強(qiáng)調(diào)的操作， 比如表格操作列這類無(wú)需強(qiáng)調(diào)的操作也推薦使用。

3. 外觀

按鈕外形五花八門，這里介紹B端常見的按鈕類型，按照外觀有無(wú)填充、描邊差異、顏色差異大致分為以下類別：

• 強(qiáng)調(diào)按鈕（Emphasized Button）： 強(qiáng)調(diào)按鈕會(huì)有一個(gè)強(qiáng)調(diào)色的背景填充，用來(lái)強(qiáng)調(diào)頁(yè)面中重要的按鈕，通常主按鈕是強(qiáng)調(diào)按鈕
• 幽靈按鈕（Ghost Button）：幽靈按鈕有描邊， 但是沒(méi)有背景填充， 通常次級(jí)按鈕是幽靈按鈕
• 標(biāo)準(zhǔn)按鈕（Standard Button）： 除了特殊按鈕之外， 所有按鈕都是按照標(biāo)準(zhǔn)模式下規(guī)范
• 積極語(yǔ)義按鈕（Positive Button）：積極語(yǔ)義按鈕通常用積極語(yǔ)義色（通常是綠色）表示， 比如 接受、通過(guò)、同意這一類正面的動(dòng)作
• 消極語(yǔ)義按鈕（Negative Button）： 消極語(yǔ)義按鈕通常用消極語(yǔ)義色（通常是紅色）表示， 比如 拒絕、不通過(guò)、不同意、錯(cuò)誤這一類負(fù)面的動(dòng)作
• 警告語(yǔ)義按鈕（Attention Button）： 警告語(yǔ)義按鈕通常用警告語(yǔ)義色（通常是橙色）表示， 比如 警告、提醒這一類引起額外注意的動(dòng)作
• 透明按鈕（Transparent Button）： 透明按鈕沒(méi)有描邊， 也沒(méi)有背景填充，通常三級(jí)按鈕是透明按鈕

4. 組成元素

按照組成元素可分為圖標(biāo)&amp；文字、僅圖標(biāo)、僅文字：

• 圖標(biāo)&amp；文字（ Icon + Text ）： 同時(shí)包含圖標(biāo)和文字的按鈕， 這種類型的按鈕不推薦使用，因?yàn)闀?huì)占據(jù)太多的空間，顯得繁冗
• 僅圖標(biāo)（ Icon only）： 只有圖標(biāo)的按鈕
• 僅文字（Text only）： 只有文字的按鈕

5. 特殊按鈕類型

有的按鈕只出現(xiàn)在特定的場(chǎng)景下，比如像PS的工具欄：當(dāng)鼠標(biāo)懸停在某個(gè)工具（通常是icon表示）上時(shí)，下方會(huì)彈出該icon的快捷鍵和文字解釋（tooltip）； 再比如說(shuō)系統(tǒng)收到新消息時(shí)，消息圖標(biāo)的右上角會(huì)顯示收到的信息數(shù)量……特殊按鈕類型包括比如角標(biāo)提示按鈕、默認(rèn)按鈕、快捷鍵提示按鈕等等，這里只是舉幾個(gè)例子說(shuō)明。

1）角標(biāo)提示按鈕（Badge on Button）

• 從其他頁(yè)面收集的信息數(shù)量可以通過(guò)角標(biāo)提示的方式顯示在按鈕上， 由此觸發(fā)一系列的行為動(dòng)作， 角標(biāo)在視覺(jué)上可以快速捕捉人們的目光，吸引用戶注意力
• 角標(biāo)通常和以下的按鈕類型組合： 強(qiáng)調(diào)型按鈕、幽靈按鈕、透明按鈕
• 角標(biāo)的數(shù)字必須是整數(shù)如1，2，3，4，如果數(shù)字超過(guò)四位數(shù)，如9999，那么角標(biāo)中顯示999+
• 角標(biāo)的位置不固定，具體的取決于內(nèi)容密度，比如在一個(gè)上下空間較為寬松的模式下，角標(biāo)可以放在右上角， 如果處于上下空間較為擁擠的情況下，角標(biāo)比較適合放在右邊

2）默認(rèn)按鈕（Default button）

默認(rèn)狀態(tài)下的按鈕， 可以通過(guò)Enter/Ctrl + Enter快捷鍵觸發(fā)， 無(wú)論此時(shí)聚焦中心在哪里、是否聚焦， 大多數(shù)情況下， 默認(rèn)按鈕是強(qiáng)調(diào)按鈕或者是接受按鈕，為了便于識(shí)別，我們可以賦予它與眾不同的圓角。

3）快捷鍵提示按鈕（Button Shortcuts）

當(dāng)一個(gè)按鈕有對(duì)應(yīng)的快捷鍵時(shí)，鼠標(biāo)在懸停狀態(tài)下會(huì)顯示該按鈕的快捷鍵提示， 快捷鍵提示位置也許會(huì)出現(xiàn)在按鈕的上方或者下方，這取決于鼠標(biāo)停留的位置。

04 按鈕交互狀態(tài)

1. 五種按鈕基本狀態(tài)

試著把按鈕想象成嬰兒Q彈的臉蛋，你按下去的時(shí)候，它會(huì)凹下去一塊，當(dāng)你放手時(shí)，它會(huì)“嘣”的一聲彈回來(lái)，恢復(fù)原樣，這種特性叫做“受范性”。

如果一個(gè)用戶點(diǎn)擊了按鈕，可按鈕在視覺(jué)上沒(méi)有產(chǎn)生任何變化，這個(gè)時(shí)候用戶就會(huì)開始懷疑自己到底有沒(méi)有按下這個(gè)按鈕，甚至?xí)X(jué)得這個(gè)按鈕是不是壞掉了？？ 盡管單一狀態(tài)的按鈕可以大大減少開發(fā)難度，但是會(huì)造成非常糟糕的用戶體驗(yàn)。

用戶渴望按鈕發(fā)生改變，這叫做“受范性反應(yīng)”， 常見的按鈕的狀態(tài)改變可以被分為常規(guī)、懸停、按下、禁用、聚焦：

• 常規(guī)（Regular）： 不進(jìn)行任何交互動(dòng)作時(shí)的按鈕狀態(tài)。
• 懸停（Hover）： 鼠標(biāo)在按鈕上方停留，但是還沒(méi)有點(diǎn)擊前的狀態(tài)，這個(gè)狀態(tài)是在電腦端才有的按鈕狀態(tài)，手機(jī)端沒(méi)有辦法懸停。
• 按下（Pressed）： 點(diǎn)擊按鈕瞬間的狀態(tài)。
• 禁用（Disabled）： 無(wú)法點(diǎn)擊該按鈕的狀態(tài)。
• 聚焦（Focused）： 按鈕獲得接收用戶鼠標(biāo)或鍵盤輸入的能力。 Focus狀態(tài)是一個(gè)非常重要的交互形式，但很多設(shè)計(jì)師都會(huì)忽略，甚至在很多平臺(tái)上會(huì)忽略這一點(diǎn)，導(dǎo)致使用 Tab 鍵無(wú)法獲取聚焦的反饋， 假如去除這類反饋，會(huì)導(dǎo)致用戶無(wú)法用方向鍵控制光標(biāo)位置，在很大程度上降低用戶使用的可能性，比如說(shuō)對(duì)于視障人士來(lái)說(shuō)，鍵盤是他們依賴的交互方式。

除了這五種最基本的按鈕交互狀態(tài)外， 還有一些在特殊的情形下才出現(xiàn)的按鈕狀態(tài)，比如說(shuō)：

• 選中懸停（Hover on Selected）
• 聚焦懸停（Hover on Focused）
• 按下懸停（Hover on Pressed）
• 加載（Loading）

2. 不同按鈕交互狀態(tài)的差異

• 狀態(tài)切換按鈕在等到下一次按壓前會(huì)仍然維持按壓的狀態(tài)
• 組合按鈕中被選中的選項(xiàng)會(huì)維持激活的狀態(tài)，知道用戶做出了其他的選擇
• 菜單按鈕被激活后會(huì)彈出菜單選項(xiàng)
• 帶分割線的菜單按鈕， 如果按下文字標(biāo)簽，就直接出發(fā)該動(dòng)作，如果按下下拉按鈕，則彈出菜單選項(xiàng)

05 按鈕使用場(chǎng)景

1. 用戶閱讀模式

現(xiàn)在我們了解按鈕的分類和具體用法，但是在實(shí)際工作上可能常常會(huì)遇到“這個(gè)按鈕該放在那個(gè)位置？”“這個(gè)按鈕和那個(gè)按鈕我應(yīng)該那個(gè)放在左邊哪個(gè)放在右邊？”等等令人糾結(jié)的問(wèn)題， 先不著急，萬(wàn)變不離其宗，我們先來(lái)看看用戶在瀏覽界面時(shí)的一些閱讀模式：

1）F-Pattern

F模式遵循字母F的形狀，也因此得名， Jacob Nielsen 在進(jìn)行眼球追蹤研究后首次提出了這種模式， 容易被大家忽略的一點(diǎn)是， 他的眼動(dòng)研究是針對(duì)如報(bào)紙和文章這樣的密集文本和大量搜索結(jié)果頁(yè)面進(jìn)行的。

與其他模式一樣，眼睛從頂部/左側(cè)開始，水平移動(dòng)到頂部/右側(cè)，然后回到左側(cè)邊緣，接著再次向右水平掃描， 但是第二次掃描不會(huì)像第一次那么遠(yuǎn)， 此后的眼睛掃描按照這樣的規(guī)律進(jìn)行， 最終眼睛在向下移動(dòng)時(shí)會(huì)停留在左邊緣附近。

2）Z-Pattern

Z模式有時(shí)被稱為反向模式， 它的布局遵循字母Z的形狀， 用戶將從頂部/左側(cè)開始，水平移動(dòng)到頂部/右側(cè)，然后對(duì)角線移動(dòng)到底部/左側(cè)，然后完成另一個(gè)水平移動(dòng)到底部/右側(cè)。

與古騰堡圖表的主要區(qū)別在于， Z模式下的用戶將穿過(guò)兩個(gè)低注意力區(qū)， 而古登堡是從第一視覺(jué)落腳點(diǎn)到最終視覺(jué)落腳點(diǎn)。

鋸齒模式：我們稍微擴(kuò)展一下Z模式，不妨把它看作是一系列小Z運(yùn)動(dòng)，而不是一個(gè)大Z運(yùn)動(dòng)， 這其實(shí)我們正常情況下閱讀大量文本的方式， 這一系列Z運(yùn)動(dòng)有時(shí)被稱為之字形圖案， 如果我們繼續(xù)在圖案中添加更多的之字形和鋸齒形， 隨著Z的對(duì)角線部分變得越來(lái)越淺，我們最終會(huì)進(jìn)行一系列近水平的左右運(yùn)動(dòng)。

三角模式：Z模式還衍生出所謂的金三角形圖案， 如果用戶進(jìn)行第一個(gè)水平和第一個(gè)對(duì)角線運(yùn)動(dòng)，然后關(guān)閉形狀，用戶最終會(huì)得到一個(gè)直角三角形。

3）古登堡圖表

古登堡圖表描述了在平鋪式信息情境下下眼動(dòng)的一般規(guī)律，如閱讀小說(shuō)或者報(bào)紙時(shí)。

古登堡圖表將頁(yè)面布局分為4個(gè)象限：

• 第一視覺(jué)落腳點(diǎn)（第二象限）
• 強(qiáng)休耕區(qū)域（第一象限）
• 弱休耕區(qū)域（第三象限）
• 最終視覺(jué)落腳點(diǎn)（第四象限）

該模式表明，眼睛將以一系列水平運(yùn)動(dòng)橫掃頁(yè)面， 每次掃蕩從左邊邊緣開始，向右邊緣移動(dòng)得更近一點(diǎn)。整體運(yùn)動(dòng)是眼睛從主區(qū)域移動(dòng)到終端區(qū)域，這條路徑被稱為閱讀重力。

古騰堡圖表明，強(qiáng)休耕區(qū)和弱休耕區(qū)位于這條閱讀重力路徑之外，除非以某種方式在視覺(jué)上強(qiáng)調(diào)，否則受到的關(guān)注很少， 重要元素應(yīng)沿閱讀重力路徑放置。

4）焦點(diǎn)模式

焦點(diǎn)模式是你完全控制的模式， 一旦你給你的設(shè)計(jì)元素不同的視覺(jué)權(quán)重，并創(chuàng)建層次結(jié)構(gòu)和流程，上面的模式就不再適用。

焦點(diǎn)模式表明，人們將首先查看頁(yè)面上最占主導(dǎo)地位的元素（視覺(jué)重量最大的元素或區(qū)域）。

從那里，眼睛將沿著從主導(dǎo)元素到設(shè)計(jì)中其他焦點(diǎn)的路徑。順序?qū)⑷Q于這些焦點(diǎn)的相對(duì)權(quán)重，以及指示下一步要看的任何視覺(jué)線索。

2. 界面布局

一般頁(yè)面可分為3個(gè)部分， 標(biāo)題區(qū)、內(nèi)容區(qū)、頁(yè)腳區(qū)。

1）標(biāo)題區(qū)

標(biāo)題區(qū)放置是影響全局行為的按鈕（如： 編輯、刪除）。

規(guī)則：

• 左上角作為第一視覺(jué)落點(diǎn)，用來(lái)放置標(biāo)題，按鈕群整體右對(duì)齊
• 標(biāo)題區(qū)動(dòng)作始終被顯示， 不隨著滾動(dòng)條而滾動(dòng)
• 按鈕群從左到右的羅列規(guī)則： 業(yè)務(wù)動(dòng)作（如： 編輯、刪除） 、管理內(nèi)容（如： 篩選）、管理頁(yè)面布局（如： 全屏）、一般的動(dòng)作（如： 分享）
• 一個(gè)頁(yè)面只有一個(gè)主按鈕（使用強(qiáng)調(diào)按鈕風(fēng)格）， 主按鈕放在按鈕區(qū)最靠左的位置， 當(dāng)頁(yè)腳區(qū)按鈕和標(biāo)題區(qū)按鈕同時(shí)存在時(shí)， 我們更傾向于把主按鈕放在頁(yè)腳區(qū)
• 我們把影響業(yè)務(wù)整體進(jìn)程的按鈕放在頁(yè)腳區(qū)，比如保存、提交、發(fā)送

2）內(nèi)容區(qū)

內(nèi)容區(qū)放置的是只影響該內(nèi)容區(qū)的按鈕， 內(nèi)容的形式有很多，這里拿圖表和表格舉例說(shuō)明，按鈕的一些規(guī)律。

表格按鈕通常頂部右對(duì)齊，常見的按鈕功能包括：

• 在表格中添加一行新的內(nèi)容
• 編輯/刪除表格中選中的行
• 切換表格到編輯模式
• 控制表格設(shè)置選項(xiàng)， 比如篩選或者排序

如果一個(gè)動(dòng)作只影響表格中的一行，那么該動(dòng)作按鈕就放在這一行。

圖表按鈕頂部右對(duì)齊，常見的按鈕功能有：

• 切換圖表的類型
• 在表格和圖表視圖間切換
• 標(biāo)準(zhǔn)按鈕如： 圖例、個(gè)性化菜單、切換全屏模式

3）頁(yè)腳區(qū)

頁(yè)腳區(qū)的動(dòng)作通常是影響業(yè)務(wù)流程進(jìn)度的， 代表一個(gè)流程中的步驟， 如： 提交、保存。 它可以是用戶想要完成的東西（如保存一個(gè)表格）， 或者結(jié)束一個(gè)業(yè)務(wù)流程的（如 拒絕請(qǐng)求， 提交表單）。

頁(yè)腳區(qū)的動(dòng)作也可以包含替換當(dāng)前路徑的動(dòng)作（如： 返回）， 或者跳出當(dāng)前業(yè)務(wù)的動(dòng)作（如： 取消）。

頁(yè)腳區(qū)的動(dòng)作按鈕的規(guī)律是：

• 按鈕群整體右對(duì)齊
• 動(dòng)作始終被顯示， 不隨著滾動(dòng)條而滾動(dòng)
• 按鈕群從左到右的羅列規(guī)則： 前進(jìn)路徑（如： 提交）、可替換路徑（如： 返回）、消極路徑、跳出當(dāng)前頁(yè)面而不對(duì)其做任何改變（如： 取消）

3. 如何處理數(shù)量很多的按鈕

當(dāng)產(chǎn)品給出很多的按鈕需求時(shí)，通常第一步是按照功能分類，把功能相類似的按鈕分在一起，可用menu button 的形式放在一起，如“導(dǎo)出為excel”和“導(dǎo)出為PDF”可以合并在一起，這樣做的益處是，一方面節(jié)省寶貴的屏幕空間，使得頁(yè)面看上去整潔清晰；另一方面讓用戶更快速的做出選擇。

如果按鈕實(shí)在太多了，也沒(méi)有一些可以合并成一個(gè)menu button的選擇， 那么這個(gè)時(shí)候可以考慮使用“更多”的展開按鈕（overflow button），而選擇哪些動(dòng)作放進(jìn)“更多”，這個(gè)取決于產(chǎn)品經(jīng)理給出的優(yōu)先級(jí)。

4. 如何在圖標(biāo)和文字之間做選擇

從現(xiàn)象層來(lái)看，圖標(biāo)與信息就是信息的兩種不同表現(xiàn)方式。兩個(gè)表現(xiàn)方式都各自有各自的特點(diǎn)，所以在設(shè)計(jì)過(guò)程中，應(yīng)根據(jù)具體的場(chǎng)景去選擇合適的表現(xiàn)方式。

通常情況下，我們不推薦圖標(biāo)和文字一起使用， 比如fiori規(guī)范中要求盡量使用圖標(biāo)或者文字，避免繁冗。

1）圖標(biāo)

圖標(biāo)作為現(xiàn)在使用較多的信息表現(xiàn)方式，具有以下幾個(gè)特點(diǎn)：

①優(yōu)點(diǎn)

• 節(jié)約空間： 同等空間下，圖標(biāo)所傳遞的信息量會(huì)更大。而移動(dòng)設(shè)備的屏幕大小，本身就存在著限制。所以同等空間下，為了信息傳遞的準(zhǔn)確性，可以優(yōu)先考慮圖標(biāo)這種信息傳遞方式。
• 快速定位： 圖標(biāo)圖像更容易吸引用戶的目光，讓用戶可以在短時(shí)間內(nèi)定位到圖標(biāo)所在的位置。
• 易理解： 大腦更容易處理圖像信息，更符合人的認(rèn)知規(guī)律。

②缺點(diǎn)

不夠準(zhǔn)確，容易有歧義。再優(yōu)秀的設(shè)計(jì)師也不能設(shè)計(jì)出一個(gè)能夠另所有人都理解的圖標(biāo)，因?yàn)樗肋h(yuǎn)沒(méi)有文字來(lái)的直白和準(zhǔn)確。

不過(guò)為了彌補(bǔ)圖標(biāo)的這個(gè)缺點(diǎn)，設(shè)計(jì)師們發(fā)明了tooltip，當(dāng)你懸浮在圖標(biāo)上，附近會(huì)顯示它的說(shuō)明文字，幫助初次使用者熟悉工具。

1）文字

①優(yōu)點(diǎn)

準(zhǔn)確性： 文字相較于圖標(biāo)，其最大的特點(diǎn)，就是信息傳遞的準(zhǔn)確性高。人腦在認(rèn)知文字時(shí)，首先會(huì)將其轉(zhuǎn)化為腦中與之對(duì)應(yīng)的圖案，然后再進(jìn)行理解記憶。

雖然每個(gè)個(gè)體腦中的圖案可能存在差別，但這些圖案本身對(duì)于個(gè)體來(lái)說(shuō)，卻是唯一的，這種唯一的確定性，就保證了文字信息傳遞的準(zhǔn)確性。

②缺點(diǎn)

• 缺少美感： 文字相對(duì)于圖案來(lái)說(shuō)，傳遞的信息量少。如果過(guò)多的使用文字，就會(huì)顯得相對(duì)比較死板，缺少一定的美感。
• 在國(guó)際性的軟件上，語(yǔ)言在轉(zhuǎn)換時(shí)會(huì)有字?jǐn)?shù)上的差異，這種差異很可能是三倍字長(zhǎng)，所以文字要求簡(jiǎn)潔，但是圖標(biāo)就不會(huì)這樣的問(wèn)題。

3）圖標(biāo)和文字按鈕應(yīng)當(dāng)遵循的原則

①文字按鈕：

• 主按鈕、次級(jí)按鈕、語(yǔ)義按鈕（積極語(yǔ)義/消極語(yǔ)義）使用文字按鈕
• 文字簡(jiǎn)短、高效傳達(dá)信息
• 一致性： 同一種行為動(dòng)作出現(xiàn)在不同的地方要用一個(gè)詞語(yǔ)表示

②圖標(biāo)按鈕：

• 使用通用的、標(biāo)準(zhǔn)的帶隱喻的圖標(biāo)
• 當(dāng)鼠標(biāo)懸停在圖標(biāo)上方時(shí)， 給一個(gè)文字提示（tooltip）， 告知用戶圖標(biāo)的具體含義，避免用戶產(chǎn)生歧義

06 按鈕細(xì)節(jié)

接下來(lái)，咱們來(lái)庖丁解牛拆解一下按鈕，按鈕可大致分為容器、背景、圖標(biāo)、文本、描邊、圓角等基本組成元素，每種元素的視覺(jué)呈現(xiàn)都會(huì)反過(guò)來(lái)影響按鈕的外觀。

不同風(fēng)格、不同氣質(zhì)的產(chǎn)品，需要相應(yīng)處理影響按鈕視覺(jué)呈現(xiàn)的各個(gè)元素。

1. 尺寸

在PC端設(shè)計(jì)按鈕時(shí)，因?yàn)槭髽?biāo)的精準(zhǔn)點(diǎn)擊，按鈕尺寸可以設(shè)計(jì)的小一些，同時(shí)也能讓整個(gè)界面看起來(lái)更加精致，只要不影響操作，36px~48px范圍內(nèi)的按鈕是比較常見的。

然而移動(dòng)端的按鈕設(shè)計(jì)，考慮到手指點(diǎn)擊操作的實(shí)際范圍， 于是在iOS的設(shè)計(jì)規(guī)范中， 將按鈕的最小點(diǎn)擊區(qū)域規(guī)定為44pt，一旦小于這個(gè)數(shù)值，操作時(shí)就會(huì)出現(xiàn)精準(zhǔn)度較低的情況，導(dǎo)致操作失誤或無(wú)效。

但是在實(shí)際的IOS界面中，并未嚴(yán)格遵守這個(gè)要求， 因?yàn)楹芏喟粹o的權(quán)重較低， 并且如文字按鈕， 因?yàn)樗肋h(yuǎn)不可能達(dá)到這樣子的標(biāo)準(zhǔn)（但是可以加大熱區(qū)范圍）。

每個(gè)平臺(tái)都會(huì)有多種型號(hào)的按鈕，一般按照尺寸可以分為：超大按鈕、大按鈕、中按鈕、小按鈕，超小按鈕，這個(gè)可以根據(jù)自己平臺(tái)的需要來(lái)制定多少種。

• 高度： 每一種規(guī)格的按鈕高度是固定的
• 寬度： 按鈕有最大寬度和最小寬度限制
• 最大寬度： 在手機(jī)端，最大寬度就是頁(yè)面寬度減去安全邊距（下圖兩個(gè)紅線間距就是安全邊距， 常見的安全邊距有10pt、12pt、16pt等；在電腦端，通常沒(méi)有最大寬度的說(shuō)法，因?yàn)榘粹o本身的字?jǐn)?shù)不多，所以按鈕最長(zhǎng)也不會(huì)像根釣魚竿一樣， 但是正常情況下按鈕有固定的padding（內(nèi)邊距）
• 最小寬度： 根據(jù)各平臺(tái)屬性來(lái)制定即可

而當(dāng)按鈕寬度處于最小寬度和最大寬度之間時(shí)，按鈕的長(zhǎng)度是根據(jù)內(nèi)容的長(zhǎng)度而做變化的，只需設(shè)定單個(gè)元素到按鈕左右邊距、多個(gè)元素之間邊距Padding.

這里有一個(gè)注意事項(xiàng)： 在設(shè)計(jì)軟件中，邊框默認(rèn)是居中邊框的，但是在開發(fā)中，沒(méi)有居中邊框這一種說(shuō)法，默認(rèn)是內(nèi)邊框， 所以按鈕的元素邊距（Padding）是包括描邊大小的。

2. 面性/線性

通常主按鈕會(huì)使用面性， 而線性按鈕也被稱為幽靈按鈕，在視覺(jué)上，線性按鈕在視覺(jué)上引起的注意力弱于面性圖標(biāo)。

3. 圓角

設(shè)計(jì)過(guò)程中的每一個(gè)小決定都會(huì)影響整體設(shè)計(jì)的感覺(jué)。 按鈕就是其中很重要的一環(huán)。 圓角按鈕所帶來(lái)的不僅僅是圓角大小的視覺(jué)表現(xiàn)，更多是影響著用戶對(duì)整個(gè)產(chǎn)品整體認(rèn)知，以及用戶在使用產(chǎn)品過(guò)程中的具體感受， 合理運(yùn)用一定圓角的按鈕對(duì)整個(gè)產(chǎn)品使用體驗(yàn)的提升大有裨益。

這里的圓角不僅僅局限于按鈕，推而廣之適用產(chǎn)品中的每個(gè)元素，提前合理的規(guī)劃各種元素圓角，讓產(chǎn)品整體看上去一致、和諧、美觀。

0px圓角： 完全的直角是一類經(jīng)典用法， 塑造嚴(yán)肅、專業(yè)的界面。 為了整體界面的一致性，其他的元素也需要有鋒利的幾何棱角感。

3-4px圓角： 這一類圓角是最安全的選擇。在很多大廠規(guī)范中， 都使用這一類的圓角， 可以說(shuō)是比較標(biāo)準(zhǔn)的用法，它比完全的直角要友好。

8-14px圓角： 這一類圓角適用于卡片， 因?yàn)閳A角比直角的識(shí)別度高的多， 直角的卡片看上去更鋒利， 用戶的目光通常是劃過(guò)它們而不是目光在它們身上逗留。

全圓角： 全圓角的按鈕和一般圓角的按鈕相比， 全圓角更適合在空間足夠的情況下， 作為一個(gè)CTA（call-to-action）按鈕， 引導(dǎo)用戶特定的行為。 而且，在列表、卡片布局的情況下， 全圓角發(fā)揮的更好。

如果平臺(tái)的按鈕是圓角矩形，就需要制定按鈕圓角的大小，但是并不是所有按鈕的圓角大小都是一樣的，需要按鈕大小比例來(lái)制定。

在大多數(shù)界面設(shè)計(jì)中，我們通常所見到按鈕還是小圓角和全圓角居多，也有部分按鈕完全直角，需要根據(jù)產(chǎn)品的行業(yè)屬性與氣質(zhì)來(lái)選擇最合適的圓角類型。

4. 顏色

按鈕的大小、形狀、顏 色三個(gè)維度中，人眼是對(duì)顏色信息最為敏感的。在一個(gè)頁(yè)面中，突出一個(gè)元素的方式有多種，其中最簡(jiǎn)潔有效的方式就是用顏色進(jìn)行突出。

顏色包含了色相、飽和度和明度三種屬性，改變顏色的不同屬性，都會(huì)對(duì)按鈕的表意產(chǎn)生影響；同時(shí)，不同的顏色代表著不同的含義，配色時(shí)需要加以注意。

1）基礎(chǔ)色

按鈕顏色和產(chǎn)品整體顏色 （品牌色） 相關(guān)， 由品牌色衍生出一系列基礎(chǔ)色， 用于展示不同狀態(tài)下按鈕顏色。以螞蟻中臺(tái)舉例：

2）語(yǔ)義色

語(yǔ)義色可以用來(lái)代表一些特殊的語(yǔ)境狀態(tài)如消極的、批判的、積極的、中等的、傳達(dá)信息的。這里以螞蟻中臺(tái)舉例：

3）業(yè)務(wù)色：

業(yè)務(wù)色和產(chǎn)品中的具體業(yè)務(wù)有緊密關(guān)聯(lián)， 是由產(chǎn)品定義的。這里以sap Erp系統(tǒng)舉例：

07 結(jié)語(yǔ)

規(guī)則總在發(fā)展變化之中不斷進(jìn)步優(yōu)化，我們?cè)诹私庖?guī)則的同時(shí)，也不要過(guò)于死板，要靈活運(yùn)用規(guī)則，讓規(guī)則服務(wù)于設(shè)計(jì)，并且嘗試在運(yùn)用中不斷思考完善規(guī)則，這是是一個(gè)優(yōu)秀的新時(shí)代設(shè)計(jì)師應(yīng)該具備的素質(zhì)。

關(guān)于按鈕設(shè)計(jì)規(guī)則的探討，依然存在很多細(xì)節(jié)問(wèn)題尚待解決，歡迎大家提出自己的見解，讓我們共同進(jìn)步!

本文由郝小七指導(dǎo)http：//theventurebank.com/u/917803

本文由@自來(lái)卷夏憶 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來(lái)自 Unsplash，基于CC0協(xié)議。