UI设计其实很简单:PHOTOSHOP界面设计高手之道

"随着移动智能设备的普及，Android系统、iOS系统的移动智能设备正在飞速改变人们的生活方式。伴随着移动智能设备屏幕变得更大，功能变得更多，对于移动UI界面设计的要求也越来越高。本书是使用Photoshop软件进行移动UI界面设计的案例教程，在编写过程中作者采取从简单到复杂、从基础到专业、从理论到实战的方式，一步步教会读者移动UI界面设计的知识，使其掌握真正的设计精髓。
《UI设计其实很简单：Photoshop界面设计高手之道》结构清晰、内容由简到难、案例精美、步骤详细，使读者学习起来更为轻松。为了方便读者学 习，本书还赠送了超值资料包，收录了书中所有案例的素材和源文件，方便读者随时查阅。
"

随着智能设备的飞速发展，移动设备 App 界面设计领域也得到了行业的关注和重视。人们在不断追求 App 界面设计的个性化与酷炫效果的同时，企业更希望通过 App 界面设计为产品提供营销服务。因此，也就有越来越多的人参与移动设备 App 的界面设计与开发。本书的作者有丰富的移动 UI 界面的设计经验，从基础的设计知识入手，详细讲解了 App 的设计原则、界面中的元素及制作方法等。全书共包含 UI 设计你要知道的事儿、UI 设计你要会用Photoshop、不同系统及其组件的设计、移动 UI 界面中的常用元素设计、界面元素的组合应用、购物App 界面设计、音乐 App 界面设计、资讯 App 界面设计和游戏 App 界面设计 9 章的内容。读者通过对本书的学习，既能掌握相关的设计理论知识，同时还能通过书中案例提高设计 App 界面的实战技能。 全书结构清晰、内容由简到难、案例精美、步骤详细，使读者学习起来更为轻松。为了方便读者学习，本书还赠送了超值资料包，收录了书中所有案例的素材和源文件，方便读者随时查阅。

创锐设计，由一支很好的平面设计师与图形图像资深编辑队伍组成。出版过众多很好的图形图像方面的专业书籍，不仅在靠前处于靠前地位，还有大量作品输出过海外版权，备受读者青睐。在课程教材方面，由于他们拥有多年教育培训的经验，因此十分了解初学读者的心理需求，从而研究出了一套行之有效的教学方法；此外，他们又参加过多个商业项目的设计工作，熟悉行业规范、了解客户需求，拥有较高的设计水平，积累了丰富的制作经验、为专业进阶读者指出了技术进阶的明路；在他们的图书中，选择的实例不仅融会贯通了软件技法，更能通过分享图像处理经验，激发读者的灵感、迸发创意火花，达到事半功倍的效果。

第 1 章 UI 设计你要知道的事儿 / 1
1.1 认识 UI 设计 / 2
1.2 UI 设计的原则 / 4
1.2.1 一致性原则 / 4
1.2.2 完整性原则 / 5
1.2.3 直观性原则 / 6
1.2.4 习惯性原则 / 7
1.3 确定 UI 视觉风格的构成要素 / 7
1.3.1 色彩 / 7
1.3.2 文字 / 10
1.3.3 图标 / 13
1.3.4 图片 / 15
1.4 UI 视觉设计中的常用布局 / 17
1.4.1 列表式布局 / 17
1.4.2 陈列馆式布局 / 18
1.4.3 九宫格布局 / 18
1.4.4 选项卡式布局 / 18
1.4.5 旋转木马式布局 / 19
1.4.6 行为扩展式布局 / 19
1.4.7 多面板式布局 / 20
1.4.8 图表式布局 / 20
1.5 UI 设计的流程 / 20
1.5.1 产品定位及市场分析阶段 / 21
1.5.2 交互设计阶段 / 21
1.5.3 界面视觉设计阶段 / 23
1.5.4 界面输出阶段 / 24
1.5.5 可用性测试阶段 / 26

第 2 章 UI 设计你要会用 Photoshop / 27
2.1 初识 Photoshop / 28
2.1.1 掌握 Photoshop 的界面构成 / 28
2.1.2 新建图像文件 / 28
2.1.3 打开和最近打开文件 / 29
2.1.4 在 Photoshop 中置入文件 / 31
2.1.5 保存与关闭文件 / 32
2.2 图层的运用 / 33
2.2.1 “图层”面板 / 33
2.2.2 创建图层与图层组 / 34
2.2.3 复制和删除图层 / 35
2.2.4 图层样式的应用 / 36
2.2.5 设置图层的整体和填充不透明度 / 39
2.3 选区的设置 / 40
2.3.1 规则选区的创建 / 40
2.3.2 不规则选区的创建 / 41
2.3.3 调整与编辑选区 / 42
2.4 图形的绘制 / 44
2.4.1 基础图形的绘制 / 44
2.4.2 自定义形状的绘制 / 46
2.4.3 绘制任意所需的图形 / 47
2.5 蒙版的编辑 / 49
2.5.1 图层蒙版 / 49
2.5.2 剪贴蒙版 / 51
2.5.3 矢量蒙版 / 52
2.6 文字编排设计 / 53
2.6.1 文字的添加与设置 / 53
2.6.2 变形文字的制作 / 55

第 3 章 不同系统及其组件的设计 / 57
3.1 iOS 系统及其组件的设计 / 58
3.1.1 iOS 系统的特点 / 58
3.1.2 iOS 系统的适配规则 / 61
3.1.3 iOS 系统设计的规范 / 64
3.1.4 iOS 系统界面设计实战 / 71
3.2 Android 系统及其组件的设计 / 73
3.2.1 Android 系统的特点 / 73
3.2.2 Android 系统的适配规则 / 76
3.2.3 Android 系统设计的规范 / 82
3.2.4 Android 系统界面设计实战 / 85

第 4 章 移动 UI 界面中的常用元素设计 / 87
4.1 图标 / 88
4.1.1 拟物化的图标设计 / 88
4.1.2 扁平化的图标设计 / 95
4.2 按钮 / 99
4.2.1 突显状态的按钮设计 / 99
4.2.2 皮革质感的按钮设计 / 102
4.3 开关 / 106
4.3.1 拟物效果的开关设计 / 106
4.3.2 层次分明的开关设计 / 109
4.3.3 单选和复选开关设计 / 112
4.4 进度条 / 114
4.4.1 发光效果的线形进度条设计 / 114
4.4.2 清新风格的圆形进度条设计 / 118
4.5 搜索栏 / 121
4.5.1 扁平化的搜索栏设计 / 121
4.5.2 布纹材质的搜索栏设计 / 123
4.6 列表框 / 126
4.6.1 整洁风格的列表框设计 / 126
4.6.2 暗色冷酷风格的列表框设计 / 128
4.7 标签栏 / 131
4.7.1 线形风格的标签栏设计 / 131
4.7.2 组合式标签栏的设计 / 133
4.8 图标栏 / 136
4.8.1 简单时尚的图标栏设计 / 136
4.8.2 立体化的图标栏设计 / 139

第 5 章 界面元素的组合应用 / 142
5.1 引导页设计 / 143
5.1.1 营造趣味感的引导页设计 / 143
5.1.2 半透明质感的引导页设计 / 147
5.1.3 线形风格的引导页设计 / 150
5.2 登录页设计 / 152
5.2.1 扁平化的登录页设计 / 152
5.2.2 黑白主题的登录页设计 / 155
5.2.3 时尚紫色风格的登录页设计 / 158
5.3 首页设计 / 161
5.3.1 甜美风格的首页设计 / 161
5.3.2 时尚酷炫的首页设计 / 165
5.3.3 干净清爽的首页设计 / 169
5.4 列表页设计 / 172
5.4.1 工整的产品列表页设计 / 172
5.4.2 时间轴列表页设计 / 176
5.5 详情页设计 / 180
5.5.1 突出活动内容的详情页设计 / 180
5.5.2 白色清新风格的详情页设计 / 185
5.6 个人中心页面设计 / 190
5.6.1 简约风格的个人中心页面设计 / 190
5.6.2 蓝色清爽风格的个人中心页面设计 / 193

第 6 章 购物 App 界面设计 / 197
6.1 界面布局规划 / 198
6.2 创意思路剖析 / 198
6.3 确定配色方案 / 199
6.4 定义组件风格 / 199
6.5 制作步骤详解 / 199
6.5.1 启动界面 / 200
6.5.2 登录界面 / 202
6.5.3 首页界面 / 205
6.5.4 分类界面 / 207
6.5.5 商品详情界面 / 209
6.5.6 购买界面 / 212
6.5.7 商品结算界面 / 213
6.5.8 个人中心界面 / 215

第 7 章 音乐 App 界面设计 / 217
7.1 界面布局规划 / 218
7.2 创意思路剖析 / 218
7.3 确定配色方案 / 219
7.4 定义组件风格 / 219
7.5 制作步骤详解 / 220
7.5.1 首页界面 / 220
7.5.2 发现界面 / 224
7.5.3 电台界面 / 225
7.5.4 歌曲播放界面 / 228
7.5.5 音效调节界面 / 230
7.5.6 个人中心界面 / 232

第 8 章 资讯 App 界面设计 / 236
8.1 界面布局规划 / 237
8.2 创意思路剖析 / 237
8.3 确定配色方案 / 238
8.4 定义组件风格 / 238
8.5 制作步骤详解 / 239
8.5.1 登录界面 / 239
8.5.2 个人界面 / 240
8.5.3 新闻首页界面 / 241
8.5.4 下载分区界面 / 242
8.5.5 新闻内容界面 / 244
8.5.6 评论界面 / 244

第 9 章 游戏 App 界面设计 / 246
9.1 界面布局规划 / 247
9.2 创意思路剖析 / 247
9.3 确定配色方案 / 248
9.4 定义组件风格 / 248
9.5 制作步骤详解 / 249
9.5.1 欢迎界面 / 249
9.5.2 加载界面 / 250
9.5.3 积分界面 / 252
9.5.4 游戏界面 / 254
9.5.5 预览界面 / 255
9.5.6 结束界面 / 255

"随着移动智能设备的普及，Android 系统、iOS 系统的智能设备正在飞速改变人们的生 活方式。伴随着智能设备屏幕变得更大，功能变得更多，对于移动 UI 界面设计的要求也是 越来越高。Photoshop 是由 Adobe 公司开发的一款专业的图形图像处理软件，它除了在平面广告设计领域有着广泛的应用，在移动 UI 界面设计领域同样有广泛的应用。

本书编写目的
《UI 设计其实很简单：Photoshop 界面设计高手之道》是一本使用 Photoshop 进行 UI 界面设计及制作的案例教程，在编写过程中，作者采取从简单到复杂、从基础到专业、从理论到实践的方式，一步步教会读者移动 UI 面设计知识，让读者掌握真正的 UI 设计精髓。

本书内容安排
第 1 章 UI 设计你要知道的事儿：主要让用户了解 UI 设计，掌握 UI 的原则、UI 设计的 构成要素、界面设计的布局及设计流程等知识。
第 2 章 UI 设计你要会用 Photoshop：围绕在 UI 设计中经常使用的 Photoshop 功能，如 图层的运用、选区的设置、图形的绘制、蒙版的编辑、文字的编排等，为后面进行 UI 界面 设计奠定基础。
第 3 章 不同系统及其组件的设计：主要介绍 Android 和 iOS 两大主流系统的特点、设计 规范、适配规则等，让读者能按照不同系统的设计规则完成更规范的界面设计。
第 4 章 移动 UI 界面中的常用元素设计：对 UI 界面中的图标、按钮、开关、进度条、搜 索栏等重要元素的设计要点和设计方法进行讲解。
第 5 章 界面元素的组合应用：通过案例的方式讲解如何将图标、按钮、进度条等元素合理地安排到界面中，创建完整的界面效果。
第 6 章 ~ 第 9 章 项目实战练习：分别讲解了比较常见的购物 App、音乐 App、资讯 App 及游戏 App 的界面设计，通过详细的操作让读者学习如何设计一套完整的 UI 界面。

本书特色
（1）全面的知识讲解 : 本书内容全面，知识涵盖面广，对 UI 的特点及设计原则、不同系统的设计规则和适配规则都进行了详细的讲解。
（2）丰富的实战教学：书中选用了大量精美的、具有代表性的案例，分别讲解了UI界面中的图标、按钮、导航栏等单个元素的设计、元素的组合应用设计、完整的 App 界面设计等。
（3）理论和实战结合：本书打破了常规同类书籍中的内容形式，将理论与实战高效结合， 书中的所有案例都列出了详细的制作过程和理论知识。无论是刚接触 App 界面设计的菜鸟， 还是已经熟练掌握设计软件的学员，都可以快速入门和上手。
（4）实用的技巧提示：本书在讲解的过程中添加了相关的技巧提示，让读者在学习的过程中掌握更多实用的扩展知识。

本书适用范围
本书适合有一定 Photoshop 软件操作基础的设计初学者及设计爱好者阅读，也可以为一 些设计制作人员及相关专业的学习者提供参考，还可以作为社会培训学校、大中专院校相关 专业的教学参考书或上机实践指导用书。
本书力求严谨细致，但由于作者水平有限，写作时间仓促，书中难免存在疏漏和不妥之处，恳请广大读者批评、指正，让我们共同对书中的内容一起进行探讨，实现共同进步。"