PS App UI設(shè)計(jì)從零開(kāi)始學(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  視覺(jué)設(shè)計(jì)18
1.5　App UI界面設(shè)計(jì)理論18
1.5.1  用戶(hù)操作習(xí)慣 18
1.5.2  界面布局 19
1.5.3  操作簡(jiǎn)單 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  簡(jiǎn)約配色設(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簡(jiǎn)約圖標(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　案例：簡(jiǎn)約平面圖標(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ì)對(duì)比123
6.1.2  遠(yuǎn)近對(duì)比123
6.1.3  疏密對(duì)比124
6.1.4  靜動(dòng)對(duì)比124
6.1.5  中西對(duì)比124
6.1.6  古今對(duì)比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  層級(jí)關(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)信息層級(jí)172
8.1.2  采用一致的設(shè)計(jì)語(yǔ)言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)界面和等待接聽(tīng)界面
設(shè)計(jì)179
8.3.1  設(shè)計(jì)構(gòu)思179
8.3.2  操作步驟180
8.4　案例：搜索結(jié)果頁(yè)面設(shè)計(jì)185
8.4.1  設(shè)計(jì)構(gòu)思185
8.4.2  操作步驟185
8.5　案例：個(gè)性報(bào)錯(cuò)頁(yè)面設(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　案例：透明列表頁(yè)面設(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　案例：食譜小部件頁(yè)面的設(shè)計(jì)207
9.5.1  設(shè)計(jì)構(gòu)思207
9.5.2  操作步驟208
第10章　App綜合案例設(shè)計(jì)211
10.1　案例：引導(dǎo)頁(yè)面設(shè)計(jì)212
10.1.1  設(shè)計(jì)構(gòu)思212
10.1.2  操作步驟213
10.2　案例：登錄/注冊(cè)界面設(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