雖然說(shuō)這篇與上篇的標(biāo)題相同，但內(nèi)容卻是完全不同的。這篇講的更細(xì)化，實(shí)操性更強(qiáng)。另外呢，設(shè)計(jì)語(yǔ)言這個(gè)系列我寫的較為隨意，不像寫平面設(shè)計(jì)知識(shí)那樣更嚴(yán)謹(jǐn)，如果哪里有講的不對(duì)的地方，也希望大家多多批評(píng)，多多指點(diǎn)。當(dāng)然也要感謝大家的支持，感謝你們。
目錄
1.解構(gòu)按鈕
2.網(wǎng)格基數(shù)
3.按鈕的寬高
4.按鈕的曲率
5.按鈕中添加字符
6.按鈕中添加功能
1.解構(gòu)按鈕
首先得先解構(gòu)一個(gè)按鈕，把按鈕中各個(gè)元素都提取出來(lái)。按鈕的繪制過(guò)程：先設(shè)一個(gè)網(wǎng)格基數(shù)（一般為4px） - 繪制一個(gè)寬與高存在比例關(guān)系的矩形（固定寬度的情況下） - 添加字符（中英文） - 添加按鈕（功能） - 調(diào)整距離（字符/按鈕與矩形之間的距離） -完成。下圖就是一個(gè)按鈕的線稿與正常按鈕的對(duì)比圖。
2.網(wǎng)格基數(shù)
繪制一個(gè)按鈕的第一步，就是設(shè)置網(wǎng)格基數(shù)。如果網(wǎng)格基數(shù)不設(shè)置4px而設(shè)置3px，那當(dāng)我們畫一個(gè)高度為45px的時(shí)間選擇器時(shí)，得知右面“上”的圖標(biāo)高度就是45/2=22.5px，這里出了小數(shù)點(diǎn)，22.5px中包含7個(gè)網(wǎng)格位，并多出了1.5個(gè)px，即22.5-21（3x7網(wǎng)格位）=1.5px的空位，1.5px<3px。所以網(wǎng)格基數(shù)設(shè)置為3px它是不規(guī)范的。在下圖中也做出了相應(yīng)的解釋。
我把圖上按鈕中為“上”的這個(gè)圖標(biāo)拆解出來(lái)，再來(lái)分析它。圖標(biāo)寬高為22.5px，多出了1.5px的。如果寬高為21px，就剛好是7個(gè)網(wǎng)格位。所以說(shuō)把網(wǎng)格的基數(shù)設(shè)為3px，在繪制模塊時(shí)會(huì)出現(xiàn)小數(shù)位，小數(shù)位不滿一個(gè)網(wǎng)格位，則網(wǎng)格基數(shù)設(shè)為3px就是不規(guī)范的。
規(guī)范的尺寸有16px、24px、32px、48px等，都是4的倍數(shù)。不管是前端制作，切圖還是設(shè)計(jì)都比較精確的。
3.按鈕的寬高
當(dāng)我們繪制按鈕并選擇寬高時(shí)，要看它的字?jǐn)?shù)是“固定的”還是“隨之變化的”。字?jǐn)?shù)固定指的是像“確認(rèn)按鈕”這樣永遠(yuǎn)都只有兩個(gè)字的情況。而隨之變化指的是，按鈕的寬度要隨著字?jǐn)?shù)的變化而變化。在字?jǐn)?shù)固定的情況下，按鈕的寬高可以采用倍數(shù)關(guān)系，即按鈕“寬80px/高40px“的兩倍。
但要注意的是，在按鈕寬度隨著字符數(shù)的變化而變化時(shí)，按照比例來(lái)繪制按鈕的寬高，造成的視覺(jué)效果不理想，就可以不采用倍數(shù)關(guān)系，直接用網(wǎng)格基數(shù)來(lái)繪制按鈕。例如：按鈕“寬88px/高32px”。
繪制矩形要像人體比例那樣，具有隱性的比例關(guān)系。這種比例關(guān)系直觀上是看不出來(lái)的，但身體比例和諧的人，看上去就是有一定的美感的。我們做設(shè)計(jì)語(yǔ)言也一樣，看上去這個(gè)按鈕很普通，但實(shí)際是很多規(guī)則約束出來(lái)的。
4.按鈕的曲率
按鈕的曲率要針對(duì)不同的業(yè)務(wù)需求選用不同的數(shù)值。如果統(tǒng)一了按鈕曲率，當(dāng)對(duì)應(yīng)很多高度與間距不同的產(chǎn)品時(shí)，會(huì)造成幾個(gè)產(chǎn)品中按鈕曲率不和諧的問(wèn)題。間距和高度越大的產(chǎn)品，按鈕的曲率就越接近直角矩形，差異性也越來(lái)越小。但在同一個(gè)產(chǎn)品時(shí)，曲率的變化幅度也不要太大，這樣就會(huì)失去一致性。
這里拿上一章提到的4/6/8來(lái)舉例吧（4/6/8數(shù)值遞增為2像素），當(dāng)按鈕高度為32px時(shí)，可以采用4px的曲率，當(dāng)按鈕高度為40px時(shí)，采用6px的曲率，當(dāng)按鈕高度為48時(shí)，采用8px的曲率，以此類推。
那如果隨著按鈕的高度的增加，不做曲率的變化，按鈕就會(huì)越來(lái)越接近直角矩形。按鈕高度越高，這種感覺(jué)就越強(qiáng)烈。所以我個(gè)人建議，在不同的業(yè)務(wù)需求中，運(yùn)用不同的曲率更合適一些。
在相同產(chǎn)品中采用不同的曲率，這時(shí)按鈕做小規(guī)律的變化是沒(méi)有問(wèn)題的。如果按鈕曲率遞增過(guò)大，那就會(huì)造成所有按鈕缺失統(tǒng)一性，曲率變化太大每個(gè)按鈕的獨(dú)立性就會(huì)變強(qiáng)，他們之間的差異化就會(huì)更明顯，所以從視覺(jué)上看上去就不像是一個(gè)組件中規(guī)范出來(lái)的。
5.按鈕中添加字符
在按鈕中添加字符，要注意的是字符與按鈕邊框之間要留多少距離就可以了，問(wèn)題不大。但它們之間的距離不能過(guò)少，太少就會(huì)顯得很擠，給人感覺(jué)很小氣。也不能太大，太大給人感覺(jué)字符上下有種壓迫感。距離還需要設(shè)計(jì)師自己根據(jù)自身審美去控制。
6.按鈕中添加功能
在按鈕中添加功能，這里的“功能”指的就是“圖標(biāo)”，加了圖標(biāo)的按鈕就變成了“功能按鈕”。繪制功能按鈕跟添加字符類似，但繪制功能按鈕會(huì)考慮視覺(jué)差與平衡性的問(wèn)題，就稍微麻煩一些。
以上這種方法是錯(cuò)誤的，如果按水平垂直方向進(jìn)行對(duì)齊，會(huì)產(chǎn)生視覺(jué)差，就是失去了視覺(jué)平衡性。字符和圖標(biāo)需要轉(zhuǎn)化為顏色的灰階度，才能測(cè)出它們的重量，才能知道它們從視覺(jué)上看誰(shuí)輕誰(shuí)中。測(cè)試得知，字符的顏色灰階度，要大于圖標(biāo)的顏色灰階度，造成視覺(jué)不平衡。
解決這個(gè)問(wèn)題的方式，是看哪邊的視覺(jué)不平衡，就手動(dòng)調(diào)整使他保持平衡。如果字符這邊重了，就在字符與按鈕之間加一些留白，如果圖標(biāo)這邊看上去重了，就在圖標(biāo)這邊加一些留白。
當(dāng)我們學(xué)會(huì)了如何保持按鈕的視覺(jué)平衡，就要再嚴(yán)謹(jǐn)一些。因?yàn)榉奖愦蠹业睦斫猓蠄D中按鈕是去了外邊框直接放上去的，那真正在做組件時(shí)，下圖這種方法才是規(guī)范的。如圖所示：
最后讓我們上一張對(duì)比圖，對(duì)比一下規(guī)范的按鈕與不規(guī)范的按鈕。
大家看到這里，就說(shuō)明本章的內(nèi)容講完了。大家有什么疑問(wèn)或不解留言給我，比較難理解的知識(shí)部分，我會(huì)在下章節(jié)做補(bǔ)充，另外也會(huì)為大家解答。
謝謝閱讀
感謝支持
好的作品（有規(guī)則有邏輯）與不好的作品（無(wú)規(guī)則無(wú)邏輯），他們從視覺(jué)的差異并不是很大。大家看問(wèn)題不要看表象，形式主義缺乏內(nèi)涵。當(dāng)然從心理學(xué)角度講人們很確實(shí)容易受“美好事物”的影響，但大家要理性看待問(wèn)題，不能過(guò)于感性，尋找作品中的主觀唯心主義，學(xué)習(xí)作品中好的一面，并運(yùn)用到自己的設(shè)計(jì)思維當(dāng)中。
好的作品經(jīng)得住時(shí)間的考驗(yàn)，而那些形式主義只存于某時(shí)某刻，止步不前并永不前進(jìn)
記得點(diǎn)個(gè)贊哦
∨
