第 1章初識(shí)UI設(shè)計(jì) 1 1.1 UI設(shè)計(jì)的基本概念 2 1.2　UI設(shè)計(jì)的常用軟件 2 1.3　UI設(shè)計(jì)的發(fā)展趨勢(shì) 2 1.4　UI設(shè)計(jì)的學(xué)習(xí)方法 3 1.5　UI設(shè)計(jì)的項(xiàng)目流程 4 1.6　UI設(shè)計(jì)的規(guī)范與規(guī)則 5 第 2章UI設(shè)計(jì)中的圖標(biāo)設(shè)計(jì) 12 2.1　線性圖標(biāo) 13 2.1.1　基本概念 13 2.1.2　使用場(chǎng)景 13 2.1.3　設(shè)計(jì)要點(diǎn) 13 2.1.4　課堂案例—制作旅游類App線性圖標(biāo) 16 2.2　面性圖標(biāo) 22 2.2.1　基本概念 22 2.2.2　使用場(chǎng)景 22 2.2.3　設(shè)計(jì)要點(diǎn) 23 2.2.4　課堂案例—制作旅游類App面性圖標(biāo) 24 2.3　線面圖標(biāo) 28 2.3.1　基本概念 28 2.3.2　使用場(chǎng)景 29 2.3.3　設(shè)計(jì)要點(diǎn) 29 2.3.4　課堂案例—制作旅游類App線面圖標(biāo) 30 2.4　課堂練習(xí)——制作電商類App線性圖標(biāo) 35 2.5　課后習(xí)題——制作餐飲類App面性圖標(biāo) 35 第3章UI設(shè)計(jì)中的控件設(shè)計(jì) 36 3.1 初識(shí)控件 37 3.1.1　控件的概念 37 3.1.2　控件的獲取 37 3.2　按鈕控件 38 3.2.1　按鈕控件的概念 38 3.2.2　按鈕控件的類型 38 3.2.3　按鈕控件的規(guī)則 39 3.2.4　課堂案例—制作旅游類App按鈕控件 42 3.3　選擇控件 43 3.3.1　選擇控件的概念 44 3.3.2　選擇控件的類型 44 3.3.3　選擇控件的規(guī)則 44 3.3.4　課堂案例—制作旅游類App選擇控件 45 3.4　加減控件 47 3.4.1　加減控件的概念 48 3.4.2　加減控件的類型 48 3.4.3　加減控件的規(guī)則 48 3.4.4　課堂案例—制作旅游類App加減控件 49 3.5　分段控件 51 3.5.1　分段控件的概念 52 3.5.2　分段控件的類型 52 3.5.3　分段控件的規(guī)則 53 3.5.4　課堂案例—制作旅游類App分段控件 54 3.6　頁(yè)面控件 57 3.6.1　頁(yè)面控件的概念 57 3.6.2　頁(yè)面控件的類型 57 3.6.3　頁(yè)面控件的規(guī)則 57 3.6.4　課堂案例—制作旅游類App頁(yè)面控件 58 3.7　反饋控件 60 3.7.1　反饋控件的概念 60 3.7.2　反饋控件的類型 60 3.7.3　反饋控件的規(guī)則 61 3.7.4　課堂案例—制作旅游類App反饋控件 64 3.8　文本框控件 65 3.8.1　文本框控件的概念 65 3.8.2　文本框控件的類型 65 3.8.3　文本框控件的規(guī)則 66 3.8.4 課堂案例—制作旅游類App文本框控件 67 3.9　課堂練習(xí)——制作電商類App文本框控件 69 3.10 課后習(xí)題——制作餐飲類App按鈕控件 70 第4章UI設(shè)計(jì)中的組件設(shè)計(jì) 71 4.1　初識(shí)組件 72 4.1.1　組件的概念 72 4.1.2　組件的獲取 72 4.2　導(dǎo)航欄 73 4.2.1　導(dǎo)航欄的概念 73 4.2.2　導(dǎo)航欄的類型 73 4.2.3　導(dǎo)航欄的規(guī)則 75 4.2.4　課堂案例—制作旅游類App導(dǎo)航 77 4.3　標(biāo)簽欄 83 4.3.1　標(biāo)簽欄的概念 84 4.3.2　標(biāo)簽欄的類型 84 4.3.3　標(biāo)簽欄的規(guī)則 85 4.3.4　課堂案例—制作旅游類App標(biāo)簽欄 90 4.4　金剛區(qū) 102 4.4.1　金剛區(qū)的概念 102 4.4.2　金剛區(qū)的類型 103 4.4.3　金剛區(qū)的規(guī)則 103 4.4.4　課堂案例—制作旅游類App金剛區(qū) 107 4.5　瓷片區(qū) 117 4.5.1　瓷片區(qū)的概念 117 4.5.2　瓷片區(qū)的類型 117 4.5.3　瓷片區(qū)的規(guī)則 118 4.5.4　課堂案例—制作旅游類App瓷片區(qū) 121 4.6　課堂練習(xí)——制作電商類App標(biāo)簽欄 130 4.7　課后習(xí)題——制作餐飲類App標(biāo)簽欄 131 第5章UI設(shè)計(jì)中的頁(yè)面設(shè)計(jì) 132 5.1　閃屏頁(yè) 133 5.1.1　閃屏頁(yè)的概念 133 5.1.2　閃屏頁(yè)的類型 133 5.1.3　課堂案例—制作旅游類App閃屏頁(yè) 135 5.2　引導(dǎo)頁(yè) 137 5.2.1　引導(dǎo)頁(yè)的概念 138 5.2.2　引導(dǎo)頁(yè)的類型 138 5.2.3　課堂案例—制作旅游類App引導(dǎo)頁(yè) 139 5.3　首頁(yè) 149 5.3.1　首頁(yè)的概念 149 5.3.2　首頁(yè)的類型 149 5.3.3　課堂案例—制作旅游類App首頁(yè) 152 5.4　個(gè)人中心頁(yè) 171 5.4.1　個(gè)人中心頁(yè)的概念 171 5.4.2　課堂案例—制作旅游類App個(gè)人中心頁(yè) 172 5.5　詳情頁(yè) 193 5.5.1　詳情頁(yè)的概念 193 5.5.2　課堂案例—制作旅游類App酒店詳情頁(yè) 193 5.6　注冊(cè)登錄頁(yè) 217 5.6.1　注冊(cè)登錄頁(yè)的概念 217 5.6.2　課堂案例—制作旅游類App登錄頁(yè) 218 5.7　課堂練習(xí)—制作電商類App頁(yè)面 226 5.8　課后習(xí)題—制作餐飲類App頁(yè)面 227 第6章UI設(shè)計(jì)輸出 229 6.1　UI頁(yè)面標(biāo)注 230 6.1.1　標(biāo)注原因 230 6.1.2　標(biāo)注內(nèi)容 230 6.1.3　標(biāo)注規(guī)則 232 6.1.4　標(biāo)注工具 232 6.1.5　課堂案例—標(biāo)注旅游類App登錄頁(yè) 234 6.2　UI頁(yè)面切圖 239 6.2.1　切圖目的 239 6.2.2　切圖類型 239 6.2.3　切圖規(guī)則 241 6.2.4　切圖方法 242 6.2.5　大小優(yōu)化 242 6.2.6　課堂案例—制作旅游類App登錄頁(yè)切圖 243 6.3　UI頁(yè)面命名 246 6.3.1　命名原因 247 6.3.2　命名規(guī)則 247 6.3.3　常用名稱 247 6.3.4　課堂案例—命名旅游類App登錄頁(yè)切圖 247 6.4　課堂練習(xí)—標(biāo)注電商類App登錄頁(yè)并切圖命名 248 6.5　課后習(xí)題—標(biāo)注餐飲類App登錄頁(yè)并切圖命名 249