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