UI圖標(biāo)圖形設(shè)計(jì)FIGMAUI3版單元4面性圖標(biāo)——布爾運(yùn)算xx學(xué)校xx學(xué)院xxx專業(yè)李炳琰教師概覽Overview4.1基礎(chǔ)面形圖標(biāo)4.2填充區(qū)域的布爾運(yùn)算—合并4.3填充區(qū)域的布爾運(yùn)算—減去4.4填充區(qū)域的布爾運(yùn)算—交集4.5單元練習(xí)單元4面性圖標(biāo)——布爾運(yùn)算單元4面性圖標(biāo)——布爾運(yùn)算4.1.1圖標(biāo)模版三種圖標(biāo)模版單元4面性圖標(biāo)——布爾運(yùn)算4.1.1圖標(biāo)模版“活動(dòng)區(qū)域”大小為20像素×20像素。所有圖形都應(yīng)該在24像素×24像素的模版內(nèi)，不能超出。活動(dòng)區(qū)域周圍有2像素的“內(nèi)邊距”當(dāng)圖形視覺(jué)面積較小時(shí)，圖形可延伸至2像素的內(nèi)邊距區(qū)域。單元4面性圖標(biāo)——布爾運(yùn)算4.1.1圖標(biāo)模版單元4面性圖標(biāo)——布爾運(yùn)算4.1.1圖標(biāo)模版圖形參考線中的四個(gè)形狀，尺寸各不相同，其寬高和面積如圖所示，這幾個(gè)圖形面積在320左右，所以視覺(jué)大小較為接近、整體看起來(lái)比較協(xié)調(diào)。圖形參考線不僅協(xié)調(diào)了圖形的視覺(jué)大小，還規(guī)范了圖形的比例。正方形和圓形的寬高比為1:1，橫矩形的寬高比為4:5，豎矩形的寬高比為5:4。根據(jù)圖形參考線的規(guī)定，可以創(chuàng)建圖形視覺(jué)大小協(xié)調(diào)、比例一致圖標(biāo)系統(tǒng)。單元4面性圖標(biāo)——布爾運(yùn)算4.1.1圖標(biāo)模版第一行的1~4號(hào)圖標(biāo)的基礎(chǔ)圖形，符合模板中的圖形參考線的規(guī)定；第二行的5~8號(hào)圖標(biāo)，在圖形參考線的規(guī)定上有所修改單元4面性圖標(biāo)——布爾運(yùn)算4.1.2案例練習(xí)——繪制沙漏圖標(biāo)觀察：觀察并分析沙漏圖標(biāo)，發(fā)現(xiàn)沙漏圖標(biāo)由上下兩個(gè)對(duì)稱的六邊形組成。六邊形可以通過(guò)增改矩形錨點(diǎn)得到，然后翻轉(zhuǎn)六邊形，組合兩者可繪制出沙漏圖標(biāo)。目標(biāo)：練習(xí)增加并移動(dòng)圖形的錨點(diǎn)、圖形的翻轉(zhuǎn)以及圖標(biāo)模版的使用方法。單元4面性圖標(biāo)——布爾運(yùn)算4.1.2案例練習(xí)——繪制沙漏圖標(biāo)1.

快捷鍵：按下

Shift+H

水平翻轉(zhuǎn)，按下

Shift+V

垂直翻轉(zhuǎn)。2.

右鍵菜單：選中對(duì)象，單擊鼠標(biāo)右鍵，在彈出的菜單中選擇。3.

位置選項(xiàng)欄：選中對(duì)象，在右上角的位置選項(xiàng)欄中，單擊（水平翻轉(zhuǎn)）或（垂直翻轉(zhuǎn)）。翻轉(zhuǎn)對(duì)象的方法：?jiǎn)卧?面性圖標(biāo)——布爾運(yùn)算4.1.3

案例練習(xí)——繪制手表圖標(biāo)觀察：觀察并分析圖標(biāo)圖形，可以發(fā)現(xiàn)手表圖形是由一個(gè)圓環(huán)和兩個(gè)梯形組成。通過(guò)繪制一個(gè)圓環(huán)和兩個(gè)梯形并調(diào)整其位置，即可完成圖標(biāo)制作。目標(biāo)：練習(xí)增加并移動(dòng)錨點(diǎn)修改圖形；圖形的翻轉(zhuǎn)；圖標(biāo)模版的使用。單元4面性圖標(biāo)——布爾運(yùn)算4.1.3

案例練習(xí)——繪制手表圖標(biāo)使用快捷鍵Shift+X，可以快速切換圖形的描邊和填充屬性。對(duì)于原本僅有填充而無(wú)描邊的圖形中，按下Shift+X，將會(huì)去除填充屬性，增加描邊屬性，并且描邊的顏色與填充顏色相同。單元4面性圖標(biāo)——布爾運(yùn)算4.1.3

案例練習(xí)——繪制手表圖標(biāo)通常情況下圖標(biāo)模版尺寸為偶數(shù)，例如MaterialDesign圖標(biāo)模版的尺寸為24×24，因此圖標(biāo)中各個(gè)圖形的寬度或者高度（根據(jù)需要的是垂直還是水平居中對(duì)齊）多采用偶數(shù)。然而，也偶爾存在上圖中，使用奇數(shù)的圖標(biāo)。單元4面性圖標(biāo)——布爾運(yùn)算4.1.4拓展練習(xí)——圖標(biāo)模版輔助繪制練習(xí)目標(biāo)：嘗試使用圖標(biāo)模版輔助圖標(biāo)繪制，并繼續(xù)練習(xí)錨點(diǎn)和曲線的繪制。觀察圖標(biāo)，分析其圖形和錨點(diǎn)的構(gòu)成。運(yùn)用前面章節(jié)所學(xué)的錨點(diǎn)操作的知識(shí)，繪制下列圖標(biāo)，注意圖形放置在圖標(biāo)模版中的位置。概覽Overview4.1基礎(chǔ)面形圖標(biāo)4.2填充區(qū)域的布爾運(yùn)算—合并4.3填充區(qū)域的布爾運(yùn)算—減去4.4填充區(qū)域的布爾運(yùn)算—交集4.5單元練習(xí)單元4面性圖標(biāo)——布爾運(yùn)算單元4面性圖標(biāo)——布爾運(yùn)算4.2.1合并運(yùn)算選中多個(gè)圖形后，屬性欄上方出現(xiàn)布爾運(yùn)算的選項(xiàng)。默認(rèn)的布爾運(yùn)算是“

合并”，點(diǎn)擊菜單可以展開(kāi)所有的布爾運(yùn)算選項(xiàng)，點(diǎn)擊選擇需要的布爾運(yùn)算。單元4面性圖標(biāo)——布爾運(yùn)算4.2.1合并運(yùn)算“合并”運(yùn)算會(huì)將多個(gè)選中的圖形合并為一個(gè)形狀，同時(shí)會(huì)創(chuàng)建一個(gè)布爾運(yùn)算組，原圖形仍舊保留在新建的布爾運(yùn)算組中。解散該組后，組中各個(gè)圖形還原為獨(dú)立的圖層?！叭∠幗M”的快捷鍵為

Shift+Ctrl

+G，點(diǎn)擊右鍵也可找到“取消編組”（Ungroup）功能。保留原圖層單元4面性圖標(biāo)——布爾運(yùn)算4.2.1合并運(yùn)算布爾運(yùn)算組內(nèi)各個(gè)圖形的樣式，不影響布爾運(yùn)算后的圖形整體。所以如果需要修改布爾運(yùn)算后圖形的顏色、描邊等屬性，要選中整個(gè)布爾運(yùn)算組進(jìn)行修改。如右圖，即使組內(nèi)正方形為紅色、紫色描邊，布爾運(yùn)算組的圖形樣式并不會(huì)被影響，仍舊為藍(lán)色填充、黑色描邊。布爾運(yùn)算組樣式單元4面性圖標(biāo)——布爾運(yùn)算4.2.1合并運(yùn)算布爾運(yùn)算后圖形的路徑，仍是組內(nèi)原圖形的各自的路徑。如果要將圖形完全合并，得到整體圖形的路徑，則需要在布爾運(yùn)算后，接著使用“拼合”（flatten）功能，對(duì)應(yīng)的快捷鍵是

Alt+Shift+F

。使用“拼合”（flatten）后，布爾運(yùn)算組消失，原圖形拼合到一個(gè)圖層內(nèi)，圖形路徑線也變?yōu)楹喜D形的外輪廓。拼合圖形單元4面性圖標(biāo)——布爾運(yùn)算4.2.2案例練習(xí)——繪制云朵圖標(biāo)觀察：觀察圖標(biāo)發(fā)現(xiàn)，云朵圖標(biāo)可看做三個(gè)圓形和一個(gè)矩形拼合而成。目標(biāo)：練習(xí)布爾運(yùn)算的合并功能。單元4面性圖標(biāo)——布爾運(yùn)算4.2.2案例練習(xí)——繪制云朵圖標(biāo)圓形與矩形完美銜接單元4面性圖標(biāo)——布爾運(yùn)算4.2.3拓展練習(xí)——合并運(yùn)算練習(xí)目標(biāo)：在圖標(biāo)模版的輔助下，繪制并合并圖標(biāo)。觀察下列圖標(biāo)，分析其圖形的構(gòu)成。運(yùn)用前面章節(jié)所學(xué)的曲線繪制知識(shí)，制作下列圖標(biāo)，注意圖形放置在圖標(biāo)模版中的位置。概覽Overview4.1基礎(chǔ)面形圖標(biāo)4.2填充區(qū)域的布爾運(yùn)算—合并4.3填充區(qū)域的布爾運(yùn)算—減去4.4填充區(qū)域的布爾運(yùn)算—交集4.5單元練習(xí)單元4面性圖標(biāo)——布爾運(yùn)算單元4面性圖標(biāo)——布爾運(yùn)算4.3.1減去運(yùn)算多個(gè)圖形進(jìn)行減去運(yùn)算運(yùn)算會(huì)用選中圖形中上層圖形的面積減去最下層圖形的面積。單元4面性圖標(biāo)——布爾運(yùn)算4.3.2案例練習(xí)——繪制月亮圖標(biāo)觀察：觀察并分析圖標(biāo)圖形，可以發(fā)現(xiàn)用鋼筆直接繪制月亮圖形并不容易，但是通過(guò)兩個(gè)圓形相減則簡(jiǎn)單的多。目標(biāo)：練習(xí)布爾運(yùn)算的減去功能。單元4面性圖標(biāo)——布爾運(yùn)算4.3.2案例練習(xí)——繪制月亮圖標(biāo)展開(kāi)“減去”得到的編組，移動(dòng)組中上方圓形的位置，調(diào)整月牙的形狀，直至得到滿意的效果。單元4面性圖標(biāo)——布爾運(yùn)算4.3.3

案例練習(xí)——繪制鼠標(biāo)圖標(biāo)觀察：觀察并分析圖標(biāo)圖形，發(fā)現(xiàn)鼠標(biāo)的主體圖形是“膠囊形狀”，中間的鏤空是矩形。所以本圖標(biāo)可以通過(guò)圓角矩形減去兩個(gè)矩形得到。目標(biāo)：練習(xí)布爾運(yùn)算的減去功能。單元4面性圖標(biāo)——布爾運(yùn)算4.3.4

案例練習(xí)——繪制優(yōu)惠券圖標(biāo)觀察：觀察并分析圖標(biāo)圖形，可以發(fā)現(xiàn)優(yōu)惠券的主體圖形是一個(gè)矩形。通過(guò)兩個(gè)半圓、一個(gè)五角星與矩形的相減，即可形成優(yōu)惠券圖形。目標(biāo)：練習(xí)布爾運(yùn)算的減去功能。單元4面性圖標(biāo)——布爾運(yùn)算4.3.4

案例練習(xí)——繪制優(yōu)惠券圖標(biāo)星形的外框與圖形大小不同（此處使用拼合功能，僅為了演示，實(shí)際制作圖標(biāo)時(shí)，無(wú)需拼合）單元4面性圖標(biāo)——布爾運(yùn)算4.3.5

綜合練習(xí)——繪制拼圖圖標(biāo)觀察：觀察并分析圖標(biāo)圖形后，發(fā)現(xiàn)拼圖的主體圖形是一個(gè)正方形，通過(guò)4個(gè)圓角矩形和正方形的增減，形成了拼圖圖形。目標(biāo)：布爾運(yùn)算合并和減去功能的綜合使用。單元4面性圖標(biāo)——布爾運(yùn)算4.3.6綜合練習(xí)——繪制頭盔圖標(biāo)觀察：觀察并分析圖標(biāo)圖形后，發(fā)現(xiàn)頭盔的主體圖形是圓形和某個(gè)特殊形狀的組合。圓形繪制簡(jiǎn)單，左下方的特殊形狀像三角形，我們可以通過(guò)給矩形加圓角得到。目標(biāo)：布爾運(yùn)算合并和減去功能的綜合使用。單元4面性圖標(biāo)——布爾運(yùn)算4.3.7

拓展練習(xí)——減去運(yùn)算練習(xí)目標(biāo)：在圖標(biāo)模版的輔助下，繪制帶有鏤空的面形圖標(biāo)。觀察下列圖標(biāo)，分析其圖形的構(gòu)成。運(yùn)用前面章節(jié)所學(xué)的知識(shí)，繪制下列圖標(biāo)的基礎(chǔ)圖形，然后制作鏤空。注意圖形放置在圖標(biāo)模版中的位置，以及其中鏤空部分的對(duì)稱性。概覽Overview4.1基礎(chǔ)面形圖標(biāo)4.2填充區(qū)域的布爾運(yùn)算—合并4.3填充區(qū)域的布爾運(yùn)算—減去4.4填充區(qū)域的布爾運(yùn)算—交集4.5單元練習(xí)單元4面性圖標(biāo)——布爾運(yùn)算單元4面性圖標(biāo)——布爾運(yùn)算4.4.1交集運(yùn)算的特點(diǎn)交集”（Intersect）會(huì)計(jì)算選中圖形面積的相交部分。經(jīng)過(guò)“交集”運(yùn)算后，原有的選中圖形就不再顯示了，只顯示交集的區(qū)域，所以如果原有圖形還需要繼續(xù)使用，注意在交集運(yùn)算前復(fù)制一份原有圖形，在接下來(lái)的練習(xí)中將會(huì)用到這一點(diǎn)。與“交集”正好相反，“排除”（Exclude）會(huì)計(jì)算選中圖形面積的不相交部分。排除在實(shí)際使用中較少，所以本書不做案例練習(xí)。單元4面性圖標(biāo)——布爾運(yùn)算4.4.2案例練習(xí)——繪制娃娃頭圖標(biāo)觀察：觀察并分析圖標(biāo)圖形，可以發(fā)現(xiàn)圖標(biāo)中娃娃的臉和眼睛都是正圓形；兩側(cè)的劉海則是圓形的一部分，所以可以使用交集制作娃娃的劉海。目標(biāo)：練習(xí)布爾運(yùn)算的交集功能。單元4面性圖標(biāo)——布爾運(yùn)算4.4.3

案例練習(xí)——繪制盾牌圖標(biāo)觀察：觀察并分析圖標(biāo)圖形，可以發(fā)現(xiàn)盾牌的主體圖形可以由六邊形得到，盾牌內(nèi)部的圖案分別是兩個(gè)矩形的一部分。盾牌內(nèi)部的圖案，可以由盾牌圖形和兩個(gè)矩形進(jìn)行交集運(yùn)算得到。目標(biāo)：練習(xí)布爾運(yùn)算的交集功能。單元4面性圖標(biāo)——布爾運(yùn)算4.4.4拓展練習(xí)——交集運(yùn)算練習(xí)目標(biāo)：在圖標(biāo)模版的輔助下，使用交集繪制不規(guī)則圖案。觀察下列圖標(biāo)，分析其圖形的構(gòu)成。運(yùn)用前面章節(jié)所學(xué)的知識(shí)，繪制下列圖標(biāo)的基礎(chǔ)圖形，然后制作圖形內(nèi)部的圖案。注意圖形放置在圖標(biāo)模版中的位置。概覽Overview4.1基礎(chǔ)面形圖標(biāo)4.2填充區(qū)域的布爾運(yùn)算—合并4.3填充區(qū)域的布爾運(yùn)算—減去4.4填充區(qū)域的布爾運(yùn)算—交集4.5單元練習(xí)單元4面性圖標(biāo)——布爾運(yùn)算單元4面性圖標(biāo)——布爾運(yùn)算4.5.1知識(shí)回顧本單元主要講解了圖標(biāo)模版和布爾運(yùn)算。其中圖標(biāo)模版可以規(guī)范圖標(biāo)的繪制，讓一整套圖標(biāo)擁有相近的視覺(jué)大小和一致的視覺(jué)重心。而布爾運(yùn)算則通過(guò)多個(gè)圖形面積間的加減乘除，繪制出各種復(fù)雜的形狀。在之前的章節(jié)中，我們學(xué)習(xí)了曲線、錨點(diǎn)、圓角等方法來(lái)繪制復(fù)雜圖形，本章介紹了三種布爾運(yùn)算。使用這些方法，大家可以繪制出絕大多數(shù)圖標(biāo)。在以后的圖標(biāo)繪制