电子工业出版社-网上书店

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

本书配套资源下载

对不起，暂无音视频资源！

UI设计其实很简单：Photoshop界面设计高手之道