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

 

一個(gè)簡(jiǎn)單的按鈕需要經(jīng)歷無(wú)數(shù)次推敲，才能整合為設(shè)計(jì)語(yǔ)言。今天主講設(shè)計(jì)語(yǔ)言中的基礎(chǔ)部分，組件部分的其中一個(gè)部分-按鈕。設(shè)計(jì)語(yǔ)言從結(jié)構(gòu)上分為：基礎(chǔ)部分、規(guī)則規(guī)范部分和業(yè)務(wù)部分，后面我也會(huì)把其它部分補(bǔ)全。

基礎(chǔ)部分的畫(huà)布大小是250000×56000，共47個(gè)組件部分；規(guī)格規(guī)范部分就很龐大了（工業(yè)設(shè)計(jì)、交互設(shè)計(jì)、平面設(shè)計(jì)、設(shè)計(jì)心理學(xué)等）；業(yè)務(wù)部分是按系列來(lái)分的，有主次之分，目前只分了兩個(gè)系列（N和S），N系列對(duì)應(yīng)基礎(chǔ)組塊，S系列對(duì)應(yīng)嵌套定制組塊。我把一個(gè)系列的主系列稱為主版，把子系列稱為子版。N系列的一個(gè)子版大概有50個(gè)頁(yè)面，每個(gè)頁(yè)面又包含三種樣式，每個(gè)系列中大概有20個(gè)子系列。工程量很大，大致算了一下，要做完兩個(gè)大系列（N和S）需要做：50（頁(yè)面）x3（樣式）x20（系列數(shù)）x2（大系列類別）=6000（頁(yè)面）。

以上簡(jiǎn)單描述的這些工作，目前都是我一個(gè)人在做，這東西成型以后，做一套網(wǎng)站（從前期到上線），最快只需要15分鐘。而我做它的目的也很簡(jiǎn)單，就是希望幫助企業(yè)豎立品牌形象，并用專業(yè)知識(shí)解決他們所面臨的問(wèn)題，質(zhì)量高價(jià)格低。我的信仰是幫助企業(yè)或個(gè)人實(shí)現(xiàn)社會(huì)價(jià)值，賦予企業(yè)或個(gè)人一定的能力，讓他們?yōu)檫@個(gè)社會(huì)做一定的貢獻(xiàn)，履行一定的社會(huì)責(zé)任。先利他再利己，集體利益和集體主義優(yōu)先。從成本評(píng)估到定價(jià)，我是不賺錢(qián)，但只要我能活著，就一定履行我的社會(huì)責(zé)任。

說(shuō)的有點(diǎn)多了，言歸正傳，這章其實(shí)不難，但有些基礎(chǔ)知識(shí)需要細(xì)心講解，對(duì)于有些設(shè)計(jì)師而言廢話較多，但對(duì)于新手而言卻有可學(xué)之處，多多體諒一下吧。

目錄

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

2.按鈕的基礎(chǔ)規(guī)范

3.按鈕的字符限制

4.按鈕的交互狀態(tài)

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

這里的網(wǎng)格不是平面設(shè)計(jì)中的網(wǎng)格系統(tǒng)，是包含在繪圖工具中的網(wǎng)格功能，雖然它倆在本質(zhì)上是相同的，但現(xiàn)在先不要給它倆做過(guò)多的區(qū)分。用繪圖工具繪制網(wǎng)格能幫助我們約束模塊，使模塊的比例存在一定的關(guān)系。例如我就拿尺寸大小為137×31的按鈕A，和尺寸大小為128×32的按鈕B舉例，尺寸大小為137×31的按鈕A是不規(guī)范的，寬137和高31是不存在比例關(guān)系的。而尺寸大小為128×32的按鈕B就是規(guī)范的，寬128和高32不僅是倍數(shù)關(guān)系（128/32=4倍），而且兩個(gè)數(shù)都可以整除我們?cè)谌种性O(shè)的基數(shù)4（32/4=8，128/4=32，這里的4為基數(shù)）。

當(dāng)我們理解了按鈕的比例關(guān)系后，我們就要在繪圖工具中（AI、Ps、Sketch、Affinity Designer）找到我們的網(wǎng)格功能，設(shè)一個(gè)數(shù)為基準(zhǔn)，定其為基數(shù)，然后按照這個(gè)基數(shù)來(lái)進(jìn)行按鈕的繪制，按鈕就相對(duì)是比較規(guī)范的。因?yàn)樵O(shè)置完一個(gè)基數(shù)后，只要你在網(wǎng)格上畫(huà)按鈕，都是存在一定的比例關(guān)系的。那如何用繪圖工具設(shè)置網(wǎng)格基數(shù)呢，在Ps繪圖工具中找到：【編輯】-【首選項(xiàng)】-【參考線、網(wǎng)格和切片】- 彈出首選項(xiàng)對(duì)話框 -【網(wǎng)格 – 網(wǎng)格線間隔 / 子網(wǎng)格】- 網(wǎng)格線間隔設(shè)為【4】- 子網(wǎng)格設(shè)為【1】；

在Affinity Designer矢量工具中找到：【視圖】-【網(wǎng)格和軸管理器】- 彈出網(wǎng)格和吸附軸對(duì)話框 -【基本】- 間距設(shè)為【4】- 分割設(shè)為【1】。這里為什么要把網(wǎng)格基數(shù)設(shè)置為【4】呢。這是谷歌Material Design繪制小組件的規(guī)范，而模塊之間定義的基數(shù)則為【8】，這里的度量單位是DP，平時(shí)繪制網(wǎng)頁(yè)的話單位用px像素就可以。

2.按鈕的基礎(chǔ)規(guī)范

當(dāng)我們會(huì)運(yùn)用繪圖工具中的網(wǎng)格功能，設(shè)置基數(shù)來(lái)繪制按鈕，用熟練了就會(huì)相當(dāng)講究，每一個(gè)細(xì)小的間距都應(yīng)該符合倍數(shù)關(guān)系，不僅物理位置上能得到統(tǒng)一，視覺(jué)上也能滿足一定的美感，例如下圖所示。

當(dāng)我們理解了如何用網(wǎng)格功能繪制一個(gè)按鈕后，接下來(lái)就可以理解按鈕的邊角的曲率設(shè)置了。那我把按鈕的邊角分為三種樣式：直角、曲率圓角和圓角。直角就是邊角呈90度的角，曲率圓角和圓角的差別在于，曲率圓角的角弧度沒(méi)有那么大，而圓角的角弧度就是一半個(gè)圓。我將按鈕的曲率按照不同的樣式分布展示了出來(lái)，如下圖所示。

理解了按鈕邊角的三種樣式，要怎么設(shè)置他們呢。直角設(shè)置無(wú)曲率/90度直角。圓角就設(shè)置為50%的曲率，剛好就是半個(gè)圓。而曲率圓角就稍微有點(diǎn)麻煩，因?yàn)榍蕡A角是要根據(jù)按鈕的大小做相對(duì)的變化的。按鈕的尺寸變大曲率就應(yīng)該也隨之變大，按鈕尺寸越大差異越明顯。另外曲率弧度的值也應(yīng)該有一定的倍數(shù)關(guān)系或基數(shù)關(guān)系，例如：4/8/16, 4/6/8，4/8/12，都是可取的。

理解了如何設(shè)置網(wǎng)格基數(shù)，如何設(shè)置圓角的曲率，就要講到按鈕的常用尺寸了，要注意的是這個(gè)常用尺寸是基于Web端的，道理是相同的，就看設(shè)計(jì)師如何在移動(dòng)端上進(jìn)行設(shè)置了。常用的按鈕尺寸有：24px、32px、40px、48px，超出48px的按鈕都屬于特殊按鈕，需要進(jìn)行單獨(dú)設(shè)置的。

這里的尺寸不是死的，設(shè)計(jì)師可以根據(jù)自己的理解進(jìn)行尺寸的設(shè)置。而采用這幾個(gè)尺寸（24px、32px、40px、48px）的目的是更好的統(tǒng)一并規(guī)范按鈕，因?yàn)?4px、32px、40px、48px都是4的倍數(shù)，數(shù)與數(shù)之間也都是±8的關(guān)系，另外在繪制按鈕時(shí)尺寸也可以平分，留出按鈕上下均等的距離，另外這幾個(gè)數(shù)值從Web端的體驗(yàn)上來(lái)看，比例也是相對(duì)更合適的，所以采用這幾個(gè)數(shù)較為規(guī)范一些。

3.按鈕的字符限制

一個(gè)按鈕包含和“無(wú)圖標(biāo)”和“有圖標(biāo)”兩種形式，無(wú)圖標(biāo)比較好處理，直接把相應(yīng)文本放在按鈕中水平、垂直居中就可以了，然后再算清文本與邊框之間的距離就可以了。

那設(shè)計(jì)有圖標(biāo)的按鈕時(shí)，就要考慮把圖標(biāo)的內(nèi)邊距算出來(lái)，并與圖標(biāo)到按鈕外邊距的距離算出來(lái)。

當(dāng)我們掌握的以上幾種繪制按鈕的方法，就可以繪制出一整套符合規(guī)范的按鈕組件。

英文也一樣，英文與中文的差別在于細(xì)微的尺寸差異。英文字體結(jié)構(gòu)要比中文字體結(jié)構(gòu)看上去更小一些，英文的字符長(zhǎng)度也要比中文長(zhǎng)很多。但問(wèn)題不大，只要把控好文本/圖標(biāo)和按鈕邊角的距離，按照基數(shù)遞增，就不會(huì)有什么問(wèn)題。

4.按鈕的交互狀態(tài)

一個(gè)按鈕的交互狀態(tài)有四種，分布是：無(wú)狀態(tài)、hover（觸碰）、點(diǎn)擊后、禁止。采用的配色可以遞增（由淺到深），也可以遞減（由深到淺）。按鈕交互狀態(tài)的配色深淺也是根據(jù)整體頁(yè)面有關(guān)的。如果整體的調(diào)性偏深，配色可以遞減（由深到淺），如果整體的調(diào)性偏淺，配色可以遞增（由淺到深）。

而顏色按鈕的交互狀態(tài)是根據(jù)配色的色階決定的，同理配色遞增（由淺到深），配色遞減（由深到淺）。

另外附上一張彩色按鈕狀態(tài)效果圖，配色為明亮柔和。

這些按鈕的繪制看似簡(jiǎn)單的不得了，其實(shí)都是些高精度的工作，差一個(gè)像素點(diǎn)都不可以，當(dāng)然更需要具備一定的毅力與耐心。我覺(jué)得做設(shè)計(jì)應(yīng)該追求，重視體驗(yàn)和功能，讓形式追隨內(nèi)容，而不是內(nèi)容追隨形式，就這樣吧。

藍(lán)設(shè)計(jì)( www.cqzjtgb.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì)