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

定　　价：89.8 元

丛书名：UI设计从业必读

• 作者：张晓景
• 出版时间：2021/8/1
• ISBN：9787121414312
• 出 版 社：电子工业出版社

• 中图法分类：TP393.092.2 
• 页码：204
• 版次：01
• 开本：16开

内容简介

本书主要讲解了iOS系统和Android系统两种移动设备系统界面的结构及设计规范，全面解析了移动端App界面的设计流程及技巧。本书还介绍了如何使用Adobe XD、Photoshop、PxCook和Cutterman等主流软件进行UI设计制作。本书共6章。第1章主要讲解移动UI设计基础；第2章主要讲解iOS系统界面设计；第3章主要讲解Android系统界面设计；第4章主要讲解移动UI图标设计；第5章主要讲解iOS系统界面应用设计；第6章主要讲解Android系统界面应用设计。本书将提供全部案例的素材、源文件和教学视频，读者可以结合书、练习文件和教学视频，提升移动端App界面设计的学习效率。

作者介绍

张晓景 男 43岁 资深设计师 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