第1章　UI設(shè)計(jì)入門(mén)知識(shí)

1.1　認(rèn)識(shí)UI設(shè)計(jì)　002

1.1.1　UI設(shè)計(jì)概念　002

1.1.2　UI設(shè)計(jì)原則　003

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

1.2　UI設(shè)計(jì)方向　004

1.2.1　交互設(shè)計(jì)　005

1.2.2　界面設(shè)計(jì)　005

1.2.3　用戶研究　005

1.3　UI設(shè)計(jì)規(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)時(shí)間　008

1.4　UI設(shè)計(jì)流程　009

1.4.1　需求分析　009

1.4.2　交互分析　009

1.4.3　視覺(jué)設(shè)計(jì)　010

1.4.4　交付開(kāi)發(fā)　011

1.4.5　設(shè)計(jì)走查　013

知識(shí)拓展　014

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

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

2.1.1　認(rèn)識(shí)字體　017

2.1.2　文字設(shè)計(jì)規(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　認(rèn)識(shí)柵格系統(tǒng)　030

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

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

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

知識(shí)拓展　033

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

3.1　圖形元素的繪制　036

3.1.1　基礎(chǔ)圖形的繪制與編輯　036

3.1.2　路徑的繪制與編輯　040

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

3.1.4　對(duì)象的選擇與變換　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

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

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

知識(shí)拓展　072

第4章　UI控件和組件

4.1　UI控件　075

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

4.2.1　認(rèn)識(shí)按鈕　075

4.2.2　常見(jiàn)的按鈕類型　077

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

4.3　UI組件　079

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

4.4.1　認(rèn)識(shí)導(dǎo)航欄　080

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

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

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

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

知識(shí)拓展　088

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

5.1　認(rèn)識(shí)圖標(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è)計(jì)規(guī)范　093

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

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

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

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

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

知識(shí)拓展　111

第6章　移動(dòng)端App界面設(shè)計(jì)

6.1　常見(jiàn)的移動(dòng)端App界面　114

6.1.1　閃屏頁(yè)　114

6.1.2　引導(dǎo)頁(yè)　114

6.1.3　注冊(cè)登錄頁(yè)　116

6.1.4　空白頁(yè)　116

6.1.5　首頁(yè)　116

6.1.6　個(gè)人中心頁(yè)　117

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

6.2.1　界面尺寸與框架　118

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

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

6.3.1　界面尺寸與框架　121

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

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

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

知識(shí)拓展　135

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

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

7.1.1　首頁(yè)　137

7.1.2　欄目頁(yè)　138

7.1.3　詳情頁(yè)　138

7.1.4　專題頁(yè)　139

7.2　網(wǎng)頁(yè)界面設(shè)計(jì)　140

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

7.2.2　網(wǎng)頁(yè)布局　142

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

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

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

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

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

知識(shí)拓展　157

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

8.1　常見(jiàn)的應(yīng)用軟件界面　159

8.1.1　啟動(dòng)頁(yè)　159

8.1.2　著陸頁(yè)　159

8.1.3　集合頁(yè)　160

8.1.4　主/細(xì)節(jié)頁(yè)　160

8.1.5　詳細(xì)信息頁(yè)　160

8.1.6　表單頁(yè)　161

8.2　軟件界面設(shè)計(jì)詳解　161

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

8.2.2　軟件界面框架類型　162

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

8.3.1　界面框架　163

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

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

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

知識(shí)拓展　180

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

MasterGo　182

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