PS App UI设计从零开始学

39个不同风格的设计案例，完整教学视频与案例素材，高效学习，现场感十足

本书使用理论知识与操作案例相结合的教学方式，通过39个实际设计案例介绍了App UI设计基础、App UI光影设计、App UI字体设计、App UI简约ICON设计、App UI三维ICON设计、App UI多样图形设计、App UI控件设计、App UI基础界面设计、App UI导航列表设计等内容。为方便读者使用本书，编者还为本书录制了教学视频，读者扫码本书的二维码即可直接观看，大幅提高学习效率。 本书由一线设计师精心编撰，图文并茂，步骤详尽，实例丰富，尤其适合想从事UI设计的新手快速上手，也可以作为培训机构或大专院校相关专业的教学用书。

贾浩梅，理学硕士，本科毕业于东北大学软件学院数字媒体技术专业，研究生毕业于英国Loughborough University理学院高级计算机科学专业。曾在沈阳某公司任职UI设计师，目前主要从事数字媒体技术的教学、科研以及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 

通常意义上，UI是User Interface的缩写。其中，Interface的前缀Inter的意思是“在一起、交互”，而翻译成中文“界面”之后， “交互”的概念没能得到体现。 
UI是指人与信息交互的媒介，它是信息产品的功能载体和典型特征。UI作为系统的可用形式而存在，比如以视觉为主体的界面，强调的是视觉元素的组织和呈现。这是物理表现层的设计，每一款产品或者交互形式都以这种形态出现的，包括图形、图标、色彩、文字设计等，用户通过它们使用系统。在这个层面，UI可以理解为User Interface，即用户界面，这是UI作为人机交互的基础层面。
本书采用新版Photoshop CC（不限于此版本）制作和讲解，Photoshop作为目前非常流行的一款设计软件，凭借其强大的功能和易学易用的特性，深受广大设计师喜爱。
本书汇集编者在手机App界面设计中的丰富经验，详细讲解App手机界面设计知识，从写实到新潮，从质感到流行，从图标到整体商业案例系统，手把手教用户App界面创意设计，帮用户轻松打开手机App界面设计这扇窗，自由自在地翱翔在手机App界面设计的蓝天上。
通过阅读本书，读者可以快速了解以下内容：
快速认识并了解UI设计。
快速掌握图标制作基础。
学会制作写实App图标。
快速掌握iOS新潮扁平风的设计技法。
学会质感App的表现手法。
熟练掌握个性字体设计的方法。
掌握手机App界面商业案例设计技巧。
本书内容全面、结构清晰、实例新颖，采用理论知识与操作案例相结合的教学方式，向用户介绍不同类型元素的处理和表现手法以及手机App UI界面设计所需的基础知识和操作技巧，实用性较强，确保用户能够理解并掌握相应的功能与操作，为入职UI设计岗位奠定良好基础。
本书的配书资源
为方便读者使用本书，本书提供了全部39个案例的教学视频与素材文件。
读者只需扫码本书各章案例的二维码即可直接观看教学视频，对于新手来说，可减少学习中的困惑，大幅提高学习效率。
本书的素材文件按章分类，对应各章案例，读者在上机练习时可以直接调用，十分方便，扫码下述二维码可以下载素材文件。如果有疑问，请联系[email protected]，邮件主题写
“PS App UI设计从零开始学”。

由于编者水平有限，加上时间仓促，书中难免有一些不足之处，欢迎同行和读者批评指正。

编者
2021年1月