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

第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