希望接下來每一篇關於中台組件的分享都對大家有所幫助，本文主要分享中台組件按鈕的發展史、按鈕的類型、按鈕的使用規範等內容。

如何解決在眾多個產品與眾多個設計師協同下視覺風格和交互的統一問題，如何解決目前組件庫未統一帶來的資源浪費問題，如何解決後續設計和開發效率問題，規範功能和用戶體驗、提升研發質量，漸進迭代優化呢？根據以上問題我們要做的是制定一套服務於字節跳動旗下商業產品中台系統的設計語言，為打造更好的商業產品體驗。它可以幫助設計師學習並熟悉字節跳動商業產品設計的原則和設計規範，促進設計師對產品理解加深對業務認知，保證設計產出質量和一致性，降低不恰當設計出現的概率。通過的規範設計語言進行封裝打包成一套，提供給設計師與技術研發。

首先給大家分享關於按鈕的一些規範。

什麼是按鈕

首先我要給大家分享的是關於用戶界面中基礎組件中的按鈕，它是標記了一個操作命令，響應用戶點擊行為，用戶點擊觸發得到相應的業務邏輯和結果，按鈕只需輕按一下即可採取行動並得到相應的結果，按鈕有五種類型：主要按鈕、默認按鈕、虛線按鈕、信息提示按鈕、文字鏈接按鈕。

雖然按鈕在用戶界面中是一個非常小的設計元素，但是按鈕在用戶界面中有着不可取代的地位，在我們日常使用的用戶界面中他可以是確認按鈕、取消按鈕、返回按鈕、刪除按鈕等，這些操作在用戶界面中是一個非常重要的操作功能，當然他在設計圈的風格迭代也是極速的。

按鈕的起源

最早期從愛迪生髮明電燈泡以後，按鈕就開始與我們的生活有着密集的聯繫，到後來人們進入電器時代開始使用電視、收音機、電話等，它們都是需要使用按鈕來操控開關，因而開關被廣泛使用，可以說明人們使用按鈕的習慣早在幾十年前就已經培養成。90 年代，互聯網行業興起，按鈕才開始出現在用戶界面中，直到蘋果公司 CEO 喬布斯正式推出了智能電話 iPhone，它取消了實體按鍵的界面操作而採用了觸摸屏技術使用屏幕的虛擬按鈕，與此同時， UI 這個職位也慢慢形成。

按鈕風格發展史

1. 3D風格

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

2. 擬物風格

什麼是擬物風格呢，其實在蘋果公司採用了觸摸屏而取消了實體按鈕的交互操作以後，為了引導用戶在使用界面操作時點擊按鈕，將按鈕的視覺保持真實實體按鈕的樣式。從擬物風格的字面意思大家也能大致了解到，它是指用戶界面中每個組件的視覺設計都是根據現實世界中的實物進行模擬設計，如實物中紋理、材質、外觀等進行模擬復現。

就拿下面的播放器舉例，可以看到圖中的播放器外觀都是模仿現實生活中風靡一時的 MP3 播放器進行的設計，不論是材質、外觀樣式、紋理、光感等都進行了 1:1 複製。當然，還是蘋果引領了當年的擬物風格。

3. 扁平風格

2013 年，蘋果在 iOS 7 的操作系統上將用戶界面的元素換成了扁平風格，摒棄了當年的擬物化設計，還引起了設計界的一波爭議。不過隨着時間的流逝，人們也開始接受了扁平風格，到現在 90% 以上的用戶界面都採用了扁平風。扁平風格不再追求對真實世界物體的外觀還原，而是將用戶界面的設計元素極力簡化。

當然也有一些設計師或公司一直追隨着擬物風格，並一直堅持着，比如說鎚子手機的界面還保持着擬物風格，遊戲界面中的按鈕也是為了保持遊戲的真實感受也一直採用的是擬物設計。

5. 微寫實

2014 年 Google 發布了 Material Design，在扁平按鈕的基礎上添加了微小的陰影、高光，加強了按鈕在界面中的層次感，它不局限於徹底的擬物風和扁平風，而是把兩者結合起來形成了微寫實風格。漸漸的設計師們開始將這種風格應用到實際的用戶界面中，之後設計師把漸變、彌散彩色投影也融入到按鈕當中，至此，按鈕不再強調所謂的三維感，而是強調其本身的質感，在界面突出按鈕。

按鈕解刨

1. 使用場景

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

2. 按鈕類型

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

主要按鈕

高度強調特性，他與主操作強相關，通過使用填充容器顏色引導用戶視覺聚焦在按鈕之上，視覺比較突出，強用戶點擊的按鈕。

常規類型

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

帶圖標類型

此類型是在常規類型的按鈕基礎上添加圖標，在文本旁邊放置圖標，以澄清操作並引起對按鈕的注意。

狀態

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

默認按鈕

中等強調，只有簡單的邊框， 它具有按鈕的功能性，又有「纖薄」的視覺美感。

常規類型

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

帶圖標類型

此類型是在常規類型的按鈕基礎上添加圖標，在文本旁邊放置圖標，以澄清操作並引起對按鈕的注意。

狀態

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

虛線按鈕

低強調，只有簡單的虛線邊框， 它具有按鈕的功能性，在網頁中一般用作新增板塊內容或低頻操作。

常規類型

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

帶圖標類型

此類型是在常規類型的按鈕基礎上添加圖標，在文本旁邊放置圖標，以澄清操作並引起對按鈕的注意。

狀態

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

信息提示

低強調，只有簡單的虛線邊框， 它具有按鈕的功能性，在網頁中一般用作新增板塊內容或低頻操作。

常規類型

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

帶圖標類型

此類型是在常規類型的按鈕基礎上添加圖標，在文本旁邊放置圖標，以澄清操作並引起對按鈕的注意。

狀態

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

文字鏈接按鈕

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

常規類型

文本鏈接按鈕它是單純的採用文本形式，一般常用在提示文後面補充說明加以鏈接進行操作。

帶圖標類型

此類型是在常規類型的按鈕基礎上添加圖標，如文本鏈接按鈕在文本旁邊放置圖標，以澄清操作並引起對按鈕的注意。

狀態

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

按鈕的規範

1. 尺寸規範

網格設置基數

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

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

如何判斷在組件使用時是否符合規範，可使用網格規範就能看到細緻的差別，我們使用按鈕舉例，分別設置按鈕大為 96*32、102*34，如下圖對比可以看出 96*32 大小能夠正好卡住網格基準線，而 102*34 大小出現卡住半個網格的情況，如下圖：

按鈕的寬度規範

在實際的頁面中，經過調研商業化各个中台的按鈕使用情況，達到 80% 按鈕中的文本一般為 4 個字以內，比如一個彈窗內容可能會出現兩個按鈕，取消和下一步按鈕一般會同時出現，在我們的規範里為了保證大部分按鈕的使用場景，需要給其給一個固定容器大小，超過容器的 padding 值以後，按鈕隨字數的增多而變寬，如下圖显示：

原因：固定文字內容區容器大小，並設置好 Paading 值，超過文字內容區按鈕隨內容區的變化而變寬，如果文字未超過文字內容區按鈕寬度不變。

原因：不固定文字內容區容器大小，設置好 Paading 值，按鈕隨文字增多而變寬。

舉例：在時間業務場景效果，左邊按鈕使用符合規範，右邊按鈕使用不符合規範，如下圖：

按鈕的大小設置

通過網格以 4px 為基數的規律下，通過 size 為 extra large、large、middle、small、extra small 分別把按鈕尺寸設置為超大、大、中、小、超小。

2. 顏色

品牌色

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

品牌色定義了從淺到深 10 個層級的色階，並進行編號。每個顏色對應一個代號+数字橫向展開，並從中取一個基準色用作默認值，如：品牌色為 Primary4 和 Primary3 分別為正常模式下的基準色和暗色模式下的基準色，如正常模式下按鈕的默認態為 Primary4，那麼 Hover 為 Primary5。在暗色模式下按鈕的默認態為 Primary3，那麼 Hover 為 Primary4，使用其它色階時同理。

正常模式

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

暗色模式

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

功能色

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

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

正常模式下的功能色

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

暗色模式的功能色

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

中性色

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

3. 主題化定製

自定義主題

顏色是指用戶界面設計中使用的色彩體系，它可以建立品牌的識別性，突出內容層級關係。基於各個平台的業務複雜程度此規範中定義了：品牌色（可自定義）、輔助色、中性色三部分色彩，以及衍生出淺到深 10 個層級的色階供用戶選擇。顏色預設，可根據不同使用場景從預算值中獲取顏色，其中品牌色可根據不同平台視覺識別系統定製，如：單獨建立一個品牌色文檔反應您的品牌或風格的顏色主題，其中輔色與中性色不可修改和定製。

在眾多的業務中，因為業務複雜而多樣化，一套主題色必將滿足不了使用者需求，所以我們規範中允許個性化定義主題色。以下兩種顏色是比較典型的案例，其中藍色主題顏色是作為國內平台使用的主題，藏藍色主題是作為國際化使用的主題。

自定義按鈕形狀

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

寫在最後

其實設計師在日常的設計運用組件規範時，組件設計規範確保了交互、視覺、技術研發三方的一致性，而不是對設計師的設計擴展能力限制。因為對於更深層次的設計是需要創造性的，就比如為什麼在公司中有組件規範還需要大量的設計師進行頁面設計。

在我們的規範中中，有些細節比較偏公司業務制定化，所以有些規範制定時也可以根據特有的業務特性靈活應用。

編者附：中台設計案例實戰

閱讀文章 >>

參考文獻：

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

未经-摩登3注册-摩登3测速官网-允许不得转载：摩登3注册-摩登3测速官网 » 無極五登錄測速_大廠高手出品！中台組件設計指南：按鈕篇