2021-6-29 ui設(shè)計分享達人
按鈕是一種使用廣泛的基礎(chǔ)界面元素，正因其使用的普遍性和重要性，我們需要并一直在探索建立按鈕設(shè)計規(guī)范。面向企業(yè)級應(yīng)用時我們需要精心考慮按鈕的設(shè)計， Ant Design 提供了豐富的按鈕類型以覆蓋各種場景，盡管每種按鈕都有其存在的必要性，但在使用中也帶來諸多疑問：
應(yīng)在什么時候?qū)粹o放在左邊，又什么時候放在右側(cè)；
按鈕順序是按照使用頻次擺放嗎？如果無明顯的使用頻次呢？
當(dāng)需要提供特別多按鈕的時候應(yīng)該如何處理？
虛線按鈕 與 普通按鈕 在用法上有什么明確區(qū)別；
RadioGroup 和 ToggleButton 以及 ButtonGroup 使用上有何區(qū)別？
…
如果沒有規(guī)范以上問題，僅按鈕順序和位置問題就會出現(xiàn)無數(shù)種組合。圖左側(cè)為螞蟻中臺業(yè)務(wù)實況，圖右側(cè)對左側(cè)按鈕的布置方案作了提取，每種場景都存在過多解決方案和組合，無法通過參考他人的設(shè)計來確定應(yīng)該如何擺放按鈕，因為設(shè)計無章可循。
因此，有必要建立約束又包容的規(guī)范，以廣泛滿足多層級、跨場景的設(shè)計需要。
Ant Design 是一個設(shè)計體系，應(yīng)用于螞蟻中臺，并對外服務(wù)于超過 100 萬名開發(fā)者。在制定規(guī)則時，原則是簡單易記（約束）并滿足企業(yè)級場景的廣泛兼容（包容），把問題最少化。我們的解決方案是：
1）「默認規(guī)則」：提供一套默認的設(shè)計規(guī)則，在現(xiàn)有的模板、組件等設(shè)計資產(chǎn)中提供示例方案，滿足簡單場景需求，直接使用即可；
2）「設(shè)計建議」：為默認規(guī)則無法滿足的復(fù)雜場景提供設(shè)計建議，讓使用者在一定的策略上自定義，同時又與默認規(guī)則保持一致的認知邏輯；
3）「設(shè)計目標(biāo)」：明確設(shè)計目標(biāo)，設(shè)計者依據(jù)設(shè)計目標(biāo)決策設(shè)計。
例如：“提交按鈕與表單輸入項對齊”是默認規(guī)則；當(dāng)需要考慮按鈕是否適合放在右下角時，則可以遵循“右下角放置“完成類”意義的操作”的使用建議；“按鈕的設(shè)計應(yīng)盡量幫助用戶避免犯錯?！眲t是設(shè)計目標(biāo)。
目前，Ant Design 會提供組件、模板等設(shè)計資產(chǎn)、官方設(shè)計指南來演示這些規(guī)則。這是也是解決一致性落地方面的基本思路。
本文將嘗試分享我們是如何思考和制定默認規(guī)則的，礙于篇幅，首先我們會聊一聊按鈕是什么，以此推論出按鈕設(shè)計應(yīng)為用戶解決的問題。接著，根據(jù)按鈕設(shè)計時的幾項基本變量，介紹我們是如何組織這些變量的設(shè)計邏輯，從而推導(dǎo)出一個較為通用的按鈕設(shè)計規(guī)則。最后講個小例子來說明按此邏輯該如何考慮設(shè)計一組按鈕。本文主要討論按鈕設(shè)計的三個基本邏輯：按鈕位置、按鈕順序、按鈕強調(diào)，后續(xù)可能會單獨開篇介紹其他常見按鈕的使用疑問。
按鈕和鏈接定義是不同的，按鈕用于發(fā)起動作，觸發(fā)相應(yīng)的業(yè)務(wù)邏輯。其與鏈接的區(qū)別在于，鏈接的作用是導(dǎo)航，但鏈接并不影響后端或前端展示上的邏輯。
然而，現(xiàn)在，按鈕和鏈接的界限越來越模糊，按鈕面臨的使用場景越來越復(fù)雜，也常出現(xiàn)用鏈接作為按鈕的場景，例如表格的操作列，通常這樣的設(shè)計通常并無大不妥。
但是筆者認為 Material 的 TextButton 的解決方案也非常棒，對 TextButton 和 Link 做了區(qū)分，當(dāng) hover 或點擊TextButton 時，會出現(xiàn)淺色背景指示控件響應(yīng)區(qū)。如果你的設(shè)計系統(tǒng)剛起步，可以考慮這個方案：https://link.zhihu.com/?target=https%3A//material.io/components/buttons/
按鈕的位置、順序、組織方式、視覺強調(diào)程度是用戶尋找按鈕的線索，通過警告色可引起注意，避免誤操作，準(zhǔn)確的文案則能夠預(yù)告按鈕的執(zhí)行結(jié)果。按鈕設(shè)計的目標(biāo)是指導(dǎo)用戶采取我們希望用戶采取的行動，盡量幫助用戶快速找到需要操作的按鈕，并了解執(zhí)行該操作的結(jié)果，同時盡可能避免誤操作。
按鈕區(qū)是專用于放置按鈕的區(qū)域，一個按鈕區(qū)內(nèi)可以有多個按鈕。因此，這里使用按鈕區(qū)位置比按鈕位置更加準(zhǔn)確。
我們確定了一個清晰的設(shè)計策略來決策按鈕區(qū)位置：應(yīng)將按鈕放置于用戶瀏覽路徑中，便于被用戶發(fā)現(xiàn)，并且應(yīng)盡量靠近其所控制的對象。在未刻意建立信息層級引導(dǎo)視覺路徑時，經(jīng)典“F”“Z”網(wǎng)頁瀏覽模式作為了我們按鈕位置放置規(guī)則的基礎(chǔ)指導(dǎo)。
Jacob Nielsen 首先提出該模式后并提供了眼球追蹤研究結(jié)果，關(guān)注流順序如下圖。按鈕跟隨內(nèi)容模式在以下的這個研究中被證明非常自然。
源自 Gutenberg diagram，用戶關(guān)注流(通常含鼠標(biāo)移動)遵循一個 Z 字形模式，它描述了西方用戶的閱讀模式，從頁面的左上角到右下角。1和4區(qū)域是相對重要的視覺落腳點，4 區(qū)域相當(dāng)于是瀏覽的終點站。（Gutenberg Diagram 是 Gutenberg 根據(jù)多年的報紙等排版經(jīng)驗總結(jié)出的假設(shè)，筆者尚未找到眼動實驗數(shù)據(jù)）
（Z Pattern 圖源：Buttons on the web--Artem Syzonenko）
我們需要認識一個概念叫「內(nèi)容塊」。內(nèi)容塊的概念略抽象，可以將整個頁面視為一個內(nèi)容塊，也將一張卡片視為一個內(nèi)容塊，或者僅僅是界面中的一個小小的內(nèi)容單元也可以視為一個內(nèi)容塊。界面中，一個內(nèi)容塊的基本構(gòu)成有三部分：Header、Body、Footer。常規(guī)來說，一個內(nèi)容塊通常闡述一個主題，Header 申明主題，Body 放置該主題的具體內(nèi)容，F(xiàn)ooter 主題的延伸信息和操作。
根據(jù)以上三個條件，推導(dǎo)出按鈕在「內(nèi)容塊」中位置的「默認規(guī)則」如下。該規(guī)則幾乎收斂了大部分圖 1 中的位置設(shè)計不一致問題。這套位置規(guī)則與 Fiori、Predix、QuickBooks 等企業(yè)級產(chǎn)品設(shè)計體系中都相近。
（默認位置規(guī)則）
同時，每個位置有一定行為意義，我們據(jù)此提供了「使用建議」來指導(dǎo)設(shè)計：
關(guān)于 FooterToolBar 中右側(cè)放置按鈕區(qū)的爭議
在彈窗中，將按鈕區(qū)放置在右側(cè)的規(guī)則已屬于習(xí)慣用法。但在整個網(wǎng)頁場景中，將 FooterToolBar 里的按鈕放置在右側(cè)是最受質(zhì)疑的，F(xiàn)ooterToolBar 是一個吸附在頁面底部的工具欄，可以保持出現(xiàn)。許多設(shè)計師認為這種狀況找到按鈕很困難，特別是在表單場景中。眾所周知企業(yè)級產(chǎn)品的表單常會遇到非常復(fù)雜的狀況，F(xiàn)ooterToolBar 正好解決了這個問題，因此這里要弄清楚的是什么時候需要用到 FooterToolBar：
1）Body 區(qū)的有部分內(nèi)容被折疊or隱藏，如內(nèi)容單屏無法展示完整內(nèi)容，表單區(qū)被多個頁簽分割；
2）Body 區(qū)的內(nèi)容復(fù)雜度高，比如有多個分組，每個分組都有獨立的按鈕區(qū)，或復(fù)雜的交互方式。這時候需要將該主題的“完成”操作區(qū)與 body 區(qū)，區(qū)分出來。
簡而言之，F(xiàn)ooter 的存在就是為了要和 Body 區(qū)分別開來。如果不是為了解決這類問題，那么讓按鈕跟隨內(nèi)容是最自然的。這個挑戰(zhàn)也引出了另一個課題，工具欄的設(shè)計規(guī)范尚待完善，emm，真是一坑更比一坑深。
關(guān)于順序，最常見的疑問是確定按鈕應(yīng)該在取消按鈕左邊還是右邊，這是一個爭論已久的話題。在彈窗中，確定按鈕和取消按鈕的順序在各設(shè)計體系中都不一樣，下圖是操作系統(tǒng)三巨頭：Apple、Google、Micrisoft 的方案。三巨頭證明了兩種主次順序都能被接受，只要在系統(tǒng)中統(tǒng)一。那 Ant Design 應(yīng)該如何選擇呢？
在決策按鈕默認的閱讀順序時我們考慮了以下四方面：
1）風(fēng)險操作
2）方向性意義
3）對話習(xí)慣
4）響應(yīng)式規(guī)則
上面順序呈現(xiàn)了各因素在決策時的權(quán)重，例如，一旦按鈕出現(xiàn)方向性含義，則權(quán)重大于對話習(xí)慣，但一旦操作存在風(fēng)險，則需優(yōu)先決策。
可能造成損失的操作，特別是破壞性操作，如果不是用戶期望點擊的按鈕，應(yīng)該盡量遠離常用按鈕。
什么是方向性含義？具有返回意義的按鈕，應(yīng)該放在左側(cè)，暗示其方向是回到之前。左圖的方案非常容易誤操作，方向錯亂挑戰(zhàn)用戶的認知習(xí)慣，因為不論是在網(wǎng)頁還是移動端界面，我們已經(jīng)都習(xí)慣了返回在左側(cè)的模式。
按照對話習(xí)慣排列按鈕。界面中的按鈕閱讀順序類似于一個用戶和電腦的對話過程，按照日常對話的順序設(shè)計按鈕閱讀順序更自然，同時讓電腦盡量顯得禮貌一點。例如，日常對話中，我們一般不會先問負面性的問題，當(dāng)用戶修改了一項設(shè)置，用戶最有可能的行為是保存這項變更，如果電腦一上來就問用戶是否要取消變更會顯得不太禮貌的亞子。因此，不太推的操作，自然會排列在靠后的順序。
指是按鈕如何在響應(yīng)式環(huán)境中優(yōu)雅的溢出。這一項條件對規(guī)則設(shè)計的影響是，我們把溢出按鈕“…”統(tǒng)一放置在最右側(cè)。
綜上所述，我們制定了第一版「默認規(guī)則」，無論左對齊右對齊，統(tǒng)一從左往右閱讀。
但這個方案遇到了問題。Ant Design 現(xiàn)有的浮窗類組件里，優(yōu)先操作的按鈕都在最右側(cè)，全部不符合這條規(guī)則。如果調(diào)整，意味著全部組件升級，這個變更將挑戰(zhàn)全部已在使用 Ant Design 的用戶習(xí)慣。這是無法被接受的，同時為了保持規(guī)則的簡單性，我們產(chǎn)出了產(chǎn)出了第二版「默認規(guī)則」，即現(xiàn)在發(fā)布的版本，左對齊從左往右閱讀，右對齊從右往左閱讀：
調(diào)整按鈕的樣式變量，呈現(xiàn)不同的視覺重量，達到分級強調(diào)目的。我們將按鈕視覺強調(diào)程度分為四級，了解其原理后，可以根據(jù)樣式變量和按鈕類型組合出需要的按鈕。
一級按鈕通常是主按鈕，突出“完成”、“推薦”的操作。一個按鈕區(qū)最多應(yīng)該使用一個主按鈕。那么一個頁面可以有多個主按鈕嗎？因為沒有足夠的反面案例支撐一個頁面不能有多個主按鈕，比較建議在一個焦點任務(wù)中，最多一個主按鈕，也可以沒有主按鈕。
也稱之為次要按鈕，可用于所有次要的按鈕行動，如果我們有許多具有相似重要性的行動在一個屏幕上，或不確定要選擇哪種按鈕，次要按鈕永遠是最安全的選擇。目前二級按鈕的視覺強調(diào)程度有些偏弱，后續(xù)我們也會考慮調(diào)優(yōu)此問題。
沒有外邊框，用鏈接色突出，例如文字按鈕。比較適合諸如“取消”“還原”等無需強調(diào)的操作。文首提到的表格操作列這類無需強調(diào)的操作也推薦使用。
并不是非常規(guī)范的按鈕，用于滿足復(fù)雜的個性化需求，當(dāng)按鈕數(shù)量特別多，并且保證用戶直識別的情況。
最后將位置、順序、視覺強調(diào)三項變量組合，可以得到一個最基礎(chǔ)的「默認規(guī)則」，用于覆蓋最簡單的場景：
前面我們提到，「默認規(guī)則」在組件、模板等設(shè)計資產(chǎn)中演示，通常無需思考直接使用即可。 那默認規(guī)則不能滿足我的需求，我不知道如何安排按鈕順序怎么辦？現(xiàn)在，我們用一個小案例來驗證如何依據(jù)設(shè)計建議決策按鈕區(qū)設(shè)計。
場景假設(shè)：我需要一個復(fù)雜的篩選條件來過濾數(shù)據(jù)，我考慮在彈窗中處理這個任務(wù)。設(shè)置完篩選條件后，我可以將這個條件保存下來以備下次使用，或直接點擊確定生效。這里面會涉及的操作包括：保存，重置條件，確定，取消。
規(guī)則設(shè)計想要簡單而又令所有人滿意是一件非常困難的事，從設(shè)計系統(tǒng)的長遠效益來看，簡單的規(guī)則更有意義，同時我們也在盡可能讓規(guī)則能夠符合習(xí)慣用法，讓用戶更容易接受和學(xué)習(xí)。關(guān)于按鈕設(shè)計規(guī)則的探討，依然存在很多問題尚待解決，歡迎大家提提供反饋，幫助我們一起完善。寫完文章后突然有點忐忑~~最后，我們在 Ant Design 官網(wǎng)上發(fā)布了一篇關(guān)于按鈕的設(shè)計指南，歡迎前往查看指正。
藍藍設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進入一起成長學(xué)習(xí)，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍藍設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍藍設(shè)計( www.cqzjtgb.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)
藍藍設(shè)計的小編 http://www.cqzjtgb.com