大廠高手出品！中臺組件設(shè)計指南：按鈕篇

希望接下來每一篇關(guān)于中臺組件的分享都對大家有所幫助，本文主要分享中臺組件按鈕的發(fā)展史、按鈕的類型、按鈕的使用規(guī)范等內(nèi)容。

如何解決在眾多個產(chǎn)品與眾多個設(shè)計師協(xié)同下視覺風(fēng)格和交互的統(tǒng)一問題，如何解決目前組件庫未統(tǒng)一帶來的資源浪費問題，如何解決后續(xù)設(shè)計和開發(fā)效率問題，規(guī)范功能和用戶體驗、提升研發(fā)質(zhì)量，漸進(jìn)迭代優(yōu)化呢？根據(jù)以上問題我們要做的是制定一套服務(wù)于字節(jié)跳動旗下商業(yè)產(chǎn)品中臺系統(tǒng)的設(shè)計語言，為打造更好的商業(yè)產(chǎn)品體驗。它可以幫助設(shè)計師學(xué)習(xí)并熟悉字節(jié)跳動商業(yè)產(chǎn)品設(shè)計的原則和設(shè)計規(guī)范，促進(jìn)設(shè)計師對產(chǎn)品理解加深對業(yè)務(wù)認(rèn)知，保證設(shè)計產(chǎn)出質(zhì)量和一致性，降低不恰當(dāng)設(shè)計出現(xiàn)的概率。通過的規(guī)范設(shè)計語言進(jìn)行封裝打包成一套，提供給設(shè)計師與技術(shù)研發(fā)。

首先給大家分享關(guān)于按鈕的一些規(guī)范。

什么是按鈕

首先我要給大家分享的是關(guān)于用戶界面中基礎(chǔ)組件中的按鈕，它是標(biāo)記了一個操作命令，響應(yīng)用戶點擊行為，用戶點擊觸發(fā)得到相應(yīng)的業(yè)務(wù)邏輯和結(jié)果，按鈕只需輕按一下即可采取行動并得到相應(yīng)的結(jié)果，按鈕有五種類型：主要按鈕、默認(rèn)按鈕、虛線按鈕、信息提示按鈕、文字鏈接按鈕。

雖然按鈕在用戶界面中是一個非常小的設(shè)計元素，但是按鈕在用戶界面中有著不可取代的地位，在我們?nèi)粘Ｊ褂玫挠脩艚缑嬷兴梢允谴_認(rèn)按鈕、取消按鈕、返回按鈕、刪除按鈕等，這些操作在用戶界面中是一個非常重要的操作功能，當(dāng)然他在設(shè)計圈的風(fēng)格迭代也是極速的。

按鈕的起源

最早期從愛迪生發(fā)明電燈泡以后，按鈕就開始與我們的生活有著密集的聯(lián)系，到后來人們進(jìn)入電器時代開始使用電視、收音機(jī)、電話等，它們都是需要使用按鈕來操控開關(guān)，因而開關(guān)被廣泛使用，可以說明人們使用按鈕的習(xí)慣早在幾十年前就已經(jīng)培養(yǎng)成。90 年代，互聯(lián)網(wǎng)行業(yè)興起，按鈕才開始出現(xiàn)在用戶界面中，直到蘋果公司 CEO 喬布斯正式推出了智能電話 iPhone，它取消了實體按鍵的界面操作而采用了觸摸屏技術(shù)使用屏幕的虛擬按鈕，與此同時， UI 這個職位也慢慢形成。

按鈕風(fēng)格發(fā)展史

1. 3D風(fēng)格

什么是 3D 風(fēng)格呢？其實從早期 Windows 95 操作系統(tǒng)開始，按鈕設(shè)計的以灰色為使用，微妙的高光、浮雕、陰影構(gòu)成，視覺是一種 3D 效果，操作系統(tǒng)的按鈕就依賴于浮雕和陰影的外觀來區(qū)分它們與周圍環(huán)境的區(qū)別，使按鈕在背景襯托下更加的突出并且更加的像可點擊的。這種設(shè)計解決方案基于簡單的原理，使用邊框、漸變和陰影使元素突出背景和內(nèi)容，這使其易于識別為可點擊元素。

2. 擬物風(fēng)格

什么是擬物風(fēng)格呢，其實在蘋果公司采用了觸摸屏而取消了實體按鈕的交互操作以后，為了引導(dǎo)用戶在使用界面操作時點擊按鈕，將按鈕的視覺保持真實實體按鈕的樣式。從擬物風(fēng)格的字面意思大家也能大致了解到，它是指用戶界面中每個組件的視覺設(shè)計都是根據(jù)現(xiàn)實世界中的實物進(jìn)行模擬設(shè)計，如實物中紋理、材質(zhì)、外觀等進(jìn)行模擬復(fù)現(xiàn)。

就拿下面的播放器舉例，可以看到圖中的播放器外觀都是模仿現(xiàn)實生活中風(fēng)靡一時的 MP3 播放器進(jìn)行的設(shè)計，不論是材質(zhì)、外觀樣式、紋理、光感等都進(jìn)行了 1:1 復(fù)制。當(dāng)然，還是蘋果引領(lǐng)了當(dāng)年的擬物風(fēng)格。

3. 扁平風(fēng)格

2013 年，蘋果在 iOS 7 的操作系統(tǒng)上將用戶界面的元素?fù)Q成了扁平風(fēng)格，摒棄了當(dāng)年的擬物化設(shè)計，還引起了設(shè)計界的一波爭議。不過隨著時間的流逝，人們也開始接受了扁平風(fēng)格，到現(xiàn)在 90% 以上的用戶界面都采用了扁平風(fēng)。扁平風(fēng)格不再追求對真實世界物體的外觀還原，而是將用戶界面的設(shè)計元素極力簡化。

當(dāng)然也有一些設(shè)計師或公司一直追隨著擬物風(fēng)格，并一直堅持著，比如說錘子手機(jī)的界面還保持著擬物風(fēng)格，游戲界面中的按鈕也是為了保持游戲的真實感受也一直采用的是擬物設(shè)計。

5. 微寫實

2014 年 Google 發(fā)布了 Material Design，在扁平按鈕的基礎(chǔ)上添加了微小的陰影、高光，加強(qiáng)了按鈕在界面中的層次感，它不局限于徹底的擬物風(fēng)和扁平風(fēng)，而是把兩者結(jié)合起來形成了微寫實風(fēng)格。漸漸的設(shè)計師們開始將這種風(fēng)格應(yīng)用到實際的用戶界面中，之后設(shè)計師把漸變、彌散彩色投影也融入到按鈕當(dāng)中，至此，按鈕不再強(qiáng)調(diào)所謂的三維感，而是強(qiáng)調(diào)其本身的質(zhì)感，在界面突出按鈕。

按鈕解刨

1. 使用場景

• 對話框
• 氣泡
• 表單
• 卡片
• 表格
• 列表
• 時間選擇
• 日期選擇

2. 按鈕類型

按鈕有五種類型：主要按鈕、默認(rèn)按鈕、虛線按鈕、信息提示按鈕、文字鏈接按鈕。

主要按鈕

高度強(qiáng)調(diào)特性，他與主操作強(qiáng)相關(guān)，通過使用填充容器顏色引導(dǎo)用戶視覺聚焦在按鈕之上，視覺比較突出，強(qiáng)用戶點擊的按鈕。

常規(guī)類型

它是單純的使用純色填充背景容器與文字組合形成。

帶圖標(biāo)類型

此類型是在常規(guī)類型的按鈕基礎(chǔ)上添加圖標(biāo)，在文本旁邊放置圖標(biāo)，以澄清操作并引起對按鈕的注意。

狀態(tài)

通過改變其填充顏色的灰度和亮度來表達(dá)不同的狀態(tài)，按鈕 5 種狀態(tài)分別是 Normal、Hover、Press、Disabled、Active，給予用戶不同感知。

默認(rèn)按鈕

中等強(qiáng)調(diào)，只有簡單的邊框， 它具有按鈕的功能性，又有「纖薄」的視覺美感。

常規(guī)類型

它是單純的采用基本平面形狀，沒有填充只有簡單的描邊與文字組合形成，它常常與默認(rèn)按鈕組合使用，視覺重量僅次于默認(rèn)按鈕。

帶圖標(biāo)類型

此類型是在常規(guī)類型的按鈕基礎(chǔ)上添加圖標(biāo)，在文本旁邊放置圖標(biāo)，以澄清操作并引起對按鈕的注意。

狀態(tài)

通過改變其填充顏色的灰度和亮度來表達(dá)不同的狀態(tài)，按鈕 5 種狀態(tài)分別是 Normal、Hover、Press、Disabled、Active，給予用戶不同感知。

虛線按鈕

低強(qiáng)調(diào)，只有簡單的虛線邊框， 它具有按鈕的功能性，在網(wǎng)頁中一般用作新增板塊內(nèi)容或低頻操作。

常規(guī)類型

它是單純的采用基本平面形狀，沒有填充只有簡單的描邊與文字組合形成，它常常與默認(rèn)按鈕組合使用，視覺重量僅次于默認(rèn)按鈕。

帶圖標(biāo)類型

此類型是在常規(guī)類型的按鈕基礎(chǔ)上添加圖標(biāo)，在文本旁邊放置圖標(biāo)，以澄清操作并引起對按鈕的注意。

狀態(tài)

通過改變其填充顏色的灰度和亮度表達(dá)不同的狀態(tài)，按鈕 5 種狀態(tài)分別是 Normal、Hover、Press、Disabled、Active，給予用戶不同感知。

信息提示

低強(qiáng)調(diào)，只有簡單的虛線邊框， 它具有按鈕的功能性，在網(wǎng)頁中一般用作新增板塊內(nèi)容或低頻操作。

常規(guī)類型

它是單純的使用純色填充背景容器與文字組合形成。

帶圖標(biāo)類型

此類型是在常規(guī)類型的按鈕基礎(chǔ)上添加圖標(biāo)，在文本旁邊放置圖標(biāo)，以澄清操作并引起對按鈕的注意。

狀態(tài)

通過改變其填充顏色的灰度和亮度表達(dá)不同的狀態(tài)，按鈕 5 種狀態(tài)分別是 Normal、Hover、Press、Disabled、Active，給予用戶不同感知。

文字鏈接按鈕

文本鏈接按鈕通常用于不太明顯的操作，由于文本按鈕沒有容器，它們不會分散附近內(nèi)容的注意力，視覺感受較弱。

常規(guī)類型

文本鏈接按鈕它是單純的采用文本形式，一般常用在提示文后面補(bǔ)充說明加以鏈接進(jìn)行操作。

帶圖標(biāo)類型

此類型是在常規(guī)類型的按鈕基礎(chǔ)上添加圖標(biāo)，如文本鏈接按鈕在文本旁邊放置圖標(biāo)，以澄清操作并引起對按鈕的注意。

狀態(tài)

通過改變其填充顏色的灰度和亮度表達(dá)不同的狀態(tài)，按鈕 5 種狀態(tài)分別是 Normal、Hover、Press、Disabled、Active，給予用戶不同感知。

按鈕的規(guī)范

1. 尺寸規(guī)范

網(wǎng)格設(shè)置基數(shù)

為了滿足不同的場景更好的使用，需把按鈕定義幾個尺寸，方便應(yīng)用到不同的場景，首先我們先確認(rèn)一下常規(guī)按鈕的大小 96*32，因為在設(shè)計柵格規(guī)范時，網(wǎng)格的基數(shù)設(shè)置為 4px，它不僅符合偶數(shù)的思路同時也能夠匹配多數(shù)主流的顯示設(shè)備，如中臺系統(tǒng)的用戶主流分辨率為 1440*900、1366*768、1280*800。我們可以通過設(shè)置網(wǎng)格規(guī)范幫助設(shè)計師快速搭建頁面，使用有律可循的布局空間的設(shè)計給到開發(fā)，減少溝通成本。本文主要講解按鈕，下篇文章將給大家細(xì)訴網(wǎng)頁中的柵格系統(tǒng)。

在 Sketch 中設(shè)置網(wǎng)格，在菜單欄中找「視圖」-「畫布」-「網(wǎng)格設(shè)置」-設(shè)置網(wǎng)格大小，網(wǎng)格設(shè)置的基數(shù)設(shè)置成 4px，之后在設(shè)計界面時可按照網(wǎng)格基礎(chǔ)的倍數(shù)作為組件的大小和頁面元素間距分割，如下圖：

如何判斷在組件使用時是否符合規(guī)范，可使用網(wǎng)格規(guī)范就能看到細(xì)致的差別，我們使用按鈕舉例，分別設(shè)置按鈕大為 96*32、102*34，如下圖對比可以看出 96*32 大小能夠正好卡住網(wǎng)格基準(zhǔn)線，而 102*34 大小出現(xiàn)卡住半個網(wǎng)格的情況，如下圖：

按鈕的寬度規(guī)范

在實際的頁面中，經(jīng)過調(diào)研商業(yè)化各個中臺的按鈕使用情況，達(dá)到 80% 按鈕中的文本一般為 4 個字以內(nèi)，比如一個彈窗內(nèi)容可能會出現(xiàn)兩個按鈕，取消和下一步按鈕一般會同時出現(xiàn)，在我們的規(guī)范里為了保證大部分按鈕的使用場景，需要給其給一個固定容器大小，超過容器的 padding 值以后，按鈕隨字?jǐn)?shù)的增多而變寬，如下圖顯示：

原因：固定文字內(nèi)容區(qū)容器大小，并設(shè)置好 Paading 值，超過文字內(nèi)容區(qū)按鈕隨內(nèi)容區(qū)的變化而變寬，如果文字未超過文字內(nèi)容區(qū)按鈕寬度不變。

原因：不固定文字內(nèi)容區(qū)容器大小，設(shè)置好 Paading 值，按鈕隨文字增多而變寬。

舉例：在時間業(yè)務(wù)場景效果，左邊按鈕使用符合規(guī)范，右邊按鈕使用不符合規(guī)范，如下圖：

按鈕的大小設(shè)置

通過網(wǎng)格以 4px 為基數(shù)的規(guī)律下，通過 size 為 extra large、large、middle、small、extra small 分別把按鈕尺寸設(shè)置為超大、大、中、小、超小。

2. 顏色

品牌色

品牌色代表品牌對外形象及 VI 識別，在 VI 系統(tǒng)中品牌色數(shù)量可以是一個也可以是多個，但是 VI 系統(tǒng)中品牌色運(yùn)用在組件庫中需取一個品牌色作為主題色運(yùn)用。如：運(yùn)用在 Botton、Icon、Slider、選中一般出現(xiàn)頻率高、關(guān)鍵行動點，操作狀態(tài)、重要信息高亮，圖形化等場景，突出品牌特征的地方在業(yè)務(wù)中經(jīng)常使用的顏色。

品牌色定義了從淺到深 10 個層級的色階，并進(jìn)行編號。每個顏色對應(yīng)一個代號+數(shù)字橫向展開，并從中取一個基準(zhǔn)色用作默認(rèn)值，如：品牌色為 Primary4 和 Primary3 分別為正常模式下的基準(zhǔn)色和暗色模式下的基準(zhǔn)色，如正常模式下按鈕的默認(rèn)態(tài)為 Primary4，那么 Hover 為 Primary5。在暗色模式下按鈕的默認(rèn)態(tài)為 Primary3，那么 Hover 為 Primary4，使用其它色階時同理。

正常模式

正常模式下，主要按鈕在容器、文本和圖標(biāo)（可選擇）三個元素上容器可自定義顏色，默認(rèn)容器顏色為 #2F88FF。

暗色模式

在暗色模式下顏色亮度和灰度需要有所降低，主要按鈕在容器、文本和圖標(biāo)（可選擇）三個元素上容器可自定義顏色，默認(rèn)容器顏色為 #1C68D9。

功能色

功能色為用戶界面中的特殊場景，它代表了明確的信息以及狀態(tài)，比如成功、出錯、失敗、提醒、鏈接等。規(guī)范建議在一套產(chǎn)品體系下，功能色盡量保持一致，不可過多的自定義顏色而導(dǎo)致干擾用戶的認(rèn)知體驗。

功能色定義了成功、出錯、失敗、提醒四種顏色專色專用，從淺到深 10 個層級的色階功能色板如右圖：

正常模式下的功能色

主要按鈕在容器、文本和圖標(biāo)（可選擇）三個元素上容器可自定義顏色，默認(rèn)信息按鈕容器顏色為與主色一致 #2F88FF、成功按鈕容器顏色 #66C23A、警示按鈕容器顏色 #FAAD15、錯誤按鈕容器顏色 #F45858。

暗色模式的功能色

在暗色模式下顏色亮度和灰度需要有所降低，主要按鈕在容器、文本和圖標(biāo)（可選擇）三個元素上容器可自定義顏色，默認(rèn)信息按鈕容器顏色為與主色一致 #2F88FF、成功按鈕容器顏色 #66C23A、警示按鈕容器顏色 #FAAD15、錯誤按鈕容器顏色 #F45858。

中性色

灰或飽和度低的顏色用于界面設(shè)計中字體、背景、邊框、分割線、ICON 等，從淺到深 10 個層級的色階功能色板如右圖：

3. 主題化定制

自定義主題

顏色是指用戶界面設(shè)計中使用的色彩體系，它可以建立品牌的識別性，突出內(nèi)容層級關(guān)系。基于各個平臺的業(yè)務(wù)復(fù)雜程度此規(guī)范中定義了：品牌色（可自定義）、輔助色、中性色三部分色彩，以及衍生出淺到深 10 個層級的色階供用戶選擇。顏色預(yù)設(shè)，可根據(jù)不同使用場景從預(yù)算值中獲取顏色，其中品牌色可根據(jù)不同平臺視覺識別系統(tǒng)定制，如：單獨建立一個品牌色文檔反應(yīng)您的品牌或風(fēng)格的顏色主題，其中輔色與中性色不可修改和定制。

在眾多的業(yè)務(wù)中，因為業(yè)務(wù)復(fù)雜而多樣化，一套主題色必將滿足不了使用者需求，所以我們規(guī)范中允許個性化定義主題色。以下兩種顏色是比較典型的案例，其中藍(lán)色主題顏色是作為國內(nèi)平臺使用的主題，藏藍(lán)色主題是作為國際化使用的主題。

自定義按鈕形狀

容器是組成按鈕的一個重要元素，我們把它分類歸類以下幾類，圓角：直角、圓角、純圓角；描邊：虛線、實線、填充。

寫在最后

其實設(shè)計師在日常的設(shè)計運(yùn)用組件規(guī)范時，組件設(shè)計規(guī)范確保了交互、視覺、技術(shù)研發(fā)三方的一致性，而不是對設(shè)計師的設(shè)計擴(kuò)展能力限制。因為對于更深層次的設(shè)計是需要創(chuàng)造性的，就比如為什么在公司中有組件規(guī)范還需要大量的設(shè)計師進(jìn)行頁面設(shè)計。

在我們的規(guī)范中中，有些細(xì)節(jié)比較偏公司業(yè)務(wù)制定化，所以有些規(guī)范制定時也可以根據(jù)特有的業(yè)務(wù)特性靈活應(yīng)用。

編者附：中臺設(shè)計案例實戰(zhàn)

參考文獻(xiàn)：

• https://zhuanlan.zhihu.com/p/26130595
• https://zhuanlan.zhihu.com/p/45472067
• https://material.io/