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

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

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

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

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

主要按鈕

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

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

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

按鈕這樣一個(gè)簡(jiǎn)單的元素包含了范圍廣泛的屬性。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

#6. 讓多元素更具有靈動(dòng)性

將按鈕上的文字與 icon 配對(duì)可以讓用戶(hù)更快地識(shí)別和更易理解。

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

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

次要按鈕

#7. 次要 ≠ 不可用

沒(méi)有誰(shuí)希望看到灰色的按鈕

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

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

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

哪一個(gè)才是不可用的？

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

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

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

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

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

其他按鈕類(lèi)型

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

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

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

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

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

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

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

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

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

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

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

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

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

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

對(duì)于按鈕，就使用

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

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

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

原文地址：Buttons in Design Systems

原文作者：Nathan Curtis

譯文出自：掘金翻譯計(jì)劃

譯者：Funtrip

校對(duì)者：yifili09、skyar2009

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

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