移动UI设计(微课版)

第 1章 关于移动UI设计

1．1 了解移动UI设计 1
1．1．1 初识UI设计 1
1．1．2 移动UI设计的概念 2
1．1．3 移动UI与PC端UI 2
1．1．4 PC端UI重置为移动UI 4
1．2 移动UI的系统分类 6
1．2．1 iOS系统 6
1．2．2 HarmonyOS系统 7
1．2．3 Android系统 7
1．2．4 Wear OS和Watch OS系统 9
1．3 移动UI设计流程 9
1．3．1 需求分析 10
1．3．2 原型设计 12
1．3．3 UI设计 15
1．4 移动UI设计原则 16
1．4．1 风格一致性原则 16
1．4．2 元素准确性原则 17
1．4．3 界面布局合理化原则 17
1．4．4 系统响应时间原则 18
1．5 移动UI流程的职位划分 18
1．5．1 产品经理 19
1．5．2 项目经理 19
1．5．3 UI设计师 19
1．5．4 开发工程师 20
1．6 本章小结 20

第 2章 移动UI策划与原型设计


2．1 确定移动UI目标用户 21
2．1．1 分析移动UI项目背景 21
2．1．2 掌握用户画像分析法 23
2．2 完成移动UI策划书 24
2．3 了解思维导图 25
2．3．1 思维导图的设计依据 25
2．3．2 思维导图的特点 25
2．3．3 思维导图的作用 26
2．4 思维导图的常用软件 27
2．4．1 MindMeister 27
2．4．2 MindManager 27
2．4．3 XMind 28
2．4．4 操作案例——下载并安装Xmind 28
2．5 绘制移动UI思维导图 29
2．5．1 思维导图的操作流程 30
2．5．2 思维导图的基本类型 31
2．5．3 操作案例——绘制美妆App的首页思维导图 33
2．6 绘制移动UI草图 34
2．6．1 了解草图的概念 35
2．6．2 认识草图的特点 36
2．6．3 草图功能的体现 36
2．6．4 常见的草图形式 39
2．7 了解原型设计 41
2．7．1 原型设计的概念 41
2．7．2 原型设计的参与者 41
2．8 制作原型的常用软件 42
2．8．1 Axure RP 42
2．8．2 Adobe XD 43
2．8．3 操作案例——安装Axure RP 10 43
2．9 绘制移动UI原型图 45
2．9．1 原型的表现手法 45
2．9．2 原型的重要性 47
2．9．3 操作案例——绘制美妆App首页草图 49
2．9．4 App原型设计与用户体验 51
2．9．5 操作案例——绘制美妆App分类界面原型 54
2．10 本章小结 55

第3章 优秀的移动UI色彩搭配

3．1 认识色彩 56
3．1．1 色彩的基础 56
3．1．2 色彩三属性 57
3．2 和谐、统一的色彩搭配方法 58
3．2．1 同色系配色方法 58
3．2．2 邻近色配色方法 59
3．2．3 类似色配色方法 60
3．2．4 同色调配色方法 60
3．2．5 类似色调配色方法 61
3．3 突出、对比的配色方法 62
3．3．1 中差色配色方法 62
3．3．2 对比色配色方法 62
3．3．3 互补色配色方法 63
3．3．4 对比色调配色方法 64
3．4 构建移动UI颜色系统 65
3．4．1 确定设计风格 65
3．4．2 确定主色 66
3．4．3 确定辅色 69
3．4．4 操作案例——构建美妆App颜色系统 69
3．4．5 调整配色 70
3．5 移动UI色彩搭配的注意事项 71
3．5．1 切忌将精致美观放在第 一位 72
3．5．2 配色方案要符合用户的心理印象 72
3．5．3 操作案例——美妆App首页界面配色设计 73
3．5．4 App界面内容必须便于阅读 74
3．5．5 保守的使用色彩 75
3．5．6 规避杂乱的配色方案 75
3．5．7 操作案例——美妆App分类界面配色设计 76
3．6 本章小结 77

第4章 出色的移动图标设计

4．1 初识App图标 78
4．1．1 App图标的概念 78
4．1．2 App图标的重要性 78
4．2 图标设计常用软件 79
4．2．1 Illustrator 79
4．2．2 Photoshop 80
4．2．3 CorelDRAW 80
4．3 熟悉图标栅格系统 80
4．3．1 系统图标栅格 81
4．3．2 图标栅格规范 81
4．4 图标设计形式 83
4．4．1 中文风格 83
4．4．2 英文风格 84
4．4．3 图形风格 85
4．4．4 数字风格 86
4．4．5 特殊符号风格 86
4．5 App图标的分类 86
4．5．1 工具图标 86
4．5．2 操作案例——设计制作磨砂质感工具图标 91
4．5．3 装饰图标 94
4．5．4 启动图标 95
4．6 图标尺寸 97
4．6．1 Android系统的图标设计尺寸 97
4．6．2 操作案例——设计制作水果装饰图标 99
4．6．3 iOS系统的图标设计尺寸 102
4．6．4 操作案例——设计制作时钟启动图标 102
4．7 图标组设计规范 106
4．7．1 创建制作清单 106
4．7．2 设计草图 106
4．7．3 数字呈现 106
4．7．4 确定*终效果 107
4．7．5 命名并导出 107
4．8 本章小结 107

第5章 移动AppUI设计

5．1 移动UI的基础元素 108
5．2 常见的UI设计软件 108
5．2．1 Photoshop 108
5．2．2 Sketch 108
5．2．3 Adobe XD 109
5．3 移动UI的设计基础 109
5．3．1 iOS系统的开发单位 109
5．3．2 iOS系统的界面尺寸规范 110
5．3．3 操作案例——设计制作iOS系统App启动界面 111
5．3．4 Android系统的开发单位 115
5．3．5 Android系统的界面尺寸规范 115
5．3．6 操作案例——设计制作Android系统App界面 116
5．4 移动UI的字体规范 119
5．4．1 iOS系统字体规范 119
5．4．2 操作案例——设计制作iOS系统App登录界面 120
5．4．3 Android系统字体规范 122
5．4．4 操作案例——设计制作Android系统App分类界面 123
5．5 移动UI图片尺寸规范 125
5．6 移动App内容布局 126
5．6．1 了解App界面中的全局边距 126
5．6．2 操作案例——设计制作iOS系统App首页界面 126
5．6．3 设置App界面中的内容间距 130
5．6．4 操作案例——设计制作iOS系统App侧面菜单界面 131
5．6．5 移动App界面的布局方式 133
5．7 本章小结 135

第6章 移动App交互设计

6．1 了解UI交互设计 135
6．1．1 交互动效的概念 135
6．1．2 基础动效类型 135
6．2 常见的交互设计软件 137
6．2．1 Affter Effect 137
6．2．2 Adobe XD 138
6．3 交互设计的基本流程 138
6．3．1 提出交互设计创意想法 139
6．3．2 根据想法进行丰满实现 140
6．4 移动UI交互的类型 140
6．4．1 转场过渡 140
6．4．2 操作案例——设计制作App转场交互 141
6．4．3 层级展示 143
6．4．4 空间扩展 144
6．4．5 关注聚焦 144
6．4．6 内容呈现 144
6．4．7 操作案例——设计制作相册App内容呈现交互 145
6．4．8 操作反馈 148
6．4．9 操作案例——设计制作App点赞反馈交互 149
6．5 动效在UI界面中的作用 150
6．5．1 吸引用户注意力 150
6．5．2 为用户提供操作反馈 151
6．5．3 加强指向性 151
6．5．4 操作案例——设计制作App后台交互 151
6．5．5 传递信息深度 155
6．6 交互设计需要遵循的习惯 155
6．7 本章小结 156

第7章 适配与输出移动UI设计

7．1 标注的重要性 157
7．2 常见的标注与输出软件 157
7．2．1 PxCook 157
7．2．2 Assistor PS 158
7．3 标注移动UI 158
7．3．1 移动App标注内容 158
7．3．2 操作案例——标注iOS系统App界面 158
7．3．3 标注的声明文档 161
7．3．4 操作案例——标注Android系统App界面 161
7．4 移动UI标注规范 164
7．4．1 位置与尺寸的标注规范 164
7．4．2 色彩和文字的标注规范 165
7．4．3 切图资源的尺寸必须是双数 165
7．5 输出与适配iOS系统UI设计 166
7．5．1 向上适配与向下适配 166
7．5．2 适配切片命名规范 168
7．5．3 操作案例——导出iOS系统App界面切图资源 169
7．6 输出与适配Android系统UI设计 171
7．6．1 Android系统中的“点9”切图 171
7．6．2 输出与适配的一稿两用 174
7．6．3 操作案例——导出Android系统App切图资源 175
7．7 本章小结 176

第8章 设计制作移动App项目

8．1 设计制作美妆电商App项目 177
8．1．1 分析美妆电商App的项目背景 177
8．1．2 制作美妆电商App的草图原型 177
8．1．3 构建美妆电商App的颜色系统 179
8．1．4 设计制作美妆电商App的图标组 180
8．1．5 完成美妆电商App的界面设计 182
8．1．6 完成美妆电商App的交互设计 185
8．1．7 完成美妆电商App的界面标注 186
8．1．8 导出美妆电商App的切图资源 188
8．2 设计制作美食外卖App项目 189
8．2．1 分析美食外卖App的项目背景 189
8．2．2 制作美食外卖App的草图原型 190
8．2．3 创建美食外卖App的颜色系统 192
8．2．4 设计制作美食外卖App的图标组 193
8．2．5 完成美食外卖App的界面设计 196
8．2．6 完成美食外卖App的交互设计 200
8．2．7 完成美食外卖App的界面标注 201
8．2．8 导出美食外卖App的切图资源 203