模块1 移动UI设计基础

1.1 UI设计与移动UI设计 ..................................................................................................... 2

1.1.1 UI设计的定义 ......................................................................................................................2

1.1.2 移动UI设计的定义 ...............................................................................................................4

1.1.3 移动UI设计的原则 ...............................................................................................................6

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

1.2.1 需求分析阶段 ......................................................................................................................8

1.2.2 原型设计阶段 ......................................................................................................................8

1.2.3 界面设计阶段 ......................................................................................................................9

1.2.4 交互设计阶段 ......................................................................................................................9

1.3 移动设备的主流平台 .................................................................................................... 10

1.3.1 iOS系统 ............................................................................................................................10

1.3.2 Android系统 ...................................................................................................................... 11

1.3.3 HarmonyOS系统............................................................................................................... 11

1.4 AIGC在移动UI设计中的应用 ....................................................................................... 12

1.4.1 AIGC基础概念 ..................................................................................................................12

1.4.2 AIGC在前期调研中的应用 .................................................................................................13

1.4.3 AIGC助力设计创意激发 ....................................................................................................13

1.4.4 AIGC助力生成设计素材及资源 ..........................................................................................15

1.5 移动UI设计常用软件 .................................................................................................... 16

1.5.1 界面设计软件 ....................................................................................................................16

1.5.2 动效设计软件 ....................................................................................................................18

1.5.3 交互设计软件 ....................................................................................................................19

1.5.4 AIGC热门工具 ..................................................................................................................21

模块2 AIGC辅助设计与处理

2.1 AIGC在设计中的模态应用 ........................................................................................... 24

2.2 设计流程导向的AIGC提问技巧 .................................................................................... 25

2.2.1 直接提问式提问挖掘需求 ..................................................................................................25

2.2.2 分步引导式提问发散创意 ..................................................................................................27

2.2.3 反向验证式提问验证方案 ..................................................................................................35

2.3 素材供给之文生图/视频 ............................................................................................... 36

2.3.1 提示词的描述框架 .............................................................................................................37

2.3.2 提示词的优化技巧 .............................................................................................................38

2.3.3 文生图操作指南 ................................................................................................................39

2.3.4 文生视频操作指南 .............................................................................................................44

2.4 设计优化之图生图/视频 ............................................................................................... 45

2.4.1 图像的风格迁移 ................................................................................................................45

2.4.2 图像的扩展 .......................................................................................................................47

2.4.3 图像的局部编辑 ................................................................................................................51

2.4.4 图生视频操作指南 .............................................................................................................55

2.5 课堂演练：静态Logo的动态化转换 .............................................................................. 55

课后作业 AIGC辅助App界面设计 57

模块3 图形图像的后期处理

3.1 图形图像基础知识........................................................................................................ 59

3.1.1 图形与图像的区别 .............................................................................................................59

3.1.2 图像的色彩模式 ................................................................................................................59

3.1.3 常见的图像文件格式 .........................................................................................................60

3.2 图形绘制 ...................................................................................................................... 61

3.2.1 认识图形绘制工具—Illustrator .......................................................................................61

3.2.2 基本图形的绘制方法 .........................................................................................................63

3.2.3 图形的填充与描边设置 ......................................................................................................68

3.2.4 图形的组合与布尔运算 ......................................................................................................72

3.2.5 图形的变换调整 ................................................................................................................76

3.2.6 图形的外观与样式 .............................................................................................................81

3.2.7 图形的创意应用 ................................................................................................................83

3.3 图像处理 ...................................................................................................................... 86

3.3.1 认识图像处理工具—Photoshop .....................................................................................86

3.3.2 图像的裁剪、校正 .............................................................................................................87

3.3.3 图像的色彩调整 ................................................................................................................88

3.3.4 图像的瑕疵修复 ................................................................................................................90

3.3.5 图像的抠取集合 ................................................................................................................93

3.3.6 图像的非破坏性编辑 .........................................................................................................98

3.3.7 图像的特效应用 ................................................................................................................99

3.3.8 图像的自动化处理 ...........................................................................................................106

3.4 课堂演练：制作端午节宣传海报 .................................................................................109

课后作业 图像的美化与合成 114

模块4 图标设计

4.1 图标设计基础..............................................................................................................116

4.1.1 图标的定义 ..................................................................................................................... 116

4.1.2 图标设计原则 .................................................................................................................. 116

4.1.3 图标设计流程 .................................................................................................................. 117

4.2 图标的常见风格 ..........................................................................................................118

4.2.1 线性图标 ......................................................................................................................... 118

4.2.2 面性图标 ......................................................................................................................... 119

4.2.3 线面结合图标 .................................................................................................................. 119

4.2.4 扁平化图标 .....................................................................................................................120

4.2.5 拟物化图标 .....................................................................................................................120

4.2.6 轻质感图标 .....................................................................................................................121

4.3 图标的类型与尺寸.......................................................................................................121

4.3.1 应用图标 .........................................................................................................................121

4.3.2 系统图标 .........................................................................................................................125

4.4 课堂演练：绘制阅读类App应用图标 ...........................................................................129

4.4.1 AIGC灵感赋能 ................................................................................................................129

4.4.2 导入设计模板 ..................................................................................................................131

4.4.3 绘制图标 .........................................................................................................................133

课后作业 设计视频类App图标 137

模块5 组件设计

5.1 组件设计基础..............................................................................................................139

5.1.1 组件的作用 .....................................................................................................................139

5.1.2 组件设计原则 ..................................................................................................................140

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

5.2.1 按钮 ................................................................................................................................141

5.2.2 文本 ................................................................................................................................142

5.2.3 图片 ................................................................................................................................143

5.3 表单组件设计..............................................................................................................144

5.3.1 输入框 ............................................................................................................................144

5.3.2 下拉列表框 .....................................................................................................................147

5.3.3 步进器 ............................................................................................................................147

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

5.4.1 导航栏 ............................................................................................................................148

5.4.2 标签栏 ............................................................................................................................150

5.4.3 宫格 ................................................................................................................................151

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

5.5.1 列表 ................................................................................................................................151

5.5.2 通知栏 ............................................................................................................................152

5.5.3 轮播图 ............................................................................................................................153

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

5.6.1 提示框 ............................................................................................................................153

5.6.2 对话框 ............................................................................................................................154

5.6.3 加载指示器 .....................................................................................................................155

5.7 课堂演练：制作登录对话框 ........................................................................................155

5.7.1 制作界面背景效果 ...........................................................................................................155

5.7.2 AIGC灵感赋能 ................................................................................................................156

5.7.3 添加投影并导出 ..............................................................................................................161

课后作业 策划美食类App标签栏 164

模块6 原型与界面设计

6.1 移动App设计基础 .......................................................................................................166

6.1.1 App设计特点 ...................................................................................................................166

6.1.2 常见App屏幕尺寸 ............................................................................................................167

6.1.3 App设计的原则 ...............................................................................................................168

6.2 原型设计 .....................................................................................................................169

6.2.1 什么是原型设计 ..............................................................................................................169

6.2.2 原型设计的类型 ..............................................................................................................170

6.2.3 原型设计的工具 ..............................................................................................................171

6.3 闪屏页设计 .................................................................................................................172

6.3.1 闪屏页的目的 ..................................................................................................................172

6.3.2 闪屏页的类型 ..................................................................................................................173

6.4 首页设计 .....................................................................................................................174

6.4.1 首页的概念 .....................................................................................................................175

6.4.2 首页的类型 .....................................................................................................................176

6.5 详情页设计 .................................................................................................................178

6.5.1 详情页的概念 ..................................................................................................................178

6.5.2 详情页的类型 ..................................................................................................................178

6.6 注册登录页设计 ..........................................................................................................180

6.6.1 注册登录页的概念 ...........................................................................................................180

6.6.2 注册登录页的类型 ...........................................................................................................181

6.7 个人中心页设计 ..........................................................................................................182

6.7.1 个人中心页的概念 ...........................................................................................................182

6.7.2 个人中心页的类型 ...........................................................................................................183

6.8 课堂演练：制作健康追踪App界面 ..............................................................................184

6.8.1 AI赋能灵感生成 ...............................................................................................................184

6.8.2 制作闪屏页 .....................................................................................................................186

6.8.3 制作登录注册页 ..............................................................................................................192

6.8.4 制作个人中心页 ..............................................................................................................195

课后作业 策划书店App首页界面 200

模块7 界面标注、切图与动效

7.1 界面标注 .....................................................................................................................202

7.1.1 界面标注内容 ..................................................................................................................202

7.1.2 界面标注层级原则 ...........................................................................................................204

7.1.3 界面标注规范 ..................................................................................................................205

7.1.4 界面标注工具 ..................................................................................................................206

7.2 页面切图 .....................................................................................................................209

7.2.1 切图的类型 .....................................................................................................................209

7.2.2 切图的命名规范 .............................................................................................................. 211

7.2.3 切图大小优化 ..................................................................................................................212

7.3 动效制作 .....................................................................................................................214

7.3.1 动效的作用 .....................................................................................................................214

7.3.2 动效的类型 .....................................................................................................................215

7.3.3 动效的设计原则 ..............................................................................................................218

7.4 课堂演练：制作界面加载动效 .....................................................................................221

7.4.1 AI赋能灵感生成 ...............................................................................................................221

7.4.2 绘制加载动效素材 ...........................................................................................................222

7.4.3 制作加载动效 ..................................................................................................................228

课后作业 界面标注、切图实践 231

参考文献 .................................................................................................................232

【暂无此信息】

【暂无此信息】