UI圖標(biāo)圖形設(shè)計FIGMAUI3版單元1圖標(biāo)制作入門李炳琰教師xx學(xué)校xx學(xué)院xxx專業(yè)概覽Overview單元1圖標(biāo)制作入門1.1

圖標(biāo)的基礎(chǔ)知識1.2圖標(biāo)設(shè)計的原則1.3圖標(biāo)設(shè)計軟件圖標(biāo)常被用作指代某個功能，它可以讓觀看者快速識別其所指示的功能。相較于文字形式的信息指示，圖標(biāo)以更加簡潔的圖形，增大了信息識別和傳遞的效率。圖標(biāo)是一種幾何化的、簡約的圖形，如圖所示。在手機(jī)軟件界面中，圖標(biāo)非常常見；在日常生活中，圖標(biāo)也隨處可見，例如道路上的交通安全標(biāo)識、衛(wèi)生間的男女標(biāo)識。這些圖標(biāo)不僅直接、簡潔，而且容易記憶和識別，所以常用于指示信息。在UI領(lǐng)域中，圖標(biāo)也被稱作“ICON”1.1.1

什么是圖標(biāo)單元1圖標(biāo)制作入門1.1

圖標(biāo)的基礎(chǔ)知識左側(cè)使用了圖標(biāo)代表密碼的可見性和選擇日期的按鈕，相同的含義，則需要使用4或5個文字才能表達(dá)出來，這樣增加了用戶認(rèn)知成本。從這個案例可以看出，圖標(biāo)在傳達(dá)含義上的簡潔和高效。在UI界面中，圖標(biāo)已經(jīng)形成了一種界面中的新型“文字”，圖標(biāo)圖形已經(jīng)能夠代替許多功能信息，并且比直接使用文字更加簡潔。圖標(biāo)按鈕與文字按鈕的對比1.1.1

什么是圖標(biāo)1.1

圖標(biāo)的基礎(chǔ)知識左側(cè)使用了向下和向上兩個圖標(biāo)，代表菜單的展開和收回，圖標(biāo)在點(diǎn)擊后上下翻轉(zhuǎn)，同時菜單出現(xiàn)或隱藏，這種操作方式讓用戶很容易理解，幾乎沒有學(xué)習(xí)成本。如果替換成圖中右側(cè)的文字，這種直觀性就消失了。圖標(biāo)的出現(xiàn)不僅讓信息的傳遞簡潔而高效，有時也讓信息的指示更加直觀。適時地使用圖標(biāo)，能夠達(dá)到文字所沒有的直觀和高效。圖標(biāo)按鈕與文字按鈕的對比1.1.1

什么是圖標(biāo)1.1

圖標(biāo)的基礎(chǔ)知識左側(cè)未使用圖標(biāo)，而右側(cè)使用了圖標(biāo)。圖標(biāo)的使用豐富了UI界面的視覺感受。除指代信息和功能以外，圖標(biāo)有時候也用于裝飾。將與文字含義接近的圖標(biāo)與文字組合，一起形成界面中表述的內(nèi)容，這樣比純文字的內(nèi)容更有視覺吸引力。圖標(biāo)的裝飾作用1.1.1

什么是圖標(biāo)1.1

圖標(biāo)的基礎(chǔ)知識圖象字符是基礎(chǔ)的圖標(biāo)圖形，像文字一樣，一個字符是一套圖標(biāo)集的基本單元；裝飾圖標(biāo)（Icon）則是帶有裝飾的圖標(biāo)圖形，可以用來代表應(yīng)用程序、功能、文件等概念，也可以用來裝飾。1.

從功能上劃分從功能上可以將圖標(biāo)圖形劃分：圖象字符（Glyph）裝飾圖標(biāo)（Icon）1.1.2圖標(biāo)的分類單元1圖標(biāo)制作入門1.1

圖標(biāo)的基礎(chǔ)知識圖象字符（Glyph）：試著找一找左圖中的10個圖象字符吧。單元1圖標(biāo)制作入門1.1

圖標(biāo)的基礎(chǔ)知識裝飾圖標(biāo)（Icon）試著找一找圖中的6個圖標(biāo)吧。單元1圖標(biāo)制作入門1.1

圖標(biāo)的基礎(chǔ)知識小貼士單元1圖標(biāo)制作入門1.1

圖標(biāo)的基礎(chǔ)知識2圖標(biāo)與插圖的區(qū)分圖標(biāo)和插圖在設(shè)計上有著明確的區(qū)分，圖標(biāo)注重簡潔性和功能性，而插圖則更側(cè)重于細(xì)節(jié)和藝術(shù)表現(xiàn)。1圖標(biāo)與文字的配合：圖標(biāo)和圖像字符可以獨(dú)立使用，也可以與文字結(jié)合。結(jié)合文字使用時，圖標(biāo)的含義更加清晰。若單獨(dú)使用，應(yīng)選擇用戶熟悉的圖標(biāo)以避免混淆。2.

從圖形上劃分分為三種主要類型：線性圖標(biāo)面性圖標(biāo)線面結(jié)合圖標(biāo)1.1.2圖標(biāo)的分類單元1圖標(biāo)制作入門1.1

圖標(biāo)的基礎(chǔ)知識線性圖標(biāo)：線性圖標(biāo)由線條組成，在界面設(shè)計中特別常見。線性圖標(biāo)的線條粗細(xì)對于圖標(biāo)的識別度和美觀度至關(guān)重要。在界面設(shè)計中，1.5像素粗細(xì)的線條是線性圖標(biāo)的標(biāo)準(zhǔn)選擇，因其與常規(guī)字體的粗細(xì)相匹配，使得圖標(biāo)與文字組合時既協(xié)調(diào)又美觀。單元1圖標(biāo)制作入門1.1

圖標(biāo)的基礎(chǔ)知識面性圖標(biāo)：面性圖標(biāo)由色塊組成，面性圖標(biāo)的色塊一般由多個圖形色塊加減得到。面性圖標(biāo)因其較大的視覺面積和重量感，即使在圖標(biāo)尺寸較小的情況下也能保持相對清晰。單元1圖標(biāo)制作入門1.1

圖標(biāo)的基礎(chǔ)知識線面結(jié)合圖標(biāo)：線面結(jié)合圖標(biāo)也可稱為混合圖標(biāo)，結(jié)合和了填充色塊和描邊線條的特點(diǎn)；可以是整個圖形同時使用填充和描邊，也可以是部分圖形使用填充而部分圖形使用描邊。線面結(jié)合圖標(biāo)通過線條和色塊不同方式的結(jié)合，可以在保持視覺簡潔的同時，增加圖標(biāo)的層次感和識別度，可以制作出卡通、復(fù)古、現(xiàn)代等風(fēng)格的圖標(biāo)。單元1圖標(biāo)制作入門1.1

圖標(biāo)的基礎(chǔ)知識概覽Overview單元1圖標(biāo)制作入門1.1

圖標(biāo)的基礎(chǔ)知識1.2圖標(biāo)設(shè)計的原則1.3圖標(biāo)設(shè)計軟件圖中這些圖標(biāo)在UI界面中已經(jīng)有了約定俗成的含義，所以即使單獨(dú)使用也不會產(chǎn)生歧義。對于那些用戶不熟悉或未廣泛認(rèn)知的圖標(biāo)，建議配合文字使用，以確保用戶能夠正確理解其含義。隨著時間的推移，某些圖標(biāo)已經(jīng)形成了固定用法，因此即使沒有文字說明，這些圖標(biāo)也能準(zhǔn)確代表特定功能。1.2.1約定俗成的圖形單元1圖標(biāo)制作入門1.2圖標(biāo)設(shè)計的原則主頁圖標(biāo)普遍被認(rèn)可為房子形狀，我們可以在這個基礎(chǔ)上，通過調(diào)整圖標(biāo)線條粗細(xì)、圓角、線條連接、繁簡度等細(xì)節(jié)，創(chuàng)造出用戶識別的且有一定風(fēng)格感的圖標(biāo)。這樣既能保持圖標(biāo)的普遍認(rèn)知，又能加入不同的設(shè)計風(fēng)格?？偠灾瑘D標(biāo)具有良好的識別性有助于提高界面設(shè)計的易用性，也是圖標(biāo)設(shè)計需要考慮的首要因素。在用戶界面設(shè)計中，對于那些已經(jīng)深入人心、具有“約定俗成”含義的圖標(biāo)，不建議為追求創(chuàng)新而大幅度改變其圖形。最好的做法是沿用這些圖標(biāo)的原有圖形，或者在不改變其基本識別性的前提下，對細(xì)節(jié)進(jìn)行適度的調(diào)整。不同風(fēng)格的主頁圖標(biāo)單元1圖標(biāo)制作入門1.2圖標(biāo)設(shè)計的原則圖中盡管每個圖標(biāo)的高度相同，但由于形狀不同使它們的面積并不相同，從而在視覺上產(chǎn)生了大小不一的效果。在設(shè)計圖標(biāo)時，視覺大小平衡是一個重要的考量因素，它影響用戶對圖標(biāo)的感知和整體界面的協(xié)調(diào)性。我們的目標(biāo)是確保一套圖標(biāo)中的每個圖標(biāo)在視覺上大小一致，而不是簡單地使它們的寬度或高度相同。1.2.2均衡的視覺大小單元1圖標(biāo)制作入門1.2圖標(biāo)設(shè)計的原則面積是衡量圖形元素視覺“重量”的關(guān)鍵因素。以正方形和圓形為例，當(dāng)它們的寬度和高度相同時，正方形在視覺上看起來比圓形更大。這是因?yàn)樵谙嗤膶捀邨l件下，正方形的面積大于圓形，因此對視覺的影響也更大。所以為了使不同形狀的圖形在視覺上具有相同的大小，我們應(yīng)該基于它們的面積而非單純的寬高來調(diào)整。高度相同與視覺大小相同確保圖標(biāo)視覺大小一致的正確方法是讓它們的面積接近。單元1圖標(biāo)制作入門1.2圖標(biāo)設(shè)計的原則根據(jù)這個原理，我們把不同圖形疊加，比較它們在同一個寬高的外框下面積的大小，也就是它們視覺上的大小。相同外框下的面積大小比較正方形>圓形>三角形=菱形。單元1圖標(biāo)制作入門1.2圖標(biāo)設(shè)計的原則對于一套圖標(biāo)，尤其是當(dāng)圖標(biāo)數(shù)量非常多的時候，僅憑肉眼調(diào)整圖形以保證圖標(biāo)視覺大小均衡是不夠準(zhǔn)確的。因此，引入圖標(biāo)模板是必要的，它可以幫助統(tǒng)一圖標(biāo)的視覺大小。為了保證一套圖標(biāo)在視覺上大小一致，需要根據(jù)每個圖標(biāo)的具體形狀特點(diǎn)來調(diào)整其寬度和高度。對于視覺重量較輕的圖形，如三角形，使用較大的尺寸；而對于視覺重量較重的圖形，如正方形，則使用較小的尺寸。相同外框下的面積大小比較單元1圖標(biāo)制作入門1.2圖標(biāo)設(shè)計的原則在設(shè)計圖標(biāo)時，除了形狀本身對視覺大小的影響，圖形的鏤空程度也對面性圖標(biāo)的視覺重量有顯著影響，因?yàn)殓U空區(qū)域會直接減少視覺面積。鏤空減少了面積第一個圖標(biāo)的鏤空較少。第二個圖標(biāo)中間的鏤空較多，所以增加了其整體的寬高以平衡視覺重量。第三個圖標(biāo)的基礎(chǔ)正方形大小與第一個圖形相同，上方增加了兩個小矩形，一定程度上也緩解了中間鏤空導(dǎo)致的視覺重量的降低。第四個圖標(biāo)由一個正方形和一個矩形組成，且鏤空較小，所以它在設(shè)計時，正方形部分的邊長要小于第一個圖標(biāo)。單元1圖標(biāo)制作入門1.2圖標(biāo)設(shè)計的原則圖中左側(cè)圖標(biāo)三角形與圓形水平居中對齊，二者左右內(nèi)間距均為7像素，此時三角形看起來偏左；右側(cè)圖標(biāo)中三角形右移1像素后，其重心與圓形重心重合，圖標(biāo)視覺上平衡了，此時三角形距左8像素、距右6像素。圖標(biāo)設(shè)計需關(guān)注視覺重心的平衡。視覺重心是在視覺感受上圖形重量平衡的點(diǎn)，有時和圖形的物理中心不重合，不同圖形形狀視覺重心可能不同。視覺重心可以被理解為圖形重量分布的平衡點(diǎn)。想象一下，如果你將一張三角形的紙片放在指尖上，使其保持平衡，那么紙片平衡的位置就是這個三角形的重心，也是三角形的視覺重心1.2.3平衡的視覺重心單元1圖標(biāo)制作入門1.2圖標(biāo)設(shè)計的原則圓形的視覺重心在圓心，三角形視覺上左重右輕，重心偏左。三角形的視覺重心不同單元1圖標(biāo)制作入門1.2圖標(biāo)設(shè)計的原則圖中上方的三個圖標(biāo)雖然在物理中心上與外框中心對齊，但由于它們都包含三角形元素，這導(dǎo)致它們在視覺上出現(xiàn)了偏移：第一個圖標(biāo)看起來偏下，第二個圖標(biāo)偏左，第三個圖標(biāo)也偏下。圖中下方三個圖標(biāo)為調(diào)整后的結(jié)果：第一個圖標(biāo)向上移動，第二個圖標(biāo)向右移動，第三個圖標(biāo)也向上移動。通過這些調(diào)整，圖標(biāo)在模板中的位置得到了優(yōu)化，使得它們在視覺上居中，考慮圖標(biāo)與圖標(biāo)模版的視覺重心重合單元1圖標(biāo)制作入門1.2圖標(biāo)設(shè)計的原則平衡視覺重心的本質(zhì)是在物理中心的基礎(chǔ)上，將圖形向視覺上“較輕”的一側(cè)微移，以補(bǔ)充該區(qū)域的視覺重量。以三角形為例，其“尖角”部分在視覺上顯得“較輕”，因此需向尖角方向微移，以達(dá)到視覺平衡。第一個圖標(biāo)的上半部分在視覺上“較重”，因此它在圖標(biāo)框中的位置相對偏下；第二個圖標(biāo)的下半部分“較重”，所以它在框中偏上；第三個圖標(biāo)的上半部分“較重”，導(dǎo)致它在框中偏下。平衡視覺重心——復(fù)雜組合圖形單元1圖標(biāo)制作入門1.2圖標(biāo)設(shè)計的原則Figma中創(chuàng)建的三角形的外框比其實(shí)際形狀稍大，并且在左側(cè)預(yù)留了空白區(qū)域。這個設(shè)計補(bǔ)償了三角形視覺重量不均勻的分布，使新建的三角形可以直接與其他圖形進(jìn)行水平對齊，而不會引起視覺重心的偏移。三角形與圓形居中對齊后，無需調(diào)整位置，就能得到視覺上均衡的播放圖標(biāo)。圖形工具考慮了視覺重心的平衡問題單元1圖標(biāo)制作入門1.2圖標(biāo)設(shè)計的原則不同字體的字面率在圖標(biāo)設(shè)計中，也需要考慮圖形在外框中的占比，確保同一套圖標(biāo)中所有圖形的占比在視覺上接近，從而保持整體設(shè)計的統(tǒng)一性和視覺上的協(xié)調(diào)性。1.2.4相近的圖形占比單元1圖標(biāo)制作入門1.2圖標(biāo)設(shè)計的原則與字體設(shè)計中的字面率類似，這些圖標(biāo)的圖形占比存在差異，大小不一。然而，在同一套圖標(biāo)中，各個圖形的占比是相對一致的，使得整套圖標(biāo)在視覺上看起來大小協(xié)調(diào)，保持了一致性。。任務(wù)：對比iconfont中不同圖標(biāo)的占比單元1圖標(biāo)制作入門1.2圖標(biāo)設(shè)計的原則一套APP或網(wǎng)站通常需要幾十到上百個圖標(biāo)，這些圖標(biāo)分布在界面的各個角落，共同構(gòu)成用戶對界面的視覺印象。因此，保持圖標(biāo)風(fēng)格的一致性至關(guān)重要。以下3點(diǎn)是基本的設(shè)計原則:圖標(biāo)的類型圖標(biāo)的細(xì)節(jié)處理圖標(biāo)的色彩1.2.5一致的圖標(biāo)風(fēng)格單元1圖標(biāo)制作入門1.2圖標(biāo)設(shè)計的原則概覽Overview單元1圖標(biāo)制作入門1.1

圖標(biāo)的基礎(chǔ)知識1.2圖標(biāo)設(shè)計的原則1.3圖標(biāo)設(shè)計軟件①在瀏覽器中輸入網(wǎng)址：，打開Figma官網(wǎng)。②點(diǎn)擊右上角注冊按鈕③在彈窗中輸入郵箱和密碼④登錄剛才輸入的郵箱，找到Figma發(fā)送的確認(rèn)郵件⑤點(diǎn)擊郵件中的鏈接，跳轉(zhuǎn)至Figma網(wǎng)站，注冊成功注冊賬戶1.3.1

軟件注冊與安裝單元1圖標(biāo)制作入門1.3圖標(biāo)設(shè)計軟件網(wǎng)頁版：使用Figma的瀏覽器版本時，需要下載并安裝字體安裝器。安裝后，要先刷新Figma設(shè)計界面，字體安裝器才會生效注意瀏覽器兼容性文件管理界面1.3.2文件管理桌面版軟件主頁

網(wǎng)頁版返回文件管理界面（主頁）單元1圖標(biāo)制作入門1.3圖標(biāo)設(shè)計軟件文件類型選擇“設(shè)計文件”的格式單元1圖標(biāo)制作入門1.3圖標(biāo)設(shè)計軟件文件管理邏輯：草稿中的文件，可以邀請他人查看草稿中的文件，但無法邀請他人共同編輯。單元1圖標(biāo)制作入門1.3圖標(biāo)設(shè)計軟件1.3.3

設(shè)計界面與視圖控制左側(cè)邊欄：包含“圖層”和“組件”兩個標(biāo)簽。其中“圖層”內(nèi)有頁面和圖層列表。當(dāng)前頁面內(nèi)的，畫布中的所有元素都有對應(yīng)的圖層，不同頁面有不同的畫布。畫布區(qū)域：

是設(shè)計工作的主要區(qū)域，用戶使用鼠標(biāo)和快捷鍵編輯畫布內(nèi)容。右側(cè)邊欄：

修改選中元素的屬性，例如位置、尺寸、填充和描邊等。右上角展示正在查看或編輯文件的用戶，同時設(shè)置了分享按鈕。單元1圖標(biāo)制作入門1.3圖標(biāo)設(shè)計軟件1.3.3

設(shè)計界面與視圖控制縮放視圖：將鼠標(biāo)指針放置在畫布區(qū)域，按住

Ctrl

鍵的同時滾動鼠標(biāo)滾輪。拖動視圖：將鼠標(biāo)指針放置在畫布區(qū)域，按住空格鍵，鼠標(biāo)指針臨時變成“抓手”工具，此時可以拖動視圖。松開空格鍵后，鼠標(biāo)指針會恢復(fù)為原來的工具。我們在設(shè)計界面進(jìn)行圖標(biāo)繪制時，需要不斷地縮放或移動視圖。當(dāng)前視圖縮放比例顯示在右上角（“分享”按鈕下方），默認(rèn)為“100%”，點(diǎn)擊可以修改這個比例。在頻繁調(diào)整視圖時，我們常臨時調(diào)用快捷鍵調(diào)整視圖，以免打斷正在進(jìn)行的操作，以下是兩個視圖控制的快捷鍵：單元1圖標(biāo)制作入門1.3圖標(biāo)設(shè)計軟件1.3.4本書快捷鍵說明按住和按下：“按住”表示按住不放，“按下”則表示只需按下一次即可。Ctrl和Cmd：本書中的快捷鍵為Windows系統(tǒng)對應(yīng)的快捷鍵。如果您使用的是MacOS系統(tǒng)，請將書中的

Ctrl

鍵替換為

Cmd鍵。Alt和Option：本書中的快捷鍵為Windows系統(tǒng)對應(yīng)的快捷鍵。如果您使用的是MacOS系統(tǒng)，請將書中的

Alt

鍵替換為

Optio