移动UI设计(微课版)电子书

扉页

版权页

内 容 提 要

前言

第1章 关于移动UI设计

1.1了解移动UI设计

1.1.1 初识UI设计

1.1.2 移动UI设计的概念

1.1.3 移动UI与PC端UI

1.1.4 将PC端UI重置为移动UI

1.2移动UI的系统分类

1.2.1 iOS

1.2.2 Android系统

1.2.3 HarmonyOS

1.2.4 Wear OS和watchOS

1.3移动UI设计流程

1.3.1 需求分析

1.3.2 原型设计

1.3.3 UI设计

1.4移动UI设计原则

1.4.1 风格一致性原则

1.4.2 元素准确性原则

1.4.3 界面布局合理化原则

1.4.4 系统响应时间原则

1.5移动UI设计流程的职位划分

1.5.1 产品经理

1.5.2 项目经理

1.5.3 UI设计师

1.5.4 开发工程师

1.6本章小结

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

2.1确定移动UI目标用户

2.1.1 分析移动UI项目背景

2.1.2 掌握用户画像分析法

2.2完成移动UI策划书

2.3了解思维导图

2.3.1 思维导图的设计依据

2.3.2 思维导图的特点

2.3.3 思维导图的作用

2.4绘制思维导图的常用软件

2.4.1 MindMeister

2.4.2 MindManager

2.4.3 XMind

2.4.4 操作案例——下载并安装XMind

2.5绘制移动UI思维导图

2.5.1 思维导图的操作流程

2.5.2 思维导图的基本类型

2.5.3 操作案例——绘制美妆App的首页思维导图

2.6绘制移动UI草图

2.6.1 了解草图的概念

2.6.2 认识草图的特点

2.6.3 草图功能的体现

2.6.4 常见的草图形式

2.7了解原型设计

2.7.1 原型设计的概念

2.7.2 原型设计的参与者

2.8绘制原型的常用软件

2.8.1 Axure RP

2.8.2 Adobe XD

2.8.3 操作案例——安装Axure RP 10

2.9绘制移动UI原型图

2.9.1 原型的表现手法

2.9.2 原型的重要性

2.9.3 操作案例——绘制美妆App首页草图

2.9.4 App原型设计与用户体验

2.9.5 操作案例——绘制美妆App分类界面原型

2.10本章小结

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

3.1认识色彩

3.1.1 色彩基础

3.1.2 色彩三属性

3.2和谐、统一的色彩搭配方法

3.2.1 同色系配色方法

3.2.2 邻近色配色方法

3.2.3 类似色配色方法

3.2.4 同色调配色方法

3.2.5 类似色调配色方法

3.3突出、对比的配色方法

3.3.1 中差色配色方法

3.3.2 对比色配色方法

3.3.3 互补色配色方法

3.3.4 对比色调配色方法

3.4构建移动UI颜色系统

3.4.1 确定风格

3.4.2 确定主色

3.4.3 确定辅色

3.4.4 操作案例——构建美妆App颜色系统

3.4.5 调整配色

3.5移动UI色彩搭配的注意事项

3.5.1 切忌将精致、美观放在第一位

3.5.2 配色方案要符合用户的心理印象

3.5.3 操作案例——美妆App首页界面配色设计

3.5.4 App界面内容必须便于阅读

3.5.5 保守地使用色彩

3.5.6 规避杂乱的配色方案

3.5.7 操作案例——美妆App分类界面配色设计

3.6本章小结

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

4.1初识App图标

4.1.1 App图标的概念

4.1.2 App图标的重要性

4.2图标设计常用软件

4.2.1 Adobe Illustrator

4.2.2 Adobe Photoshop

4.2.3 CorelDRAW

4.3熟悉图标栅格系统

4.3.1 系统图标栅格

4.3.2 图标栅格规范

4.4图标设计形式

4.4.1 中文风格

4.4.2 英文风格

4.4.3 图形风格

4.4.4 数字风格

4.4.5 特殊符号风格

4.5 App图标的分类

4.5.1 工具图标

4.5.2 操作案例——设计与制作磨砂质感工具图标

4.5.3 装饰图标

4.5.4 启动图标

4.6图标尺寸

4.6.1 Android系统的图标设计尺寸

4.6.2 操作案例——设计与制作水果装饰图标

4.6.3 iOS的图标设计尺寸

4.6.4 操作案例——设计与制作时钟启动图标

4.7图标组设计规范

4.7.1 创建制作清单

4.7.2 设计草图

4.7.3 数字化呈现

4.7.4 确定最终效果

4.7.5 命名并导出

4.8本章小结

第5章 移动App的UI设计

5.1移动UI的基本元素

5.2常见的UI设计软件

5.2.1 Adobe Photoshop

5.2.2 Sketch

5.2.3 Adobe XD

5.3移动UI的设计基础

5.3.1 iOS的开发单位

5.3.2 iOS的界面尺寸规范

5.3.3 操作案例——设计与制作iOS App启动界面

5.3.4 Android系统的开发单位

5.3.5 Android系统的界面尺寸规范

5.3.6 操作案例——设计与制作Android系统App界面

5.4移动UI的字体规范

5.4.1 iOS字体规范

5.4.2 操作案例——设计与制作iOS App登录界面

5.4.3 Android系统字体规范

5.4.4 操作案例——设计与制作Android系统App分类界面

5.5移动UI图片尺寸规范

5.6移动App内容布局

5.6.1 了解App界面中的全局边距

5.6.2 操作案例——设计与制作iOS App首页界面

5.6.3 设置App界面中的内容间距

5.6.4 操作案例——设计与制作iOS App侧面菜单界面

5.6.5 移动App界面的布局方式

5.7本章小结

第6章 移动App交互设计

6.1了解UI交互设计

6.1.1 交互动效的概念

6.1.2 基础动效类型

6.2常见的交互设计软件

6.2.1 Adobe After Effects

6.2.2 Adobe XD

6.3交互设计的基本流程

6.3.1 提出交互设计创意想法

6.3.2 实现创意想法

6.4移动UI交互的类型

6.4.1 转场过渡

6.4.2 操作案例——设计与制作App转场交互

6.4.3 层级展示

6.4.4 空间扩展

6.4.5 关注聚焦

6.4.6 内容呈现

6.4.7 操作案例——设计与制作相册App内容呈现交互

6.4.8 操作反馈

6.4.9 操作案例——设计与制作App点赞反馈交互

6.5动效在UI中的作用

6.5.1 吸引用户注意力

6.5.2 为用户提供操作反馈

6.5.3 加强指向性

6.5.4 操作案例——设计与制作App后台交互

6.5.5 传递信息深度

6.6交互设计需要遵循的习惯

6.7本章小结

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

7.1标注的重要性

7.2常见的标注软件

7.2.1 PxCook

7.2.2 Assistor PS

7.3标注移动UI

7.3.1 移动App标注的内容

7.3.2 操作案例——标注iOS App界面

7.3.3 标注的声明文档

7.3.4 操作案例——标注Android系统App界面

7.4移动UI标注规范

7.4.1 位置与尺寸的标注规范

7.4.2 色彩和文字的标注规范

7.4.3 切图资源的尺寸必须是偶数

7.5输出与适配iOS UI设计

7.5.1 向上适配与向下适配

7.5.2 适配切片命名规范

7.5.3 操作案例——导出iOS App界面切图资源

7.6输出与适配Android系统UI设计

7.6.1 Android系统中的“点9”切图

7.6.2 输出与适配的一稿两用

7.6.3 操作案例——导出Android系统App切图资源

7.7本章小结

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

8.1设计与制作美妆电商App项目

8.1.1 分析美妆电商App的项目背景

8.1.2 制作美妆电商App界面的草图原型

8.1.3 构建美妆电商App的颜色系统

8.1.4 设计与制作美妆电商App的图标组

8.1.5 完成美妆电商App的UI设计

8.1.6 完成美妆电商App的交互设计

8.1.7 完成美妆电商App的界面标注

8.1.8 导出美妆电商App的切图资源

8.2设计与制作美食外卖App项目

8.2.1 分析美食外卖App的项目背景

8.2.2 制作美食外卖App的草图原型

8.2.3 创建美食外卖App的颜色系统

8.2.4 设计与制作美食外卖App的图标组

8.2.5 完成美食外卖App的UI设计

8.2.6 完成美食外卖App的交互设计

8.2.7 完成美食外卖App的界面标注

8.2.8 导出美食外卖App的切图资源