中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

編輯導(dǎo)讀：制定按鈕規(guī)范可能是大家在最初接觸UI組件化時(shí)嘗試的第一個(gè)項(xiàng)目。看似簡(jiǎn)單的按鈕，在制定規(guī)范的過程中卻有不少細(xì)節(jié)值得我們思考學(xué)習(xí)。本文將從按鈕的規(guī)范化展開分析，希望對(duì)你幫助。

制定按鈕規(guī)范的流程大概會(huì)分成以下三個(gè)步驟：

1. 明確規(guī)范適用范圍
2. 收集按鈕使用的場(chǎng)景
3. 制定按鈕規(guī)范

其中制定按鈕規(guī)范又分為以下內(nèi)容：

1. 按鈕的類型
2. 按鈕的尺寸
3. 按鈕的狀態(tài)
4. 圖標(biāo)與文字的搭配
5. 多語(yǔ)言產(chǎn)品的特殊規(guī)則

一、明確規(guī)范的適用范圍

一個(gè)公司，會(huì)擁有許多設(shè)計(jì)規(guī)范。設(shè)計(jì)規(guī)范能夠統(tǒng)一產(chǎn)品的方向與體驗(yàn)，塑造一致的品牌調(diào)性。但設(shè)計(jì)規(guī)范有不同的適用范圍。根據(jù)范圍的不同，規(guī)范內(nèi)容的顆粒度也有所不同。

大致會(huì)分為以下幾個(gè)范圍：

1. 公司級(jí)別的設(shè)計(jì)規(guī)范：主要是對(duì)公司整體的用戶體驗(yàn)、品牌等方面的規(guī)范，是公司所有產(chǎn)品的指導(dǎo)基礎(chǔ)；
2. 某一類產(chǎn)品線的設(shè)計(jì)規(guī)范：在滿足公司整體設(shè)計(jì)原則的基礎(chǔ)上，對(duì)該產(chǎn)品線下的若干產(chǎn)品制定統(tǒng)一的用戶體驗(yàn)、界面語(yǔ)言、品牌形象等方面的規(guī)范；
3. 某個(gè)具體產(chǎn)品的設(shè)計(jì)規(guī)范：主要是為此產(chǎn)品制定統(tǒng)一的用戶體驗(yàn)、界面語(yǔ)言等方面的規(guī)范。

因此，在開始規(guī)范制定之前，首先要明確規(guī)范的適用的范圍，這樣才能判斷規(guī)范內(nèi)容的側(cè)重點(diǎn)與顆粒度。

這里分享的按鈕規(guī)范適用于某個(gè)具體產(chǎn)品的設(shè)計(jì)規(guī)范，因此顆粒度是最細(xì)致的，包括按鈕的尺寸/狀態(tài)等等。這一類的設(shè)計(jì)規(guī)范主要有以下目標(biāo)：

1. 設(shè)計(jì)側(cè)：能夠統(tǒng)一產(chǎn)品方向與體驗(yàn)，但同時(shí)能有一定的擴(kuò)展性
2. 用戶層：對(duì)產(chǎn)品的體驗(yàn)一致性得到落地
3. 開發(fā)側(cè)：能夠提高開發(fā)效率，減少重復(fù)工作

二、收集按鈕的使用場(chǎng)景

明確了規(guī)范的適用范圍，確定了規(guī)范內(nèi)容輸出的細(xì)致程度（即主體框架）后，我們接下來要做的是收集規(guī)范對(duì)象的使用場(chǎng)景。

我們需要盡可能收集產(chǎn)品目前已有的按鈕樣式、類型。這里不需要事先對(duì)按鈕進(jìn)行分類，只需要把我們認(rèn)為是按鈕的收集起來即可，所謂的“即可錯(cuò)殺，不可放過”。

三、按鈕的類型

接下來是需要對(duì)收集的按鈕進(jìn)行分類。這是非常關(guān)鍵的一步，按鈕的分類決定了后續(xù)的拓展性。

按鈕分類的緯度和名稱五花八門，如基礎(chǔ)按鈕、文字按鈕、圖標(biāo)按鈕、幽靈按鈕等等。這是因?yàn)椴煌钠脚_(tái)都有自己的分類原則和命名習(xí)慣。我們不必糾結(jié)具體的叫法，按鈕分類和命名的關(guān)鍵在于能夠在團(tuán)隊(duì)內(nèi)部達(dá)成一致，能夠達(dá)到制定規(guī)定的目標(biāo)，提升協(xié)作效率，就是「最合適」的分類。

以上是筆者所在團(tuán)隊(duì)制定的按鈕分類，僅供參考～

定義類型的過程不要忘記了我們緊密合作的開發(fā)童鞋。和他們一起討論哪些按鈕作為基礎(chǔ)類型，哪些按鈕可以通過提供配置項(xiàng)去實(shí)現(xiàn)，將有助于我們的設(shè)計(jì)規(guī)范在開發(fā)側(cè)的推進(jìn)，更好地實(shí)現(xiàn)按鈕組件化。

四、按鈕的尺寸

每個(gè)的平臺(tái)都會(huì)有多種不同尺寸的按鈕，具體多少種可以根據(jù)自身平臺(tái)的需要來制定，但數(shù)量建議不要超過5種，過多的尺寸不僅在使用過程中容易混淆，維護(hù)成本也在提高。同時(shí)，在制定過程中還需要同時(shí)考慮web端和移動(dòng)端之間的適配。

一個(gè)按鈕的尺寸由按鈕高度、按鈕寬度、按鈕圓角組成，下面我們逐個(gè)看看其中的細(xì)節(jié)之處。

1. 按鈕高度

每一種尺寸的按鈕對(duì)應(yīng)有一個(gè)固定的高度。一個(gè)按鈕看起來是否舒適精致，有個(gè)關(guān)鍵因素在于按鈕高度與文字大小的比例。若文字過大，整個(gè)按鈕留白過少，顯得擁擠不透氣；文字過小，整個(gè)按鈕過于寬松，甚至可能會(huì)影響按鈕的表意。

2. 按鈕寬度

按鈕的寬度是不固定的，根據(jù)按鈕文案的長(zhǎng)度會(huì)有一定的適配規(guī)則，我們應(yīng)該怎么去規(guī)范按鈕的寬度呢？

首先是按鈕寬度的適配規(guī)則。我們需要定義文字與按鈕左右的邊距，但是并不是所有尺寸的按鈕左右邊距都是一樣的，需要根據(jù)按鈕大小比例來制定。

除此之外，我們還需要定義按鈕的最小寬度，即一些臨界值。如果只有左右邊距適配規(guī)則的話，有些按鈕就會(huì)因?yàn)槲淖侄蹋拱粹o的比例變得不協(xié)調(diào)。同理，不同尺寸的按鈕的最小寬度也不一樣，需要根據(jù)按鈕的大小比例來制定。

最后是按鈕的最大寬度。按鈕的最大寬度需要符合所在容器的柵格規(guī)則。

3. 按鈕的圓角

按鈕的高度和寬度決定了按鈕的骨架，而按鈕的圓角大小則可以體現(xiàn)按鈕的氣質(zhì)。圓角越大，按鈕越圓潤(rùn)，傳達(dá)的產(chǎn)品氣質(zhì)會(huì)更年輕活波；反之按鈕圓角越小，按鈕越方正，傳達(dá)的產(chǎn)品氣質(zhì)越嚴(yán)謹(jǐn)冷靜。

因此我們需要根據(jù)自身平臺(tái)的品牌屬性去規(guī)范我們的按鈕“看起來”是多圓潤(rùn)。為什么是看起來呢？因?yàn)椴⒉皇撬谐叽绲膱A角大小都是一樣的，也需要根據(jù)按鈕的大小比例也制定。如果大按鈕和小按鈕都使用同樣的圓角，實(shí)際上它們“看起來”是不一樣的。

五、按鈕的狀態(tài)

按鈕的狀態(tài)一般分為4個(gè)狀態(tài)：正常狀態(tài)（default）、懸停狀態(tài)（hover）、按壓狀態(tài)（click）、失效狀態(tài)（disable），其中懸停狀態(tài)是Web端獨(dú)有的。

這里主要講2個(gè)點(diǎn)：

按壓狀態(tài)要注重不同客戶端的特性，如iOS和Android。按壓狀態(tài)最終的效果是一樣的，但按壓的過程不同客戶端會(huì)有其不同的特性。

按壓/失效狀態(tài)注意需要保持一種實(shí)現(xiàn)方式，確保整體的統(tǒng)一性。如不能是一種按鈕不可點(diǎn)擊狀態(tài)是降低透明度，另一個(gè)按鈕的不可點(diǎn)擊狀態(tài)是置灰。

六、圖標(biāo)與文字的搭配

有一些按鈕會(huì)用圖標(biāo)搭配文字，我們還需要去規(guī)范圖標(biāo)大小以及圖標(biāo)與文字邊距的。同理，我們依舊需要考慮按鈕的大小比例去制定具體規(guī)范。

七、多語(yǔ)言產(chǎn)品的特殊規(guī)則

對(duì)于國(guó)內(nèi)大部分的產(chǎn)品而言，一份較完整的按鈕規(guī)范已經(jīng)完成了。如果是多語(yǔ)言的產(chǎn)品（如klook/agoda/booking.com等），還需要補(bǔ)充哪些規(guī)則呢？因?yàn)楣P者目前所在團(tuán)隊(duì)設(shè)計(jì)的正是這樣一類產(chǎn)品，所以也想簡(jiǎn)單和大家分享一下：

1. 文字截?cái)嘁?guī)則

文字的長(zhǎng)度因?yàn)槎嗾Z(yǔ)言的關(guān)系是不固定的，當(dāng)達(dá)到按鈕的最大寬度，文字還是超長(zhǎng)時(shí)則需要截?cái)嗍÷浴?/p>

按鈕默認(rèn)是尾部截?cái)啵梢愿鶕?jù)不同場(chǎng)景選擇中間截?cái)嗍÷浴?/p>

2. 文字縮小規(guī)則

在一些場(chǎng)景，按鈕文字非常重要，不能夠被省略，那文字過長(zhǎng)時(shí)，常用的處理方式是縮小字號(hào)。這里要注意不同客戶端的實(shí)現(xiàn)方式有所差異，如Web端只能縮小到固定字號(hào)；而iOS和安卓則可以根據(jù)文案長(zhǎng)度自動(dòng)縮小到顯示的小為止。

文字縮小規(guī)則相對(duì)比較復(fù)雜，實(shí)際運(yùn)用過程中需要注意以下2個(gè)問題：

1. Web端因?yàn)橹荒芸s小到固定字號(hào)，需要留意是否所有的語(yǔ)言縮小到該字號(hào)都可以展示完整；
2. iOS和安卓可以縮小字號(hào)直到文字展示完整，需要注意某些語(yǔ)言下字號(hào)是否會(huì)縮得過小，影響用戶閱讀。

八、小結(jié)

以上便是關(guān)于制定按鈕規(guī)范的分享。在開始的部分我們聊了制定規(guī)范前的準(zhǔn)備工作，在這個(gè)階段最重要的是明確規(guī)范的適用范圍，即服務(wù)的對(duì)象是誰(shuí)，這樣才能幫助我們確定規(guī)范的整體框架及規(guī)范的細(xì)致程度。

而在具體的實(shí)施階段，需要注意的是多方溝通。如使用場(chǎng)景的收集，需要和不同業(yè)務(wù)的設(shè)計(jì)師溝通，確保沒有遺漏場(chǎng)景；再如按鈕的交互規(guī)則，需要和不同端的開發(fā)溝通，確保規(guī)則的合理性及可實(shí)現(xiàn)性。

希望能給大家在制作規(guī)范方面帶來一些幫助。謝謝～

本文由 @設(shè)計(jì)牛奶盒 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自Unsplash，基于CC0協(xié)議。