Photoshop+Adobe XD+Illustrator移动UI设计教程

如今，各种通信和网络连接设备与大众生活的联系日益密切，而UI是用户与设备交互的界面，这导致人们对各种类型的UI的要求越来越高，同时促进了UI设计行业的飞速发展，本书为了满足广大UI设计者的需求，介绍如何设计美观又符合要求的UI。
本书主要依据初学者学习UI设计的普遍规律安排内容，由浅入深地讲解初学者感兴趣和需要掌握的基础知识和操作技巧，全面解析各个知识点。全书结合实例详细地讲解了UI的制作步骤和软件的应用技巧，使读者能够轻松学习并掌握。
本书共8章，主要根据UI设计知识的难易程度，以及读者在实际工作中的应用需求来安排章节，真正做到为读者考虑，也让不同程度的读者可以更有针对性地学习内容，弥补自己的弱项，并有效提高UI设计爱好者的操作速度与效率。
本书结构清晰、内容有针对性、实例精美实用，适合大部分UI设计爱好者与设计专业的大、中专学生阅读。随书附赠的配套资源包中包含了本书所有实例的教学视频、相关素材和源文件，用于补充细节内容，方便读者学习和参考。

张晓景 资深设计师 
Adobe 专家委员会成员 
Adobe 网页设计师认证讲师
Adobe 用户界面设计师
国家信息产业部653工程讲师
中国软件行业协会专家委员
 参与国家开放大学网页设计和网页界面设计课程体系开发。从事平面设计、网站设计和UI设计多年，参与开发过数十个多媒体商业网站。曾参与设计了999集团设计宣传册，北京西单金泽大厦设计VI设计，以及国务院国资委电子资料室设计制作网站等众多设计工作。
有丰富的教学经验，曾参与制作教学微课、幕课上百小时。熟悉微课策划、设计、拍摄、制作全过程。为中国石油、中国铁路等大型企业做专业企业培训，参与培训北京骨干教师活动，曾在中国传媒大学、北京大学、北京师范大学、北京交通大学等重点院校以及Adobe创意大学和新东方等培训机构教授设计课程。出版过相关设计类书籍数十种，参与清华大学中职教材的编写、国家开放大学网页设计课程规划及教材策划等工作。

第1章　移动UI设计基础 
1.1 UI设计与移动UI设计 1 
1.1.1 了解UI设计 1 
1.1.2 了解移动UI设计 2 
1.1.3 移动UI与平面UI 3 
1.2 移动UI设计的平台类型 4 
1.2.1 Android系统 5 
1.2.2 iOS系统 6 
1.2.3 Wear OS系统和Watch OS 系统 7 
1.3 移动UI的设计内容 8 
1.3.1 配色方案的设计 8 
1.3.2 页面布局的设计 10 
1.3.3 按钮和图标的设计 12 
1.3.4 文字和版式的设计 15 
1.4 了解移动UI设计常用的软件 16 
1.4.1 Axure RP 和Adobe XD 16 
1.4.2 Photoshop和Sketch 17 
1.4.3 PxCook和Assistor PS 18 
1.5 了解UI设计的工作流程 19 
1.5.1 需求分析 19 
1.5.2 交互设计 22 
1.5.3 视觉设计 25 
1.6 了解互联网产品职位划分 26 
1.6.1 产品经理 27 
1.6.2 项目经理 27 
1.6.3 页面设计师 27 
1.6.4 开发人员 27 
1.7 本章小结 28 
第2章　iOS系统界面设计 
2.1 分辨率与界面设计尺寸 29 
2.1.1 像素与分辨率 29 
2.1.2 iOS系统界面设计尺寸 30 
实战练习01—使用Photoshop新建App文件 30 
2.2 iOS系统的组件尺寸 32 
2.2.1 组件尺寸 32 
2.2.2 边距和间距 32 
实战练习02—创建辅助线绘制iOS组件 35 
2.3 iOS系统文字设计规范 36 
2.3.1 字体 36 
2.3.2 字号 37 
2.3.3 颜色和字重 38 
2.4 iOS系统图标设计规范 39 
2.5 iOS系统图片设计规范 40 
2.5.1 图片的比例 40 
2.5.2 图片的格式 41 
2.6 iOS系统内容布局 42 
2.6.1 列表式布局 42 
2.6.2 陈列馆式布局 42 
2.6.3 宫格式布局 43 
2.6.4 卡片式布局 43 
2.7 iOS系统版式设计规范 44 
实战练习03—设计制作iOS 系统App版面 45 
2.8 iOS系统设计适配 47 
2.8.1 向下适配 47 
2.8.2 向上适配 49 
2.9 iOS切图规范 50 
2.9.1 切图输出 51 
实战练习04—使用Photoshop切图输出 52 
2.9.2 切片命名规范 54 
2.9.3 设计稿标注 55 
2.10 提交终文件 58 
2.11 本章小结 58 

第3章　Android系统界面设计 
3.1 了解Android系统“碎片化” 59 
3.2 Android系统界面设计尺寸 60 
3.2.1 了解屏幕密度的概念 60 
3.2.2 Android系统开发单位 61 
3.2.3 Android系统界面设计尺寸 61 
实战练习01—使用Adobe XD创建Android 
文档 62 
3.3 Android系统组件设计尺寸 64 
3.3.1 Android系统组件尺寸 64 
3.3.2 Android系统的元素间距 64 
实战练习02—创建Android系统界面的组件 65 
3.4 Android系统文字设计规范 66 
3.4.1 字体 66 
3.4.2 字号 67 
3.5 Android系统中图标设计规范 67 
3.5.1 图标尺寸 69 
3.5.2 触摸反馈 70 
实战练习03—绘制Android App界面结构 70 
3.6 Android界面标注与切图 73 
3.6.1 Android界面的标注 73 
3.6.2 Android界面的切图 74 
3.6.3 “点9”切图的应用 75 
3.7 Android系统界面适配问题 79 
3.7.1 采用哪种分辨率设计 79 
3.7.2 设计师需要提供几套切图 79 
3.7.3 界面设计中字体的应用技巧 79 
3.8 如何做到一稿两用 80 
3.9 本章小结 80 
第4章　移动UI图标设计 
4.1 图标设计基础 81 
4.1.1 图标设计的必要性 81 
4.1.2 影响图标的属性 82 
4.1.3 好图标的特点 85 
4.2 了解图标栅格系统 85 
4.2.1 系统图标栅格 86 
4.2.2 不同造型图标的栅格规范 86 
4.3 图标的渲染风格 88 
4.4 图标的透视 91 
4.4.1 关于透视 91 
4.4.2 绘制零点透视图标 91 
实战练习01—绘制零点透视图标 92 
4.4.3 绘制一点透视图标 93 
实战练习02—绘制一点透视图标 94 
4.4.4 绘制两点透视图标 95 
实战练习03—绘制两点透视图标 96 
4.5 图标集的制作流程 97 
4.5.1 创建制作清单 98 
4.5.2 设计草图 98 
4.5.3 数字呈现 98 
4.5.4 确定终效果 99 
4.5.5 命名并导出 99 
4.6 移动UI图标设计形式 99 
4.6.1 中文形式 99 
4.6.2 英文形式 101 
4.6.3 图形形式 102 
4.6.4 数字和特殊符号形式 102 
4.7 启动图标设计 103 
4.7.1 启动图标设计要求 103 
4.7.2 启动图标设计规范 104 
实战练习04—设计制作iOS指南针启动图标 104 
4.7.3 快速索引、设置页面和通知图标 107 
4.8 标签栏图标设计 107 
实战练习05—设计制作标签栏图标 108 
4.9 图标设计的优点与原则 111 
4.10 本章小结 112 
第5章　iOS系统界面应用设计 
5.1 设计制作旅游App界面 113 
5.1.1 旅游App界面布局分析 113 
实战练习01—设计制作旅游App界面布局 114 
5.1.2 旅游App界面色彩搭配分析 115 
5.1.3 旅游App界面元素分析 116 
实战练习02—设计制作旅游App界面 118 
5.1.4 旅游App界面输出分析 123 
实战练习03—旅游App界面适配 123 
5.2 设计制作外卖App界面 125 
5.2.1 外卖App界面布局分析 125 
实战练习04—设计制作外卖App界面布局 126 
5.2.2 外卖App界面色彩搭配分析 127 
5.2.3 外卖App界面元素分析 128 
实战练习05—设计制作外卖App登录界面 129 
实战练习06—设计制作外卖App主页界面 134 
5.2.4 外卖App界面输出分析 138 
实战练习07—外卖App界面适配 139 
5.2.5 外卖App界面交互效果分析 140 
实战练习08—设计制作外卖App交互原型 141 
5.3 设计制作播放器App界面 143 
5.3.1 播放器App界面图标组 143 
实战练习09—设计制作播放器App界面图 
标组 144 
5.3.2 设计制作播放器App界面 146 
实战练习10—设计制作播放器App界面 147 
5.3.3 输出适配播放器App界面 152 
实战练习11—输出播放器App界面 152 
5.3.4 标注适配播放器App界面 154 
5.4 本章小结 158 
第6章　Android系统界面应用设计 
6.1 设计制作商城App界面 159 
6.1.1 商城App界面布局分析 159 
实战练习01—设计制作商城App界面布局 160 
6.1.2 商城App界面色彩搭配分析 162 
6.1.3 商城App界面元素分析 163 
实战练习02—设计制作商城App首页界面 165 
6.1.4 商城App界面输出分析 173 
实战练习03—商城App界面适配 174 
6.2 设计制作社交App界面 177 
6.2.1 社交App界面设计同质化分析 177 
实战练习04—设计制作社交App“推荐” 
界面 178 
6.2.2 社交App界面边距的设置分析 183 
实战练习05—设计制作社交App“自己” 
界面 183 
6.2.3 社交App界面交互设计分析 187 
实战练习06—设计制作社交App“信息” 
界面 188 
6.2.4 社交App界面标注和输出 192 
实战练习07—输出和标注社交App界面 193 
6.3 本章小结 196

本书主要根据读者学习的难易程度，以及在实际工作中的应用需求来安排章节，真正做到为读者考虑，让不同程度的读者更有针对性地学习本书内容，强化自己的弱项，并能够有效帮助UI设计爱好者提高操作效率。
本书的知识点结构清晰、内容有针对性、实例精美实用，适合大部分UI设计爱好者与设计专业的学生阅读。随书附赠书中所有实例的教学视频、素材和源文件，用于补充书中遗漏的细节内容，方便读者学习和参考。