2017-2-19 資深UI設(shè)計者
如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里
小編：千萬別小看了一個按鈕，下文是關(guān)于建立一個長遠的視覺系統(tǒng)的12點建議。
我愛按鈕們。我可以用按鈕做很多事：進行下一步，做出決定，或者完成事務(wù)。有了按鈕，交互變得煥發(fā)生機。
這就是為什么按鈕們是一個設(shè)計系統(tǒng)里最重要的組成部分。非常簡單，它們在指定的區(qū)域提供可以點擊的簡單標簽。因此，按鈕是你應(yīng)用一種設(shè)計語言的基本特征的重要方式，之后你可以把特征擴展到其他更復(fù)雜的部分上。
這篇文章講的是我在一個新生系統(tǒng)中著手設(shè)計主要按鈕、次要按鈕、以及一大堆其他類型按鈕的時候所學(xué)習(xí)到的 12 條經(jīng)驗。
一個按鈕就像是系統(tǒng)視覺風(fēng)格中最純粹的原子表達（譯者注：原子是化學(xué)反應(yīng)中不可分割的最小微粒）。它結(jié)合了三大屬性——顏色、字體以及圖像——這些成為了一個原子中不可分割的部分。按鈕也引發(fā)了對空間的討論：內(nèi)部填充（特別是標簽的左、右）和邊距（與其他元素相鄰）。最后，按鈕甚至可以表達更深層次的東西，比如圓角（通過邊緣半徑），比如提升效果（通過邊框陰影）。
要點：你應(yīng)該贊同按鈕是一個系統(tǒng)風(fēng)格的首要展現(xiàn)。如果你把按鈕的定義與顏色、大小、空間或其他細節(jié)等新的變量聯(lián)系起來，那將會是很好的加分項。
按鈕這樣一個簡單的元素包含了范圍廣泛的屬性。
幸運的是，「點擊這里」的講法已經(jīng)是過去式了。但我們?nèi)匀恍枰卮穑阂粋€按鈕上的標簽可以有多長？標簽是用祈使句寫的嗎（比如「保存」或「關(guān)閉」）？我應(yīng)該用一個對象（「文檔」）來匹配一個動詞（「保存」）嗎？這些常用的標簽有一些默認的用處么？ 我們是否需要引入品牌聲音？
要點：我發(fā)現(xiàn)按鈕的價值是通過標簽的引導(dǎo)來推動一個一致性的聲音。當然，單詞表和深層次的文案標準可以在具體的文檔中找到，比如說語言和語調(diào)的指南。但無論如何，要把各種指引橋接在一起，按鈕是一個絕佳的元素。
大部分按鈕在白色的背景上都可以正常工作。但是當你把按鈕放到一張照片上又會發(fā)生什么呢？或者深色的背景上呢？誒，它甚至可能被放到一個淺色的中性顏色上？你的按鈕可以被用到任何地方嗎？你可以更改主要按鈕的顏色嗎？
要點：請在一個清晰可見的背景上展示你的按鈕，并且設(shè)定一個反轉(zhuǎn)色備用——白色？一個完全不同的顏色？或是半透明？——在背景灰暗時使用。當在編排文檔時，在一系列有普遍性的背景上展示備用的亮色或暗色來把標準搞清楚。
在不同的背景上展示按鈕，看看它們看起來是不是都好
按鈕可以引起動作。我們經(jīng)常用一個主要的按鈕，把用戶的注意力吸引到頁面里高優(yōu)先級的操作上。但是，如果有一大堆按鈕散落在頁面上，我們就無法區(qū)分出它們的優(yōu)先級的先后了。（除非它們都是一樣的，對吧？）
在某些情況下，使用一個主按鈕是恰當?shù)模热绠斈惚仨殢囊淮蠖哑叫械膶ο笾凶鲞x擇，或是一個設(shè)置頁面有相似的模塊化的區(qū)域，布滿了指向不同類別的選項。
要點：明確什么時候使用，和什么時候應(yīng)該避免——在一個頁面上使用超過一個的主要按鈕。
按鈕是最原始的交互，并隨著交互變化。只展示按鈕在頁面加載時的樣子，并告訴開發(fā)者「這就是按鈕的設(shè)計！」顯然是不夠好的。相反，應(yīng)該由設(shè)計師來展示一個按鈕在許多不同的狀態(tài)下應(yīng)該出現(xiàn)的樣式：默認、懸停、焦點狀態(tài)（「一圈光環(huán)」），按下/活動中，甚至一個旋轉(zhuǎn)的加載動畫。
要點：在資料中附上一個動畫展示（把按鈕放到頁面里?。梢哉故景粹o的各種狀態(tài)而不需要閱讀者親自來互動。閱讀文檔不是一個尋寶游戲。像 Material Design 的指南那樣做一個演示視頻將會很加分。
將按鈕上的文字與 icon 配對可以讓用戶更快地識別和更易理解。
但是等等！我認為按鈕應(yīng)該處于可被預(yù)見的可點擊區(qū)域內(nèi)。當你添加了一個新元素，即使是一個簡單的 icon，按鈕的布局都不應(yīng)該被破壞。要應(yīng)對不可預(yù)見的元素揭示了間距和內(nèi)部對齊等討厭的問題。你會想要讓他們的布局更加平緩，特別是按鈕包括了標簽、icon 和其他部件的時候。
要點：讓你的按鈕對代碼或設(shè)計工具可響應(yīng)。用戶們將要添加?xùn)|西的——icon、標簽、或者其他任何東西——但別擔(dān)心間距和排列會被破壞。做好了前面的工作你就可以讓它們正確地顯示了。
沒有誰希望看到灰色的按鈕
但你可能發(fā)現(xiàn)你需要為那個吸引人的、高飽和度的主要按鈕匹配一個次要按鈕。你避免了使用第二個高飽和度的顏色，因為這會導(dǎo)致兩個高飽和度的按鈕彼此相鄰，就像綠色表示保存，藍色表示提交。不說用戶，就連你自己也不知道哪個按鈕更重要。
所以，你可能會選擇使用中性顏色。中性顏色看起來接近或完全是灰色。并且它看上去像是表達不可用。更糟糕的是，當主要按鈕不可用的時候它也會變成灰色。并且就在你灰色的次要按鈕旁邊。哎。:-(
要點：同時處理次級按鈕的顏色和不可用按鈕的顏色。確保所有選項在一起時都可以正常工作并且都容易可見。
哪一個才是不可用的？
「幽靈按鈕」通常只依賴于相同顏色的邊框和標簽，而缺乏填充背景色。這樣的標簽背后的區(qū)域是不確定的。有時候標簽在白色上（是的，那很容易被看清?。?。然而，在其他時候一個純色或者細節(jié)豐富的照片都可以讓標簽變得很難閱讀。
「幽靈」讓設(shè)計師在設(shè)計高對比度的主要按鈕時想要偷懶。然而，把他們稱為「幽靈」是有原因的。因為很多時候它們會無法被看見。我觀察了「幽靈按鈕」被難以查看的圖片覆蓋的情況下的可見性測試。參與者看不清它們或很難閱讀它們。這將會削弱或破壞我們原本打算讓這個按鈕實現(xiàn)的交互的價值。
要點：在一個系統(tǒng)中使用「幽靈按鈕」是將你自己的設(shè)計置于為危險中。我觀察到的情況表明「幽靈按鈕」的表現(xiàn)比填充色還要差。此外，你可能只是想避免花費幾個小時來傾聽關(guān)于這個問題的極端設(shè)計師辯論。
幽靈按鈕——即使在簡單的情況下——表現(xiàn)也是有問題的。你想要在不可預(yù)測的背景上使用它？忘掉這回事吧。
很快，系統(tǒng)的用戶們就需要你提供那些其他的按鈕。大一點或者小一點的按鈕。帶有菜單或工具欄可切換的按鈕。這取決于你的系統(tǒng)是否足夠完整。
交互可以在重要的地方比如卡片元素或側(cè)邊欄模塊中找到。有時，你需要在一個全屏的圖片上放上一個巨大的按鈕來引起用戶關(guān)注。
要點：在有必要的時候調(diào)整按鈕的尺寸大小，盡可能像其他的 CSS 類或者設(shè)計軟件的風(fēng)格一樣簡潔。此外，考慮一個更難忘的名字——比如「擴展」或「微小」——而不是一個平淡的「大」或「小」
在扁平化設(shè)計的時代，像 Material Design 這樣的視覺系統(tǒng)使用了多種「扁平」按鈕，來用在工具欄、對話框操作和行內(nèi)文本渣。在默認狀態(tài)下，按鈕和鏈接幾乎沒有視覺差異。然而，一個按鈕的狀態(tài)和行為，與簡單的錨標簽相比，會帶來完全不同的效果。
要點：如果你的系統(tǒng)使用了扁平化的版本，應(yīng)該確保它的常規(guī)使用——在設(shè)計和代碼中——都有別于鏈接。此外，這條準則應(yīng)該涵蓋所有復(fù)雜交互。例如焦點和被按下的狀態(tài)，間距和對齊方式。
可變的按鈕可以觸發(fā)相關(guān)的菜單選項來進行選擇。許多系統(tǒng)在 UI 位置緊張時提供了復(fù)合式的選項，就像菜單（或下拉菜單）和分割（或分段式）按鈕。
一個菜單按鈕可以指示當前的選項（例如已經(jīng)選擇了 Arial 作為字體）或者打開一個獨立選項（例如分享或打印）。在右側(cè)添加一個小箭頭的圖標，你還可以得到一個額外的獨立區(qū)域來布局一個菜單，同時左側(cè)的區(qū)域可以觸發(fā)一個獨立的主要操作。
要點：你可以用菜單式的按鈕來豐富你的 App 的選項，但需要謹慎。這樣的按鈕和它們的區(qū)域分割（左側(cè)主要操作，右側(cè)菜單）可以支持許多種情況，但這也帶來了更高的開發(fā)成本和學(xué)習(xí)成本。對設(shè)計更簡潔的網(wǎng)站來說，不要用這些不常用的替代方案來破壞了原有的架構(gòu)。
按鈕可以成組使用。一個按鈕組常常搭配一個主要選項和一個或多個次要選項。一個開關(guān)按鈕常常用來表示開關(guān)（比如粗體）或者顯示一個設(shè)置菜單的選項（就像文本對齊選項的左對齊、右對齊、居中或兩端對齊）。在它們最廣泛的用法中，一個工具欄可以把許多不同類型的按鈕搭配在一起：主要的、次要的、開關(guān)、菜單、部件。
要點：當你在拓展按鈕的種類時，你應(yīng)該試著讓按鈕們在一個緊張的空間內(nèi)做一個壓力測試，并且嘗試多種不同的組合。視覺系統(tǒng)的設(shè)計師們不是算命先生，沒有辦法預(yù)測未來。但是探索一個不同情形下的合理狀態(tài)，可以幫助你避免厭惡情緒或一條道走到黑。
有一個很好的關(guān)于學(xué)習(xí)按鈕代碼的寶庫。這篇 CSS 技巧的文章什么時候使用按鈕元素（和關(guān)于它的活躍的討論）是一個很好的開始。
要點：學(xué)習(xí)代碼原型來了解常規(guī)的按鈕和可行性。你可以認真閱讀 Alex Lande 的 Anchors, Buttons, and Accessibility 和 CSSKarma 的 Meet the Polybutton, An Accessibility Polyfill ，通過這樣的文章，你將可以慢慢得到進步。
想要開始著手視覺系統(tǒng)的設(shè)計，或者需要深入討論產(chǎn)品和用戶？ EightShapes 會進行系統(tǒng)的專題研討會并且在視覺系統(tǒng)設(shè)計上指導(dǎo)客戶。讓我們聊一聊吧？
原文地址：Buttons in Design Systems
原文作者：Nathan Curtis
譯文出自：掘金翻譯計劃
譯者：Funtrip
來源：學(xué)UI網(wǎng) ? 視覺系統(tǒng)中的按鈕
藍藍設(shè)計( www.miumiuwan.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)
藍藍設(shè)計的小編 http://www.miumiuwan.com