PS App UI設(shè)計從零開始學(xué)

第1章　App UI設(shè)計基礎(chǔ) 1
1.1　 App UI設(shè)計概述2
1.1.1  什么是UI設(shè)計2
1.1.2  什么是App UI設(shè)計2
1.1.3   App UI設(shè)計技術(shù) 4
1.2　Phtoshop軟件的基本操作6
1.2.1  安裝、卸載、啟動和
退出Photoshop6
1.2.2  圖形圖像文件的基本操作7
1.3　Photoshop系統(tǒng)界面調(diào)整12
1.3.1  界面組成12
1.3.2  調(diào)整界面16
1.4　App UI界面設(shè)計團(tuán)隊與流程16
1.4.1  App界面設(shè)計者與產(chǎn)品團(tuán)隊 16
1.4.2  App界面設(shè)計與項目流程 17
1.4.3  視覺設(shè)計18
1.5　App UI界面設(shè)計理論18
1.5.1  用戶操作習(xí)慣 18
1.5.2  界面布局 19
1.5.3  操作簡單 23
1.5.4  在操作方式上創(chuàng)新 24
1.5.5  在設(shè)計中投入情感 24
1.5.6  App UI的配色理論 24
1.6　App UI界面設(shè)計技巧27
1.6.1  完整的App UI 設(shè)計流程27
1.6.2  圖標(biāo)設(shè)計流程30
1.6.3  讓圖標(biāo)更具吸引力30
第2章　App UI光影設(shè)計32
2.1　UI設(shè)計師技能之顏色搭配33
2.1.1  簡約配色設(shè)計33
2.1.2  混合特效設(shè)計34
2.1.3  具體案例 34
2.2　案例：玻璃質(zhì)感圖標(biāo)設(shè)計35
2.2.1  設(shè)計構(gòu)思35
2.2.2  操作步驟36
2.3　案例：仿真插座設(shè)計40
2.3.1  設(shè)計構(gòu)思40
2.3.2  操作步驟40
2.4　案例：木紋質(zhì)感設(shè)計42
2.4.1  設(shè)計構(gòu)思43
2.4.2  操作步驟43
2.5　案例：絢麗光線界面設(shè)計57
2.5.1  設(shè)計構(gòu)思57
2.5.2  操作步驟58
第3章　App UI字體設(shè)計62
3.1　UI設(shè)計師技能之文字設(shè)計63
3.1.1  字號設(shè)計63
3.1.2  UI文字設(shè)計標(biāo)準(zhǔn)64
3.2　案例：斜面浮雕字體設(shè)計65
3.2.1  設(shè)計構(gòu)思65
3.2.2  操作步驟65
3.3　案例：鉆石字體設(shè)計69
3.3.1  設(shè)計構(gòu)思69
3.3.2  操作步驟69
3.4　案例：碎裂巖石材質(zhì)字體設(shè)計72
3.4.1  設(shè)計構(gòu)思 72
3.4.2  操作步驟73
第4章　App UI簡約圖標(biāo)設(shè)計76
4.1　UI設(shè)計師技能之圖標(biāo)（ICON）
設(shè)計77
4.2　案例：特價圖標(biāo)設(shè)計78
4.2.1  設(shè)計構(gòu)思78
4.2.2  操作步驟78
4.3　案例：搜索圖標(biāo)設(shè)計80
4.3.1  設(shè)計構(gòu)思80
4.3.2  操作步驟81
4.4　案例：照相機(jī)圖標(biāo)設(shè)計83
4.4.1  設(shè)計構(gòu)思83
4.4.2  操作步驟84
4.5　案例：鬧鐘圖標(biāo)設(shè)計86
4.5.1  設(shè)計構(gòu)思86
4.5.2  操作步驟86
4.6　案例：簡約平面圖標(biāo)整套設(shè)計91
4.6.1  設(shè)計構(gòu)思92
4.6.2  操作步驟92
第5章  App UI三維圖標(biāo)設(shè)計99
5.1　UI設(shè)計師技能之三維圖標(biāo)
設(shè)計100
5.1.1  表現(xiàn)形態(tài)100
5.1.2  圖標(biāo)特性101
5.1.3  圖標(biāo)設(shè)計的構(gòu)思101
5.2　案例：立體日歷圖標(biāo)設(shè)計102
5.2.1  設(shè)計構(gòu)思102
5.2.2  操作步驟102
5.3　案例：立體錄音器圖標(biāo)設(shè)計105
5.3.1  設(shè)計構(gòu)思106
5.3.2  操作步驟106
5.4　案例：立體時鐘圖標(biāo)設(shè)計108
5.4.1  設(shè)計構(gòu)思108
5.4.2  操作步驟109
5.5　案例：立體勾選框圖標(biāo)設(shè)計111
5.5.1  設(shè)計構(gòu)思112
5.5.2  操作步驟112
5.6　案例：實體手機(jī)設(shè)計114
5.6.1  設(shè)計構(gòu)思115
5.6.2  操作步驟115
第6章　App UI多樣圖形設(shè)計122
6.1　UI設(shè)計師技能之構(gòu)圖技巧123
6.1.1  粗細(xì)對比123
6.1.2  遠(yuǎn)近對比123
6.1.3  疏密對比124
6.1.4  靜動對比124
6.1.5  中西對比124
6.1.6  古今對比125
6.2　案例：個性二維碼掃描圖形設(shè)計125
6.2.1  設(shè)計構(gòu)思126
6.2.2  操作步驟126
6.3　案例：徽標(biāo)圖形設(shè)計128
6.3.1  設(shè)計構(gòu)思128
6.3.2  操作步驟129
6.4　案例：個性條形碼設(shè)計132
6.4.1  設(shè)計構(gòu)思132
6.4.2  操作步驟132
6.5　案例：電影宣傳海報設(shè)計134
6.5.1  設(shè)計構(gòu)思135
6.5.2  操作步驟135
第7章  App UI按鈕設(shè)計138
7.1　UI設(shè)計師技能之按鈕設(shè)計139
7.1.1  關(guān)系分組按鈕139
7.1.2  層級關(guān)系139
7.1.3  善用陰影140
7.1.4  圓角邊界140
7.1.5  強(qiáng)調(diào)重點141
7.1.6  按鈕尺寸141
7.1.7  表述必須明確141
7.2　案例：立體旋鈕設(shè)計 142
7.2.1  設(shè)計構(gòu)思142
7.2.2  操作步驟142
7.3　案例：WIFI按鈕設(shè)計146
7.3.1  設(shè)計構(gòu)思146
7.3.2  操作步驟146
7.4　案例：金屬質(zhì)感按鈕設(shè)計150
7.4.1  設(shè)計構(gòu)思150
7.4.2  操作步驟150
7.5　案例：音量調(diào)節(jié)按鈕設(shè)計155
7.5.1  設(shè)計構(gòu)思156
7.5.2  操作步驟156
7.6　案例：透明界面按鈕設(shè)計160
7.6.1  設(shè)計構(gòu)思160
7.6.2  操作步驟161
7.7　案例：滑動控件設(shè)計168
7.7.1  設(shè)計構(gòu)思168
7.7.2  操作步驟169
第8章　App UI基礎(chǔ)界面設(shè)計171
8.1　UI設(shè)計師技能之界面設(shè)計172
8.1.1  清晰地展現(xiàn)信息層級172
8.1.2  采用一致的設(shè)計語言172
8.1.3  在細(xì)節(jié)上給予驚喜173
8.2　案例：游戲加載界面設(shè)計173
8.2.1  設(shè)計構(gòu)思173
8.2.2  操作步驟173
8.3　案例：撥號界面和等待接聽界面
設(shè)計179
8.3.1  設(shè)計構(gòu)思179
8.3.2  操作步驟180
8.4　案例：搜索結(jié)果頁面設(shè)計185
8.4.1  設(shè)計構(gòu)思185
8.4.2  操作步驟185
8.5　案例：個性報錯頁面設(shè)計188
8.5.1  設(shè)計構(gòu)思189
8.5.2  操作步驟189
第9章　App UI導(dǎo)航列表設(shè)計194
9.1　UI設(shè)計師技能之交互設(shè)計195
9.1.1  可視性195
9.1.2  反饋195
9.1.3  限制195
9.1.4  映射196
9.1.5   一致性196
9.1.6  啟發(fā)性196
9.2　案例：導(dǎo)航欄設(shè)計196
9.2.1  設(shè)計構(gòu)思196
9.2.2  操作步驟197
9.3　案例：透明列表頁面設(shè)計198
9.3.1  設(shè)計構(gòu)思199
9.3.2  操作步驟199
9.4　案例：通話界面設(shè)計204
9.4.1  設(shè)計構(gòu)思204
9.4.2  操作步驟205
9.5　案例：食譜小部件頁面的設(shè)計207
9.5.1  設(shè)計構(gòu)思207
9.5.2  操作步驟208
第10章　App綜合案例設(shè)計211
10.1　案例：引導(dǎo)頁面設(shè)計212
10.1.1  設(shè)計構(gòu)思212
10.1.2  操作步驟213
10.2　案例：登錄/注冊界面設(shè)計215
10.2.1  設(shè)計構(gòu)思216
10.2.2  操作步驟216
10.3　案例：扁平化選擇列表設(shè)計218
10.3.1  設(shè)計構(gòu)思219
10.3.2  操作步驟219
10.4　案例：歡迎界面設(shè)計221
10.4.1  設(shè)計構(gòu)思222
10.4.2  操作步驟222