項(xiàng)目11 圖標(biāo)設(shè)計(jì)

項(xiàng)目引入：圖標(biāo)設(shè)計(jì)是UI設(shè)計(jì)中重要的組成部分，可以幫助用戶更好地理解產(chǎn)品的功能，是營(yíng)造產(chǎn)品用戶體驗(yàn)的關(guān)鍵一環(huán)。本項(xiàng)目以多個(gè)圖標(biāo)設(shè)計(jì)為例，講解圖標(biāo)的設(shè)計(jì)方法和制作技巧。項(xiàng)目11圖標(biāo)設(shè)計(jì)項(xiàng)目目標(biāo)了解圖標(biāo)的概念。掌握?qǐng)D標(biāo)的的類型和設(shè)計(jì)風(fēng)格。技能目標(biāo)掌握“扁平風(fēng)格旅行箱圖標(biāo)”的繪制方法。掌握“擬物風(fēng)格時(shí)鐘圖標(biāo)”的繪制方法。素質(zhì)目標(biāo)培養(yǎng)對(duì)圖標(biāo)的設(shè)計(jì)創(chuàng)意能力。培養(yǎng)對(duì)圖標(biāo)的審美與鑒賞能力。相關(guān)知識(shí)——圖標(biāo)設(shè)計(jì)概述圖標(biāo)的概念插圖的類型圖標(biāo)的設(shè)計(jì)風(fēng)格相關(guān)知識(shí)——圖標(biāo)設(shè)計(jì)概述1．圖標(biāo)的概念圖標(biāo)（ICON）是具有明確指代含義的圖形。通過將某個(gè)詞語或概念設(shè)計(jì)成形象易辨的圖形，進(jìn)而降低用戶的理解成本、提高設(shè)計(jì)的整體美觀度。2．圖標(biāo)的類型產(chǎn)品圖標(biāo)是體現(xiàn)產(chǎn)品品牌調(diào)性和特性的圖標(biāo)，該類圖標(biāo)通常出現(xiàn)在電腦桌面、手機(jī)桌面以及App應(yīng)用市場(chǎng)等綜合場(chǎng)景。功能圖標(biāo)是圖形化的符號(hào)，具有明確功能，該類圖標(biāo)通常出現(xiàn)在界面中的導(dǎo)航欄以及標(biāo)簽欄等需要用戶進(jìn)行操作的界面模塊。裝飾圖標(biāo)用于提升渲染氣氛，更多的是承擔(dān)視覺性作用，該類圖標(biāo)通常出現(xiàn)在引導(dǎo)頁、空狀態(tài)、彈窗、404頁等頁面進(jìn)行內(nèi)容點(diǎn)綴。相關(guān)知識(shí)——圖標(biāo)設(shè)計(jì)概述3．圖標(biāo)的設(shè)計(jì)風(fēng)格擬物化風(fēng)格的圖標(biāo)貼近現(xiàn)實(shí)，帶有漸變、高光、陰影等效果，iOS6時(shí)代擬物風(fēng)格到達(dá)了流行的巔峰，現(xiàn)常用于工具類、游戲類應(yīng)用圖標(biāo)。扁平風(fēng)格圖標(biāo)與擬物風(fēng)格圖標(biāo)相反，很少有漸變、高光、陰影等效果，自2013年IOS7推出扁平風(fēng)格成為了設(shè)計(jì)的主流趨勢(shì)，現(xiàn)被廣泛運(yùn)用。3D風(fēng)格的圖標(biāo)立體有層次，由若干個(gè)幾何多邊體構(gòu)成，其制作軟件通常為3DMax和C4D，常用于游戲中。2.5D風(fēng)格的圖標(biāo)是由物體的正面、光面和暗面三面組成，模擬3D，常用于引導(dǎo)頁、空狀態(tài)、彈窗。任務(wù)11.1.繪制扁平化風(fēng)格旅行箱圖標(biāo)任務(wù)分析任務(wù)效果任務(wù)制作11.1.1任務(wù)分析任務(wù)將使用“首選項(xiàng)”對(duì)話框設(shè)置鍵盤增量、單位和網(wǎng)格線間隔；使用“打開”命令打開網(wǎng)格系統(tǒng)；使用“矩形”工具、“變換”面板、“剪刀”工具、“圓角矩形”工具和“橢圓”工具繪制旅行箱箱體及滾輪；使用“輪廓化描邊”命令、“路徑查找器”命令合并旅行箱箱體。11.1.2任務(wù)效果繪制旅行箱箱體

制作旅行箱滾輪

最終效果任務(wù)11.2繪制擬物風(fēng)格時(shí)鐘圖標(biāo)

任務(wù)分析任務(wù)效果任務(wù)制作任務(wù)11.2.1任務(wù)分析

本任務(wù)將使用“橢圓”工具、“路徑查找器”命令和“投影”命令繪制表盤；使用“圓角矩形”工具、“矩形”工具、“剪切蒙版”命令、“橢圓”工具、“漸變”工具和“投影”命令繪制指針和刻度；使用“鋼筆”工具和“漸變”工具制作投影。任務(wù)11.2.2任務(wù)效果

繪制時(shí)鐘表盤和指針

繪制時(shí)鐘表芯和刻度

最終效果項(xiàng)目實(shí)踐1——繪制扁平風(fēng)格家電圖標(biāo)

本使用“圓角矩形”工具、“描邊”面板、“橢圓”工具、“矩形”工具和“變換”面板繪制洗衣機(jī)外形和功能按鈕；使用“橢圓”工具、“直線段”工具和“描邊”面板繪制洗衣機(jī)滾筒。效果圖項(xiàng)目實(shí)踐2——繪制擬物風(fēng)格相機(jī)圖標(biāo)使用“橢圓”工具、“漸變”工具和“縮放”命令繪制變焦鏡頭；使用“投影”命令為圖形添加投影效果；使用“不透明度”選項(xiàng)制作疊加效果。效果圖課后習(xí)題1——繪制扁平風(fēng)格畫板圖標(biāo)使用“鋼筆”工具、“橢圓”工具、“漸變”工具、“投影”命令和“高斯模糊”命令繪制顏料盤；使用“鋼筆”工具、“矩形”工具、“變換”面板、“不透明度”選項(xiàng)和“投影”命令繪制畫筆；使用“鋼筆”工具和“漸變”工具制作投影。效果圖課后習(xí)題2——繪制扁平風(fēng)格記事本圖標(biāo)使用“橢圓”工具、“投影”命令、“矩形”工具、“圓角矩形”工具、“