第4章面性圖標(biāo)設(shè)計(jì)本章介紹：面性圖標(biāo)作為扁平化圖標(biāo)中的一種，具有醒目突出的特點(diǎn)，同時(shí)伴隨著扁平化設(shè)計(jì)的發(fā)展，面性圖標(biāo)也演變出了更多設(shè)計(jì)風(fēng)格，需要UI設(shè)計(jì)師們進(jìn)行系統(tǒng)的學(xué)習(xí)和了解。本章對(duì)面性圖標(biāo)的基礎(chǔ)知識(shí)、基礎(chǔ)設(shè)計(jì)以及創(chuàng)意設(shè)計(jì)進(jìn)行系統(tǒng)講解。通過(guò)本章的學(xué)習(xí)，讀者可以對(duì)面性圖標(biāo)有一個(gè)全面深入的認(rèn)識(shí)，并快速掌握繪制常用面性圖標(biāo)的規(guī)范和方法。掌握面性圖標(biāo)的基礎(chǔ)知識(shí)掌握面性圖標(biāo)的基礎(chǔ)設(shè)計(jì)掌握面性圖標(biāo)的創(chuàng)意設(shè)計(jì)學(xué)習(xí)目標(biāo)面性圖標(biāo)即填充圖標(biāo)。面性圖標(biāo)由于占用的視覺(jué)面積要比線性圖標(biāo)多，所以具有整體飽滿、視覺(jué)突出的特點(diǎn)，能夠幫助用戶快速進(jìn)行圖標(biāo)的位置定位。但面性圖標(biāo)不宜在界面中大面積出現(xiàn)，這樣會(huì)產(chǎn)生界面過(guò)于臃腫，用戶視覺(jué)疲勞等問(wèn)題。面性圖標(biāo)的使用場(chǎng)景與線性圖標(biāo)同樣豐富，常用于頁(yè)面的核心業(yè)務(wù)，如金剛區(qū)、內(nèi)容裝飾、標(biāo)簽欄、列表流等。4.1面性圖標(biāo)的基礎(chǔ)知識(shí)面性圖標(biāo)示意圖1.輪廓外形?造型繁簡(jiǎn)：流暢的外形可以讓面性圖標(biāo)的整體變得簡(jiǎn)潔規(guī)整。同時(shí)在保持簡(jiǎn)約設(shè)計(jì)的同時(shí)，設(shè)計(jì)關(guān)鍵的特征細(xì)節(jié)也有利于提高圖標(biāo)的識(shí)別度，比如使用相機(jī)元素制作的圖標(biāo)，在簡(jiǎn)約外形的基礎(chǔ)之上添加閃光燈的細(xì)節(jié)特征，會(huì)使圖標(biāo)的設(shè)計(jì)更加生動(dòng)。4.2面性圖標(biāo)的基礎(chǔ)設(shè)計(jì)簡(jiǎn)約外形的相機(jī)圖標(biāo)增加細(xì)節(jié)的相機(jī)圖標(biāo)復(fù)雜外形的相機(jī)圖標(biāo)?圓角弧度：圓角弧度的差異會(huì)讓圖標(biāo)展現(xiàn)出不同的氣質(zhì)，如無(wú)圓角圖標(biāo)比較直接硬朗；小圓角普遍使用，圓角通常設(shè)置為2px；大圓角圖標(biāo)比較柔美可愛(ài)，圓角通常設(shè)置為4px及以上。4.2面性圖標(biāo)的基礎(chǔ)設(shè)計(jì)無(wú)圓角面性圖標(biāo)小圓角面性圖標(biāo)大圓角面性圖標(biāo)2.挖空比例進(jìn)行面性圖標(biāo)設(shè)計(jì)時(shí)，內(nèi)部圖形的挖空比例需要占20%～30%。這樣設(shè)計(jì)出的圖標(biāo)才會(huì)使整體視覺(jué)效果較為和諧，能夠呈現(xiàn)最佳狀態(tài)。4.2面性圖標(biāo)的基礎(chǔ)設(shè)計(jì)面性圖標(biāo)挖空比例示意圖3.底板設(shè)計(jì)?有無(wú)底板：同一個(gè)面性圖標(biāo)，通過(guò)底板的設(shè)計(jì)可以使其發(fā)生微妙的變化，產(chǎn)生不同的性格特點(diǎn)。無(wú)底板的面性圖標(biāo)又稱為單獨(dú)型圖標(biāo)，這類圖標(biāo)視覺(jué)感知更直觀；有底板的面性圖標(biāo)又稱為組合型圖標(biāo)，這類圖標(biāo)具有層次，相對(duì)精致。越小的圖標(biāo)形體應(yīng)該越簡(jiǎn)單，因此建議采用單獨(dú)型圖標(biāo)，圖標(biāo)的尺寸足夠大時(shí)可采用組合型的圖標(biāo)，并補(bǔ)充圖標(biāo)的細(xì)節(jié)。4.2面性圖標(biāo)的基礎(chǔ)設(shè)計(jì)圖標(biāo)有無(wú)底板對(duì)比圖?底板效果：在組合型圖標(biāo)中，針對(duì)底板可以運(yùn)用彌散投影增加質(zhì)感。彌散投影又稱為彌散陰影（DiffuseShadow），與軟件中直接使用效果的普通陰影技術(shù)相比，這種投影的表現(xiàn)則更有深度、更富層次、更加精致。目前，彌散投影已經(jīng)作為一種設(shè)計(jì)潮流并廣泛應(yīng)用于UI設(shè)計(jì)中。4.2面性圖標(biāo)的基礎(chǔ)設(shè)計(jì)制作圖標(biāo)底板的彌散投影基礎(chǔ)面性課堂案例-制作單色面性圖標(biāo)基礎(chǔ)面性延伸面性多色面性漸變面性疊加課堂案例-制作面性疊加圖標(biāo)設(shè)計(jì)面性微質(zhì)感課堂案例-制作面性微質(zhì)感圖標(biāo)4.3面性圖標(biāo)的創(chuàng)意設(shè)計(jì)基礎(chǔ)單色面性圖標(biāo)簡(jiǎn)約基礎(chǔ)。4.3.1基礎(chǔ)面性基礎(chǔ)單色面性圖標(biāo)示意圖使用矩形工具、圓角矩形工具、添加錨點(diǎn)工具和直接選擇工具繪制圖形，使用路徑查找器命令實(shí)現(xiàn)布爾運(yùn)算，使用漸變工具實(shí)現(xiàn)制作單色面性圖標(biāo)。4.3.2課堂案例-制作單色面性圖標(biāo)圖標(biāo)最終效果圖1.不透明度面性不透明色塊圖標(biāo)富有層次。4.3.3基礎(chǔ)面性延伸面性不透明色塊圖標(biāo)示意圖2.高斯模糊面性高斯模糊圖標(biāo)空間感強(qiáng)。4.3.3基礎(chǔ)面性延伸面性高斯模糊圖標(biāo)設(shè)計(jì)示意圖3.光影效果面性光影效果圖標(biāo)帶微擬物。4.3.3基礎(chǔ)面性延伸面性光影效果圖標(biāo)示意圖面性多色圖標(biāo)活潑豐富。在制作時(shí)，根據(jù)顏色的數(shù)量，可以細(xì)分為雙色圖標(biāo)、三色圖標(biāo)以及多色圖標(biāo)。4.3.4面性多色面性多色圖標(biāo)示意圖面性漸變圖標(biāo)豐富可愛(ài)。在制作時(shí)，根據(jù)漸變的形式，可以細(xì)分為單色漸變、炫彩漸變、柔和多色漸變以及YOGA多色漸變?cè)O(shè)計(jì)風(fēng)格。單色漸變4.3.4面性漸變面性疊加圖標(biāo)層次感強(qiáng)。線性疊加圖標(biāo)示意圖4.3.5面性疊加使用橢圓工具、矩形工具和圓角矩形工具繪制圖形，使用快捷鍵變換圖形，使用路徑選擇工具和減去頂層形狀命令實(shí)現(xiàn)布爾運(yùn)算，使用漸變疊加命令和添加圖層蒙版命令制作面性疊加圖標(biāo)，使用橫排文字工具輸入文字。圖標(biāo)最終效果圖4.3.6課堂案例-制作面性疊加圖標(biāo)設(shè)計(jì)面性微質(zhì)感圖標(biāo)層次極強(qiáng)。面性微質(zhì)感圖標(biāo)示意圖4.3.7面性微質(zhì)感使用矩形工具、圓角矩形工具、橢圓工具、鋼筆工具、路徑選擇工具和減去頂層形狀命令繪制基礎(chǔ)圖形，使用變換-透視命令變換圖形，使用圖層樣式命令中的漸變疊加命令、投影命令和內(nèi)發(fā)光命令添加圖層樣式，實(shí)現(xiàn)面性微質(zhì)感圖標(biāo)。圖標(biāo)效果圖4.3.8課堂案例-制作面性微質(zhì)感圖標(biāo)使用屬性面板中的不透明度選項(xiàng)，實(shí)現(xiàn)面性透明度變化圖標(biāo)。貝殼找房