UI圖標(biāo)圖形設(shè)計(jì)FIGMAUI3版單元6風(fēng)格化圖標(biāo)xx學(xué)校xx學(xué)院xxx專業(yè)李炳琰教師6.1圖標(biāo)風(fēng)格影響因素6.2風(fēng)格化圖標(biāo)的色彩設(shè)計(jì)6.3風(fēng)格化常用功能6.4綜合練習(xí)——繪制飛行器圖標(biāo)6.5綜合練習(xí)——繪制文件夾圖標(biāo)概覽Overview單元6

風(fēng)格化圖標(biāo)單元6

風(fēng)格化圖標(biāo)6.1圖標(biāo)風(fēng)格影響因素基礎(chǔ)圖標(biāo)單元6

風(fēng)格化圖標(biāo)6.1.1風(fēng)格要素——描邊描邊粗細(xì)：當(dāng)圖標(biāo)中含有描邊時(shí)，例如線性圖標(biāo)或線面結(jié)合圖標(biāo)，描邊粗細(xì)影響圖標(biāo)風(fēng)格。較粗的描邊使圖標(biāo)醒目、粗獷，較細(xì)的描邊讓圖標(biāo)顯得精致、優(yōu)雅。單元6

風(fēng)格化圖標(biāo)6.1.1風(fēng)格要素——描邊當(dāng)圖標(biāo)中包含描邊時(shí)，例如線性圖標(biāo)或線面結(jié)合圖標(biāo)，斷開閉合圖形的路徑是一種常見的設(shè)計(jì)風(fēng)格。通過斷開打破原有圖形的封閉區(qū)域，圖標(biāo)產(chǎn)生透氣、輕松的視覺感受。圖中的圖標(biāo)就采用了這種斷線風(fēng)格，通過斷開圖形的一部分，圖標(biāo)呈現(xiàn)出一種開放式的感覺，同時(shí)保持了整體的清晰度和辨識(shí)度。在斷開的同時(shí)，也可以通過路徑的重新連接來保持圖標(biāo)的完整性，比如圖中第一個(gè)“鈴鐺”圖形中的紅點(diǎn)標(biāo)記處，既打破了封閉的圖形，又確保了圖標(biāo)的整體性。斷線單元6

風(fēng)格化圖標(biāo)6.1.1風(fēng)格要素——描邊需要注意的是，斷開的位置應(yīng)該避免出現(xiàn)在圖形的轉(zhuǎn)折點(diǎn)或連接處，如圖所示。若斷開位置設(shè)置在圖形轉(zhuǎn)折或連接處，容易導(dǎo)致圖形的結(jié)構(gòu)不穩(wěn)定，造成視覺上的不協(xié)調(diào)或不完整，從而影響圖標(biāo)的識(shí)別度和美感。因此，在設(shè)計(jì)中，注意斷開的位置的選擇，并適當(dāng)進(jìn)行連接，以保證斷線風(fēng)格圖標(biāo)線條的流暢。斷線單元6

風(fēng)格化圖標(biāo)6.1.2風(fēng)格要素——填充填充容器僅包含填充屬性的圖標(biāo)被稱為面性圖標(biāo)。圖中的第一行展示了常見的面性圖標(biāo)——這些圖標(biāo)的圖形僅包含填充屬性。此外，還可以將圖標(biāo)圖形放置在統(tǒng)一的‘容器’內(nèi)。圖中的第二行和第三行中，圖標(biāo)的整體形狀使用填充屬性的圓角矩形和圓形，內(nèi)部放置填充圖形。單元6

風(fēng)格化圖標(biāo)6.1.2風(fēng)格要素——填充填充容器除了上述情況，包含填充和描邊兩種屬性的圖標(biāo)被稱為線面結(jié)合圖標(biāo)。在這種類型的圖標(biāo)中，填充和描邊的關(guān)系會(huì)影響圖標(biāo)的整體風(fēng)格。圖中的第一行展示了常見的線面結(jié)合圖標(biāo)——這些圖標(biāo)的圖形同時(shí)包含填充和描邊屬性。此外，還可以讓圖形分別包含描邊和填充屬性，并通過錯(cuò)位來實(shí)現(xiàn)不同的效果。圖中的第二行圖標(biāo)，填充圖形與圖形本身對(duì)齊，但與描邊有一定的錯(cuò)位；第三行中，填充圖形是圓形，并位于描邊圖形的右上角。單元6

風(fēng)格化圖標(biāo)6.1.3風(fēng)格要素——圖形造型圓角半徑圖形的圓角半徑數(shù)值影響圖標(biāo)的風(fēng)格，圓角半徑數(shù)值越大，圖標(biāo)的風(fēng)格越可愛、友好；圓角半徑數(shù)值越小、甚至不設(shè)置圓角，圖標(biāo)的風(fēng)格越精致、嚴(yán)謹(jǐn)。不過，目前純直角的圖形使用很少，圖標(biāo)圖形傾向于帶有一定的圓角，并根據(jù)風(fēng)格需要設(shè)置或大或小的圓角半徑數(shù)值。如圖，圖標(biāo)增加了圓角半徑后，圖標(biāo)圖形變得圓潤(rùn)可愛，風(fēng)格產(chǎn)生了變化。注意，一套圖標(biāo)內(nèi)的圖形圓角盡量一致。直角帶圓角單元6

風(fēng)格化圖標(biāo)6.1.3風(fēng)格要素——圖形造型圓角半徑差異圓角半徑可以根據(jù)圖形大小略微調(diào)整，以保證視覺上的一致。圖形尺寸越大，圓角半徑越大。注意圖標(biāo)本身較小，所以數(shù)值差異不會(huì)太大。圖中的圖標(biāo)中，含有大小兩個(gè)矩形，為了保持其圓角效果接近，外部大矩形圓角半徑數(shù)值為6，內(nèi)部小矩形的數(shù)值為4。單元6

風(fēng)格化圖標(biāo)6.1.3風(fēng)格要素——圖形造型色彩搭配圖標(biāo)可以由一種或者多種顏色組成，一套圖標(biāo)應(yīng)該使用同一套色彩搭配。圖中展示了線性和面形兩類圖標(biāo)的雙色搭配效果。單元6

風(fēng)格化圖標(biāo)6.1.3風(fēng)格要素——圖形造型特征元素在圖標(biāo)的基礎(chǔ)圖形上，增加一致的特征元素可以創(chuàng)造出獨(dú)特風(fēng)格的圖標(biāo)。圖中的第一行面性圖標(biāo)，在左上角統(tǒng)一增加了代表高光的短線，豐富了圖標(biāo)的細(xì)節(jié)并增強(qiáng)了立體感。第二行的線性圖標(biāo)統(tǒng)一增加了人物臉部元素，使圖標(biāo)擬人化，從而讓圖標(biāo)顯得更加生動(dòng)。單元6

風(fēng)格化圖標(biāo)6.1.3風(fēng)格要素——圖形造型模版占比模板占比不同的圖標(biāo)，不僅在風(fēng)格上有所差異，使用時(shí)的尺寸也會(huì)有所不同，以實(shí)現(xiàn)所需的視覺效果。因此，一套圖標(biāo)的模板占比應(yīng)該在視覺上保持一致單元6

風(fēng)格化圖標(biāo)6.1.3風(fēng)格要素——圖形造型復(fù)雜度通過增加或減少圖標(biāo)圖形的細(xì)節(jié)，可以使圖標(biāo)變得更加繁復(fù)或簡(jiǎn)潔。例如，圖中的圖標(biāo)在原有基礎(chǔ)上增加了許多細(xì)節(jié)，使得圖標(biāo)更加復(fù)雜。而圖中的‘鈴鐺’圖形，則簡(jiǎn)化了原有圖標(biāo)，使其更加簡(jiǎn)潔。單元6

風(fēng)格化圖標(biāo)6.1.3風(fēng)格要素——圖形造型視角與透視常見的圖標(biāo)視角為圖形的正視圖，不展示透視的立體效果。當(dāng)圖標(biāo)使用某種視角或者透視時(shí)，整套圖標(biāo)要統(tǒng)一。不同的視角單元6

風(fēng)格化圖標(biāo)6.1.3風(fēng)格要素——圖形造型視角與透視圖中展示了一種2.5D圖標(biāo)風(fēng)格，圖標(biāo)統(tǒng)一使用了2.5D透視。2.5D風(fēng)格圖標(biāo)單元6

風(fēng)格化圖標(biāo)6.1.4知識(shí)鞏固圖中是某社區(qū)商場(chǎng)的海報(bào)，海報(bào)上展示了該商場(chǎng)提供的12個(gè)服務(wù)圖標(biāo)。然而，這12個(gè)圖標(biāo)的風(fēng)格不盡相同。請(qǐng)找出其中的3個(gè)不一致之處，并指出哪些圖標(biāo)的風(fēng)格是相同的。6.1圖標(biāo)風(fēng)格影響因素6.2風(fēng)格化圖標(biāo)的色彩設(shè)計(jì)6.3風(fēng)格化常用功能6.4綜合練習(xí)——繪制飛行器圖標(biāo)6.5綜合練習(xí)——繪制文件夾圖標(biāo)概覽Overview單元6

風(fēng)格化圖標(biāo)單元6

風(fēng)格化圖標(biāo)6.2.1顏色面板介紹①色相：色相指的是具體的顏色種類，例如‘紅、橙、黃、綠、青、藍(lán)、紫’等，代表顏色的不同色相。通過左右拖動(dòng)色相滑塊，可以更改色相，調(diào)色板中的顏色也會(huì)隨之變化。②透明度：通過左右拖動(dòng)透明度滑塊或輸入數(shù)值來調(diào)整透明度。當(dāng)滑塊位于最左側(cè)時(shí)，透明度為0%，即完全透明；當(dāng)滑塊位于最右側(cè)時(shí)，透明度為100%，即完全不透明。③顏色模式：默認(rèn)的顏色模式是HEX，它是一種常見的網(wǎng)頁和數(shù)字設(shè)計(jì)中使用的顏色模式，表示顏色的數(shù)值為十六進(jìn)制。除了常用的HEX模式外，還有RGB和HSB等模式。在不同的顏色模式下，顏色值的輸入框有所不同。④顏色值：當(dāng)顏色模式為HEX時(shí)，顏色值由‘#’和6個(gè)字符組成。這6個(gè)字符可能包括數(shù)字0到9和字母A到F，共16種字符。每一種顏色都有一個(gè)特定的HEX顏色值，就像顏色的‘身份證號(hào)’，通過這組數(shù)值可以精準(zhǔn)定位到特定的顏色。與其他顏色模式需要多個(gè)數(shù)值來表示顏色值不同，HEX模式只使用一個(gè)數(shù)值，簡(jiǎn)便易用，因此應(yīng)用較為廣泛。⑤吸管：吸管工具可以直接修改選中元素的顏色。使用吸管工具點(diǎn)擊畫布中的任意位置后，當(dāng)前的顏色將被替換為吸管工具點(diǎn)擊位置的顏色。吸管工具的快捷鍵是

i

，在任意狀態(tài)下點(diǎn)擊該快捷鍵，均可直接調(diào)用吸管工具。如當(dāng)前有選中的圖形，則吸管工具將吸取的顏色賦予該圖形的填充或描邊色。⑥純色模式：純色模式表示使用單一顏色填充。純色模式的右側(cè)為漸變模式、圖片和視頻填充。在后續(xù)制作立體圖標(biāo)時(shí)，會(huì)涉及到漸變模式的使用。目前使用默認(rèn)的純色模式即可。⑦調(diào)色板：在調(diào)色板中點(diǎn)擊，修改調(diào)色板上的顏色滑鈕位置，從而調(diào)整顏色的飽和度和明度。顏色的飽和度和明度的變化見下一小節(jié)。單元6

風(fēng)格化圖標(biāo)6.2.2顏色的基本屬性與HSB顏色模式HSB模式與顏色三種屬性HSB模式后，可以查看顏色面板中不同位置的三種屬性。在HSB模式中，H代表色相（Hue），S代表飽和度（Saturation），B代表明度（Brightness）。紫紅色箭頭下的彩色滑動(dòng)條用于修改色相（H），其數(shù)值范圍為0到360的整數(shù)，每個(gè)數(shù)值對(duì)應(yīng)一種顏色，且0和360同為紅色；藍(lán)色箭頭表示飽和度（S）數(shù)值在水平方向的變化，飽和度的數(shù)值范圍為0到100，數(shù)值越大，顏色越鮮艷——0表示無色（即白、黑或灰色）；綠色箭頭代表明度（B）數(shù)值在垂直方向的變化，明度的數(shù)值范圍也是0到100，數(shù)值越大，顏色越亮——0為純黑色。圖中，HSB數(shù)值分別為0、100和100，顏色滑鈕位于調(diào)色盤的右上角。請(qǐng)讀者自行切換到HSB模式，并修改色相、飽和度或明度的數(shù)值，觀察顏色滑鈕的位置以及顏色的變化，從而更好地理解色相、飽和度和明度的含義。單元6

風(fēng)格化圖標(biāo)6.2.3RGB與HEX顏色模式RGB三原色疊加圖單元6

風(fēng)格化圖標(biāo)6.2.3RGB與HEX顏色模式HEX模式使用一個(gè)十六進(jìn)制數(shù)表示RGB中的每個(gè)顏色，而RGB模式則采用3個(gè)十進(jìn)制數(shù)分別表示三原色的數(shù)值。具體來說，HEX顏色中的6個(gè)字符，每?jī)蓚€(gè)字符按順序代表紅、綠、藍(lán)中的一個(gè)顏色數(shù)值，且這兩個(gè)字符的范圍在十六進(jìn)制數(shù)00到FF之間（即0到255的十進(jìn)制值）。圖中，RGB（255,0,0）表示純紅色，而在HEX模式中，純紅色則表示為#FF0000。6.1圖標(biāo)風(fēng)格影響因素6.2風(fēng)格化圖標(biāo)的色彩設(shè)計(jì)6.3風(fēng)格化常用功能6.4綜合練習(xí)——繪制飛行器圖標(biāo)6.5綜合練習(xí)——繪制文件夾圖標(biāo)概覽Overview單元6

風(fēng)格化圖標(biāo)單元6

風(fēng)格化圖標(biāo)6.3.1區(qū)域顯示兩種區(qū)域顯示圖中左側(cè)介紹了畫板作為顯示區(qū)域，畫板勾選上“裁剪內(nèi)容（clipcontent）后”，凡包含在畫板內(nèi)的元素，均只顯示畫板區(qū)域上的內(nèi)容。圖中右側(cè)介紹了蒙版顯示區(qū)域，在蒙版組（Maskgroup）內(nèi)的元素，均只顯示蒙版區(qū)域上的內(nèi)容。蒙版可以是任意圖形，且將圖層變?yōu)槊砂婧?，圖層本身的樣式將不被顯示。單元6

風(fēng)格化圖標(biāo)6.3.2描邊——虛線與單邊在圖標(biāo)繪制中，有時(shí)需要用到虛線，F(xiàn)igma自帶虛線功能，打開“描邊”中的設(shè)置“”按鈕，在彈窗中將默認(rèn)的“實(shí)線”（Solid）改為“虛線”（Dashed）。虛線有三個(gè)屬性設(shè)置——虛線長(zhǎng)度、縫隙長(zhǎng)度和線段端點(diǎn)的樣式，這三個(gè)屬性簡(jiǎn)單易懂，讀者可以自行嘗試。單元6

風(fēng)格化圖標(biāo)6.3.3平滑圓角“平滑圓角（CornerSmoothing）”旨在通過調(diào)整圖形元素的圓角轉(zhuǎn)角，實(shí)現(xiàn)更加自然和柔和的過渡。具體而言，就是在轉(zhuǎn)角處應(yīng)用一定程度的曲率，減緩角的變化，使直邊到圓角的過渡更為自然，從而提升視覺舒適度，讓圖形顯得更加友好?；瑒?dòng)條還顯示了iOS的平滑圓角，數(shù)值為60%。圖中的三個(gè)正方形圓角半徑相同，平滑度分別為0%、60%和100%，隨著平滑度的增加，圓角由逐漸變得圓潤(rùn)。當(dāng)平滑度達(dá)到60%時(shí)，圓角與直邊的過渡不僅平滑自然，還不容易讓觀看者察覺。進(jìn)一步提高平滑度數(shù)值到100%，圖形會(huì)變得更加圓潤(rùn)，形似鵝卵石，但是能夠明顯看出圖形有一定變形。所以在圖標(biāo)中使用平滑圓角時(shí)，數(shù)值并非越大越好，而是需要選取適當(dāng)大小且統(tǒng)一的平滑圓角數(shù)值。6.1圖標(biāo)風(fēng)格影響因素6.2風(fēng)格化圖標(biāo)的色彩設(shè)計(jì)6.3風(fēng)格化常用功能6.4綜合練習(xí)——繪制飛行器圖標(biāo)6.5綜合練習(xí)——繪制文件夾圖標(biāo)概覽Overview單元6

風(fēng)格化圖標(biāo)單元6

風(fēng)格化圖標(biāo)6.4

綜合練習(xí)——繪制飛行器圖標(biāo)單元6

風(fēng)格化圖標(biāo)6.4

綜合練習(xí)——繪制飛行器圖標(biāo)合并運(yùn)算后的圖形路徑，仍為原圖形的各個(gè)路徑。所以在合并運(yùn)算之后，使用快捷鍵

Alt+Shift+F

拼合圖形，能夠得到合并后圖形外輪廓的路徑。此處需要注意，要先合并四個(gè)矩形，再進(jìn)行拼合，得到路徑才是四個(gè)矩形整體的外輪廓。如果跳過合并步驟，直接拼合圖形，得到的路徑則為四個(gè)矩形各自路徑的組合。單元6

風(fēng)格化圖標(biāo)6.4

綜合練習(xí)——繪制飛行器圖標(biāo)檢查間距，保證對(duì)稱單元6

風(fēng)格化圖標(biāo)6.4

綜合練習(xí)——繪制飛行器圖標(biāo)對(duì)齊編組，保證對(duì)稱6.1圖標(biāo)風(fēng)格影響因素6.2風(fēng)格化圖標(biāo)的色彩設(shè)計(jì)6.3風(fēng)格化常用功能6.4綜合練習(xí)——繪制飛行器圖標(biāo)6.5綜合練習(xí)——繪制文件夾圖標(biāo)概