Photoshop+Adobe XD+Illustrator移动UI设计教程电子书

内容简介

前言

读者服务

第1章　移动UI设计基础

1.1　UI设计与移动UI设计

1.1.1　了解UI设计

1.1.2　了解移动UI设计

1.1.3　移动UI与平面UI

1.2　移动UI设计的平台类型

1.2.1　Android系统

1.2.2　iOS系统

1.2.3　Wear OS系统和Watch OS系统

1.3　移动UI的设计内容

1.3.1　配色方案的设计

1.3.2　页面布局的设计

1.3.3　按钮和图标的设计

1.3.4　文字和版式的设计

1.4　了解移动UI设计常用的软件

1.4.1　Axure RP 和Adobe XD

1.4.2　Photoshop和Sketch

1.4.3　PxCook和Assistor PS

1.5　了解UI设计的工作流程

1.5.1　需求分析

1.5.2　交互设计

1.5.3　视觉设计

1.6　了解互联网产品职位划分

1.6.1　产品经理

1.6.2　项目经理

1.6.3　页面设计师

1.6.4　开发人员

1.7　本章小结

第2章　iOS系统界面设计

2.1　分辨率与界面设计尺寸

2.1.1　像素与分辨率

2.1.2　iOS系统界面设计尺寸

实战练习01　使用Photoshop新建App文件

2.2　iOS系统的组件尺寸

2.2.1　组件尺寸

2.2.2　边距和间距

实战练习02　创建辅助线绘制iOS组件

2.3　iOS系统文字设计规范

2.3.1　字体

2.3.2　字号

2.3.3　颜色和字重

2.4　iOS系统图标设计规范

2.5　iOS系统图片设计规范

2.5.1　图片的比例

2.5.2　图片的格式

2.6　iOS系统内容布局

2.6.1　列表式布局

2.6.2　陈列馆式布局

2.6.3　宫格式布局

2.6.4　卡片式布局

2.7　iOS系统版式设计规范

实战练习03　设计制作iOS系统App版面

2.8　iOS系统设计适配

2.8.1　向下适配

2.8.2　向上适配

2.9　iOS切图规范

2.9.1　切图输出

实战练习04　使用Photoshop切图输出

2.9.2　切片命名规范

2.9.3　设计稿标注

2.10　提交最终文件

2.11　本章小结

第3章　Android系统界面设计

3.1　了解Android系统“碎片化”

3.2　Android系统界面设计尺寸

3.2.1　了解屏幕密度的概念

3.2.2　Android系统开发单位

3.2.3　Android系统界面设计尺寸

实战练习01　使用Adobe XD创建Android文档

3.3　Android系统组件设计尺寸

3.3.1　Android系统组件尺寸

3.3.2　Android系统的元素间距

实战练习02　创建Android系统界面的组件

3.4　Android系统文字设计规范

3.4.1　字体

3.4.2　字号

3.5　Android系统中图标设计规范

3.5.1　图标尺寸

3.5.2　触摸反馈

实战练习03　绘制Android App界面结构

3.6　Android界面标注与切图

3.6.1　Android界面的标注

3.6.2　Android界面的切图

3.6.3　“点9”切图的应用

3.7　Android系统界面适配问题

3.7.1　采用哪种分辨率设计

3.7.2　设计师需要提供几套切图

3.7.3　界面设计中字体的应用技巧

3.8　如何做到一稿两用

3.9　本章小结

第4章　移动UI图标设计

4.1　图标设计基础

4.1.1　图标设计的必要性

4.1.2　影响图标的属性

4.1.3　好图标的特点

4.2　了解图标栅格系统

4.2.1　系统图标栅格

4.2.2　不同造型图标的栅格规范

4.3　图标的渲染风格

4.4　图标的透视

4.4.1　关于透视

4.4.2　绘制零点透视图标

实战练习01　绘制零点透视图标

4.4.3　绘制一点透视图标

实战练习02　绘制一点透视图标

4.4.4　绘制两点透视图标

实战练习03　绘制两点透视图标

4.5　图标集的制作流程

4.5.1　创建制作清单

4.5.2　设计草图

4.5.3　数字呈现

4.5.4　确定最终效果

4.5.5　命名并导出

4.6　移动UI图标设计形式

4.6.1　中文形式

4.6.2　英文形式

4.6.3　图形形式

4.6.4　数字和特殊符号形式

4.7　启动图标设计

4.7.1　启动图标设计要求

4.7.2　启动图标设计规范

实战练习04　设计制作iOS指南针启动图标

4.7.3　快速索引、设置页面和通知图标

4.8　标签栏图标设计

实战练习05　设计制作标签栏图标

4.9　图标设计的优点与原则

4.10　本章小结

第5章　iOS系统界面应用设计

5.1　设计制作旅游App界面

5.1.1　旅游App界面布局分析

实战练习01　设计制作旅游App界面布局

5.1.2　旅游App界面色彩搭配分析

5.1.3　旅游App界面元素分析

实战练习02　设计制作旅游App界面

5.1.4　旅游App界面输出分析

实战练习03　旅游App界面适配

5.2　设计制作外卖App界面

5.2.1　外卖App界面布局分析

实战练习04　设计制作外卖App界面布局

5.2.2　外卖App界面色彩搭配分析

5.2.3　外卖App界面元素分析

实战练习05　设计制作外卖App登录界面

实战练习06　设计制作外卖App主页界面

5.2.4　外卖App界面输出分析

实战练习07　外卖App界面适配

5.2.5　外卖App界面交互效果分析

实战练习08　设计制作外卖App交互原型

5.3　设计制作播放器App界面

5.3.1　播放器App界面图标组

实战练习09　设计制作播放器App界面图标组

5.3.2　设计制作播放器App界面

实战练习10　设计制作播放器App界面

5.3.3　输出适配播放器App界面

实战练习11　输出播放器App界面

5.3.4　标注适配播放器App界面

5.4　本章小结

第6章　Android系统界面应用设计

6.1　设计制作商城App界面

6.1.1　商城App界面布局分析

实战练习01　设计制作商城App界面布局

6.1.2　商城App界面色彩搭配分析

6.1.3　商城App界面元素分析

实战练习02　设计制作商城App首页界面

6.1.4　商城App界面输出分析

实战练习03　商城App界面适配

6.2　设计制作社交App界面

6.2.1　社交App界面设计同质化分析

实战练习04　设计制作社交App“推荐”界面

6.2.2　社交App界面边距的设置分析

实战练习05　设计制作社交App“自己”界面

6.2.3　社交App界面交互设计分析

实战练习06　设计制作社交App“信息”界面

6.2.4　社交App界面标注和输出

实战练习07　输出和标注社交App界面

6.3　本章小结