本书通过大量的案例制作,详细地向用户介绍了Sketch在设计网页界面时的使用方法。分别针对Sketch绘制线框原型、设计图标、Android界面设计、iOS界面设计、PC端网站UI和UI的输出与交互进行了讲解。通过学习读者应该熟悉移动UI设计和PC端UI设计的规范和设计要点。同时掌握网页界面的输出以及交互动效的添加方法。
1.循序渐进指引设计者了解并掌握Sketch 4设计制作移动UI的方法和技巧。
2. 从UI到UX，让界面由静到动。
3. 随书附赠案例源文件，另外赠送近600分钟的辅助教学视频。
艺术设计类畅销书作者，编写过多本设计类图书，包括《7天精通Photoshop CS6 UI交互设计》、《网站用户体验设计全程揭秘》、《中文版Photoshop CS6完全自学一本通》等。
第1章 网页UI设计入门
1.1 UI设计发展史 2
1.1.1 早期UI设计的风格 3
1.1.2 中期UI设计的兴起 3
1.1.3 后期UI设计的发展 5
知识点讲解iOS系统 6
知识点讲解Android系统 6
知识点讲解Windows 系统 7
知识点讲解拟物化风格设计 8
知识点讲解扁平化风格设计 8
1.2 网页UI设计的制作流程 9
1.2.1 产品调研阶段 10
1.2.2 UI视觉设计 10
1.2.3 产品技术开发 11
1.2.4 BUG测试 12
1.2.5 产品上线 12
1.2.6 产品迭代 13
1.3 UI设计的注意事项 13
1.3.1 图稿一致性原则 13
知识点讲解字体 13
知识点讲解表单录入 14
知识点讲解鼠标手势 14
1.3.2 图稿准确性原则 15
1.3.3 布局合理化原则 16
1.3.4 操作合理性原则 17
1.3.5 系统响应时间原则 18
1.4 配色对于UI设计的影响 18
1.4.1 网页配色基本概念 18
知识点讲解网页主色 18
知识点讲解网页背景色 19
知识点讲解网页辅色 19
知识点讲解网页点缀色 20
1.4.2 网页配色基本方法 20
知识点讲解根据产品内容确定网页主色 20
知识点讲解根据网页主色确定配色方案 21
1.4.3 网页色彩搭配技巧 22
知识点讲解同色系 23
知识点讲解邻近色 23
知识点讲解对比色 25
知识点讲解互补色 25
1.5 本章小结 26
第2章 初识Sketch
2.1 绘制iOS 照片分享界面 28
2.1.1 Sketch的安装与启动 28
操作案例安装与启动Sketch 28
2.1.2 了解Sketch界面 30
知识点讲解Sketch的主界面 31
知识点讲解菜单栏 31
知识点讲解工具栏 34
操作案例自定义工具栏 34
2.1.3 设置Sketch的快捷键 35
知识点讲解Sketch的快捷键 35
操作案例自定义快捷键 37
2.1.4 添加图片、形状 39
知识点讲解Sketch插入面板 39
知识点讲解插入图片 40
知识点讲解插入形状 41
2.1.5 添加文本 42
知识点讲解插入文本 43
2.2 绘制手机登录页 45
2.2.1 新建和保存Sketch文件 45
知识点讲解文件的新建和保存 45
操作案例设置Sketch 的标尺 47
2.2.2 使用Sketch 画板 48
知识点讲解画板预设 48
知识点讲解画板检查器 50
2.2.3 使用Sketch 模板 51
知识点讲解 iOS 用户界面设计模板 52
2.3 本章小结 56
第3 章 绘制线框原型
3.1 绘制手机信息界面线框图 58
3.1.1 线框原型的基本概念 58
知识点讲解线框原型概念 60
知识点讲解线框原型视觉特性 61
3.1.2 绘制线框原型的注意事项 61
知识点讲解巧用明暗对比 63
知识点讲解不使用截图和颜色 64
知识点讲解标记第一屏高度 64
知识点讲解合理的布局和间距 65
3.2 绘制注册页面线框图 65
3.2.1 图层面板 66
知识点讲解图层面板简述 67
操作案例添加和编辑图层 68
知识点讲解选择图层 69
操作案例移动图层 70
3.2.2 图层类型 71
知识点讲解图层类型详解 73
操作案例变换大小 75
3.2.3 图层的调整 75
操作案例新建、重命名、复制和删除页面 78
知识点讲解复制、剪切和粘贴图层 79
知识点讲解图层组的检查器 80
3.3 绘制完整的线框原型图 83
3.3.1 计步App 线框图的绘制01 84
3.3.2 计步App 线框图的绘制02 87
3.4 本章小结 91
第4 章 使用Sketch 绘制图标
4.1 绘制iOS 11 提醒事项图标 93
4.1.1 矢量工具 93
知识点讲解矢量图形（形状） 95
知识点讲解点模式 95
知识点讲解编辑矢量图形 96
操操作案例矢量工具绘制箭头图标 97
4.1.2 路径的使用 98
知识点讲解路径 100
4.2 绘制Android 照相机图标 101
4.2.1 使用形状绘制图标 102
操作案例使用布尔运算绘制照相机图标 106
知识点讲解布尔运算 107
4.2.2 使用蒙板绘制图标 108
知识点讲解蒙板命令 109
操作案例使用透明度蒙板制作简易图标 110
4.2.3 添加阴影效果为图标添加质感 112
知识点讲解图标基本属性 113
4.3 绘制极简化的Android图标 116
4.3.1 Android 图标设计准则 116
知识点讲解图标设计准则 118
4.3.2 图标设计的三大原则 120
知识点讲解三大原则 122
4.3.3 极简化设计 123
知识点讲解极简化设计风格 126
操作案例绘制记事本图标 127
4.4 本章小结 128
第5章 Android UI 设计
5.1 绘制Android 音乐播放器界面 130
5.1.1 组件的编辑及使用 130
知识点讲解创建组件 133
知识点讲解更换文本 133
知识点讲解管理组件 134
操作案例使用组件工具绘制导航栏 135
5.1.2 应用软件UI 设计 136
知识点讲解什么是应用软件UI设计 137
知识点讲解应用软件UI设计规范 138
知识点讲解软件启动UI设计 139
5.1.3 移动App UI 设计 140
知识点讲解什么是App 142
知识点讲解移动UI的设计趋势 143
知识点讲解移动UI和平面UI的区别 145
5.1.4 Android 系统UI设计 146
知识点讲解Android系统文字规范设计 148
操作案例绘制返回或菜单按钮 149
知识点讲解Android 系统UI 设计特色 150
5.2 绘制Android 信息界面 151
5.2.1 文本命令 152
知识点讲解添加文本 154
知识点讲解文本框 154
5.2.2 文本检查器 155
知识点讲解文本的编辑 157
知识点讲解共享样式 159
操作案例使用共享样式
绘制界面 160
5.2.3 文本选项 161
知识点讲解文本路径 163
知识点讲解文本转换轮廓 164
操作案例转化为轮廓绘制
界面元素 164
知识点讲解导出文字 165
知识点讲解应用样式 166
知识点讲解混合模式 168
5.3 本章小结 169
第6 章 iOS UI 设计
6.1 绘制iPhone X App 界面 171
6.1.1 iOS 系统UI 用户元素 171
知识点讲解顶部导航栏 173
知识点讲解标签栏和搜索栏 173
操作案例绘制iPhone X启动界面 174
知识点讲解表格视图 176
6.1.2 iOS 系统UI 设计要求 177
知识点讲解确保程序可行 178
知识点讲解确保App 可以在
iPhone 和iPad 中通用 178
知识点讲解基于Web 网页
重新设计 179
6.1.3 iOS 系统UI 设计原则 179
知识点讲解美观性 182
知识点讲解一致性 183
知识点讲解控制可行性 184
知识点讲解及时性 184
知识点讲解暗喻性 184
知识点讲解自主性 185
6.1.4 iPhone X 的App UI 设计 185
知识点讲解编辑位图 188
知识点讲解iPhone X 的屏幕尺寸 190
知识点讲解iPhone X 的布局 190
6.2 绘制iPhone 8 App 界面 191
6.2.1 iOS App UI 设计模板 192
知识点讲解iPhone 8 的组件 193
操作案例绘制iPhone 系统视频播放界面 194
知识点讲解iPhone X 的组件 195
6.2.2 iOS UI 设计规范 195
知识点讲解界面尺寸 198
知识点讲解图标尺寸 198
知识点讲解内部设计 199
6.2.3 移动App 设计过程中的要点 199
知识点讲解App UI设计流程 202
操作案例绘制系统发生错误界面 203
知识点讲解App UI配色原则 204
6.3 本章小结 206
第7 章 PC 端UI 设计
7.1 绘制网站登录界面 208
7.1.1 PC 端和移动端UI 设计的区别 208
知识点讲解网页设计PC 端和
移动端的区别 211
7.1.2 铅笔工具和剪刀工具 213
知识点讲解铅笔工具 215
知识点讲解剪刀工具 216
操作案例设计制作设置按钮① 216
知识点讲解旋转复制 217
设置按钮② 218
知识点讲解变形工具 219
7.2 绘制医学网站首页 219
7.2.1 PC 端UI 设计原则 220
知识点讲解以用户为中心 223
知识点讲解视觉美观 224
知识点讲解主题明确 224
知识点讲解内容与形式统一 26
知识点讲解有机整体 227
操作案例绘制休闲空间启动页① 227
7.2.2 PC 端UI 设计要点 229
知识点讲解设计与技术相结合 231
知识点讲解视觉导向性 232
7.2.3 PC 端UI 设计风格 233
知识点讲解大众化设计风格 234
知识点讲解个性化设计风格 234
操作案例绘制休闲空间启动页② 235
7.3 本章小结 236
第8 章 UI 的输出与交互设计
8.1 UI 图像的输出 238
8.1.1 图标的输出 238
知识点讲解适配设备 238
知识点讲解导出图层 240
知识点讲解导出和切片 241
8.1.2 界面的输出 241
知识点讲解切片工具 242
操作案例为切片重命名 245
8.2 UI 设计的交互 245
知识点讲解了解移动设备的手势 245
知识点讲解移动交互动效设计的注意事项 248
知识点讲解使用Xcode 模拟交互效果 249
8.3 Sketch 插件的安装与使用 250
知识点讲解实用的插件 251
8.4 本章小结 252
新书资讯
