1 UI基礎(chǔ)/009 1.1 用戶界面的風(fēng)格演變/010 1.2 UI設(shè)計(jì)的種類/014 1.2.1 網(wǎng)頁(yè)設(shè)計(jì)/015 1.2.2 軟件界面設(shè)計(jì)/017 1.2.3 App界面設(shè)計(jì)/018 1.2.4 游戲界面設(shè)計(jì)/019 1.3 App界面設(shè)計(jì)師的職責(zé)/020 1.3.1 職責(zé)之內(nèi)/020 1.3.2 職責(zé)之外/023 1.4 合格UI設(shè)計(jì)師的必備技能/024 1.4.1 了解互聯(lián)網(wǎng)產(chǎn)品的誕生過(guò)程/024 1.4.2 深度掌握輔助工具/025 1.4.3 擁有良好的學(xué)習(xí)心態(tài)/026 2 設(shè)計(jì)入門/027 2.1 審美/028 2.1.1 審美觀的概念及其重要性/028 2.1.2 藝術(shù)與設(shè)計(jì)的區(qū)別/028 2.1.3 如何培養(yǎng)自己的審美觀/028 2.2 配色/029 2.2.1 色彩的基礎(chǔ)知識(shí)/029 2.2.2 色域與屏幕選擇/030 2.2.3 常用顏色模式/032 2.2.4 顏色與情感/034 2.2.5 色彩搭配/036 2.2.6 色彩的選擇與應(yīng)用/040 2.3 構(gòu)圖/042 2.3.1 構(gòu)圖的概念/042 2.3.2 常用的構(gòu)圖方式/042 2.3.3 黃金分割/045 2.4 文字與排版/046 2.4.1 字體的樣式/046 2.4.2 系統(tǒng)常用字體/048 2.4.3 字體的搭配/050 3 認(rèn)識(shí)Photoshop/051 3.1 初識(shí)Photoshop CC/052 3.1.1 界面布局/052 3.1.2 文檔的保存/069 3.2 圖層面板/071 3.2.1 圖層的概念和用法/071 3.2.2 圖層樣式/073 3.2.3 圖層混合模式/079 3.3 路徑與布爾運(yùn)算/081 3.4 神奇的濾鏡/083 3.5 快捷鍵/085 3.5.1 常用快捷鍵/085 3.5.2 自定義快捷鍵/086 4 圖標(biāo)設(shè)計(jì)/087 4.1 圖標(biāo)發(fā)展進(jìn)程/088 4.1.1 圖標(biāo)風(fēng)格進(jìn)化/088 4.1.2 移動(dòng)端操作系統(tǒng)平臺(tái)介紹/089 4.1.3 iOS與Andorid系統(tǒng)圖標(biāo)的差異/091 4.2 圖標(biāo)的可用性分析/092 4.2.1 圖標(biāo)的種類/092 4.2.2 不同圖標(biāo)的設(shè)計(jì)要點(diǎn)/092 4.3 扁平化風(fēng)格的圖標(biāo)實(shí)戰(zhàn)/093 4.3.1 iOS App圖標(biāo)設(shè)計(jì)規(guī)范/093 4.3.2 規(guī)范模板文檔的使用/095 4.3.3 從零開(kāi)始畫一個(gè)“時(shí)鐘”圖標(biāo)/098 4.3.4 保存與輸出/104 4.4 寫實(shí)風(fēng)格的圖標(biāo)實(shí)戰(zhàn)/105 4.4.1 Android App圖標(biāo)設(shè)計(jì)規(guī)范/105 4.4.2 寫實(shí)版“時(shí)鐘”圖標(biāo)/107 4.4.3 寫實(shí)版“徽章”圖標(biāo)/119 4.4.4 保存與輸出/131 4.5 設(shè)計(jì)習(xí)慣規(guī)范/133 4.5.1 不破壞原始素材/133 4.5.2 整潔的文檔/134 4.5.3 規(guī)范的文件命名/134 5 界面設(shè)計(jì)/135 5.1 界面風(fēng)格進(jìn)化史/136 5.1.1 iOS從現(xiàn)實(shí)到抽象/136 5.1.2 Android與Material design/138 5.2 扁平化風(fēng)格界面實(shí)戰(zhàn)/140 5.2.1 從設(shè)計(jì)語(yǔ)言說(shuō)起/140 5.2.2 交互設(shè)計(jì)稿/產(chǎn)品原型/140 5.2.3 從零開(kāi)始畫界面/141 5.2.4 頁(yè)面標(biāo)注/148 5.2.5 資源輸出/150 5.2.6 切片工具/156 5.3 寫實(shí)風(fēng)格界面實(shí)戰(zhàn)/160 5.3.1 從布局開(kāi)始 /160 5.3.2 細(xì)化并打磨細(xì)節(jié)/161 5.3.3 標(biāo)注與資源輸出/166 6 動(dòng)效設(shè)計(jì)/167 6.1 動(dòng)效設(shè)計(jì)概念/168 6.1.1 什么是動(dòng)效設(shè)計(jì)/168 6.1.2 為什么要做動(dòng)效/169 6.1.3 動(dòng)效設(shè)計(jì)常用軟件/175 6.2 動(dòng)效設(shè)計(jì)實(shí)戰(zhàn)/176 6.2.1 動(dòng)畫的原理 /176 6.2.2 動(dòng)畫的節(jié)奏/176 6.2.3 Photoshop動(dòng)效面板介紹/177 6.2.4 逐幀動(dòng)畫——小球彈跳/178 6.2.5 時(shí)間軸動(dòng)畫——?dú)馀荼��?181 6.2.6 時(shí)間軸動(dòng)畫——旋轉(zhuǎn)/186 6.2.7 輸出格式與命名規(guī)范/194 7 設(shè)計(jì)準(zhǔn)則/197 7.1 HIG的概念介紹/198 7.1.1 什么是HIG/198 7.1.2 為什么要遵循HIG/198 7.2 iOS系統(tǒng)的HIG /198 7.2.1 設(shè)計(jì)原則/198 7.2.2 交互方式/200 7.2.3 視覺(jué)與控件/207 7.2.4 其他擴(kuò)展項(xiàng)/214 7.2.5 蘋果UI設(shè)計(jì)資源/217 7.3 Android系統(tǒng)的HIG /217 7.3.1 設(shè)計(jì)原則/217 7.3.2 與iOS差異點(diǎn)/218 8 破壞規(guī)則/229 8.1 為什么要破壞既有的規(guī)矩/230 8.2 獨(dú)一無(wú)二的設(shè)計(jì)/230 8.2.1 活用設(shè)計(jì)準(zhǔn)則/230 8.2.2 設(shè)定應(yīng)用場(chǎng)景/234 8.2.3 情感化設(shè)計(jì)/235 8.3 無(wú)招勝有招/237 9 關(guān)于成長(zhǎng)/239 9.1 成長(zhǎng)的陣痛與迷茫/240 9.2 學(xué)會(huì)學(xué)習(xí)的方法/242 9.3 寫在最后/244