01移动UI设计基础 2
1.1 UI设计概论 2
1.1.1 什么是UI设计 2
1.1.2 什么是App 3
1.1.3 移动App UI与平面UI的区别 4
1.1.4 制作App UI的常用软件 4
1.2 手机界面设计尺寸的度量单位 10
1.2.1 英寸 10
1.2.2 分辨率 10
1.2.3 屏幕密度 11
1.2.4 网点密度 11
1.3 常见的图片格式 11
1.3.1 位图 12
1.3.2 矢量图 14
1.4 App UI的设计原则 14
1.4.1 视觉一致性原则 15
1.4.2 视觉简易性原则 15
1.4.3 从用户的考虑角度出发 15
1.5 手机界面的色彩搭配与视觉效果 16
1.5.1 冷暖色调的对比 16
1.5.2 色彩的意向 16
1.5.3 色彩的搭配技巧 17
1.5.4 App界面配色原则 18
1.5.5 App U I设计的用色规范 19
1.6 App的设计流程 19
1.6.1 简单大方的设计理念 19
案例 绘制相机图标 20
1.6.2 独一无二的设计创意 22
1.6.3 全面分析应用需求 23
1.6.4 确认App的设计工作 23
1.7 App移动端的设计趋势 23
1.7.1 专注用户体验 24
1.7.2 使用模糊的背景 24
案例 绘制登录界面 24
1.7.3 简单的导航模式 27
1.7.4 大胆醒目的字体运用 27
1.7.5 更简单的配色 27
1.7.6 用户界面的情景感知 28
1.8 两大主流手机系统的发展历程 28
1.8.1 iOS系统 28
1.8.2 Android系统 30
1.9 不同系统UI视觉的主要组成要素及特征 34
1.9.1 iOS系统的组成要素及特征 34
1.9.2 Android系统的组成要素及特征 36
1.9.3 手机系统的发展前景 37
1.10 专家支招 37
1.10.1 App屏幕设计禁忌 38
1.10.2 App文字设计禁忌 38
1.10.3 App按钮图标设计禁忌 38
1.10.4 App选项设计禁忌 39
1.10.5 App空间设计禁忌 39
1.11 总结扩展 39
1.11.1 本章小结 39
1.11.2 举一反三——绘制时钟图标 39
02iOS App系统应用 42
2.1 iOS UI设计基础 42
2.1.1 iOS的设计特色 42
2.1.2 适应性和布局 44
2.1.3 停止与启动 46
2.1.4 导航 47
2.1.5 模态情景 48
2.1.6 交互性与反馈 48
2.1.7 动画 50
2.1.8 颜色和字体 50
2.2 iOS的界面设计规范 52
2.2.1 iOS界面设计尺寸 52
2.2.2 iOS设计元素尺寸 52
2.2.3 iOS界面图标尺寸 53
2.2.4 iOS界面文本尺寸 53
2.3 iOS的图标运用 54
2.3.1 iOS图标设计的原则 54
2.3.2 iOS应用程序图标 55
案例 绘制日历图标 56
2.3.3 栏按钮图标 59
2.4 iOS用户界面元素 60
2.4.1 状态栏 61
2.4.2 导航栏 61
2.4.3 标签栏 61
案例 制作新闻界面 62
2.4.4 搜索栏 67
2.4.5 工具栏 68
案例 制作地图界面 68
2.4.6 表格视图 71
案例 制作表格视图 72
2.4.7 活动视图 75
2.4.8 动作 76
2.4.9 警告提醒 76
2.4.10 编辑菜单 77
2.4.11 浮动框 77
2.4.12 模态视图 77
2.5 控件的绘制 78
2.5.1 活动指示器 78
2.5.2 选择器 78
案例 制作闹钟界面 79
2.5.3 分段控件 83
案例 制作分段控件 83
2.5.4 滚动条 87
案例 制作滚动条 87
2.5.5 步进器 90
2.5.6 开关 91
2.5.7 页码指示器 91
案例 制作页码指示器 91
2.5.8 按钮 94
2.5.9 文本框 95
案例 制作登录界面 95
2.5.10 进度条 98
案例 制作进度指示条 99
2.6 专家支招 104
2.6.1 尺寸更大 104
2.6.2 更圆 104
2.6.3 交互效果 105
2.7 总结扩展 105
2.7.1 本章小结 105
2.7.2 举一反三——制作音乐播放器界面 105
03Android App系统应用 108
3.1 Android UI设计基础 108
3.1.1 Android UI的设计特色 108
3.1.2 设备与显示 109
3.1.3 主题鲜明 110
3.1.4 触摸反馈 110
3.1.5 度量单位和网格 111
3.1.6 字体 112
3.1.7 Android的写作风格 112
3.1.8 色彩 114
3.2 Android界面设计规范 114
3.2.1 Android界面图标的设计尺寸 115
案例 绘制Android浏览器图标 115
3.2.2 Android的界面基本组成元素 119
3.2.3 Android的文本规范 119
3.3 Android的图标运用 120
3.3.1 启动图标 120
案例 绘制启动图标 120
3.3.2 系统图标 123
3.3.3 系统图标的设计原则 123
3.4 Android用户界面元素 126
34.1 主屏幕和二级菜单 126
3.4.2 状态栏 127
3.4.3 导航抽屉 127
3.4.4 操作栏 127
案例 绘制音乐乐库界面 128
3.5 Android控件的绘制 132
3.5.1 选项卡 132
案例 绘制主题壁纸下载界面 134
3.5.2 列表 137
案例 绘制列表视图 137
3.5.3 网格列表 141
3.5.4 文本框 141
3.5.5 按钮 142
案例 绘制登录界面 143
3.5.6 菜单 145
案例 绘制电子书籍界面 146
3.5.7 开关 149
3.5.8 滚动 150
案例 绘制好友联系人界面 151
3.5.9 活动指示器 154
3.5.1 0滑块 155
案例 绘制音乐播放器界面 155
3.5.1 1提示框 158
3.6 专家支招 159
3.6.1 锁屏界面 159
3.6.2 二级菜单界面 160
3.6.3 通知中心 160
3.6.4 小部件中心 160
3.6.5 Google now 160
3.6.6 新增联系人 161
3.6.7 权限管理 161
3.6.8 设置界面 161
3.7 总结扩展 161
3.7.1 本章小结 161
3.7.2 举一反三——绘制个人主页界面 162
04App应用实战 164
4.1 App的分类 164
4.1.1 实用功能类 164
4.1.2 游戏类 164
4.1.3 社交类 164
4.1.4 网购支付类 165
4.1.5 影音播放类 165
4.2 iOS应用实战 165
4.2.1 绘制日历界面 166
4.2.2 绘制音乐播放器界面 169
4.3 Android应用实战 172
4.3.1 绘制电商界面 172
4.3.2 绘制社交界面 176
4.4 专家支招 180
4.4.1 选用符合产品气质的字体 180
4.4.2 巧用排版技巧 180
4.4.3 图片的水印式装饰 181
4.4.4 海报式的图文分享 182
4.4.5 动起来的界面 182
4.5 总结扩展 183
4.5.1 本章小结 183
4.5.2 举一反三——绘制酒店首页界面 183