幾何

巨量引擎是字節跳動旗下的營銷服務品牌,服務于字節跳動的商業化?;趪鴥葟V告產品不斷優化,產品數量不斷增加,產品的不斷迭代,產品構架和結構不斷復雜化,已有的產品框架不足以支撐現有的需求,包括其國際化產品及業務增長迅速。

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

首頁給大家分享關于按鈕的的一些規范

重點概覽

  • 1. 什么是按鈕
  • 2.?按鈕的起源
  • 3.?按鈕風格發展史
  • 4.?按鈕解刨
  • 5.?按鈕的基礎規范
  • 6.?寫在最后

 

一、什么是按鈕

首先我給要大家分享的時是關于用戶界面中基礎組件中的按鈕,它是標記了一個操作命令,響應用戶點擊行為,用戶點擊觸發得到相應的業務邏輯和結果,按鈕只需輕按一下即可采取行動并得到相應的結果

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

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

 

二、按鈕的起源

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

三、按鈕風格發展史

3.1 3D風格

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

 

3.2 擬物風格

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

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

 

3.3 扁平風格

2013年,蘋果在iOS7的操作系統上用戶界面的元素使用了扁平風格,摒棄了當年風靡一時的擬物化設計,當時還引起了設計界的一波爭議,隨著時間慢慢的人們也開始接受了扁平風格,到現在90%以上的用戶界面都采用了扁平風。扁平風格其實在UI設計中是將之前的3D效果轉向了更平面的效果,扁平風格不再追求對真實世界物體的外觀還原,而是將用戶界面的設計元素極力簡化。

當然也有一些設計師或公司一直追隨著擬物風格,并一直堅持著,比如說錘子手機的界面還保持著擬物風格,游戲界面中的按鈕也是為了保持游戲的真實感受也一直采用的是擬物設計。

 

3.4 微寫實

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

 

四、按鈕解刨

4.1 使用場景

– 對話框

–?氣泡

–?表單

–?卡片

–?表格

–?列表

–?時間選擇

–?日期選擇

 

4.2 按鈕類型

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

 

4.2.1 主要按鈕

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

常規類型

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

 

帶圖標類型

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

 

狀態

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

 

4.2.2 默認按鈕

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

常規類型

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

 

帶圖標類型

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

 

狀態

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

 

4.2.3 虛線按鈕

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

常規類型

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

 

帶圖標類型

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

 

狀態

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

 

4.2.4 信息提示

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

常規類型

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

 

帶圖標類型

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

 

狀態

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

 

4.2.5 文字鏈接按鈕

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

常規類型

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

 

帶圖標類型

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

 

狀態

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

 

五、按鈕的規范

5.1 尺寸規范

5.1.1 網格設置基數

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

在Sketch中設置網格,在菜單欄中找【視圖】-【畫布】-【網格設置】-彈出浮層可設置網格大小,網格設置的基數設置成4px,之后在設計界面時可按照網格基礎的倍數作為組件的大小和頁面元素間距分割,如下圖:

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

 

5.1.2 按鈕的寬度規范

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

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

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

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

 

5.1.3 按鈕的大小設置

通過網格以4px為基數的規律下,通過sizeextra large、large、middle、small、extra small分別把按鈕尺寸設置為超大、大、中、小、超小,在常規使用時則尺寸為中。

 

5.2 顏色

5.2.1 品牌色

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

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

– 正常模式

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

 

– 暗色模式

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

 

5.2.2 功能色

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

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

 

-正常模式下的功能色

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

 

– 暗色模式的功能色

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

5.2.3 中性色

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

 

5.3 主題化定制

5.3.1 自定義主題

顏色是指用戶界面設計中使用的色彩體系,它可以建立品牌的識別性,突出內容層級關系?;诟鱾€平臺的業務復雜程度此規范中定義了:品牌色(可自定義)、輔助色、中性色三部分色彩,以及衍生出淺到深10個層級的色階供用戶選擇。顏色預設,可根據不同使用場景從預算值中獲取顏色,其中品牌色可根據不同平臺視覺識別系統定制,如:單獨建立一個品牌色文檔反應您的品牌或風格的顏色主題,其中輔色與中性色不可修改和定制。

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

 

5.3.2 自定義按鈕形狀

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

 

寫在最后

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

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

 

參考文獻:

https://zhuanlan.zhihu.com/p/26130595

https://zhuanlan.zhihu.com/p/45472067

https://material.io/

 

原文地址:站酷

作者:熊細輝Neo

 

轉載請注明:學UI網 » 中臺設計組件-按鈕

登錄收藏
 
你可能喜歡的:
帶你重新認識十大設計心理學原則帶你重新認識十大設計心理學原則
設計,只有基于用戶的使用場景才會產生價值設計,只有基于用戶的使用場景才會產生價值
語音用戶界面設計 - 對話式體驗設計原則語音用戶界面設計 – 對話式體驗設計原則
所有設計師都應該懂的動效設計所有設計師都應該懂的動效設計
如何正確地使用色塊排版?如何正確地使用色塊排版?
0-1系列:目標推導與策略制定0-1系列:目標推導與策略制定
【新系列】十萬個為什么設計-為什么你設計的信息用戶總是看不見【新系列】十萬個為什么設計-為什么你設計的信息用戶總是看不見
UI/UX設計中的7±2法則,可能不是你想的那樣!UI/UX設計中的7±2法則,可能不是你想的那樣!
通過復盤來反思設計的3個層級,始作俑者的價值驅動通過復盤來反思設計的3個層級,始作俑者的價值驅動
為什么,人們喜歡簡單,卻購買復雜!(上)為什么,人們喜歡簡單,卻購買復雜!(上)
?
天津十一选五app