如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里

小編：千萬別小看了一個按鈕，下文是關于建立一個長遠的視覺系統(tǒng)的12點建議。

我愛按鈕們。我可以用按鈕做很多事：進行下一步，做出決定，或者完成事務。有了按鈕，交互變得煥發(fā)生機。

這就是為什么按鈕們是一個設計系統(tǒng)里最重要的組成部分。非常簡單，它們在指定的區(qū)域提供可以點擊的簡單標簽。因此，按鈕是你應用一種設計語言的基本特征的重要方式，之后你可以把特征擴展到其他更復雜的部分上。

這篇文章講的是我在一個新生系統(tǒng)中著手設計主要按鈕、次要按鈕、以及一大堆其他類型按鈕的時候所學習到的 12 條經(jīng)驗。

主要按鈕

#1. 設定一個系統(tǒng)的風格基調(diào)

一個按鈕就像是系統(tǒng)視覺風格中最純粹的原子表達（譯者注：原子是化學反應中不可分割的最小微粒）。它結(jié)合了三大屬性——顏色、字體以及圖像——這些成為了一個原子中不可分割的部分。按鈕也引發(fā)了對空間的討論：內(nèi)部填充（特別是標簽的左、右）和邊距（與其他元素相鄰）。最后，按鈕甚至可以表達更深層次的東西，比如圓角（通過邊緣半徑），比如提升效果（通過邊框陰影）。

要點：你應該贊同按鈕是一個系統(tǒng)風格的首要展現(xiàn)。如果你把按鈕的定義與顏色、大小、空間或其他細節(jié)等新的變量聯(lián)系起來，那將會是很好的加分項。

按鈕這樣一個簡單的元素包含了范圍廣泛的屬性。

#2. 設定一個語言基調(diào)

幸運的是，「點擊這里」的講法已經(jīng)是過去式了。但我們?nèi)匀恍枰卮穑阂粋€按鈕上的標簽可以有多長？標簽是用祈使句寫的嗎（比如「保存」或「關閉」）？我應該用一個對象（「文檔」）來匹配一個動詞（「保存」）嗎？這些常用的標簽有一些默認的用處么？ 我們是否需要引入品牌聲音？

要點：我發(fā)現(xiàn)按鈕的價值是通過標簽的引導來推動一個一致性的聲音。當然，單詞表和深層次的文案標準可以在具體的文檔中找到，比如說語言和語調(diào)的指南。但無論如何，要把各種指引橋接在一起，按鈕是一個絕佳的元素。

#3. 在背景變得復雜時使用反轉(zhuǎn)色

大部分按鈕在白色的背景上都可以正常工作。但是當你把按鈕放到一張照片上又會發(fā)生什么呢？或者深色的背景上呢？誒，它甚至可能被放到一個淺色的中性顏色上？你的按鈕可以被用到任何地方嗎？你可以更改主要按鈕的顏色嗎？

要點：請在一個清晰可見的背景上展示你的按鈕，并且設定一個反轉(zhuǎn)色備用——白色？一個完全不同的顏色？或是半透明？——在背景灰暗時使用。當在編排文檔時，在一系列有普遍性的背景上展示備用的亮色或暗色來把標準搞清楚。

在不同的背景上展示按鈕，看看它們看起來是不是都好

#4. 限制每頁只有一個按鈕，除非要重復主要操作

按鈕可以引起動作。我們經(jīng)常用一個主要的按鈕，把用戶的注意力吸引到頁面里高優(yōu)先級的操作上。但是，如果有一大堆按鈕散落在頁面上，我們就無法區(qū)分出它們的優(yōu)先級的先后了。（除非它們都是一樣的，對吧？）

在某些情況下，使用一個主按鈕是恰當?shù)模热绠斈惚仨殢囊淮蠖哑叫械膶ο笾凶鲞x擇，或是一個設置頁面有相似的模塊化的區(qū)域，布滿了指向不同類別的選項。

要點：明確什么時候使用，和什么時候應該避免——在一個頁面上使用超過一個的主要按鈕。

#5. 設計并建立一個按鈕的交互特征

按鈕是最原始的交互，并隨著交互變化。只展示按鈕在頁面加載時的樣子，并告訴開發(fā)者「這就是按鈕的設計！」顯然是不夠好的。相反，應該由設計師來展示一個按鈕在許多不同的狀態(tài)下應該出現(xiàn)的樣式：默認、懸停、焦點狀態(tài)（「一圈光環(huán)」），按下/活動中，甚至一個旋轉(zhuǎn)的加載動畫。

要點：在資料中附上一個動畫展示（把按鈕放到頁面里！），它可以展示按鈕的各種狀態(tài)而不需要閱讀者親自來互動。閱讀文檔不是一個尋寶游戲。像 Material Design 的指南那樣做一個演示視頻將會很加分。

#6. 讓多元素更具有靈動性

將按鈕上的文字與 icon 配對可以讓用戶更快地識別和更易理解。

但是等等！我認為按鈕應該處于可被預見的可點擊區(qū)域內(nèi)。當你添加了一個新元素，即使是一個簡單的 icon，按鈕的布局都不應該被破壞。要應對不可預見的元素揭示了間距和內(nèi)部對齊等討厭的問題。你會想要讓他們的布局更加平緩，特別是按鈕包括了標簽、icon 和其他部件的時候。

要點：讓你的按鈕對代碼或設計工具可響應。用戶們將要添加東西的——icon、標簽、或者其他任何東西——但別擔心間距和排列會被破壞。做好了前面的工作你就可以讓它們正確地顯示了。

次要按鈕

#7. 次要 ≠ 不可用

沒有誰希望看到灰色的按鈕

但你可能發(fā)現(xiàn)你需要為那個吸引人的、高飽和度的主要按鈕匹配一個次要按鈕。你避免了使用第二個高飽和度的顏色，因為這會導致兩個高飽和度的按鈕彼此相鄰，就像綠色表示保存，藍色表示提交。不說用戶，就連你自己也不知道哪個按鈕更重要。

所以，你可能會選擇使用中性顏色。中性顏色看起來接近或完全是灰色。并且它看上去像是表達不可用。更糟糕的是，當主要按鈕不可用的時候它也會變成灰色。并且就在你灰色的次要按鈕旁邊。哎。:-(

要點：同時處理次級按鈕的顏色和不可用按鈕的顏色。確保所有選項在一起時都可以正常工作并且都容易可見。

哪一個才是不可用的？

#8. 當心機器里的「幽靈」

「幽靈按鈕」通常只依賴于相同顏色的邊框和標簽，而缺乏填充背景色。這樣的標簽背后的區(qū)域是不確定的。有時候標簽在白色上（是的，那很容易被看清！）。然而，在其他時候一個純色或者細節(jié)豐富的照片都可以讓標簽變得很難閱讀。

「幽靈」讓設計師在設計高對比度的主要按鈕時想要偷懶。然而，把他們稱為「幽靈」是有原因的。因為很多時候它們會無法被看見。我觀察了「幽靈按鈕」被難以查看的圖片覆蓋的情況下的可見性測試。參與者看不清它們或很難閱讀它們。這將會削弱或破壞我們原本打算讓這個按鈕實現(xiàn)的交互的價值。

要點：在一個系統(tǒng)中使用「幽靈按鈕」是將你自己的設計置于為危險中。我觀察到的情況表明「幽靈按鈕」的表現(xiàn)比填充色還要差。此外，你可能只是想避免花費幾個小時來傾聽關于這個問題的極端設計師辯論。

幽靈按鈕——即使在簡單的情況下——表現(xiàn)也是有問題的。你想要在不可預測的背景上使用它？忘掉這回事吧。

其他按鈕類型

很快，系統(tǒng)的用戶們就需要你提供那些其他的按鈕。大一點或者小一點的按鈕。帶有菜單或工具欄可切換的按鈕。這取決于你的系統(tǒng)是否足夠完整。

#9. 可變尺寸，大（或者超大/巨大/擴展）&小（或者微小/極小）

交互可以在重要的地方比如卡片元素或側(cè)邊欄模塊中找到。有時，你需要在一個全屏的圖片上放上一個巨大的按鈕來引起用戶關注。

要點：在有必要的時候調(diào)整按鈕的尺寸大小，盡可能像其他的 CSS 類或者設計軟件的風格一樣簡潔。此外，考慮一個更難忘的名字——比如「擴展」或「微小」——而不是一個平淡的「大」或「小」

#10. 區(qū)分按鈕與鏈接

在扁平化設計的時代，像 Material Design 這樣的視覺系統(tǒng)使用了多種「扁平」按鈕，來用在工具欄、對話框操作和行內(nèi)文本渣。在默認狀態(tài)下，按鈕和鏈接幾乎沒有視覺差異。然而，一個按鈕的狀態(tài)和行為，與簡單的錨標簽相比，會帶來完全不同的效果。

要點：如果你的系統(tǒng)使用了扁平化的版本，應該確保它的常規(guī)使用——在設計和代碼中——都有別于鏈接。此外，這條準則應該涵蓋所有復雜交互。例如焦點和被按下的狀態(tài)，間距和對齊方式。

#11. 使用菜單和區(qū)塊豐富按鈕的多樣性

可變的按鈕可以觸發(fā)相關的菜單選項來進行選擇。許多系統(tǒng)在 UI 位置緊張時提供了復合式的選項，就像菜單（或下拉菜單）和分割（或分段式）按鈕。

一個菜單按鈕可以指示當前的選項（例如已經(jīng)選擇了 Arial 作為字體）或者打開一個獨立選項（例如分享或打印）。在右側(cè)添加一個小箭頭的圖標，你還可以得到一個額外的獨立區(qū)域來布局一個菜單，同時左側(cè)的區(qū)域可以觸發(fā)一個獨立的主要操作。

要點：你可以用菜單式的按鈕來豐富你的 App 的選項，但需要謹慎。這樣的按鈕和它們的區(qū)域分割（左側(cè)主要操作，右側(cè)菜單）可以支持許多種情況，但這也帶來了更高的開發(fā)成本和學習成本。對設計更簡潔的網(wǎng)站來說，不要用這些不常用的替代方案來破壞了原有的架構(gòu)。

#12. 從開關到工具欄，讓按鈕們工作地更和諧

按鈕可以成組使用。一個按鈕組常常搭配一個主要選項和一個或多個次要選項。一個開關按鈕常常用來表示開關（比如粗體）或者顯示一個設置菜單的選項（就像文本對齊選項的左對齊、右對齊、居中或兩端對齊）。在它們最廣泛的用法中，一個工具欄可以把許多不同類型的按鈕搭配在一起：主要的、次要的、開關、菜單、部件。

要點：當你在拓展按鈕的種類時，你應該試著讓按鈕們在一個緊張的空間內(nèi)做一個壓力測試，并且嘗試多種不同的組合。視覺系統(tǒng)的設計師們不是算命先生，沒有辦法預測未來。但是探索一個不同情形下的合理狀態(tài)，可以幫助你避免厭惡情緒或一條道走到黑。

對于按鈕，就使用

有一個很好的關于學習按鈕代碼的寶庫。這篇 CSS 技巧的文章什么時候使用按鈕元素（和關于它的活躍的討論）是一個很好的開始。

要點：學習代碼原型來了解常規(guī)的按鈕和可行性。你可以認真閱讀 Alex Lande 的 Anchors, Buttons, and Accessibility 和 CSSKarma 的 Meet the Polybutton, An Accessibility Polyfill ，通過這樣的文章，你將可以慢慢得到進步。

想要開始著手視覺系統(tǒng)的設計，或者需要深入討論產(chǎn)品和用戶？ EightShapes 會進行系統(tǒng)的專題研討會并且在視覺系統(tǒng)設計上指導客戶。讓我們聊一聊吧？

原文地址：Buttons in Design Systems

原文作者：Nathan Curtis

譯文出自：掘金翻譯計劃

譯者：Funtrip

校對者：yifili09、skyar2009

來源：學UI網(wǎng) ? 視覺系統(tǒng)中的按鈕

藍藍設計( www.li-bodun.cn )是一家專注而深入的界面設計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務