第1章　了解移動(dòng)UI設(shè)計(jì)

1.1　認(rèn)識(shí)移動(dòng)UI設(shè)計(jì)

1.2　UI設(shè)計(jì)的流程

1.3　移動(dòng)UI設(shè)計(jì)的原則

1.3.1　一致性原則

1.3.2　習(xí)慣性原則

1.3.3　清晰性原則

1.3.4　易用性原則

1.3.5　人性化原則

1.4　提升用戶體驗(yàn)的UI設(shè)計(jì)技巧

1.4.1　簡(jiǎn)化操作流程

1.4.2　手勢(shì)與動(dòng)畫的結(jié)合

1.4.3　選擇適當(dāng)?shù)膱D像尺寸與格式

1.4.4　使用高對(duì)比度配色方案

1.4.5　使用易讀的字體

1.5　移動(dòng)UI設(shè)計(jì)常用的布局方式

1.5.1　列表式布局

1.5.2　陳列館式布局

1.5.3　宮格式布局

1.5.4　選項(xiàng)卡式布局

1.5.5　旋轉(zhuǎn)木馬式布局

1.5.6　行為擴(kuò)展式布局

1.5.7　多面板式布局

1.5.8　圖表式布局

1.6　移動(dòng)UI設(shè)計(jì)常用尺寸單位

第2章　iOS系統(tǒng)特點(diǎn)及設(shè)計(jì)規(guī)范

2.1　iOS系統(tǒng)的發(fā)展歷程

2.2　iOS系統(tǒng)的UI特色

2.2.1　以內(nèi)容為核心

2.2.2　保證清晰度

2.2.3　用深度來體現(xiàn)層次

2.3　iOS系統(tǒng)的基礎(chǔ)UI組件

2.3.1　欄

2.3.2　內(nèi)容視圖

2.3.3　臨時(shí)視圖

2.4　了解主流的iOS設(shè)備

2.5　iOS系統(tǒng)的UI設(shè)計(jì)規(guī)范

2.5.1　文字

2.5.2　顏色

2.5.3　圖標(biāo)

2.5.4　邊距和間距

第3章　Android系統(tǒng)特點(diǎn)及設(shè)計(jì)規(guī)范

3.1　Android系統(tǒng)的優(yōu)勢(shì)

3.2　Android系統(tǒng)UI設(shè)計(jì)的演變歷程

3.2.1　鎖屏

3.2.2　桌面

3.2.3　Android應(yīng)用商店

3.2.4　通知面板

3.2.5　圖庫(kù)

3.2.6　音樂播放器

3.2.7　撥號(hào)界面

3.2.8　設(shè)置界面

3.3　Android系統(tǒng)UI的構(gòu)成

3.3.1　主屏幕和任務(wù)列表

3.3.2　系統(tǒng)欄

3.3.3　通知面板

3.3.4　通用UI組件

3.4　Android系統(tǒng)的UI設(shè)計(jì)規(guī)范

3.4.1　度量單位和像素密度

3.4.2　UI尺寸

3.4.3　字體

3.4.4　顏色

3.4.5　圖標(biāo)

第4章　Photoshop常用功能

4.1　圖形的繪制

4.1.1　基礎(chǔ)圖形的繪制

4.1.2　自定義形狀的繪制

4.1.3　其他復(fù)雜圖形的繪制

4.2　文本的應(yīng)用

4.2.1　文本的添加

4.2.2　設(shè)置文本屬性

4.2.3　編輯段落文本

4.3　圖像的選擇

4.3.1　規(guī)則圖像的選擇

4.3.2　不規(guī)則圖像的選擇

4.3.3　根據(jù)顏色選擇圖像

4.4　圖像的合成

4.4.1　圖層蒙版

4.4.2　矢量蒙版

4.4.3　剪貼蒙版

4.5　必備的樣式效果

4.5.1　斜面和浮雕

4.5.2　投影和內(nèi)陰影

4.5.3　漸變疊加

4.5.4　圖案疊加

4.5.5　內(nèi)發(fā)光和外發(fā)光

4.5.6　描邊

第5章　移動(dòng)UI常用基本元素設(shè)計(jì)

5.1　圖標(biāo)設(shè)計(jì)

5.1.1　輕擬物化圖標(biāo)設(shè)計(jì)

5.1.2　扁平化圖標(biāo)設(shè)計(jì)

5.1.3　線性圖標(biāo)設(shè)計(jì)

5.1.4　立體圖標(biāo)設(shè)計(jì)

5.2　常規(guī)按鈕設(shè)計(jì)

5.2.1　多彩下載按鈕設(shè)計(jì)

5.2.2　金屬質(zhì)感按鈕設(shè)計(jì)

5.3　開關(guān)設(shè)計(jì)

5.3.1　單選按鈕開關(guān)設(shè)計(jì)

5.3.2　復(fù)選框開關(guān)設(shè)計(jì)

5.3.3　ON/OFF開關(guān)設(shè)計(jì)

5.4　搜索欄設(shè)計(jì)

5.4.1　清新自然的搜索欄設(shè)計(jì)

5.4.2　木紋效果的搜索欄設(shè)計(jì)

5.5　Tab標(biāo)簽設(shè)計(jì)

5.5.1　線性風(fēng)格的Tab標(biāo)簽設(shè)計(jì)

5.5.2　圖文結(jié)合的Tab標(biāo)簽設(shè)計(jì)

5.6　進(jìn)度條設(shè)計(jì)

5.6.1　線形進(jìn)度條設(shè)計(jì)

5.6.2　圓形進(jìn)度條設(shè)計(jì)

5.6.3　藍(lán)色創(chuàng)意進(jìn)度條設(shè)計(jì)

5.7　列表框設(shè)計(jì)

5.7.1　簡(jiǎn)潔列表框設(shè)計(jì)

5.7.2　立體化列表框設(shè)計(jì)

5.8　對(duì)話框設(shè)計(jì)

5.8.1　半透明的登錄對(duì)話框設(shè)計(jì)

5.8.2　可愛的游戲?qū)υ捒蛟O(shè)計(jì)

第6章　扁平化風(fēng)格的旅游App

6.1　分析用戶需求

6.2　定義設(shè)計(jì)風(fēng)格

6.3　顏色搭配技巧

6.4　案例操作詳解

第7章　清新風(fēng)格的電商App

7.1　分析用戶需求

7.2　定義設(shè)計(jì)風(fēng)格

7.3　顏色搭配技巧

7.4　案例操作詳解

第8章　絢彩風(fēng)格的美食App

8.1　分析用戶需求

8.2　定義設(shè)計(jì)風(fēng)格

8.3　顏色搭配技巧

8.4　案例操作詳解

第9章　時(shí)尚風(fēng)格的音樂App

9.1　分析用戶需求

9.2　定義設(shè)計(jì)風(fēng)格

9.3　顏色搭配技巧

9.4　案例操作詳解

第10章　線性風(fēng)格的智能家居App

10.1　分析用戶需求

10.2　定義設(shè)計(jì)風(fēng)格

10.3　顏色搭配技巧

10.4　案例操作詳解

第11章　活潑可愛的早教App

11.1　分析用戶需求

11.2　定義設(shè)計(jì)風(fēng)格

11.3　顏色搭配技巧

11.4　案例操作詳解