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

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