項(xiàng)目2　設(shè)計(jì)趣味的圖標(biāo)-UI圖標(biāo)設(shè)計(jì)

本章介紹：

本章針對(duì)UI設(shè)計(jì)中常用的線性圖標(biāo)、面性圖標(biāo)以及線面圖標(biāo)進(jìn)行系統(tǒng)的知識(shí)講解與實(shí)操演練。通過(guò)本章的學(xué)習(xí)，讀者可以對(duì)圖標(biāo)設(shè)計(jì)有一個(gè)系統(tǒng)的認(rèn)識(shí)，并快速掌握繪制圖標(biāo)的規(guī)范和方法，為接下來(lái)的UI設(shè)計(jì)打下基礎(chǔ)。項(xiàng)目2設(shè)計(jì)趣味的圖標(biāo)—UI圖標(biāo)設(shè)計(jì)學(xué)習(xí)引導(dǎo)掌握線性圖標(biāo)的風(fēng)格特點(diǎn)掌握面性圖標(biāo)的風(fēng)格特點(diǎn)掌握線面圖標(biāo)的風(fēng)格特點(diǎn)掌握線性圖標(biāo)的制作方法掌握面性圖標(biāo)的制作方法掌握線面圖標(biāo)的制作方法培養(yǎng)良好的UI圖標(biāo)設(shè)計(jì)勞動(dòng)習(xí)慣培養(yǎng)一定的UI圖標(biāo)設(shè)計(jì)創(chuàng)新能力和藝術(shù)審美能力任務(wù)2.1

設(shè)計(jì)旅游類(lèi)App線性圖標(biāo)任務(wù)引入任務(wù)知識(shí)設(shè)計(jì)理念任務(wù)實(shí)施2.1.1任務(wù)引入本任務(wù)通過(guò)學(xué)習(xí)使用軟件Illustrator繪制旅游類(lèi)App標(biāo)簽欄中的“行程”圖標(biāo)，掌握線性圖標(biāo)的設(shè)計(jì)要點(diǎn)與制作方法。2.1.2設(shè)計(jì)理念在設(shè)計(jì)過(guò)程中，圍繞旅游類(lèi)App標(biāo)簽欄中的“行程”圖標(biāo)進(jìn)行創(chuàng)意。圖形選用“日歷”作為核心創(chuàng)作元素，形象地表達(dá)行程之意。未點(diǎn)擊狀態(tài)采用形象簡(jiǎn)潔、設(shè)計(jì)輕盈的線性圖標(biāo)，呈現(xiàn)出干凈的視覺(jué)效果。點(diǎn)擊狀態(tài)通過(guò)調(diào)整未點(diǎn)擊狀態(tài)的線性圖標(biāo)，轉(zhuǎn)變?yōu)樯鷦?dòng)趣味、俏皮可愛(ài)的線面圖標(biāo)。色彩選灰色和橙色兩種顏色，可以更好地區(qū)別不同的顯示狀態(tài)。同時(shí)橙色能夠體現(xiàn)旅游的歡快熱情，契合主題。2.1.3任務(wù)知識(shí)：Illustrator-變換命令熟練掌握“屬性”面板調(diào)整基礎(chǔ)圖形，運(yùn)用“變換”命令進(jìn)行快速?gòu)?fù)制，通過(guò)“擴(kuò)展外觀”命令變成真實(shí)圖像。2.1.4任務(wù)實(shí)施任務(wù)2.2設(shè)計(jì)旅游類(lèi)App面性圖標(biāo)任務(wù)引入任務(wù)知識(shí)設(shè)計(jì)理念任務(wù)實(shí)施2.2.1任務(wù)引入本任務(wù)通過(guò)學(xué)習(xí)使用軟件Photoshop繪制旅游類(lèi)App金剛區(qū)中的“酒店”圖標(biāo)，掌握面性圖標(biāo)的設(shè)計(jì)要點(diǎn)與制作方法。2.2.2設(shè)計(jì)理念在設(shè)計(jì)過(guò)程中，圍繞旅游類(lèi)App金剛區(qū)中的“酒店”圖標(biāo)進(jìn)行創(chuàng)意。圖形選用“高樓”作為核心創(chuàng)作元素，形象地表達(dá)酒店之意。整體采用形象飽滿、視覺(jué)突出的面性圖標(biāo)，幫助用戶快速進(jìn)行圖標(biāo)的位置定位。色彩選用紅橙漸變，能夠體現(xiàn)入住酒店的溫暖。2.2.3任務(wù)知識(shí)熟練掌握“圓角矩形”工具、“屬性”面板和“合并形狀“命令繪制基礎(chǔ)圖形，運(yùn)用“漸變”工具為圖標(biāo)添加顏色漸變，通過(guò)“不透明度”選項(xiàng)的設(shè)置調(diào)整圖標(biāo)不透明度。2.2.4任務(wù)實(shí)施任務(wù)2.3設(shè)計(jì)旅游類(lèi)App線面圖標(biāo)任務(wù)引入設(shè)計(jì)理念任務(wù)知識(shí)任務(wù)實(shí)施2.3.1任務(wù)引入本任務(wù)通過(guò)學(xué)習(xí)使用軟件Illustrator繪制旅游類(lèi)App標(biāo)簽欄中“攻略”圖標(biāo)，掌握線面圖標(biāo)的設(shè)計(jì)要點(diǎn)與制作方法。2.3.2設(shè)計(jì)理念在設(shè)計(jì)過(guò)程中，圍繞旅游類(lèi)App標(biāo)簽欄中的“攻略”圖標(biāo)進(jìn)行創(chuàng)意。圖形選用“星球”作為核心創(chuàng)作元素，形象地表達(dá)旅游攻略之意。點(diǎn)擊狀態(tài)采用生動(dòng)趣味、俏皮可愛(ài)的線面圖標(biāo)。未點(diǎn)擊狀態(tài)通過(guò)調(diào)整點(diǎn)擊狀態(tài)的線面圖標(biāo)，轉(zhuǎn)變?yōu)樾蜗蠛?jiǎn)潔、設(shè)計(jì)輕盈的線性圖標(biāo)。色彩選灰色和橙色兩種顏色，可以更好地區(qū)別不同的顯示狀態(tài)。同時(shí)橙色能夠體現(xiàn)旅游的歡快熱情，契合主題。2.3.3任務(wù)知識(shí)：Illustrator-屬性面板、擴(kuò)展外觀命令熟練掌握“屬性”面板調(diào)整基礎(chǔ)圖形，通過(guò)“擴(kuò)展外觀”命令變成真實(shí)圖像。2.3.4任務(wù)實(shí)施任務(wù)2.4項(xiàng)目演練——設(shè)計(jì)電商類(lèi)App線性圖標(biāo)任務(wù)引入設(shè)計(jì)理念2.4.1任務(wù)引入本任務(wù)通過(guò)學(xué)習(xí)使用軟件Illustrator繪制電商類(lèi)App標(biāo)簽欄中的“購(gòu)物車(chē)”圖標(biāo)，掌握線性圖標(biāo)的設(shè)計(jì)要點(diǎn)與制作方法。2.4.2設(shè)計(jì)理念使用“屬性”面板進(jìn)行調(diào)整使圖標(biāo)符合設(shè)計(jì)規(guī)范，擴(kuò)展外觀變成真實(shí)圖像。任務(wù)2.5項(xiàng)目演練——設(shè)計(jì)餐飲類(lèi)App面性圖標(biāo)任務(wù)引入設(shè)計(jì)理念2.5.1任務(wù)引入本任務(wù)通過(guò)學(xué)習(xí)使用軟件Illustrator繪