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

圖標(biāo)的基礎(chǔ)知識1.2圖標(biāo)設(shè)計(jì)的原則1.3圖標(biāo)設(shè)計(jì)軟件圖標(biāo)常被用作指代某個(gè)功能，它可以讓觀看者快速識別其所指示的功能。相較于文字形式的信息指示，圖標(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個(gè)文字才能表達(dá)出來，這樣增加了用戶認(rèn)知成本。從這個(gè)案例可以看出，圖標(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è)使用了向下和向上兩個(gè)圖標(biāo)，代表菜單的展開和收回，圖標(biāo)在點(diǎn)擊后上下翻轉(zhuǎn)，同時(shí)菜單出現(xiàn)或隱藏，這種操作方式讓用戶很容易理解，幾乎沒有學(xué)習(xí)成本。如果替換成圖中右側(cè)的文字，這種直觀性就消失了。圖標(biāo)的出現(xiàn)不僅讓信息的傳遞簡潔而高效，有時(shí)也讓信息的指示更加直觀。適時(shí)地使用圖標(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)有時(shí)候也用于裝飾。將與文字含義接近的圖標(biāo)與文字組合，一起形成界面中表述的內(nèi)容，這樣比純文字的內(nèi)容更有視覺吸引力。圖標(biāo)的裝飾作用1.1.1

什么是圖標(biāo)1.1

圖標(biāo)的基礎(chǔ)知識圖象字符是基礎(chǔ)的圖標(biāo)圖形，像文字一樣，一個(gè)字符是一套圖標(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個(gè)圖象字符吧。單元1圖標(biāo)制作入門1.1

圖標(biāo)的基礎(chǔ)知識裝飾圖標(biāo)（Icon）試著找一找圖中的6個(gè)圖標(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è)計(jì)上有著明確的區(qū)分，圖標(biāo)注重簡潔性和功能性，而插圖則更側(cè)重于細(xì)節(jié)和藝術(shù)表現(xiàn)。1圖標(biāo)與文字的配合：圖標(biāo)和圖像字符可以獨(dú)立使用，也可以與文字結(jié)合。結(jié)合文字使用時(shí)，圖標(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è)計(jì)中特別常見。線性圖標(biāo)的線條粗細(xì)對于圖標(biāo)的識別度和美觀度至關(guān)重要。在界面設(shè)計(jì)中，1.5像素粗細(xì)的線條是線性圖標(biāo)的標(biāo)準(zhǔn)選擇，因其與常規(guī)字體的粗細(xì)相匹配，使得圖標(biāo)與文字組合時(shí)既協(xié)調(diào)又美觀。單元1圖標(biāo)制作入門1.1

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

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

圖標(biāo)的基礎(chǔ)知識1.2圖標(biāo)設(shè)計(jì)的原則1.3圖標(biāo)設(shè)計(jì)軟件①在瀏覽器中輸入網(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è)計(jì)軟件網(wǎng)頁版：使用Figma的瀏覽器版本時(shí)，需要下載并安裝字體安裝器。安裝后，要先刷新Figma設(shè)計(jì)界面，字體安裝器才會生效注意瀏覽器兼容性文件管理界面1.3.2文件管理桌面版軟件主頁

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

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

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

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

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

Ctrl

鍵的同時(shí)滾動(dòng)鼠標(biāo)滾輪。拖動(dòng)視圖：將鼠標(biāo)指針放置在畫布區(qū)域，按住空格鍵，鼠標(biāo)指針臨時(shí)變成“抓手”工具，此時(shí)可以拖動(dòng)視圖。松開空格鍵后，鼠標(biāo)指針會恢復(fù)為原來的工具。我們在設(shè)計(jì)界面進(jìn)行圖標(biāo)繪制時(shí)，需要不斷地縮放或移動(dòng)視圖。當(dāng)前視圖縮放比例顯示在右上角（“分享”按鈕下方），默認(rèn)為“100%”，點(diǎn)擊可以修改這個(gè)比例。在頻繁調(diào)整視圖時(shí)，我們常臨時(shí)調(diào)用快捷鍵調(diào)整視圖，以免打斷正在進(jìn)行的操作，以下是兩個(gè)視圖控制的快捷鍵：單元1圖標(biāo)制作入門1.3圖標(biāo)設(shè)計(jì)軟件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

鍵替換為

Option鍵。單元1圖標(biāo)制作入門1.3圖標(biāo)設(shè)計(jì)軟件1.3.5

文件共享文件的權(quán)限有“可查看”和“可編輯”兩種。如果無法選擇“可編輯”權(quán)限，說明文件不在項(xiàng)目中，將文件移動(dòng)到項(xiàng)目文件夾中，可啟用該狀態(tài)。權(quán)限評論按下快捷鍵

C或者選擇工具欄中的“評論”工具，鼠標(biāo)指針會切換成評論圖標(biāo)，在畫布中任一位置單擊，即可在該位置發(fā)表評論。按下

Esc鍵，退出評論功能。單元1圖標(biāo)制作入門1.3圖標(biāo)設(shè)計(jì)軟件1.3.6中文設(shè)計(jì)軟件MasterGo：/即時(shí)設(shè)計(jì)：https://js.designPixso：/三款國產(chǎn)UI設(shè)計(jì)軟件單元1圖標(biāo)制作入門1.3圖標(biāo)設(shè)計(jì)軟件UI圖標(biāo)圖形設(shè)計(jì)FIGMAUI3版單元2線性圖標(biāo)—錨點(diǎn)操作xx學(xué)校xx學(xué)院xxx專業(yè)李炳琰教師概覽Overview2.1基礎(chǔ)圖形2.2基礎(chǔ)圖形的變形——增加并移動(dòng)錨點(diǎn)2.3制作斷線-增加并刪除錨點(diǎn)2.4單元練習(xí)單元2線性圖標(biāo)—錨點(diǎn)操作單元2線性圖標(biāo)—錨點(diǎn)操作2.1.1基礎(chǔ)圖形工具圖形工具插入圖形：選擇某個(gè)圖形工具后，拖曳鼠標(biāo)，可插入與拖曳區(qū)域大小相同的圖形。除直線外，其他圖形還可以通過在空白處單擊鼠標(biāo)進(jìn)行插入。2.1基礎(chǔ)圖形2.1.1基礎(chǔ)圖形工具修改圖形大?。哼x中圖形后，圖形周圍出現(xiàn)藍(lán)色選框，藍(lán)色選框的四角顯示正方形的控制點(diǎn)。拖曳圖形的藍(lán)色邊線或者四角的控制點(diǎn)，可修改圖形的寬高。如果在拖曳的同時(shí)，按住

Shift

鍵，可等比例縮放圖形?？旖萱I：用快捷鍵可以方便地調(diào)用和切換圖形工具。矩形工具的快捷鍵是

R，是“Rectangle”的首字母。橢圓工具的快捷鍵是

O，是“Oval”的首字母。2.1基礎(chǔ)圖形2.1.1基礎(chǔ)圖形工具描邊設(shè)置：描邊的屬性主要包括顏色、對齊方式和線條粗細(xì)，在線條粗細(xì)的輸入框中輸入數(shù)值或在其圖標(biāo)上拖拽鼠標(biāo)，即可修改線條的粗細(xì)2.1基礎(chǔ)圖形2.1.1基礎(chǔ)圖形工具描邊對齊方式2.1基礎(chǔ)圖形2.1.1基礎(chǔ)圖形工具選擇居中描邊：不同的描邊對齊方式會影響圖形的視覺大小。在設(shè)計(jì)圖標(biāo)時(shí)，建議盡量統(tǒng)一使用居中描邊，以保證圖標(biāo)的大小一致性和樣式的適應(yīng)性。單元2線性圖標(biāo)—錨點(diǎn)操作2.1.2案例練習(xí)—繪制側(cè)邊欄圖標(biāo)側(cè)邊欄圖標(biāo)觀察：仔細(xì)觀察發(fā)現(xiàn)，圖標(biāo)可以看作由左右兩個(gè)寬度不同、高度相同的矩形組成，也可以看作由一個(gè)矩形和一條豎線組成。這里講解第一種思路的繪制方法。目標(biāo)：學(xué)習(xí)繪制矩形圖形，熟悉基礎(chǔ)圖形工具。單元2線性圖標(biāo)—錨點(diǎn)操作2.1.2案例練習(xí)—繪制側(cè)邊欄圖標(biāo)線段的三種連接不同描邊對齊方式下的連接效果單元2線性圖標(biāo)—錨點(diǎn)操作2.1.3

案例練習(xí)—繪制搜索圖標(biāo)搜索圖標(biāo)觀察：仔細(xì)觀察后發(fā)現(xiàn)，圖標(biāo)由一個(gè)圓形和一條短線組成，整體是傾斜狀態(tài)。目標(biāo)：學(xué)習(xí)繪制傾斜圖標(biāo)。對于傾斜圖標(biāo)的繪制，要先將所有圖形按垂直方向繪制好，再將所有圖形編組后旋轉(zhuǎn)。這樣保證多個(gè)圖形的對齊和對稱。單元2線性圖標(biāo)—錨點(diǎn)操作2.1.3

案例練習(xí)—繪制搜索圖標(biāo)直線和鋼筆工具繪制出的線段對比線段對齊問題單元2線性圖標(biāo)—錨點(diǎn)操作2.1.4

案例練習(xí)—繪制魔法棒圖標(biāo)魔法棒圖標(biāo)觀察：仔細(xì)觀察發(fā)現(xiàn)，圖標(biāo)由一個(gè)五角星和一條短線組成，五角星和短線沒有相接，圖標(biāo)整體向左傾斜。目標(biāo)：學(xué)習(xí)使用“星形（Star）”工具的方法，進(jìn)一步熟悉軟件。單元2線性圖標(biāo)—錨點(diǎn)操作2.1.4

案例練習(xí)—繪制魔法棒圖標(biāo)星形的控制點(diǎn)星形角度比率變化概覽Overview2.1基礎(chǔ)圖形2.2基礎(chǔ)圖形的變形——增加并移動(dòng)錨點(diǎn)2.3制作斷線-增加并刪除錨點(diǎn)2.4單元練習(xí)單元1圖標(biāo)制作入門單元2線性圖標(biāo)—錨點(diǎn)操作2.2.1錨點(diǎn)操作圖形不同狀態(tài)圖形有三種不同的狀態(tài)：未選中、選中和編輯。通過有無選中框和選中框的樣式，可以區(qū)分這三種狀態(tài)。選中圖形時(shí)，選中框顯示為藍(lán)色路徑線，圖形四角顯示為正方形控制點(diǎn)。編輯圖形路徑時(shí)，選中框?yàn)榛疑窂骄€，圖形四角顯示出圓形的錨點(diǎn)控制點(diǎn)。單元2線性圖標(biāo)—錨點(diǎn)操作2.2.1錨點(diǎn)操作進(jìn)入編輯模式三種方式可以進(jìn)入編輯模式：①直接“雙擊”圖形②選中圖形后按下

Enter鍵③選中圖形后，單擊頂部工具欄中間的“編輯對象（Editobject）”圖標(biāo)如果圖形僅含有較細(xì)的描邊，不容易雙擊，或者希望同時(shí)選中多個(gè)圖形并一同進(jìn)入編輯模式，推薦使用第二種方法——選中圖形后按下

Enter鍵。單元2線性圖標(biāo)—錨點(diǎn)操作2.2.1錨點(diǎn)操作編輯模式下的工具欄按下

ESC鍵或在空白處雙擊，可退出編輯模式。單元2線性圖標(biāo)—錨點(diǎn)操作2.2.1錨點(diǎn)操作編輯模式下，使用“移動(dòng)工具”可以選擇和取消錨點(diǎn)，操作如下：①單擊鼠標(biāo)，單選錨點(diǎn)，選中后的錨點(diǎn)由空心圓變?yōu)樗{(lán)色的實(shí)心圓。②單擊鼠標(biāo)時(shí)按住shift鍵，多選錨點(diǎn)。③按住鼠標(biāo)拖曳，批量多選錨點(diǎn)，拖曳區(qū)域?yàn)樗{(lán)色半透明矩形。④按下ESC鍵，或鼠標(biāo)在空白處單擊，取消選擇錨點(diǎn)。選擇錨點(diǎn)：單元2線性圖標(biāo)—錨點(diǎn)操作2.2.1錨點(diǎn)操作編輯模式下，選中錨點(diǎn)后，移動(dòng)錨點(diǎn)的方式如下：①鼠標(biāo)拖動(dòng)：選擇“移動(dòng)工具”，拖曳在選中的錨點(diǎn)上，移動(dòng)被選中的單個(gè)或多個(gè)錨點(diǎn)。②按鍵盤的方向鍵：按一次鍵盤的↑鍵，錨點(diǎn)向上移動(dòng)1像素。按住

shift

鍵的同時(shí)，按一次鍵盤的↑鍵，錨點(diǎn)向上移動(dòng)10像素。其他方向鍵同理。③屬性設(shè)置：在“X”和“Y”中輸入具體的數(shù)值或公式，可以精確地移動(dòng)錨點(diǎn)。例如想讓多個(gè)錨點(diǎn)同時(shí)向左和向下移動(dòng)15像素，可在“Y”輸入框內(nèi)添加“+15“，在“X”輸入框內(nèi)添加“-15”，按回車后完成移動(dòng)。移動(dòng)錨點(diǎn)：單元2線性圖標(biāo)—錨點(diǎn)操作2.2.1錨點(diǎn)操作“X”坐標(biāo)軸向右：“X”值增加，對象向右移動(dòng)，“X”值減少，對象向左移動(dòng)。“Y”坐標(biāo)軸向下：“Y”值增加，對象向下移動(dòng)，“Y”值減少，對象向上移動(dòng)。坐標(biāo)軸方向：單元2線性圖標(biāo)—錨點(diǎn)操作2.2.1錨點(diǎn)操作在編輯模式下，使用“移動(dòng)”或“鋼筆”工具，將鼠標(biāo)懸停在路徑線上，鼠標(biāo)指針會變?yōu)椋崾究尚略鲥^點(diǎn)的位置，單擊可新增錨點(diǎn)。不同之處：“移動(dòng)”工具只能在軟件提示的兩個(gè)錨點(diǎn)之間的中點(diǎn)位置新增錨點(diǎn)，而“鋼筆”工具可以在路徑線上任意位置新增錨點(diǎn)。新增錨點(diǎn)：單元2線性圖標(biāo)—錨點(diǎn)操作2.2.1錨點(diǎn)操作在編輯模式下，使用“鋼筆”工具，新增一個(gè)錨點(diǎn)后，繼續(xù)單擊新增下一個(gè)錨點(diǎn)，錨點(diǎn)之間會生成連接錨點(diǎn)的路徑。軟件允許連接圖形中任意兩個(gè)錨點(diǎn)，甚至是封閉路徑上的錨點(diǎn)。

連接錨點(diǎn)：單元2線性圖標(biāo)—錨點(diǎn)操作2.2.2案例練習(xí)——繪制主頁圖標(biāo)觀察：圖標(biāo)的基礎(chǔ)圖形是矩形，有四個(gè)錨點(diǎn)（藍(lán)色）。在矩形的上邊新增一個(gè)錨點(diǎn)（紅色），并其上移，得到圖標(biāo)外輪廓。繪制一條橫線與其組合，得到完整圖標(biāo)。目標(biāo)：練習(xí)增加和移動(dòng)錨點(diǎn)。單元2線性圖標(biāo)—錨點(diǎn)操作2.2.2案例練習(xí)——繪制主頁圖標(biāo)為什么要及時(shí)退出編輯模式？單元2線性圖標(biāo)—錨點(diǎn)操作2.2.2案例練習(xí)——繪制主頁圖標(biāo)復(fù)制和粘貼圖層屬性通過快捷鍵，可以復(fù)制“房子”的圖形屬性，粘貼到“橫線”的圖形屬性中。復(fù)制屬性：Ctrl+Alt+C粘貼屬性：Ctrl+Alt+V單元2線性圖標(biāo)—錨點(diǎn)操作2.2.2案例練習(xí)——繪制主頁圖標(biāo)以整數(shù)居中對齊——奇偶性一致單元2線性圖標(biāo)—錨點(diǎn)操作2.2.2案例練習(xí)——繪制主頁圖標(biāo)線段與圖形的對齊單元2線性圖標(biāo)—錨點(diǎn)操作2.2.3

案例練習(xí)——繪制文件夾圖標(biāo)觀察：圖標(biāo)的基礎(chǔ)圖形是矩形，有四個(gè)錨點(diǎn)（藍(lán)色）。在矩形的上邊新增兩個(gè)錨點(diǎn)（紅色），并將左上邊一藍(lán)一紅兩個(gè)錨點(diǎn)同時(shí)上移，得到圖標(biāo)外輪廓。繪制一條橫線與其組合，得到完整圖標(biāo)。目標(biāo)：練習(xí)增加多個(gè)錨點(diǎn)、單獨(dú)設(shè)置錨點(diǎn)轉(zhuǎn)角；智能參考線和查看間距的方法。單元2線性圖標(biāo)—錨點(diǎn)操作2.2.3

案例練習(xí)——繪制文件夾圖標(biāo)對齊到像素：在右上角視圖調(diào)整菜單中，默認(rèn)勾選，圖形的大小和坐標(biāo)會自動(dòng)對齊到整數(shù)像素。這在設(shè)計(jì)圖標(biāo)時(shí)非常重要，確保圖標(biāo)的圖形的精確。在本例中，錨點(diǎn)2位于一條18像素長的線段的1/4位置，因此它的橫坐標(biāo)計(jì)算為3200+18*1/4=3204.5像素。輸入小數(shù)：雖然勾選了“對齊到像素”，軟件仍允許用戶在坐標(biāo)值“X”“Y”和寬高“W”“H”的輸入框中手動(dòng)輸入小數(shù)值，以便處理某些特殊情況。但使用鼠標(biāo)移動(dòng)或拖曳圖形時(shí)，坐標(biāo)和尺寸又會自動(dòng)以整數(shù)值進(jìn)行調(diào)整。單元2線性圖標(biāo)—錨點(diǎn)操作2.2.3

案例練習(xí)——繪制文件夾圖標(biāo)智能參考線單元2線性圖標(biāo)—錨點(diǎn)操作2.2.3

案例練習(xí)——繪制文件夾圖標(biāo)住Alt鍵（Windows系統(tǒng)）或Option鍵（Mac系統(tǒng)）查看間距單元2線性圖標(biāo)—錨點(diǎn)操作2.2.4

案例練習(xí)——繪制文件圖標(biāo)觀察：圖標(biāo)的基礎(chǔ)圖形是矩形，有四個(gè)錨點(diǎn)（藍(lán)色）。在矩形的上、左兩邊各新增一個(gè)錨點(diǎn)（紅色），并將矩形左上角的錨點(diǎn)（藍(lán)色）向右下移動(dòng)，移動(dòng)后的錨點(diǎn)（藍(lán)色）需與新增的兩個(gè)錨點(diǎn)（紅色）水平和垂直對齊，從而形成一個(gè)直角三角形。目標(biāo)：連接封閉圖形的任意錨點(diǎn)；理解居中描邊的作用。單元2線性圖標(biāo)—錨點(diǎn)操作2.2.4

案例練習(xí)——繪制文件圖標(biāo)特殊圖形在不同描邊對齊方式下的效果單元2線性圖標(biāo)—錨點(diǎn)操作2.2.5案例練習(xí)——繪制地圖圖標(biāo)觀察：圖標(biāo)的基礎(chǔ)圖形是矩形，有四個(gè)錨點(diǎn)（藍(lán)色）。在矩形的上下兩邊各新增兩個(gè)錨點(diǎn)（紅色），并調(diào)整其位置。上下兩行錨點(diǎn)分別在水平方向上均勻分布，所以圖標(biāo)中的四條豎線間距相等。錨點(diǎn)兩兩（一藍(lán)一紅）水平對齊，所以圖標(biāo)中的斜線對稱或平行。目標(biāo)：學(xué)習(xí)水平分布功能單元2線性圖標(biāo)—錨點(diǎn)操作2.2.6

拓展練習(xí)——操作錨點(diǎn)繪制圖標(biāo)練習(xí)目標(biāo)：進(jìn)一步熟練掌握本小節(jié)所學(xué)的知識，鍛煉觀察并分析圖標(biāo)錨點(diǎn)的能力，保證圖標(biāo)對稱的能力。在繪制時(shí)，要注意圖形對稱。例如1，3，4三個(gè)圖標(biāo)，在移動(dòng)錨點(diǎn)時(shí)，要保證兩側(cè)錨點(diǎn)移動(dòng)相等的距離。概覽Overview2.1基礎(chǔ)圖形2.2基礎(chǔ)圖形的變形——增加并移動(dòng)錨點(diǎn)2.3制作斷線-增加并刪除錨點(diǎn)2.4單元練習(xí)單元1圖標(biāo)制作入門單元2線性圖標(biāo)—錨點(diǎn)操作2.3制作斷線-增加并刪除錨點(diǎn)許多線性圖標(biāo)是由多個(gè)圖形組合而成，其組合方式之一是“截?cái)唷蹦硞€(gè)圖形后“嵌入”其他圖形，即通過在原本完整的圖形上制造開口，并在斷口處放置其他圖形，從而形成完整圖標(biāo)，單元2線性圖標(biāo)—錨點(diǎn)操作2.3制作斷線-增加并刪除錨點(diǎn)舉例：阿里健康品牌圖標(biāo)庫單元2線性圖標(biāo)—錨點(diǎn)操作2.3.1刪除錨點(diǎn)斷開線段刪除錨點(diǎn)①“鋼筆工具”：按住

Alt

鍵，鼠標(biāo)指針變?yōu)?，在錨點(diǎn)上單擊即可刪除該錨點(diǎn)。②“刪除/退格鍵”：單選或多選錨點(diǎn)后，按下

Delete鍵，刪除選中錨點(diǎn)。單元2線性圖標(biāo)—錨點(diǎn)操作2.3.1刪除錨點(diǎn)斷開線段使用退格鍵刪除錨點(diǎn)鋼筆工具刪除錨點(diǎn)單元2線性圖標(biāo)—錨點(diǎn)操作2.3.1刪除錨點(diǎn)斷開線段開口圖形的描邊對齊方式當(dāng)原本閉合的圖形變?yōu)殚_口圖形后，描邊的對齊方式選項(xiàng)盡管沒變，但本質(zhì)上都變?yōu)榱恕熬又忻柽叀钡臉邮健Ｒ虼?，建議在設(shè)計(jì)圖形時(shí)優(yōu)先選擇“居中描邊”，這樣當(dāng)圖形被修改為開口圖形后，其原本的大小不會產(chǎn)生變化。單元2線性圖標(biāo)—錨點(diǎn)操作2.3.1刪除錨點(diǎn)斷開線段不同描邊對齊方式的適應(yīng)性單元2線性圖標(biāo)—錨點(diǎn)操作2.3.1刪除錨點(diǎn)斷開線段創(chuàng)建開口的技巧建一個(gè)開口共需3個(gè)錨點(diǎn)：兩個(gè)定位開口的錨點(diǎn)（圖中紅色錨點(diǎn)）和一個(gè)開口內(nèi)任意位置的錨點(diǎn)（圖中黃色）。根據(jù)圖形本身的錨點(diǎn)分布，這三個(gè)錨點(diǎn)可以是原圖形有的，也可以是自行創(chuàng)建的。紅色的定位錨點(diǎn)位于開口的兩端。如果路徑線是直線，創(chuàng)建開口后，可移動(dòng)這兩個(gè)錨點(diǎn)修改開口的大小。黃色的開口內(nèi)錨點(diǎn)位于兩個(gè)紅色錨點(diǎn)之間，刪除這個(gè)錨點(diǎn)即可創(chuàng)建開口。該錨點(diǎn)可位于開口之間的任何位置。單元2線性圖標(biāo)—錨點(diǎn)操作2.3.2案例練習(xí)——繪制分享圖標(biāo)觀察：圖標(biāo)的基礎(chǔ)圖形是矩形，右上角產(chǎn)生了開口，標(biāo)記其錨點(diǎn)為藍(lán)色。開口處放置了一個(gè)箭頭圖形，標(biāo)記其錨點(diǎn)為黃色。目標(biāo)：開口的制作方法；單獨(dú)設(shè)置圓角。單元2線性圖標(biāo)—錨點(diǎn)操作2.3.3

案例練習(xí)——繪制開關(guān)圖標(biāo)觀察：圖標(biāo)的基礎(chǔ)圖形是圓形，頂部有開口，開口處有兩個(gè)新增的藍(lán)色錨點(diǎn)。還有一條豎線，由兩個(gè)黃色的錨點(diǎn)組成。目標(biāo)：制作對稱的開口圓形。單元2線性圖標(biāo)—錨點(diǎn)操作2.3.3

案例練習(xí)——繪制開關(guān)圖標(biāo)連續(xù)添加錨點(diǎn)的連線效果注意：圓形的開口制作完成后，不能再移動(dòng)錨點(diǎn)，否則會破壞圓形和弧線。單元2線性圖標(biāo)—錨點(diǎn)操作2.3.4

案例練習(xí)——繪制上傳圖標(biāo)觀察：圖標(biāo)的基礎(chǔ)圖形是矩形，頂部有兩處開口，內(nèi)部有一個(gè)箭頭。頂部的開口由7個(gè)藍(lán)色的錨點(diǎn)組成，其中矩形右邊線的頂端線的形狀，該位置有兩個(gè)錨點(diǎn)。目標(biāo)：制作開口圖形。單元2線性圖標(biāo)—錨點(diǎn)操作2.3.5

拓展練習(xí)——打破閉合圖形概覽Overview2.1基礎(chǔ)圖形2.2基礎(chǔ)圖形的變形——增加并移動(dòng)錨點(diǎn)2.3制作斷線-增加并刪除錨點(diǎn)2.4單元練習(xí)單元1圖標(biāo)制作入門單元綜合訓(xùn)練區(qū)域填充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ù)值，圖形均不會產(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)角處會出現(xiàn)圓角控制點(diǎn)。拖動(dòng)這些控制點(diǎn)可同時(shí)修改圖形所有圓角的大小。鼠標(biāo)指針拖動(dòng)或停留時(shí)，指針旁會顯示圓角的數(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ù)值，圖形的所有圓角又會被重新統(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í)，圖形的大小和位置會頻繁出現(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í)，曲線始終能保持平滑，而不會因?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è)