項(xiàng)目二APP應(yīng)用圖標(biāo)設(shè)計(jì)任務(wù)三異形圖標(biāo)設(shè)計(jì)任務(wù)說(shuō)明：

該任務(wù)主要針對(duì)APP應(yīng)用圖標(biāo)中的異形圖標(biāo)設(shè)計(jì)的內(nèi)容進(jìn)行講解，對(duì)常見(jiàn)的圖標(biāo)風(fēng)格和分類(lèi)、鋼筆工具、FX圖層樣式、圖層混合模式、圖層蒙版等內(nèi)容進(jìn)行知識(shí)性的導(dǎo)入，并通過(guò)具體的任務(wù)實(shí)現(xiàn)過(guò)程進(jìn)行實(shí)操性演練。知識(shí)導(dǎo)入：1、常見(jiàn)的圖標(biāo)風(fēng)格和分類(lèi)：

在用戶(hù)界面設(shè)計(jì)中，圖標(biāo)是必不可少的元素。雖然絕大多數(shù)的圖標(biāo)都很小，甚至不被人注意到，但是它卻幫助設(shè)計(jì)和用戶(hù)解決了很多的問(wèn)題。圖標(biāo)的風(fēng)格和分類(lèi)，將從功能、表現(xiàn)形式、設(shè)計(jì)風(fēng)格三方面來(lái)分類(lèi)。1、常見(jiàn)的圖標(biāo)風(fēng)格和分類(lèi)：（1）從功能上分類(lèi)

按功能分類(lèi)，圖標(biāo)又可以分為交互式圖標(biāo)、裝飾性圖標(biāo)和說(shuō)明性圖標(biāo)。1、常見(jiàn)的圖標(biāo)風(fēng)格和分類(lèi)：（1）從功能上分類(lèi)

交互式圖標(biāo)：具有雙向傳遞信息的能力，不僅可以是向用戶(hù)傳遞某種信息，也可以引導(dǎo)用戶(hù)執(zhí)行某種特定的操作。例如：登錄注冊(cè)按鈕、開(kāi)關(guān)按鈕、點(diǎn)贊、轉(zhuǎn)發(fā)按鈕等都屬于交互式圖標(biāo)。1、常見(jiàn)的圖標(biāo)風(fēng)格和分類(lèi)：：（1）從功能上分類(lèi)

裝飾性圖標(biāo)：這種圖標(biāo)通常用來(lái)提升整個(gè)界面的美感和視覺(jué)體驗(yàn)，并不具備明顯的功能。這類(lèi)圖標(biāo)較多地運(yùn)用在手機(jī)主題中，它具備特定風(fēng)格的外觀裝飾。1、常見(jiàn)的圖標(biāo)風(fēng)格和分類(lèi)：（1）從功能上分類(lèi)

說(shuō)明性圖標(biāo)：重在闡述信息。在某種情況下，說(shuō)明性圖標(biāo)不可以直接作為可交互的UI元素，它們常常作為視覺(jué)輔助元素出現(xiàn)，以提高信息的可識(shí)別性。1、常見(jiàn)的圖標(biāo)風(fēng)格和分類(lèi)：（2）從表現(xiàn)形式上分類(lèi)

按表現(xiàn)形式分類(lèi)，圖標(biāo)又可以分為隱喻圖標(biāo)、工具圖標(biāo)和混合圖標(biāo)。1、常見(jiàn)的圖標(biāo)風(fēng)格和分類(lèi)：（2）從表現(xiàn)形式上分類(lèi)

隱喻圖標(biāo)：兩者互不關(guān)聯(lián)，但卻又有著某種千絲萬(wàn)縷的聯(lián)系，以此來(lái)達(dá)成記憶的目的的圖標(biāo)。比如：設(shè)置圖標(biāo)、郵件圖標(biāo)、購(gòu)物圖標(biāo)、搜索圖標(biāo)等。1、常見(jiàn)的圖標(biāo)風(fēng)格和分類(lèi)：（2）從表現(xiàn)形式上分類(lèi)

工具圖標(biāo)：主要以行業(yè)分類(lèi)，使用范圍較廣，大眾識(shí)別度較高，且被長(zhǎng)期使用的。例如：醫(yī)療圖標(biāo)、建筑行業(yè)圖標(biāo)等。1、常見(jiàn)的圖標(biāo)風(fēng)格和分類(lèi)：（2）從表現(xiàn)形式上分類(lèi)

混合圖標(biāo)：混合不同風(fēng)格的圖標(biāo)，以便達(dá)到不同的視覺(jué)效果，多用于設(shè)計(jì)師個(gè)性的表達(dá)。例如：MEB粗描邊風(fēng)格。1、常見(jiàn)的圖標(biāo)風(fēng)格和分類(lèi)：（3）從設(shè)計(jì)風(fēng)格上分類(lèi)

按設(shè)計(jì)風(fēng)格分類(lèi)，圖標(biāo)又可以分為面性圖標(biāo)、線性圖標(biāo)、扁平圖標(biāo)和擬物圖標(biāo)等。1、常見(jiàn)的圖標(biāo)風(fēng)格和分類(lèi)：（3）從設(shè)計(jì)風(fēng)格上分類(lèi)

面性圖標(biāo)：使用范圍最廣的圖標(biāo)之一，穩(wěn)定性好，圖標(biāo)層次感清晰。1、常見(jiàn)的圖標(biāo)風(fēng)格和分類(lèi)：（3）從設(shè)計(jì)風(fēng)格上分類(lèi)

線性圖標(biāo)：使用感更輕盈、簡(jiǎn)約。主要以線條表現(xiàn)為主。1、常見(jiàn)的圖標(biāo)風(fēng)格和分類(lèi)：（3）從設(shè)計(jì)風(fēng)格上分類(lèi)

扁平圖標(biāo)：其實(shí)就是線+面，或面+面的表現(xiàn)形式。扁平化圖標(biāo)具有個(gè)性化、年輕化、可拓展的特征。扁平圖標(biāo)專(zhuān)注于清晰直觀的信息傳達(dá)，為客戶(hù)提供一目了然的視覺(jué)感受。扁平圖標(biāo)突出功能，不借助復(fù)雜的投影和紋理，與擬物圖標(biāo)相對(duì)。1、常見(jiàn)的圖標(biāo)風(fēng)格和分類(lèi)：（3）從設(shè)計(jì)風(fēng)格上分類(lèi)

擬物圖標(biāo)：盡可能地將現(xiàn)實(shí)生活中的形狀、紋理、光陰都融入到圖表中，盡可能地逼真是擬物圖標(biāo)的特點(diǎn)。擬物圖標(biāo)較多地運(yùn)用在游戲設(shè)計(jì)和游戲產(chǎn)品類(lèi)圖表中。2、鋼筆工具：

鋼筆工具是非常重要且實(shí)用的一個(gè)工具。鋼筆工具位于工具欄上，包含了“鋼筆工具”、“自由鋼筆工具”、“彎度鋼筆工具”、“添加錨點(diǎn)工具”、“刪除錨點(diǎn)工具”和“轉(zhuǎn)換點(diǎn)工具”。鋼筆工具的快捷鍵是【P】。2、鋼筆工具：

在PS軟件中，使用鋼筆工具繪制路徑的方法很簡(jiǎn)單。只需要使用鋼筆工具在起點(diǎn)和終點(diǎn)位置單擊一次即可，按住【Shift】鍵可以繪制一條直線路徑。2、鋼筆工具：

如果需要繪制一條曲線，那么需要在空白位置先點(diǎn)擊一次，確定起始點(diǎn)，然后拖動(dòng)鼠標(biāo)，可以看到就可以繪制曲線了。在轉(zhuǎn)角的位置有一個(gè)調(diào)節(jié)桿，是用來(lái)限制曲線方向的。2、鋼筆工具：

如果需要繪制帶轉(zhuǎn)角的曲線，可以按【Alt】鍵。先在空白位置點(diǎn)擊一下，確定起始位置，然后拖動(dòng)鼠標(biāo)，在繪制第二個(gè)點(diǎn)的時(shí)候，不要松開(kāi)鼠標(biāo)，按住【Alt】鍵，然后，拖動(dòng)調(diào)節(jié)桿，可以看到調(diào)節(jié)桿發(fā)生了變化，我們調(diào)節(jié)這個(gè)調(diào)節(jié)桿的方向，就會(huì)影響繪制出來(lái)的曲線效果。2、鋼筆工具：

添加錨點(diǎn)、刪除錨點(diǎn)：在確定了繪制的路徑的情況下，如果需要添加錨點(diǎn)，可以在路徑上單擊一次，就會(huì)添加一個(gè)錨點(diǎn)，如果單擊兩次，就會(huì)刪除錨點(diǎn)。添加的錨點(diǎn)，帶有兩個(gè)調(diào)節(jié)桿，這兩個(gè)調(diào)節(jié)桿都可以使用。當(dāng)按【Alt】鍵，加選其中一側(cè)的調(diào)節(jié)桿時(shí)，可以單獨(dú)對(duì)一側(cè)的調(diào)節(jié)桿調(diào)節(jié)。2、鋼筆工具：

當(dāng)按【Ctrl】鍵，點(diǎn)擊空白處，可以在原有路徑基礎(chǔ)上，再繪制一條新的路徑，而第一條路徑不受影響。如果我們需要再次編輯原有路徑，可以按【Ctrl】鍵，再點(diǎn)擊一下曲線，然后按【Shift】鍵，點(diǎn)擊開(kāi)始點(diǎn)，就可以在開(kāi)始點(diǎn)上重新編輯了。3、FX圖層樣式：

圖層樣式在PS軟件中常用來(lái)處理圖層，是后期制作圖標(biāo)以達(dá)到預(yù)定效果的重要手段之一。PS軟件的圖層樣式效果非常豐富，圖層樣式包括了許多可以自動(dòng)應(yīng)用到圖層中的效果，包括：斜面和浮雕、描邊、內(nèi)陰影、內(nèi)發(fā)光、光澤、顏色疊加、漸變疊加、圖案疊加、外發(fā)光、投影。3、FX圖層樣式：

當(dāng)應(yīng)用一個(gè)圖層樣式時(shí)，一個(gè)小三角和一個(gè)f圖標(biāo)就會(huì)出現(xiàn)在“圖層”面板相應(yīng)圖層名稱(chēng)的右側(cè)，表示這一圖層包含了自動(dòng)效果，當(dāng)出現(xiàn)向下的小三角符號(hào)時(shí)，還能看到該圖層應(yīng)用了哪些圖層樣式。這樣便于用戶(hù)管理和修改。4、圖層混合模式：

混合模式是為圖層疊加不同的效果?；旌夏Ｊ街饕ǎ耗Ｊ降幕旌虾筒煌该鞫鹊??；旌夏Ｊ皆趫D層面板的上方位置4、圖層混合模式：

（1）模式的混合：當(dāng)圖層疊加時(shí)，上方的圖層和下方的圖層的像素會(huì)進(jìn)行混合，從而得到一種全新的圖像效果。（2）不透明度：用來(lái)確定圖層的透明度，當(dāng)不透明度為100%時(shí)，當(dāng)前圖層完全不透明，當(dāng)不透明度為0%時(shí)，當(dāng)前圖層完全透明。小提