移動(dòng)端UI設(shè)計(jì)項(xiàng)目實(shí)戰(zhàn)教程 項(xiàng)目二 APP應(yīng)用圖標(biāo)設(shè)計(jì)-任務(wù)二 線性圖標(biāo)設(shè)計(jì)

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

該任務(wù)主要針對(duì)APP應(yīng)用圖標(biāo)中的線性圖標(biāo)設(shè)計(jì)的內(nèi)容進(jìn)行講解，對(duì)圖標(biāo)的視覺統(tǒng)一，形狀工具組繪制，布爾運(yùn)算等內(nèi)容進(jìn)行知識(shí)性的導(dǎo)入，并通過具體的任務(wù)實(shí)現(xiàn)過程進(jìn)行實(shí)操性演練。知識(shí)導(dǎo)入：1、圖標(biāo)的視覺統(tǒng)一：在移動(dòng)UI設(shè)計(jì)中，圖標(biāo)的視覺統(tǒng)一是非常重要的。相對(duì)于文字而言，圖標(biāo)所表達(dá)的信息更清晰、更生動(dòng)、更有利于用戶理解內(nèi)容和完成交互。作為移動(dòng)UI設(shè)計(jì)師，設(shè)計(jì)出好的圖標(biāo)是一項(xiàng)必不可缺少的技能。圖標(biāo)的視覺統(tǒng)一包含了以下幾個(gè)基礎(chǔ)要素：1、圖標(biāo)的視覺統(tǒng)一：（1）類型統(tǒng)一

在同一套的圖標(biāo)設(shè)計(jì)中，要保證設(shè)計(jì)的圖標(biāo)是同一類型的，比如：同一套的圖標(biāo)都是線性圖標(biāo)，那么就盡量不要出現(xiàn)面型圖標(biāo)或線面混合圖標(biāo)。1、圖標(biāo)的視覺統(tǒng)一：（2）風(fēng)格統(tǒng)一

同一類型的圖標(biāo)，也有不同的風(fēng)格，我們也需要將其風(fēng)格統(tǒng)一。例如：在線性圖標(biāo)中，可以有斷點(diǎn)描邊、粗描邊、細(xì)描邊，漸變描邊等風(fēng)格。1、圖標(biāo)的視覺統(tǒng)一：（3）粗細(xì)統(tǒng)一

圖標(biāo)設(shè)計(jì)中需保證圖標(biāo)描邊的粗細(xì)一致，切勿粗細(xì)不統(tǒng)一，會(huì)不和諧，沒有整體感。粗細(xì)統(tǒng)一1、圖標(biāo)的視覺統(tǒng)一：（4）透視統(tǒng)一

在設(shè)計(jì)成套立體圖標(biāo)時(shí)，設(shè)計(jì)師需要考慮透視和投影，要確保每個(gè)圖標(biāo)的透視和投影都是統(tǒng)一的，這樣才能使得圖標(biāo)整體看起來十分和諧。1、圖標(biāo)的視覺統(tǒng)一：（5）圓角統(tǒng)一

同一個(gè)項(xiàng)目中，設(shè)計(jì)師在繪制圖標(biāo)的時(shí)候，需要注意細(xì)節(jié)。如果有的圖標(biāo)有圓角，那么每個(gè)圖標(biāo)的圓角都必須一致。1、圖標(biāo)的視覺統(tǒng)一：（6）大小統(tǒng)一

我們所說的大小統(tǒng)一，不是物理上的絕對(duì)的大小統(tǒng)一，而是視覺上的統(tǒng)一。在設(shè)計(jì)過程中我們會(huì)發(fā)現(xiàn)，有的時(shí)候即使圖標(biāo)的高度、寬度都是一樣的，但是我們視覺上卻覺得它們不一樣大。比如：相同尺寸的正方形，圓形，三角形，當(dāng)它們?nèi)邤[放在一起的時(shí)候，我們視覺上會(huì)覺得正方形最大。如圖7所示。所以，在這種情況下，我們?cè)谠O(shè)計(jì)的時(shí)候可以適當(dāng)增大圓形和三角形的大小，以便讓三個(gè)圖形視覺上看上去大小一樣。1、圖標(biāo)的視覺統(tǒng)一：（6）大小統(tǒng)一物理上的大小統(tǒng)一視覺上的大小統(tǒng)一2、形狀工具組繪制：在PS軟件中形狀工具組包含了“矩形工具”、“圓角矩形工具”、“橢圓工具”、“多邊形工具”、“直線工具”、“自定形狀工具”。形狀工具組位于PS軟件的左側(cè)工具欄中，它的快捷鍵是【U】。2、形狀工具組繪制：（1）矩形工具：矩形工具的作用是繪制出一個(gè)矩形和正方形（按住Shift鍵，可以繪制出正方形）。按住【Alt】鍵可以繪制出一個(gè)以鼠標(biāo)為中心的矩形。按住【Alt+Shift】鍵，可以繪制出一個(gè)一鼠標(biāo)為中心的正方形。在PS軟件中繪制完成一個(gè)矩形后，會(huì)彈出“屬性”面板，可以在屬性面板中設(shè)置相關(guān)參數(shù)。例如：尺寸大小、圓角弧度、描邊、填充等參數(shù)。2、形狀工具組繪制：（2）圓角矩形工具

圓角矩形工具的作用是繪制出一個(gè)帶有圓角效果的矩形。繪制圓角矩形前，一般會(huì)先在工具選項(xiàng)中設(shè)置“半徑”參數(shù)，當(dāng)半徑參數(shù)設(shè)置越大，則圓角效果越大，反之，則越小。2、形狀工具組繪制：（3）橢圓工具橢圓工具的作用是繪制出一個(gè)橢圓和正圓（按住Shift鍵，可以繪制出正圓）。按住【Alt】鍵可以繪制出一個(gè)以鼠標(biāo)為中心的橢圓。按住【Alt+Shift】鍵，可以繪制出一個(gè)一鼠標(biāo)為中心的正圓形。2、形狀工具組繪制：（4）多邊形工具多邊形工具的作用是繪制出正多邊形和星形。繪制多邊形前，一般會(huì)先設(shè)置兩個(gè)參數(shù)。一個(gè)是在工具選項(xiàng)的“路徑選項(xiàng)”設(shè)置中，設(shè)置半徑為“平滑拐角”或“星形”，另一個(gè)是設(shè)置“邊”數(shù)。2、形狀工具組繪制：（5）直線工具直線工具的作用是繪制出直線和帶有箭頭的路徑。如果要設(shè)置直線的粗細(xì)，需要在工具選項(xiàng)的“粗細(xì)”參數(shù)中設(shè)置，如果是要設(shè)置帶有箭頭的路徑，需要在工具選項(xiàng)的“路徑選項(xiàng)”參數(shù)中設(shè)置箭頭“起點(diǎn)”和“終點(diǎn)”。2、形狀工具組繪制：（6）自定形狀工具自定義形狀工具主要是用來繪制多種自定義形狀。3、布爾運(yùn)算：布爾運(yùn)算是數(shù)字符號(hào)化的邏輯推演法，包括并集、交集、差集。在PS軟件中使用這種的操作，可以快速地將簡單的基礎(chǔ)圖形組合成新的復(fù)雜的圖形。使用布爾運(yùn)算，可以在選區(qū)工具中使用，也可以在形狀工具中使用。3、布爾運(yùn)算：（1）在選框工具中使用布爾運(yùn)算首先，需要先選中一個(gè)選框工具，例如：矩形選框工具，接著，任意拉出一個(gè)新選框，在工具選項(xiàng)中選擇需要的布爾運(yùn)算，然后，拉出另一個(gè)選框，此時(shí)，就會(huì)出現(xiàn)一個(gè)新的選框。那么這個(gè)選框就是運(yùn)用布爾運(yùn)算制作出來的。3、布爾運(yùn)算：（2）在形狀工具中使用布爾運(yùn)算首先，需要先選中一個(gè)形狀工具，例如：矩形工具，接著，任意繪制一個(gè)