移动界面设计-视觉营造的风向标

目 录
序：致我们的时代
前言
第1章 移动互联时代到来1
1.1 移动互联时代的UI设计2
1.1.1 一个伟大的时代——移动互联2
1.1.2 互联网思维2
1.1.3 移动互联时代对从业者的新要求3
1.1.4 移动互联时代的特点4
1.1.5 新时代的UI设计6
?1.2 HTML59
1.2.1 HTML5概况9
1.2.2 响应式设计9
1.2.3 HTML5的应用领域11
1.2.4 为什么HTML5备受关注？13
?1.3 移动设备的特点14
1.3.1 移动端与PC端的区别17
1.3.2 移动设备的特点19
第2章 决定设计的先决条件22
?2.1 工欲善其事，需先利其器–常用
?UI设计工具23
2.1.1 Photoshop的应用领域23
2.1.2 矢量图和位图的概念26
2.1.3 Photoshop的操作界面27
2.1.4 Sketch的功能特点32
2.1.5 Sketch的使用方法35
2.1.6 Sketch 常用快捷键汇总36
?2.2 设计的方法论37
?2.3 大平移式布局41
2.3.1 移动界面的布局方式41
2.3.2 关于大平移式布局42
2.3.3 大平移式布局的用途及使用方法44
2.3.4 大平移式布局的优缺点47
?2.4 宫格式布局48
2.4.1 宫格式布局的视觉表现方式51
2.4.2 宫格式布局的优缺点55
?2.5 侧滑式布局55
2.5.1 手机界面的特点56
2.5.2 侧滑式布局简介56
2.5.3 侧滑式布局的优缺点59
?2.6 列表式布局60
2.6.1 列表式布局的特点61
2.6.2 列表式布局的设计方式61
2.6.3 列表式布局的优缺点64
?2.7 标签式布局66
2.7.1 iOS系统中的标签式布局68
2.7.2 安卓系统中的标签式布局69
2.7.3 Windows Phone系统中的标签式
布局70
2.7.4 标签式布局的优缺点71
?2.8 合理规划布局72
第3章 视觉设计中的字体与色彩75
?3.1 界面中的文字排版76
3.1.1 文字的起源和字体的性格76
3.1.2 文字的重构80
3.1.3 文字间的沟通86
?3.2 靠谱的配色技巧92
3.2.1 制作自己的调色盘92
3.2.2 明度、饱和度、色相的概念
及使用96
3.2.3 移动端视觉界面颜色选色
原则99
第4章 界面中的细节营造106
?4.1 伪扁平化的时代107
4.1.1 什么是扁平化设计？109
4.1.2 扁平化设计的发展112
4.1.3 扁平化设计的优缺点114
4.1.4 伪扁平化设计风格115
4.1.5 关于MBE设计风格116
4.1.6 扁平化设计的方法117
?4.2 经典的卡片式设计118
4.2.1 卡片内容至上120
4.2.2 卡片设计的优势120
4.2.3 卡片的组织性121
4.2.4 卡片的视觉效果122
?4.3 界面设计中的细节127
第5章 移动端产品的可用性原则128
?5.1 手机界面特点129
?5.2 手机APP的可用性原则130
5.2.1 准确性与便捷性130
5.2.2 一致性原则133
5.2.3 可逆性原则134
5.2.4 容错性原则136
5.2.5 提示语言的亲和力140
5.2.6 产品的易学习性141
第6章 了解原生安卓系统143
?6.1 原生安卓系统144
6.1.1 安卓系统的导航方式147
6.1.2 单个项目的操作148
6.1.3 布局方式148
6.1.4 实体物理控件149
6.1.5 动效规范149
?6.2 走进Material Design设计
?语言150
6.2.1 Material Design的动画效果151
6.2.2 图标的处理方式153
6.2.3 图片的选取方式155
6.2.4 系统字体的规范性155
6.2.5 系统布局的规范性156
第7章 界面设计的后续工作169
?7.1 视觉设计师的职责与职业发展
?规划170
7.1.1 移动联网行业现状170
7.1.2 设计师的职业发展规划171
?7.2 视觉设计稿的标注175
7.2.1 什么是标注175
7.2.2 产品的标注方法182
?7.3 切图文件的处理技巧182
7.3.1 iOS系统的切图方式183
7.3.2 安卓系统的切图方式184
?7.4 适配及命名186
7.4.1 像素的概念186
7.4.2 像素密度及屏幕倍率187
7.4.3 安卓的适配原则188
7.4.4 逻辑像素190
第8章 视觉设计师的扩展技能——手绘插画191
?8.1 手绘插画的世界192
8.1.1 关于插画192
8.1.2 游戏UI的重要性193
?8.2 游戏UI设计194
8.2.1 游戏UI的概念194
8.2.2 绘制游戏UI的要求195
?8.3 手绘插画设计游戏UI200
8.3.1 绘制游戏UI的工具200
8.3.2 游戏UI的绘制方法以及案例
分享201
后记206