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