移动UI设计

移动UI设计

查阅电子书
手机扫码
  • 微信扫一扫

    关注微信公众号

编辑推荐

本书采用全流程设计的方式,对iOS和Android系统移动设备界面的结构及设计规范进行讲解。

内容简介

本书共8章。第1章,关于移动UI设计;第2章,移动UI策划与原型设计;第3章,优秀的移动UI色彩搭配;第4章,出色的移动图标设计;第5章,移动App的UI设计;第6章,移动App交互设计;第7章,适配与输出移动UI设计;第8章,设计制作移动App项目。

章节目录

版权信息

内容提要

前言

第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的切图资源

移动UI设计是2022年由人民邮电出版社出版,作者李万军 编著。

得书感谢您对《移动UI设计》关注和支持,如本书内容有不良信息或侵权等情形的,请联系本网站。

你可能喜欢
小程序实战视频课:微信小程序开发全案精讲 电子书
图文代码快速理解小程序基本原理和应用方法,8大类小程序案例,感受真实商业项目制作过程。
Android应用案例开发大全 电子书
技术新颖,贴近实战:本书涵盖了现实中几乎所有的流行技术,如3D、传感器、OpenGL ES 2.0、动态壁纸、LBS百度地图的二次开发、移动办公、实时流体仿真计算引擎、服务端和Android端的交互等。 实例丰富,讲解详细:本书既包括单机版客户端项目,也有服务端和Android端的结合开发;既包括典型的商业软件,也包括休闲娱乐项目,还有流行的3D热门案例以及借助OpenGL ES 2.0渲染的逼真场景。 案例经典,含金量高:以真实的项目开发为讲解背景,包括大型商务软件、3D游戏等,无论做项目还是进行毕业设计,都可以在本书找到相同的案例,非常适合各类读者学习。
精通Android网络开发 电子书
实例丰富,按照Android 5 新版本编写。 涵盖了Android网络应用中的所有主要内容: HTTP数据通信、URL处理数据、使用Socket实现数据通信、使用WebKit浏览网页数据、WiFi系统应用、蓝牙系统应用、邮件应用、RSS应用、网络视频处理、网络流量监控、网络RSS阅读器 通过案例让读者学以致用,如开发一个邮件系统、网络防火墙系统开发、开发Web版的电话本管理系统等
小程序开发原理与实战 电子书
腾讯一线专家联合著作,通过云开发具体案例+完整项目实战,详解小程序开发原理、运行机制、避坑指南。
微信小程序实战入门(内含完整实例解析) 电子书
一本的全新的零基础小程序实战入门手册。