移動端UI設(shè)計項目實戰(zhàn)教程 項目二 APP應(yīng)用圖標(biāo)設(shè)計-任務(wù)三 異形圖標(biāo)設(shè)計

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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