編輯導(dǎo)語(yǔ)：在應(yīng)用界面元素中，按鈕十分常見(jiàn)，有效的按鈕設(shè)計(jì)可以使用戶(hù)體驗(yàn)更加順暢。那么，如何設(shè)計(jì)出合理的、通用的、且能解決用戶(hù)困惑的按鈕設(shè)計(jì)規(guī)范？本篇文章里，作者分享了按鈕設(shè)計(jì)規(guī)范的建立與相關(guān)規(guī)則制定的經(jīng)驗(yàn)，一起來(lái)看一下。

按鈕是一種使用廣泛的基礎(chǔ)界面元素，正因其使用的普遍性和重要性，我們需要并一直在探索建立按鈕設(shè)計(jì)規(guī)范。

面向企業(yè)級(jí)應(yīng)用時(shí)我們需要精心考慮按鈕的設(shè)計(jì)， Ant Design 提供了豐富的按鈕類(lèi)型以覆蓋各種場(chǎng)景，盡管每種按鈕都有其存在的必要性，但在使用中也帶來(lái)諸多疑問(wèn)：

• 應(yīng)在什么時(shí)候?qū)粹o放在左邊，又什么時(shí)候放在右側(cè)？
• 按鈕順序是按照使用頻次擺放嗎？如果無(wú)明顯的使用頻次呢？
• 當(dāng)需要提供特別多按鈕的時(shí)候應(yīng)該如何處理？
• 虛線按鈕與普通按鈕在用法上有什么明確區(qū)別？
• RadioGroup 和 ToggleButton 以及 ButtonGroup 使用上有何區(qū)別？
• ……

如果沒(méi)有規(guī)范以上問(wèn)題，僅按鈕順序和位置問(wèn)題就會(huì)出現(xiàn)無(wú)數(shù)種組合。

圖左側(cè)為螞蟻中臺(tái)業(yè)務(wù)實(shí)況，圖右側(cè)對(duì)左側(cè)按鈕的布置方案作了提取，每種場(chǎng)景都存在過(guò)多解決方案和組合，無(wú)法通過(guò)參考他人的設(shè)計(jì)來(lái)確定應(yīng)該如何擺放按鈕，因?yàn)樵O(shè)計(jì)無(wú)章可循。

因此，有必要建立約束又包容的規(guī)范，以廣泛滿(mǎn)足多層級(jí)、跨場(chǎng)景的設(shè)計(jì)需要。

一、制定約束又包容的設(shè)計(jì)規(guī)范

Ant Design 是一個(gè)設(shè)計(jì)體系，應(yīng)用于螞蟻中臺(tái)，并對(duì)外服務(wù)于超過(guò) 100 萬(wàn)名開(kāi)發(fā)者。在制定規(guī)則時(shí)，原則是簡(jiǎn)單易記（約束）并滿(mǎn)足企業(yè)級(jí)場(chǎng)景的廣泛兼容（包容），把問(wèn)題最少化。我們的解決方案是：

1. 「默認(rèn)規(guī)則」：提供一套默認(rèn)的設(shè)計(jì)規(guī)則，在現(xiàn)有的模板、組件等設(shè)計(jì)資產(chǎn)中提供示例方案，滿(mǎn)足簡(jiǎn)單場(chǎng)景需求，直接使用即可；
2. 「設(shè)計(jì)建議」：為默認(rèn)規(guī)則無(wú)法滿(mǎn)足的復(fù)雜場(chǎng)景提供設(shè)計(jì)建議，讓使用者在一定的策略上自定義，同時(shí)又與默認(rèn)規(guī)則保持一致的認(rèn)知邏輯；
3. 「設(shè)計(jì)目標(biāo)」：明確設(shè)計(jì)目標(biāo)，設(shè)計(jì)者依據(jù)設(shè)計(jì)目標(biāo)決策設(shè)計(jì)。

例如：“提交按鈕與表單輸入項(xiàng)對(duì)齊”是默認(rèn)規(guī)則；當(dāng)需要考慮按鈕是否適合放在右下角時(shí)，則可以遵循“右下角放置“完成類(lèi)”意義的操作”的使用建議；“按鈕的設(shè)計(jì)應(yīng)盡量幫助用戶(hù)避免犯錯(cuò)。”則是設(shè)計(jì)目標(biāo)。

目前，Ant Design 會(huì)提供組件、模板等設(shè)計(jì)資產(chǎn)、官方設(shè)計(jì)指南來(lái)演示這些規(guī)則。這也是解決一致性落地方面的基本思路。

（一致性落地策略）

本文將嘗試分享我們是如何思考和制定默認(rèn)規(guī)則的。

礙于篇幅，首先我們會(huì)聊一聊按鈕是什么，以此推論出按鈕設(shè)計(jì)應(yīng)為用戶(hù)解決的問(wèn)題。接著，根據(jù)按鈕設(shè)計(jì)時(shí)的幾項(xiàng)基本變量，介紹我們是如何組織這些變量的設(shè)計(jì)邏輯，從而推導(dǎo)出一個(gè)較為通用的按鈕設(shè)計(jì)規(guī)則。最后講個(gè)小例子來(lái)說(shuō)明按此邏輯該如何考慮設(shè)計(jì)一組按鈕。

本文主要討論按鈕設(shè)計(jì)的三個(gè)基本邏輯：按鈕位置、按鈕順序、按鈕強(qiáng)調(diào)，后續(xù)可能會(huì)單獨(dú)開(kāi)篇介紹其他常見(jiàn)按鈕的使用疑問(wèn)。

按鈕和鏈接定義是不同的，按鈕用于發(fā)起動(dòng)作，觸發(fā)相應(yīng)的業(yè)務(wù)邏輯。其與鏈接的區(qū)別在于，鏈接的作用是導(dǎo)航，但鏈接并不影響后端或前端展示上的邏輯。

然而，現(xiàn)在，按鈕和鏈接的界限越來(lái)越模糊，按鈕面臨的使用場(chǎng)景越來(lái)越復(fù)雜，也常出現(xiàn)用鏈接作為按鈕的場(chǎng)景。

例如表格的操作列，通常這樣的設(shè)計(jì)通常并無(wú)大不妥。但是筆者認(rèn)為 Material 的 TextButton 的解決方案也非常棒，對(duì) TextButton 和 Link 做了區(qū)分，當(dāng) hover 或點(diǎn)擊TextButton 時(shí)，會(huì)出現(xiàn)淺色背景指示控件響應(yīng)區(qū)。如果你的設(shè)計(jì)系統(tǒng)剛起步，可以考慮這個(gè)方案。

二、按鈕設(shè)計(jì)要解決的問(wèn)題

按鈕的位置、順序、組織方式、視覺(jué)強(qiáng)調(diào)程度是用戶(hù)尋找按鈕的線索，通過(guò)警告色可引起注意，避免誤操作，準(zhǔn)確的文案則能夠預(yù)告按鈕的執(zhí)行結(jié)果。

按鈕設(shè)計(jì)的目標(biāo)是指導(dǎo)用戶(hù)采取我們希望用戶(hù)采取的行動(dòng)，盡量幫助用戶(hù)快速找到需要操作的按鈕，并了解執(zhí)行該操作的結(jié)果，同時(shí)盡可能避免誤操作。

三、按鈕區(qū)位置

按鈕區(qū)是專(zhuān)用于放置按鈕的區(qū)域，一個(gè)按鈕區(qū)內(nèi)可以有多個(gè)按鈕。因此，這里使用按鈕區(qū)位置比按鈕位置更加準(zhǔn)確。

（按鈕區(qū)）

我們確定了一個(gè)清晰的設(shè)計(jì)策略來(lái)決策按鈕區(qū)位置：應(yīng)將按鈕放置于用戶(hù)瀏覽路徑中，便于被用戶(hù)發(fā)現(xiàn)，并且應(yīng)盡量靠近其所控制的對(duì)象。

在未刻意建立信息層級(jí)引導(dǎo)視覺(jué)路徑時(shí)，經(jīng)典“F”“Z”網(wǎng)頁(yè)瀏覽模式作為了我們按鈕位置放置規(guī)則的基礎(chǔ)指導(dǎo)。

1. “F”P(pán)attern

Jacob Nielsen 首先提出該模式后并提供了眼球追蹤研究結(jié)果，關(guān)注流順序如下圖。按鈕跟隨內(nèi)容模式在以下的這個(gè)研究中被證明非常自然。

（F Pattern 圖源：Buttons on the web–Artem Syzonenko）

2. “Z”P(pán)attern

源自 Gutenberg diagram，用戶(hù)關(guān)注流（通常含鼠標(biāo)移動(dòng)）遵循一個(gè) Z 字形模式，它描述了西方用戶(hù)的閱讀模式，從頁(yè)面的左上角到右下角。

1和4區(qū)域是相對(duì)重要的視覺(jué)落腳點(diǎn)，4 區(qū)域相當(dāng)于是瀏覽的終點(diǎn)站（Gutenberg Diagram 是 Gutenberg 根據(jù)多年的報(bào)紙等排版經(jīng)驗(yàn)總結(jié)出的假設(shè)，筆者尚未找到眼動(dòng)實(shí)驗(yàn)數(shù)據(jù)）。

（Z Pattern 圖源：Buttons on the web–Artem Syzonenko）

3. 規(guī)則的外圍邊界

我們需要認(rèn)識(shí)一個(gè)概念叫「內(nèi)容塊」。

內(nèi)容塊的概念略抽象，可以將整個(gè)頁(yè)面視為一個(gè)內(nèi)容塊，也將一張卡片視為一個(gè)內(nèi)容塊，或者僅僅是界面中的一個(gè)小小的內(nèi)容單元也可以視為一個(gè)內(nèi)容塊。

界面中，一個(gè)內(nèi)容塊的基本構(gòu)成有三部分：Header、Body、Footer。常規(guī)來(lái)說(shuō)，一個(gè)內(nèi)容塊通常闡述一個(gè)主題，Header 申明主題，Body 放置該主題的具體內(nèi)容，F(xiàn)ooter 主題的延伸信息和操作。

（內(nèi)容塊的構(gòu)成）

4. 設(shè)計(jì)規(guī)則

根據(jù)以上三個(gè)條件，推導(dǎo)出按鈕在「內(nèi)容塊」中位置的「默認(rèn)規(guī)則」如下。該規(guī)則幾乎收斂了大部分圖 1 中的位置設(shè)計(jì)不一致問(wèn)題。這套位置規(guī)則與 Fiori、Predix、QuickBooks 等企業(yè)級(jí)產(chǎn)品設(shè)計(jì)體系中都相近。

（默認(rèn)位置規(guī)則）

同時(shí)，每個(gè)位置有一定行為意義，我們據(jù)此提供了「使用建議」來(lái)指導(dǎo)設(shè)計(jì)：

（使用建議）

關(guān)于 FooterToolBar 中右側(cè)放置按鈕區(qū)的爭(zhēng)議：

（Slack profile settings 圖源：Buttons on the web–Artem Syzonenko）

在彈窗中，將按鈕區(qū)放置在右側(cè)的規(guī)則已屬于習(xí)慣用法。

但在整個(gè)網(wǎng)頁(yè)場(chǎng)景中，將 FooterToolBar 里的按鈕放置在右側(cè)是最受質(zhì)疑的，F(xiàn)ooterToolBar 是一個(gè)吸附在頁(yè)面底部的工具欄，可以保持出現(xiàn)。許多設(shè)計(jì)師認(rèn)為這種狀況找到按鈕很困難，特別是在表單場(chǎng)景中。

眾所周知，企業(yè)級(jí)產(chǎn)品的表單常會(huì)遇到非常復(fù)雜的狀況，F(xiàn)ooterToolBar 正好解決了這個(gè)問(wèn)題，因此這里要弄清楚的是什么時(shí)候需要用到 FooterToolBar：

1. Body 區(qū)的有部分內(nèi)容被折疊or隱藏，如內(nèi)容單屏無(wú)法展示完整內(nèi)容，表單區(qū)被多個(gè)頁(yè)簽分割；
2. Body 區(qū)的內(nèi)容復(fù)雜度高，比如有多個(gè)分組，每個(gè)分組都有獨(dú)立的按鈕區(qū)，或復(fù)雜的交互方式。這時(shí)候需要將該主題的“完成”操作區(qū)與 body 區(qū)，區(qū)分出來(lái)。

簡(jiǎn)而言之，F(xiàn)ooter 的存在就是為了要和 Body 區(qū)分別開(kāi)來(lái)。如果不是為了解決這類(lèi)問(wèn)題，那么讓按鈕跟隨內(nèi)容是最自然的。

這個(gè)挑戰(zhàn)也引出了另一個(gè)課題，工具欄的設(shè)計(jì)規(guī)范尚待完善，emm，真是一坑更比一坑深。

四、按鈕順序

關(guān)于順序，最常見(jiàn)的疑問(wèn)是確定按鈕應(yīng)該在取消按鈕左邊還是右邊，這是一個(gè)爭(zhēng)論已久的話題。

在彈窗中，確定按鈕和取消按鈕的順序在各設(shè)計(jì)體系中都不一樣，下圖是操作系統(tǒng)三巨頭：Apple、Google、Micrisoft 的方案。三巨頭證明了兩種主次順序都能被接受，只要在系統(tǒng)中統(tǒng)一。

那 Ant Design 應(yīng)該如何選擇呢？

（彈窗中的按鈕，從左往右依次：MacOS、Material、UWP）

在決策按鈕默認(rèn)的閱讀順序時(shí)我們考慮了以下四方面：

1. 風(fēng)險(xiǎn)操作；
2. 方向性意義；
3. 對(duì)話習(xí)慣；
4. 響應(yīng)式規(guī)則。

上面順序呈現(xiàn)了各因素在決策時(shí)的權(quán)重，例如，一旦按鈕出現(xiàn)方向性含義，則權(quán)重大于對(duì)話習(xí)慣，但一旦操作存在風(fēng)險(xiǎn)，則需優(yōu)先決策。

1. 風(fēng)險(xiǎn)操作

可能造成損失的操作，特別是破壞性操作，如果不是用戶(hù)期望點(diǎn)擊的按鈕，應(yīng)該盡量遠(yuǎn)離常用按鈕。

2. 方向性含義

什么是方向性含義？具有返回意義的按鈕，應(yīng)該放在左側(cè)，暗示其方向是回到之前。

左圖的方案非常容易誤操作，方向錯(cuò)亂挑戰(zhàn)用戶(hù)的認(rèn)知習(xí)慣，因?yàn)椴徽撌窃诰W(wǎng)頁(yè)還是移動(dòng)端界面，我們已經(jīng)都習(xí)慣了返回在左側(cè)的模式。

（方向性含義的按鈕）

3. 對(duì)話習(xí)慣

按照對(duì)話習(xí)慣排列按鈕。界面中的按鈕閱讀順序類(lèi)似于一個(gè)用戶(hù)和電腦的對(duì)話過(guò)程，按照日常對(duì)話的順序設(shè)計(jì)按鈕閱讀順序更自然，同時(shí)讓電腦盡量顯得禮貌一點(diǎn)。

例如，日常對(duì)話中，我們一般不會(huì)先問(wèn)負(fù)面性的問(wèn)題，當(dāng)用戶(hù)修改了一項(xiàng)設(shè)置，用戶(hù)最有可能的行為是保存這項(xiàng)變更，如果電腦一上來(lái)就問(wèn)用戶(hù)是否要取消變更會(huì)顯得不太禮貌的亞子。因此，不太推的操作，自然會(huì)排列在靠后的順序。

（電腦與用戶(hù)的對(duì)話過(guò)程）

4. 響應(yīng)式規(guī)則

指是按鈕如何在響應(yīng)式環(huán)境中優(yōu)雅的溢出。這一項(xiàng)條件對(duì)規(guī)則設(shè)計(jì)的影響是，我們把溢出按鈕“…”統(tǒng)一放置在最右側(cè)。

【圖源：UWP 響應(yīng)式設(shè)計(jì)技術(shù)】

5. 設(shè)計(jì)規(guī)則

綜上所述，我們制定了第一版「默認(rèn)規(guī)則」，無(wú)論左對(duì)齊右對(duì)齊，統(tǒng)一從左往右閱讀。

（按鈕閱讀順序初稿）

但這個(gè)方案遇到了問(wèn)題。Ant Design 現(xiàn)有的浮窗類(lèi)組件里，優(yōu)先操作的按鈕都在最右側(cè)，全部不符合這條規(guī)則。

如果調(diào)整，意味著全部組件升級(jí)，這個(gè)變更將挑戰(zhàn)全部已在使用 Ant Design 的用戶(hù)習(xí)慣。這是無(wú)法被接受的，同時(shí)為了保持規(guī)則的簡(jiǎn)單性，我們產(chǎn)出了產(chǎn)出了第二版「默認(rèn)規(guī)則」，即現(xiàn)在發(fā)布的版本，左對(duì)齊從左往右閱讀，右對(duì)齊從右往左閱讀：

五、按鈕強(qiáng)調(diào)

調(diào)整按鈕的樣式變量，呈現(xiàn)不同的視覺(jué)重量，達(dá)到分級(jí)強(qiáng)調(diào)目的。

我們將按鈕視覺(jué)強(qiáng)調(diào)程度分為四級(jí)，了解其原理后，可以根據(jù)樣式變量和按鈕類(lèi)型組合出需要的按鈕。

(按鈕強(qiáng)調(diào)度分級(jí))

1. 一級(jí)按鈕

一級(jí)按鈕通常是主按鈕，突出“完成”、“推薦”的操作。

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

2. 二級(jí)按鈕

也稱(chēng)之為次要按鈕，可用于所有次要的按鈕行動(dòng)，如果我們有許多具有相似重要性的行動(dòng)在一個(gè)屏幕上，或不確定要選擇哪種按鈕，次要按鈕永遠(yuǎn)是最安全的選擇。

目前二級(jí)按鈕的視覺(jué)強(qiáng)調(diào)程度有些偏弱，后續(xù)我們也會(huì)考慮調(diào)優(yōu)此問(wèn)題。

3. 三級(jí)按鈕

沒(méi)有外邊框，用鏈接色突出，例如文字按鈕。比較適合諸如“取消”、“還原”等無(wú)需強(qiáng)調(diào)的操作。文首提到的表格操作列這類(lèi)無(wú)需強(qiáng)調(diào)的操作也推薦使用。

4. 不強(qiáng)調(diào)按鈕

并不是非常規(guī)范的按鈕，用于滿(mǎn)足復(fù)雜的個(gè)性化需求，當(dāng)按鈕數(shù)量特別多，并且保證用戶(hù)直識(shí)別的情況。

最后將位置、順序、視覺(jué)強(qiáng)調(diào)三項(xiàng)變量組合，可以得到一個(gè)最基礎(chǔ)的「默認(rèn)規(guī)則」，用于覆蓋最簡(jiǎn)單的場(chǎng)景：

六、案例驗(yàn)證

前面我們提到，「默認(rèn)規(guī)則」在組件、模板等設(shè)計(jì)資產(chǎn)中演示，通常無(wú)需思考直接使用即可。 那默認(rèn)規(guī)則不能滿(mǎn)足我的需求，我不知道如何安排按鈕順序怎么辦？現(xiàn)在，我們用一個(gè)小案例來(lái)驗(yàn)證如何依據(jù)設(shè)計(jì)建議決策按鈕區(qū)設(shè)計(jì)。

場(chǎng)景假設(shè)：我需要一個(gè)復(fù)雜的篩選條件來(lái)過(guò)濾數(shù)據(jù)，我考慮在彈窗中處理這個(gè)任務(wù)。設(shè)置完篩選條件后，我可以將這個(gè)條件保存下來(lái)以備下次使用，或直接點(diǎn)擊確定生效。這里面會(huì)涉及的操作包括：保存、重置條件、確定、取消。

(按鈕設(shè)計(jì)三步走)

七、結(jié)語(yǔ)

規(guī)則設(shè)計(jì)想要簡(jiǎn)單而又令所有人滿(mǎn)意是一件非常困難的事，從設(shè)計(jì)系統(tǒng)的長(zhǎng)遠(yuǎn)效益來(lái)看，簡(jiǎn)單的規(guī)則更有意義，同時(shí)我們也在盡可能讓規(guī)則能夠符合習(xí)慣用法，讓用戶(hù)更容易接受和學(xué)習(xí)。

關(guān)于按鈕設(shè)計(jì)規(guī)則的探討，依然存在很多問(wèn)題尚待解決，歡迎大家提提供反饋，幫助我們一起完善。

寫(xiě)完文章后突然有點(diǎn)忐忑~~最后，我們發(fā)布了一篇關(guān)于按鈕的設(shè)計(jì)指南，歡迎前往查看指正。

參考

Buttons——Material Design

Push button——MacOS

對(duì)話框——UWP

Buttons——Predix

Action Placement——Fiori

Buttons on the web: placement and order——Artem Syzonenko

Primary & Secondary Action Buttons——Nick Babich

Buttons——UX movement

表單按鈕到底應(yīng)該怎么放？——UXREN

作者：梓美，螞蟻集團(tuán)設(shè)計(jì)師

本文由 @Ant Design 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載。

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