當(dāng)前位置: 首頁 > 設(shè)計資訊 > 理論文摘 > 正文

設(shè)計語言中的基礎(chǔ)部分-按鈕

2019-02-19 1914 0


 

今天主講設(shè)計語言中的基礎(chǔ)部分,組件部分的其中一個部分-按鈕。設(shè)計語言從結(jié)構(gòu)上分為:基礎(chǔ)部分、規(guī)則規(guī)范部分和業(yè)務(wù)部分,后面我也會把其它部分補(bǔ)全。


 

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


 

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


 

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

 


 


 

目錄


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

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

3.按鈕的字符限制

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


 


 

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


 

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

undefined


 

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

undefined


 

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

undefined


 


 

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


 

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

undefined


 

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

undefined


 

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

undefined


 

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

undefined


 

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

undefined


 


 

3.按鈕的字符限制


 

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


 

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

undefined


 

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


 

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

undefined


 

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


 

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


 

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

undefined


 

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

undefined


 


 

謝謝閱讀

感謝支持

 


 

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


 

記得點個贊哦



 


27
評論區(qū)(0)
正在加載評論...