PS APP UI 设计从零开始学

第1章　App UI设计基础 1

1.1　 App UI设计概述2

1.1.1 什么是UI设计2

1.1.2 什么是App UI设计2

1.1.3 App UI设计**技术 4

1.2　Phtoshop软件的基本操作6

1.2.1 安装、卸载、启动和

退出Photoshop6

1.2.2 图形图像文件的基本操作7

1.3　Photoshop系统界面调整12

1.3.1 界面组成12

1.3.2 调整界面16

1.4　App UI界面设计团队与流程16

1.4.1 App界面设计者与产品团队 16

1.4.2 App界面设计与项目流程 17

1.4.3 视觉设计18

1.5　App UI界面设计理论18

1.5.1 用户操作习惯 18

1.5.2 界面布局 19

1.5.3 操作简单 23

1.5.4 在操作方式上创新 24

1.5.5 在设计中投入情感 24

1.5.6 App UI的配色理论 24

1.6　App UI界面设计技巧27

1.6.1 完整的App UI 设计流程27

1.6.2 图标设计流程30

1.6.3 让图标更具吸引力30

第2章　App UI光影设计32

2.1　UI设计师**技能之颜色搭配33

2.1.1 简约配色设计33

2.1.2 混合特效设计34

2.1.3 具体案例 34

2.2　案例：玻璃质感图标设计35

2.2.1 设计构思35

2.2.2 操作步骤36

2.3　案例：仿真插座设计40

2.3.1 设计构思40

2.3.2 操作步骤40

2.4　案例：木纹质感设计42

2.4.1 设计构思43

2.4.2 操作步骤43

2.5　案例：绚丽光线界面设计57

2.5.1 设计构思57

2.5.2 操作步骤58

第3章　App UI字体设计62

3.1　UI设计师**技能之文字设计63

3.1.1 字号设计63

3.1.2 UI文字设计标准64

3.2　案例：斜面浮雕字体设计65

3.2.1 设计构思65

3.2.2 操作步骤65

3.3　案例：钻石字体设计69

3.3.1 设计构思69

3.3.2 操作步骤69

3.4　案例：碎裂岩石材质字体设计72

3.4.1 设计构思 72

3.4.2 操作步骤73

第4章　App UI简约图标设计76

4.1　UI设计师**技能之图标（ICON）

设计77

4.2　案例：特价图标设计78

4.2.1 设计构思78

4.2.2 操作步骤78

4.3　案例：搜索图标设计80

4.3.1 设计构思80

4.3.2 操作步骤81

4.4　案例：照相机图标设计83

4.4.1 设计构思83

4.4.2 操作步骤84

4.5　案例：闹钟图标设计86

4.5.1 设计构思86

4.5.2 操作步骤86

4.6　案例：简约平面图标整套设计91

4.6.1 设计构思92

4.6.2 操作步骤92

第5章 App UI三维图标设计99

5.1　UI设计师**技能之三维图标

设计100

5.1.1 表现形态100

5.1.2 图标特性101

5.1.3 图标设计的构思101

5.2　案例：立体日历图标设计102

5.2.1 设计构思102

5.2.2 操作步骤102

5.3　案例：立体录音器图标设计105

5.3.1 设计构思106

5.3.2 操作步骤106

5.4　案例：立体时钟图标设计108

5.4.1 设计构思108

5.4.2 操作步骤109

5.5　案例：立体勾选框图标设计111

5.5.1 设计构思112

5.5.2 操作步骤112

5.6　案例：实体手机设计114

5.6.1 设计构思115

5.6.2 操作步骤115

第6章　App UI多样图形设计122

6.1　UI设计师**技能之构图技巧123

6.1.1 粗细对比123

6.1.2 远近对比123

6.1.3 疏密对比124

6.1.4 静动对比124

6.1.5 中西对比124

6.1.6 古今对比125

6.2　案例：个性二维码扫描图形设计125

6.2.1 设计构思126

6.2.2 操作步骤126

6.3　案例：徽标图形设计128

6.3.1 设计构思128

6.3.2 操作步骤129

6.4　案例：个性条形码设计132

6.4.1 设计构思132

6.4.2 操作步骤132

6.5　案例：电影宣传海报设计134

6.5.1 设计构思135

6.5.2 操作步骤135

第7章 App UI按钮设计138

7.1　UI设计师**技能之按钮设计139

7.1.1 关系分组按钮139

7.1.2 层级关系139

7.1.3 善用阴影140

7.1.4 圆角边界140

7.1.5 强调重点141

7.1.6 按钮尺寸141

7.1.7 表述必须明确141

7.2　案例：立体旋钮设计 142

7.2.1 设计构思142

7.2.2 操作步骤142

7.3　案例：WIFI按钮设计146

7.3.1 设计构思146

7.3.2 操作步骤146

7.4　案例：金属质感按钮设计150

7.4.1 设计构思150

7.4.2 操作步骤150

7.5　案例：音量调节按钮设计155

7.5.1 设计构思156

7.5.2 操作步骤156

7.6　案例：透明界面按钮设计160

7.6.1 设计构思160

7.6.2 操作步骤161

7.7　案例：滑动控件设计168

7.7.1 设计构思168

7.7.2 操作步骤169

第8章　App UI基础界面设计171

8.1　UI设计师**技能之界面设计172

8.1.1 清晰地展现信息层级172

8.1.2 采用一致的设计语言172

8.1.3 在细节上给予惊喜173

8.2　案例：游戏加载界面设计173

8.2.1 设计构思173

8.2.2 操作步骤173

8.3　案例：拨号界面和等待接听界面

设计179

8.3.1 设计构思179

8.3.2 操作步骤180

8.4　案例：搜索结果页面设计185

8.4.1 设计构思185

8.4.2 操作步骤185

8.5　案例：个性报错页面设计188

8.5.1 设计构思189

8.5.2 操作步骤189

第9章　App UI导航列表设计194

9.1　UI设计师**技能之交互设计195

9.1.1 可视性195

9.1.2 反馈195

9.1.3 限制195

9.1.4 映射196

9.1.5 一致性196

9.1.6 启发性196

9.2　案例：导航栏设计196

9.2.1 设计构思196

9.2.2 操作步骤197

9.3　案例：透明列表页面设计198

9.3.1 设计构思199

9.3.2 操作步骤199

9.4　案例：通话界面设计204

9.4.1 设计构思204

9.4.2 操作步骤205

9.5　案例：食谱小部件页面的设计207

9.5.1 设计构思207

9.5.2 操作步骤208

第10章　App综合案例设计211

10.1　案例：引导页面设计212

10.1.1 设计构思212

10.1.2 操作步骤213

10.2　案例：登录/注册界面设计215

10.2.1 设计构思216

10.2.2 操作步骤216

10.3　案例：扁平化选择列表设计218

10.3.1 设计构思219

10.3.2 操作步骤219

10.4　案例：欢迎界面设计221

10.4.1 设计构思222

10.4.2 操作步骤222