模块1 走进移动UI设计之门

1.1 认识移动UI设计 ...................................................................................................... 2

1.1.1 什么是移动UI设计 ........................................................................................... 2

1.1.2 移动UI设计和UI设计的区别 ............................................................................. 3

1.1.3 移动UI设计的特点 ........................................................................................... 4

1.1.4 移动UI设计的原则 ........................................................................................... 5

1.2 移动UI设计流程 ...................................................................................................... 6

1.2.1 用户研究 ......................................................................................................... 6

1.2.2 任务分析 ......................................................................................................... 7

1.2.3 设计草图 ......................................................................................................... 8

1.2.4 设计细化 ......................................................................................................... 9

1.2.5 用户测试 ......................................................................................................... 9

1.2.6 反馈和优化 .................................................................................................... 10

1.2.7 方案交付 ....................................................................................................... 10

1.2.8 方案实施 ........................................................................................................11

1.3 移动设备的主流操作系统 .................................................................................... 12

1.3.1 iOS系统 ........................................................................................................ 12

1.3.2 Android系统 .................................................................................................. 13

1.3.3 HarmonyOS系统 ........................................................................................... 14

1.4 AIGC在移动UI中的应用 ..................................................................................... 15

1.4.1 前期调研与竞品分析 ...................................................................................... 15

1.4.2 设计灵感与创意激发 ...................................................................................... 16

1.4.3 设计素材与资源生成 ...................................................................................... 17

1.5 常用的移动UI设计软件 ....................................................................................... 18

1.5.1 界面设计类软件 ............................................................................................. 18

1.5.2 动效设计类软件 ............................................................................................. 20

1.5.3 交互设计类软件 ............................................................................................. 22

I

模块2 移动UI设计要素

2.1 视觉设计要素 ...................................................................................................................................25

2.1.1 色彩搭配 ..................................................................................................................................25

2.1.2 字体与排版 ...............................................................................................................................28

2.1.3 图片与质感 ...............................................................................................................................30

2.2 布局与构图要素 ...............................................................................................................................32

2.2.1 布局原则 ..................................................................................................................................32

2.2.2 构图原则 ..................................................................................................................................33

2.2.3 界面元素组织 ...........................................................................................................................34

2.3 交互设计 ............................................................................................................................................36

2.3.1 交互原则 ..................................................................................................................................36

2.3.2 交互要素 ..................................................................................................................................36

2.3.3 导航与菜单设计 ........................................................................................................................38

模块3 图形图像操作详解

3.1 基础操作与工具 ...............................................................................................................................41

3.1.1 认识主流图像处理工具 .............................................................................................................41

3.1.2 辅助工具的使用 ........................................................................................................................42

3.1.3 文档的管理和编辑 ....................................................................................................................45

3.1.4 选择工具组 ...............................................................................................................................47

3.1.5 绘图工具组 ...............................................................................................................................51

3.1.6 颜色填充工具 ...........................................................................................................................55

3.1.7 形状工具组 ...............................................................................................................................59

3.1.8 切片与导出 ...............................................................................................................................61

3.2 文字与排版........................................................................................................................................63

3.2.1 创建文本 ..................................................................................................................................63

3.2.2 设置文本属性 ...........................................................................................................................64

3.2.3 栅格化文字图层 ........................................................................................................................66

3.2.4 文字变形 ..................................................................................................................................66

3.3 图像色彩的调整 ...............................................................................................................................67

3.3.1 曲线 .........................................................................................................................................67

3.3.2 色阶 .........................................................................................................................................67

3.3.3 色相/饱和度 ..............................................................................................................................68

3.3.4 色彩平衡 ..................................................................................................................................69

3.3.5 可选颜色 ..................................................................................................................................70

3.3.6 去色 .........................................................................................................................................70

3.4 图像元素的处理 ...............................................................................................................................71

3.4.1 图像的尺寸调整 ........................................................................................................................71

3.4.2 图像的修饰 ...............................................................................................................................71

3.4.3 图像的修复 ...............................................................................................................................74

3.4.4 图像的非破坏处理 ....................................................................................................................76

3.5 图像后期制作 ...................................................................................................................................79

3.5.1 混合模式 ..................................................................................................................................79

3.5.2 图层样式 ..................................................................................................................................80

3.5.3 滤镜 .........................................................................................................................................83

3.6 课堂演练：绘制应用图标 ...............................................................................................................88

模块4 UI图标设计

4.1 关于图标设计 ...................................................................................................................................94

4.1.1 什么是图标 ...............................................................................................................................94

4.1.2 图标在移动UI设计中的作用 ......................................................................................................94

4.1.3 图标设计的基本准则 .................................................................................................................95

4.2 图标的类型与尺寸 ...........................................................................................................................96

4.2.1 应用图标 ..................................................................................................................................96

4.2.2 系统图标 ................................................................................................................................101

4.3 图标的常用图形 .............................................................................................................................105

4.3.1 圆形 .......................................................................................................................................105

4.3.2 正方形、长方形 ......................................................................................................................105

4.3.3 三角形 ....................................................................................................................................106

4.4 图标的常见风格 .............................................................................................................................106

4.4.1 线性图标 ................................................................................................................................106

4.4.2 面性图标 ................................................................................................................................107

4.4.3 线面结合图标 .........................................................................................................................108

4.4.4 扁平化图标 .............................................................................................................................108

4.4.5 拟物化图标 .............................................................................................................................109

4.4.6 轻质感图标 .............................................................................................................................109

4.4.7 新拟态图标 .............................................................................................................................109

案例实操：健康追踪应用图标的制作 ................................................................................................... 110

模块5 UI组件设计

5.1 什么是组件......................................................................................................................................120

5.2 基础组件设计 .................................................................................................................................121

5.2.1 按钮 .......................................................................................................................................121

5.2.2 文本 .......................................................................................................................................122

5.2.3 图片 .......................................................................................................................................123

5.3 输入组件设计 .................................................................................................................................124

5.3.1 文本框 ....................................................................................................................................124

5.3.2 搜索框 ....................................................................................................................................125

5.3.3 表单 .......................................................................................................................................126

5.4 导航组件设计 .................................................................................................................................127

5.4.1 导航栏 ....................................................................................................................................127

5.4.2 标签栏 ....................................................................................................................................128

5.4.3 宫格 .......................................................................................................................................129

5.5 显示组件设计 .................................................................................................................................130

5.5.1 徽标 .......................................................................................................................................130

5.5.2 列表 .......................................................................................................................................131

5.5.3 轮播图 ....................................................................................................................................131

5.6 反馈组件设计 .................................................................................................................................132

5.6.1 对话框 ....................................................................................................................................132

5.6.2 提示框 ....................................................................................................................................133

5.6.3 加载指示器 .............................................................................................................................133

案例实操：加载动画的制作 ...................................................................................................................134

模块6 App界面设计

6.1 关于App界面设计 ..........................................................................................................................147

6.1.1 App界面的设计趋势 ................................................................................................................147

6.1.2 App界面的构成 .......................................................................................................................148

6.1.3 常见屏幕尺寸分析 ..................................................................................................................151

6.2 闪屏页界面设计 .............................................................................................................................153

6.2.1 闪屏页的目的 .........................................................................................................................153

6.2.2 闪屏页类型 .............................................................................................................................153

6.3 注册登录页界面设计 .....................................................................................................................156

6.3.1 登录注册页的设计原则 ...........................................................................................................156

6.3.2 登录注册页的布局规划 ...........................................................................................................157

6.4 首页界面设计 .................................................................................................................................159

6.4.1 首页的设计定位 ......................................................................................................................159

6.4.2 首页的布局规划 ......................................................................................................................160

6.5 个人中心界面设计 .........................................................................................................................162

6.5.1 个人中心界面的类型 ...............................................................................................................162

6.5.2 个人中心界面的构成 ...............................................................................................................164

案例实操：阅享云端App界面制作 ........................................................................................................166

模块7 游戏UI设计

7.1 关于游戏UI设计 .............................................................................................................................182

7.1.1 什么是游戏UI .........................................................................................................................182

7.1.2 移动游戏UI与传统游戏UI设计的区别 .......................................... 185

7.1.3 游戏UI设计原则 ......................................................................................................................186

7.2 移动游戏UI界面风格.....................................................................................................................187

7.2.1 超写实风格 .............................................................................................................................187

7.2.2 涂鸦风格 ................................................................................................................................187

7.2.3 暗黑风格 ................................................................................................................................188

7.2.4 卡通风格 ................................................................................................................................188

7.2.5 二次元风格 .............................................................................................................................188

7.3 移动游戏UI设计核心要素 ............................................................................................................189

7.3.1 图标设计 ................................................................................................................................189

7.3.2 文字设计 ................................................................................................................................189

7.3.3 色彩搭配 ................................................................................................................................190

7.3.4 布局与导航 .............................................................................................................................191

案例实操：国风游戏界面制作 ...............................................................................................................191

模块8 小程序UI设计

8.1 关于小程序UI界面设计 ................................................................................................................215

8.1.1 小程序的定义 .........................................................................................................................215

8.1.2 小程序的应用场景 ..................................................................................................................215

8.1.3 小程序UI与App的区别 ............................................................................................................218

8.1.4 小程序UI界面的设计原则 ........................................................................................................219

8.2 小程序UI界面的基础元素 ............................................................................................................219

8.2.1 图标设计 ................................................................................................................................219

8.2.2 文字设计 ................................................................................................................................220

8.2.3 色彩搭配 ................................................................................................................................221

8.3 小程序UI界面布局与导航 ............................................................................................................222

8.3.1 界面结构设计 .........................................................................................................................222

8.3.2 界面布局设计 .........................................................................................................................223

8.3.3 导航设计 ................................................................................................................................225

8.3.4 内容区域设计 .........................................................................................................................226

案例实操：个人中心页设计 ...................................................................................................................228

参考文献 ............................................................................................................................................246

【暂无此信息】

【暂无此信息】