UI圖標(biāo)圖形設(shè)計(jì)FIGMAUI3版單元3線性圖標(biāo)——繪制曲線xx學(xué)校xx學(xué)院xxx專業(yè)李炳琰教師概覽Overview3.1基礎(chǔ)圖形創(chuàng)建曲線3.2錨點(diǎn)控制曲線3.3膠囊形狀的曲線3.4單元練習(xí)單元3線性圖標(biāo)——繪制曲線單元3線性圖標(biāo)——繪制曲線3.1.1圖形的圓角右圖中，左右兩側(cè)分別為100×100和200×100兩種矩形，當(dāng)“”圓角半徑的數(shù)值增加至50后，繼續(xù)增加圓角數(shù)值，圖形均不會(huì)產(chǎn)生變化。所以對于矩形，圓角半徑的數(shù)值最大只能增加至短邊邊長的一半。圖形的圓角單元3線性圖標(biāo)——繪制曲線3.1.1圖形的圓角選中矩形后，外觀選項(xiàng)中，圓角輸入框右側(cè)出現(xiàn)獨(dú)立圓角按鈕，用于單獨(dú)控制矩形四個(gè)角的圓角大小。點(diǎn)擊按鈕，展開四個(gè)圓角設(shè)置的輸入框，分別控制矩形的四個(gè)角的圓角大小。要注意的是，修改過錨點(diǎn)的矩形，不再有獨(dú)立圓角功能。矩形的獨(dú)立圓角功能單元3線性圖標(biāo)——繪制曲線3.1.1圖形的圓角選中圖形后，鼠標(biāo)指針移到圖形上時(shí)，圖形轉(zhuǎn)角處會(huì)出現(xiàn)圓角控制點(diǎn)。拖動(dòng)這些控制點(diǎn)可同時(shí)修改圖形所有圓角的大小。鼠標(biāo)指針拖動(dòng)或停留時(shí)，指針旁會(huì)顯示圓角的數(shù)值。圓角控制點(diǎn)單元3線性圖標(biāo)——繪制曲線3.1.1圖形的圓角視圖縮小到一定程度后，軟件將不顯示圓角控制點(diǎn)。此時(shí)，放大視圖即可找到控制點(diǎn)。單元3線性圖標(biāo)——繪制曲線3.1.1圖形的圓角進(jìn)入編輯模式，選中錨點(diǎn)，修改屬性欄中的數(shù)值，即可調(diào)整對應(yīng)錨點(diǎn)的圓角。退出編輯模式后，圖形的圓角屬性顯示為“Mixed”。但是如果在中重新輸入一個(gè)數(shù)值，圖形的所有圓角又會(huì)被重新統(tǒng)一為此數(shù)值。修改錨點(diǎn)對應(yīng)的圓角單元3線性圖標(biāo)——繪制曲線3.1.2案例練習(xí)——繪制地點(diǎn)圖標(biāo)觀察：圖標(biāo)的路徑是旋轉(zhuǎn)了45度的正方形（紅色線），增加圖中三個(gè)藍(lán)色錨點(diǎn)的圓角至最大，便可得到主要圖形，與加號圖形組合，得到該圖標(biāo)。目標(biāo)：練習(xí)增加圓角創(chuàng)建曲線的方法。單元3線性圖標(biāo)——繪制曲線3.1.3

案例練習(xí)——繪制可見圖標(biāo)觀察：圖標(biāo)的路徑是旋轉(zhuǎn)了45度的正方形（紅色線），增加其上下兩個(gè)錨點(diǎn)（藍(lán)色）的圓角并移動(dòng)，便可得到圖標(biāo)的主要圖形。目標(biāo)：練習(xí)“移動(dòng)錨點(diǎn)調(diào)整曲線弧度”的方法。單元3線性圖標(biāo)——繪制曲線3.1.3

案例練習(xí)——繪制可見圖標(biāo)對稱性單元3線性圖標(biāo)——繪制曲線3.1.3

案例練習(xí)——繪制可見圖標(biāo)去除缺口的方法單元3線性圖標(biāo)——繪制曲線3.1.3

案例練習(xí)——繪制可見圖標(biāo)增加圓角去除缺口單元3線性圖標(biāo)——繪制曲線3.1.3

案例練習(xí)——繪制可見圖標(biāo)出現(xiàn)小數(shù)后的對齊技巧本案例中的“眼睛”圖形是通過將一個(gè)15×15（寬×高）的正方形旋轉(zhuǎn)45度并修改圓角得到的。旋轉(zhuǎn)后，圖形寬度變?yōu)?1.57（數(shù)值精確到小數(shù)點(diǎn)后兩位）。由于其寬度為小數(shù)，無法直接與寬高為7×7的正圓對齊。因此，需臨時(shí)取消勾選“對齊到像素”（SnaptoPixelGrid），以解除整數(shù)像素的移動(dòng)限制，從而實(shí)現(xiàn)小數(shù)圖形的對齊。對齊完成后，必須重新勾選“對齊到像素”（SnaptoPixelGrid），否則在繪制和移動(dòng)圖形時(shí)，圖形的大小和位置會(huì)頻繁出現(xiàn)小數(shù)值，導(dǎo)致圖標(biāo)不夠精確。單元3線性圖標(biāo)——繪制曲線3.1.4

案例練習(xí)——繪制地球圖標(biāo)觀察：圖標(biāo)由圓形、兩條橫線和“眼睛”形狀組成，橫線平均排布在圓形內(nèi)部，“眼睛”形狀則與上一步繪制方法相同。目標(biāo)：鞏固練習(xí)曲線繪制方法；鍛煉觀察分析能力。單元3線性圖標(biāo)——繪制曲線3.1.5拓展練習(xí)——用圓角創(chuàng)建曲線練習(xí)目標(biāo)：進(jìn)一步熟練掌握本小節(jié)所學(xué)的知識，鍛煉觀察并分析圖標(biāo)形狀的能力，以及保證曲線對稱的能力。圖標(biāo)曲線部分的形狀，均來自本小節(jié)中的案例。使用本小節(jié)中學(xué)習(xí)的繪制方法，繪制曲線并修改曲線弧度，要注意保持圖形的對稱性。概覽Overview3.1基礎(chǔ)圖形創(chuàng)建曲線3.2錨點(diǎn)控制曲線3.3膠囊形狀的曲線3.4單元練習(xí)單元3線性圖標(biāo)——繪制曲線單元3線性圖標(biāo)——繪制曲線3.2.1錨點(diǎn)與曲線錨點(diǎn)1和錨點(diǎn)2定位曲線的兩端，錨點(diǎn)3則用于控制曲線的弧度。單元3線性圖標(biāo)——繪制曲線3.2.1錨點(diǎn)與曲線給居中的錨點(diǎn)（用于移動(dòng)控制弧線）設(shè)置一個(gè)較大的圓角半徑數(shù)值。這樣可以在移動(dòng)錨點(diǎn)修改弧度時(shí)，曲線始終能保持平滑，而不會(huì)因?yàn)殄^點(diǎn)移動(dòng)距離較大而圓角半徑數(shù)值不夠而失去曲線。單元3線性圖標(biāo)——繪制曲線3.2.2案例練習(xí)——繪制書本圖標(biāo)觀察：圖標(biāo)的形狀左右對稱，所以只需要繪制圖標(biāo)圖形的一半，復(fù)制得到另一半后修改樣式即可。曲線的中間有一個(gè)錨點(diǎn)來創(chuàng)建和控制曲線，我們將曲線中間的錨點(diǎn)標(biāo)記為藍(lán)色，普通錨點(diǎn)標(biāo)記為黃色，得到分析圖。目標(biāo)：練習(xí)增加并移動(dòng)錨點(diǎn)創(chuàng)建曲線的方法。單元3線性圖標(biāo)——繪制曲線3.2.3

案例練習(xí)——繪制海浪圖標(biāo)觀察：圖標(biāo)由四個(gè)相同的波浪線組成，我們只需要繪制其中一個(gè)。我們將波浪線中用于創(chuàng)建曲線的錨點(diǎn)標(biāo)記為藍(lán)色，固定形狀的錨點(diǎn)標(biāo)記為黃色。其中兩端有兩個(gè)綠色的帶圓角錨點(diǎn)，作用是讓線條兩側(cè)端點(diǎn)為水平方向。目標(biāo)：練習(xí)增加并移動(dòng)錨點(diǎn)創(chuàng)建曲線的方法。單元3線性圖標(biāo)——繪制曲線3.2.3

案例練習(xí)——繪制海浪圖標(biāo)繪制圖標(biāo)時(shí)，勾選上“像素網(wǎng)格”可以輔助查看圖形的尺寸和錨點(diǎn)之間的距離等?！跋袼鼐W(wǎng)格”的開關(guān)在右上角顯示視圖大小的菜單欄。像素網(wǎng)格單元3線性圖標(biāo)——繪制曲線3.2.3

案例練習(xí)——繪制海浪圖標(biāo)線段的方向??單元3線性圖標(biāo)——繪制曲線3.2.3

案例練習(xí)——繪制海浪圖標(biāo)快捷鍵

Ctrl

+D

的功能是重復(fù)上一步操作，是一個(gè)非常實(shí)用的快捷鍵，常配合復(fù)制快捷鍵

Alt，用于快速復(fù)制出相同、等間距排列的圖形組。單元3線性圖標(biāo)——繪制曲線3.2.4

拓展練習(xí)——用錨點(diǎn)控制曲線弧度錨點(diǎn)控制曲線綜合訓(xùn)練練習(xí)目標(biāo)：進(jìn)一步熟練掌握本小節(jié)所學(xué)的知識，鍛煉觀察并分析圖標(biāo)形狀的能力、新增錨點(diǎn)繪制曲線的能力。概覽Overview3.1基礎(chǔ)圖形創(chuàng)建曲線3.2錨點(diǎn)控制曲線3.3膠囊形狀的曲線3.4單元練習(xí)單元3線性圖標(biāo)——繪制曲線單元3線性圖標(biāo)——繪制曲線3.3.1圓角數(shù)值的規(guī)律（相鄰錨點(diǎn)）圓角半徑總和>=其線段長度時(shí)，線段完全變?yōu)榛【€兩個(gè)圓角半徑數(shù)值相同，曲線對稱；圓角半徑不同，曲線不對稱，圓角數(shù)值的比例等于圓角大小的比例。單元3線性圖標(biāo)——繪制曲線3.3.1圓角數(shù)值的規(guī)律若僅調(diào)整單個(gè)錨點(diǎn)的圓角，最大允許值為該錨點(diǎn)兩側(cè)短邊的邊長，因?yàn)榕c之相鄰的錨點(diǎn)圓角數(shù)值為零。單元3線性圖標(biāo)——繪制曲線3.3.2

案例練習(xí)——繪制膠囊圖標(biāo)觀察：觀察發(fā)現(xiàn)圖標(biāo)中包含的三個(gè)膠囊形狀。目標(biāo)：練習(xí)繪制膠囊形狀。單元3線性圖標(biāo)——繪制曲線3.3.3拓展練習(xí)——識別并繪制膠囊圖形練習(xí)目標(biāo)：進(jìn)一步熟練掌握本小節(jié)所學(xué)的知識，鍛煉觀察并分析圖標(biāo)形狀的能力，練習(xí)膠囊形狀圖標(biāo)的繪制。概覽Overview3.1基礎(chǔ)圖形創(chuàng)建曲線3.2錨點(diǎn)控制曲線3.3膠囊形狀的曲線3.4單元練習(xí)單元3線性圖標(biāo)——繪制曲線單元3線性圖標(biāo)——繪制曲線3.4.1知識回顧通過調(diào)整錨點(diǎn)的圓角來繪制曲線不僅能夠便捷地實(shí)現(xiàn)精確的曲線效果，還具有很大的靈活性。我們可以先用直線確定輪廓位置，再給錨點(diǎn)添加圓角。即使在添加圓角后，仍可不斷移動(dòng)錨點(diǎn)位置，調(diào)整出最理想的曲線弧度。相比之下，使用鋼筆工具的控制桿繪制曲線則很難達(dá)到這樣的靈活性。本單元主要講解了如何調(diào)整錨點(diǎn)的圓角繪制曲線并修改其樣式。曲線在圖標(biāo)設(shè)計(jì)中非常常見，但繪制圖標(biāo)中的曲線有其特殊方法，并非像普通繪圖中使用鋼筆工具那樣復(fù)雜。通過本單元介紹的方法，基本可以繪制出大多數(shù)圖標(biāo)中的曲線，且繪制出的曲線精確、對稱，具有幾何美感。單元3線性圖標(biāo)——繪制曲線3.4.2練習(xí)鞏固根據(jù)本單元的學(xué)習(xí)內(nèi)容，請大家分析并繪制下列圖標(biāo)。繪制時(shí)要觀察圖標(biāo)的形狀路徑、分析圖標(biāo)上錨點(diǎn)分布的位置、以及需要增加圓角的錨點(diǎn)。理清思路后，曲線圖標(biāo)的繪制將非常簡單。單元3線性圖標(biāo)——繪制曲線3.4.3單元訓(xùn)練答