第1章　UI設計入門知識

1.1　認識UI設計　002

1.1.1　UI設計概念　002

1.1.2　UI設計原則　003

1.1.3　UI設計常用軟件　003

1.2　UI設計方向　004

1.2.1　交互設計　005

1.2.2　界面設計　005

1.2.3　用戶研究　005

1.3　UI設計規(guī)范　006

1.3.1　一致性原則　006

1.3.2　準確性原則　006

1.3.3　可讀性原則　007

1.3.4　布局合理化原則　007

1.3.5　操作合理性原則　008

1.3.6　合理的系統(tǒng)響應時間　008

1.4　UI設計流程　009

1.4.1　需求分析　009

1.4.2　交互分析　009

1.4.3　視覺設計　010

1.4.4　交付開發(fā)　011

1.4.5　設計走查　013

知識拓展　014

第2章　UI設計應用解析

2.1　文字的應用解析　017

2.1.1　認識字體　017

2.1.2　文字設計規(guī)范　018

2.1.3　文字排版的四大原則　020

2.2　圖片的應用解析　021

2.2.1　常用的圖片格式　021

2.2.2　圖片比例　021

2.2.3　圖片的應用技巧　023

2.3　色彩的應用解析　025

2.3.1　色彩的屬性　025

2.3.2　色彩的類別　026

2.3.3　色彩的搭配　028

2.4　柵格系統(tǒng)的應用解析　030

2.4.1　認識柵格系統(tǒng)　030

2.4.2　柵格系統(tǒng)的組成　031

2.4.3　柵格系統(tǒng)的設置流程　032

2.4.4　使用柵格系統(tǒng)的注意事項　033

知識拓展　033

第3章　UI設計中素材的處理

3.1　圖形元素的繪制　036

3.1.1　基礎圖形的繪制與編輯　036

3.1.2　路徑的繪制與編輯　040

3.1.3　圖形的顏色填充與描邊　046

3.1.4　對象的選擇與變換　050

3.1.5　文本的創(chuàng)建與編輯　052

3.2　圖像元素的處理　054

3.2.1　圖像大小的調整顯示　054

3.2.2　圖像的修飾與修復　055

3.2.3　圖像的摳取與合成　056

3.2.4　圖像的色彩調整　061

3.2.5　圖像的特效應用　063

實戰(zhàn)演練：制作網(wǎng)站登錄頁　067

課后練習：制作極坐標藝術效果背景　072

知識拓展　072

第4章　UI控件和組件

4.1　UI控件　075

4.2　按鈕控件設計　075

4.2.1　認識按鈕　075

4.2.2　常見的按鈕類型　077

4.2.3　按鈕的風格　078

4.3　UI組件　079

4.4　導航欄組件設計　080

4.4.1　認識導航欄　080

4.4.2　導航欄的類型　080

4.4.3　導航欄的樣式　083

實戰(zhàn)演練：制作搜索框導航欄　084

課后練習：制作新擬態(tài)圓形圖標　087

知識拓展　088

第5章　UI中的圖標設計

5.1　認識圖標　090

5.1.1　圖標的組成　090

5.1.2　圖標的類型　091

5.1.3　圖標的風格　092

5.2　圖標的設計規(guī)范　093

5.2.1　iOS圖標設計規(guī)范　095

5.2.2　Android圖標設計規(guī)范　096

5.3　手機主題圖標設計　098

實戰(zhàn)演練：制作多媒體音樂功能圖標　100

課后練習：制作扁平日歷應用圖標　110

知識拓展　111

第6章　移動端App界面設計

6.1　常見的移動端App界面　114

6.1.1　閃屏頁　114

6.1.2　引導頁　114

6.1.3　注冊登錄頁　116

6.1.4　空白頁　116

6.1.5　首頁　116

6.1.6　個人中心頁　117

6.2　iPhone界面設計規(guī)范　118

6.2.1　界面尺寸與框架　118

6.2.2　設計規(guī)范詳解　119

6.3　Android手機界面設計規(guī)范　121

6.3.1　界面尺寸與框架　121

6.3.2　設計規(guī)范詳解　122

實戰(zhàn)演練：旅行類App界面設計　123

課后練習：制作旅行類App詳情頁　133

知識拓展　135

第7章　PC端網(wǎng)頁界面設計

7.1　網(wǎng)頁常用界面類型　137

7.1.1　首頁　137

7.1.2　欄目頁　138

7.1.3　詳情頁　138

7.1.4　專題頁　139

7.2　網(wǎng)頁界面設計　140

7.2.1　網(wǎng)頁界面的設計原則　141

7.2.2　網(wǎng)頁布局　142

7.3　網(wǎng)頁界面設計規(guī)范　144

7.3.1　網(wǎng)頁界面尺寸與框架　144

7.3.2　網(wǎng)頁界面設計規(guī)范詳解　145

實戰(zhàn)演練：音樂類網(wǎng)頁界面設計　148

課后練習：制作游戲網(wǎng)頁首頁　156

知識拓展　157

第8章　應用軟件界面設計

8.1　常見的應用軟件界面　159

8.1.1　啟動頁　159

8.1.2　著陸頁　159

8.1.3　集合頁　160

8.1.4　主/細節(jié)頁　160

8.1.5　詳細信息頁　160

8.1.6　表單頁　161

8.2　軟件界面設計詳解　161

8.2.1　軟件界面設計原則　161

8.2.2　軟件界面框架類型　162

8.3　Windows設計規(guī)范　163

8.3.1　界面框架　163

8.3.2　設計規(guī)范詳解　164

實戰(zhàn)演練：音樂類應用軟件界面設計　168

課后練習：制作音樂類應用軟件播放界面　180

知識拓展　180

附錄A　在線UI設計工具

MasterGo　182

附錄B　一站式UI設計協(xié)作工具Pixso　197