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

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

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

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

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

主要按鈕

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

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

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

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

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

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

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

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

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

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

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

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

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

在某些情況下，使用一個主按鈕是恰當(dāng)?shù)?，比如?dāng)你必須從一大堆平行的對象中做選擇，或是一個設(shè)置頁面有相似的模塊化的區(qū)域，布滿了指向不同類別的選項(xiàng)。

要點(diǎn)：明確什么時候使用，和什么時候應(yīng)該避免——在一個頁面上使用超過一個的主要按鈕。

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

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

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

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

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

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

要點(diǎn)：讓你的按鈕對代碼或設(shè)計工具可響應(yīng)。用戶們將要添加?xùn)|西的——icon、標(biāo)簽、或者其他任何東西——但別擔(dān)心間距和排列會被破壞。做好了前面的工作你就可以讓它們正確地顯示了。

次要按鈕

#7. 次要 ≠ 不可用

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

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

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

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

哪一個才是不可用的？

#8. 當(dāng)心機(jī)器里的「幽靈」

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

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

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

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

其他按鈕類型

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

#9. 可變尺寸，大（或者超大/巨大/擴(kuò)展）&?。ɑ蛘呶⑿?極?。?

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

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

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

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

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

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

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

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

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

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

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

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

對于按鈕，就使用

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

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

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

原文地址：Buttons in Design Systems

原文作者：Nathan Curtis

譯文出自：掘金翻譯計劃

譯者：Funtrip

校對者：yifili09、skyar2009

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

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