第 1章初識UI設(shè)計(jì) 1 1.1 UI設(shè)計(jì)的基本概念 2 1.2　UI設(shè)計(jì)的常用軟件 2 1.3　UI設(shè)計(jì)的發(fā)展趨勢 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　使用場景 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　使用場景 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　使用場景 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 初識控件 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　頁面控件 57 3.6.1　頁面控件的概念 57 3.6.2　頁面控件的類型 57 3.6.3　頁面控件的規(guī)則 57 3.6.4　課堂案例—制作旅游類App頁面控件 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　初識組件 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ì)中的頁面設(shè)計(jì) 132 5.1　閃屏頁 133 5.1.1　閃屏頁的概念 133 5.1.2　閃屏頁的類型 133 5.1.3　課堂案例—制作旅游類App閃屏頁 135 5.2　引導(dǎo)頁 137 5.2.1　引導(dǎo)頁的概念 138 5.2.2　引導(dǎo)頁的類型 138 5.2.3　課堂案例—制作旅游類App引導(dǎo)頁 139 5.3　首頁 149 5.3.1　首頁的概念 149 5.3.2　首頁的類型 149 5.3.3　課堂案例—制作旅游類App首頁 152 5.4　個人中心頁 171 5.4.1　個人中心頁的概念 171 5.4.2　課堂案例—制作旅游類App個人中心頁 172 5.5　詳情頁 193 5.5.1　詳情頁的概念 193 5.5.2　課堂案例—制作旅游類App酒店詳情頁 193 5.6　注冊登錄頁 217 5.6.1　注冊登錄頁的概念 217 5.6.2　課堂案例—制作旅游類App登錄頁 218 5.7　課堂練習(xí)—制作電商類App頁面 226 5.8　課后習(xí)題—制作餐飲類App頁面 227 第6章UI設(shè)計(jì)輸出 229 6.1　UI頁面標(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登錄頁 234 6.2　UI頁面切圖 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登錄頁切圖 243 6.3　UI頁面命名 246 6.3.1　命名原因 247 6.3.2　命名規(guī)則 247 6.3.3　常用名稱 247 6.3.4　課堂案例—命名旅游類App登錄頁切圖 247 6.4　課堂練習(xí)—標(biāo)注電商類App登錄頁并切圖命名 248 6.5　課后習(xí)題—標(biāo)注餐飲類App登錄頁并切圖命名 249