項(xiàng)目3　制作別致的控件-UI控件設(shè)計(jì)

本章介紹：

本章對(duì)按鈕控件、選擇控件、加減控件、分段控件、頁面控件、反饋控件以及文本框控件等常用控件的基礎(chǔ)知識(shí)及設(shè)計(jì)規(guī)則進(jìn)行系統(tǒng)講解與實(shí)操。通過本章的學(xué)習(xí)，讀者可以對(duì)控件設(shè)計(jì)有一個(gè)系統(tǒng)的認(rèn)識(shí)，并快速掌握繪制控件的規(guī)范和方法，為接下來的組件設(shè)計(jì)打下基礎(chǔ)。項(xiàng)目3制作獨(dú)特的控件—UI控件設(shè)計(jì)學(xué)習(xí)引導(dǎo)了解UI控件的基本概念明確UI控件的獲取方法了解UI控件的設(shè)計(jì)思路掌握UI控件的制作方法培養(yǎng)對(duì)UI控件的審美鑒賞能力培養(yǎng)對(duì)UI控件的設(shè)計(jì)創(chuàng)意能力任務(wù)3.1

設(shè)計(jì)旅游類App按鈕控件任務(wù)引入任務(wù)知識(shí)設(shè)計(jì)理念任務(wù)實(shí)施3.1.1任務(wù)引入本任務(wù)通過學(xué)習(xí)使用軟件Photoshop繪制旅游類App按鈕控件，掌握按鈕控件的設(shè)計(jì)要點(diǎn)與制作方法。3.1.2設(shè)計(jì)理念在設(shè)計(jì)過程中，圍繞旅游類App按鈕控件進(jìn)行創(chuàng)意。整體采用形象飽滿的面性按鈕，令整體視覺更加突出。橙色既能明確操作又能吸引用戶。3.1.3任務(wù)知識(shí)：圓角矩形工具、橫排文字工具熟練掌握“圓角矩形”工具、“橫排文字”工具的使用。3.1.4任務(wù)實(shí)施任務(wù)3.2設(shè)計(jì)旅游類App選擇控件任務(wù)引入任務(wù)知識(shí)設(shè)計(jì)理念任務(wù)實(shí)施3.2.1任務(wù)引入本任務(wù)通過學(xué)習(xí)使用軟件Photoshop繪制旅游類App選擇控件，掌握按鈕控件的設(shè)計(jì)要點(diǎn)與制作方法。3.2.2設(shè)計(jì)理念在設(shè)計(jì)過程中，圍繞旅游類App選擇控件進(jìn)行創(chuàng)意。圖形選用“對(duì)號(hào)”作為核心創(chuàng)作元素，形象地表達(dá)允許用戶選擇選項(xiàng)之意。整體設(shè)計(jì)符合預(yù)期、一目了然。橙色既能明確操作又能吸引用戶。3.2.3任務(wù)知識(shí)：變換命令熟練掌握“圓角矩形”工具，“橢圓”工具和“合并形狀”命令繪制基礎(chǔ)圖形，運(yùn)用“變換”命令將圖標(biāo)旋轉(zhuǎn)。3.2.4任務(wù)實(shí)施任務(wù)3.3設(shè)計(jì)旅游類App加減控件任務(wù)引入設(shè)計(jì)理念任務(wù)知識(shí)任務(wù)實(shí)施3.3.1任務(wù)引入本任務(wù)通過學(xué)習(xí)使用軟件Photoshop繪制旅游類App加減控件，掌握加減控件的設(shè)計(jì)要點(diǎn)與制作方法。3.3.2設(shè)計(jì)理念在設(shè)計(jì)過程中，圍繞旅游類App加減控件進(jìn)行創(chuàng)意。整體采用形象簡(jiǎn)潔、設(shè)計(jì)輕盈的線性圖標(biāo)，呈現(xiàn)出簡(jiǎn)潔高效、操作方便的視覺效果。圖標(biāo)選灰色和橙色兩種顏色，可以更好地區(qū)別不同的顯示狀態(tài)。同時(shí)橙色既能明確操作又能吸引用戶。3.3.3任務(wù)知識(shí)：置入嵌入對(duì)象命令通過“橫排文字”工具輸入文字，運(yùn)用“置入嵌入對(duì)象”命令置入圖標(biāo)，熟練掌握“直線”工具的使用。3.3.4任務(wù)實(shí)施任務(wù)3.4設(shè)計(jì)旅游類App分段控件任務(wù)引入設(shè)計(jì)理念任務(wù)知識(shí)任務(wù)實(shí)施3.4.1任務(wù)引入本任務(wù)通過學(xué)習(xí)使用軟件Photoshop繪制旅游類App分段控件，掌握分段控件的設(shè)計(jì)要點(diǎn)與制作方法。3.4.2設(shè)計(jì)理念在設(shè)計(jì)過程中，圍繞旅游類App分段控件進(jìn)行創(chuàng)意。整體呈現(xiàn)出內(nèi)容豐富、選項(xiàng)同行的視覺效果。兩種文字大小，可以更好地區(qū)別當(dāng)前組與其他組。橙色既能明確操作又能強(qiáng)調(diào)當(dāng)前內(nèi)容。3.4.3任務(wù)知識(shí)熟練掌握“矩形”工具、“橢圓”工具和“圓角矩形”工具繪制形狀，使用“橫排文字”工具輸入文字，使用“添加圖層蒙版”命令和“畫筆”工具修飾文字，使用“減去頂層形狀”命令修飾形狀。3.4.4任務(wù)實(shí)施任務(wù)3.5設(shè)計(jì)旅游類App頁面控件任務(wù)引入設(shè)計(jì)理念任務(wù)知識(shí)任務(wù)實(shí)施3.5.1任務(wù)引入本任務(wù)通過學(xué)習(xí)使用軟件Illustrator繪制餐飲類App標(biāo)簽欄中的“訂單”圖標(biāo)，掌握面性圖標(biāo)的設(shè)計(jì)要點(diǎn)與制作方法。3.5.2設(shè)計(jì)理念在設(shè)計(jì)過程中，圍繞旅游類App頁面控件進(jìn)行創(chuàng)意。整體呈現(xiàn)出小巧便利、狀態(tài)明確的視覺效果。它以一系列線段的形式出現(xiàn)，表示可用頁面的打開順序，其中實(shí)線表示當(dāng)前頁面。3.5.3任務(wù)知識(shí)：直線工具使用“直線”工具繪制形狀，運(yùn)用“置入嵌入對(duì)象”命令置入圖標(biāo)，通過“橫排文字”工具輸入文字。3.5.4任務(wù)實(shí)施任務(wù)3.6設(shè)計(jì)旅游類App反饋控件任務(wù)引入設(shè)計(jì)理念任務(wù)知識(shí)任務(wù)實(shí)施3.6.1任務(wù)引入本任務(wù)通過學(xué)習(xí)使用軟件Photoshop繪制旅游類App反饋控件，掌握反饋控件的設(shè)計(jì)要點(diǎn)與制作方法。3.6.2設(shè)計(jì)理念在設(shè)計(jì)過程中，圍繞旅游類App反饋控件進(jìn)行創(chuàng)意。整體呈現(xiàn)出吸引用戶、狀態(tài)明確的視覺效果。紅色既能吸引消費(fèi)者的注意又能重點(diǎn)強(qiáng)調(diào)內(nèi)容。3.6.3任務(wù)知識(shí)：橢圓工具使用“橢圓”工具繪制形狀，使用“橫排文字”工具輸入文字。3.6.4任務(wù)實(shí)施任務(wù)3.7設(shè)計(jì)旅游類App文本框控件任務(wù)引入設(shè)計(jì)理念任務(wù)知識(shí)任務(wù)實(shí)施3.7.1任務(wù)引入本任務(wù)通過學(xué)習(xí)使用軟件Photoshop繪制旅游類App文本框控件，掌握文本框控件的設(shè)計(jì)要點(diǎn)與制作方法。3.7.2設(shè)計(jì)理念在設(shè)計(jì)過程中，圍繞旅游類App文本框控件進(jìn)行創(chuàng)意。整體呈現(xiàn)出編輯文本、操作高效的視覺效果。線性文本框的弱化有助于簡(jiǎn)化布局。3.7.3任務(wù)知識(shí)：字符面板使用“橫排文字”工具輸入文字，使用字符面板調(diào)整文字間距及位置，使用“直線”工具繪制形狀。3.7.4任務(wù)實(shí)施任務(wù)3.8項(xiàng)目演練-設(shè)計(jì)電商類App文本框控件任務(wù)引入設(shè)計(jì)理念3.8.1任務(wù)引入本任務(wù)通過學(xué)習(xí)使用軟件Photoshop繪制電商類App文本框控件，掌握文本框控件的設(shè)計(jì)要點(diǎn)與制作方法。3.8.2設(shè)計(jì)理念在設(shè)計(jì)過程中，圍繞電商類App文本框控件進(jìn)行創(chuàng)意。整體呈現(xiàn)出編輯文本、操作高效的視覺效果。線性文本框的弱化有助于簡(jiǎn)化布局。任務(wù)3.9項(xiàng)目演練-設(shè)計(jì)餐飲類App按鈕控件任務(wù)引入設(shè)計(jì)理念3.9.1任務(wù)引入本任務(wù)通過學(xué)習(xí)使用