第1章　UI設(shè)計入門知識

1.1　認識UI設(shè)計　002

1.1.1　UI設(shè)計概念　002

1.1.2　UI設(shè)計原則　003

1.1.3　UI設(shè)計常用軟件　003

1.2　UI設(shè)計方向　004

1.2.1　交互設(shè)計　005

1.2.2　界面設(shè)計　005

1.2.3　用戶研究　005

1.3　UI設(shè)計規(guī)范　006

1.3.1　一致性原則　006

1.3.2　準(zhǔn)確性原則　006

1.3.3　可讀性原則　007

1.3.4　布局合理化原則　007

1.3.5　操作合理性原則　008

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

1.4　UI設(shè)計流程　009

1.4.1　需求分析　009

1.4.2　交互分析　009

1.4.3　視覺設(shè)計　010

1.4.4　交付開發(fā)　011

1.4.5　設(shè)計走查　013

知識拓展　014

第2章　UI設(shè)計應(yīng)用解析

2.1　文字的應(yīng)用解析　017

2.1.1　認識字體　017

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

2.1.3　文字排版的四大原則　020

2.2　圖片的應(yīng)用解析　021

2.2.1　常用的圖片格式　021

2.2.2　圖片比例　021

2.2.3　圖片的應(yīng)用技巧　023

2.3　色彩的應(yīng)用解析　025

2.3.1　色彩的屬性　025

2.3.2　色彩的類別　026

2.3.3　色彩的搭配　028

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

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

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

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

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

知識拓展　033

第3章　UI設(shè)計中素材的處理

3.1　圖形元素的繪制　036

3.1.1　基礎(chǔ)圖形的繪制與編輯　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　圖像大小的調(diào)整顯示　054

3.2.2　圖像的修飾與修復(fù)　055

3.2.3　圖像的摳取與合成　056

3.2.4　圖像的色彩調(diào)整　061

3.2.5　圖像的特效應(yīng)用　063

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

課后練習(xí)：制作極坐標(biāo)藝術(shù)效果背景　072

知識拓展　072

第4章　UI控件和組件

4.1　UI控件　075

4.2　按鈕控件設(shè)計　075

4.2.1　認識按鈕　075

4.2.2　常見的按鈕類型　077

4.2.3　按鈕的風(fēng)格　078

4.3　UI組件　079

4.4　導(dǎo)航欄組件設(shè)計　080

4.4.1　認識導(dǎo)航欄　080

4.4.2　導(dǎo)航欄的類型　080

4.4.3　導(dǎo)航欄的樣式　083

實戰(zhàn)演練：制作搜索框?qū)Ш綑凇?84

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

知識拓展　088

第5章　UI中的圖標(biāo)設(shè)計

5.1　認識圖標(biāo)　090

5.1.1　圖標(biāo)的組成　090

5.1.2　圖標(biāo)的類型　091

5.1.3　圖標(biāo)的風(fēng)格　092

5.2　圖標(biāo)的設(shè)計規(guī)范　093

5.2.1　iOS圖標(biāo)設(shè)計規(guī)范　095

5.2.2　Android圖標(biāo)設(shè)計規(guī)范　096

5.3　手機主題圖標(biāo)設(shè)計　098

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

課后練習(xí)：制作扁平日歷應(yīng)用圖標(biāo)　110

知識拓展　111

第6章　移動端App界面設(shè)計

6.1　常見的移動端App界面　114

6.1.1　閃屏頁　114

6.1.2　引導(dǎo)頁　114

6.1.3　注冊登錄頁　116

6.1.4　空白頁　116

6.1.5　首頁　116

6.1.6　個人中心頁　117

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

6.2.1　界面尺寸與框架　118

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

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

6.3.1　界面尺寸與框架　121

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

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

課后練習(xí)：制作旅行類App詳情頁　133

知識拓展　135

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

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)頁界面設(shè)計　140

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

7.2.2　網(wǎng)頁布局　142

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

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

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

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

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

知識拓展　157

第8章　應(yīng)用軟件界面設(shè)計

8.1　常見的應(yīng)用軟件界面　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　軟件界面設(shè)計詳解　161

8.2.1　軟件界面設(shè)計原則　161

8.2.2　軟件界面框架類型　162

8.3　Windows設(shè)計規(guī)范　163

8.3.1　界面框架　163

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

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

課后練習(xí)：制作音樂類應(yīng)用軟件播放界面　180

知識拓展　180

附錄A　在線UI設(shè)計工具

MasterGo　182

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