首页 > 科技 > 计算机 > 图形图像

UI设计必修课：Sketch移动界面设计教程（全彩）（含DVD光盘1张）

作译者：李万军

出版时间：2017-09 千字数：428 版次：01-01 页数：252

开本：16开装帧： I S B N ：9787121324109

换版：

纸质书定价：￥79.9

库存:有

分享到：

共有图书评论0条【查看评论摘要】

看了又看

{{data.bookName}}

￥{{data.price}}

内容简介

前言

上架建议

作者简介

编辑推荐

音视频专区

Chapter 01　移动UI设计师的入门
1.1 移动UI的发展 ...................................................................... 2
1.1.1　早期设计保证软件可用性 ............................................................. 2
1.1.2　中期设计保证软件易用性 ............................................................. 2
1.1.3　后期设计保证软件实用性 ............................................................. 4
1.1.4　未来UI设计的展望 ......................................................................... 5
1.2 移动UI设计师的工作流程 .................................................. 6
1.3 iOS和Android设计特色 ...................................................... 7
1.3.1　iOS的设计特色 ............................................................................... 7
1.3.2　Android的设计特色 ...................................................................... 11
1.4　 移动UI设计师应了解的基本常识 .....................................14
1.4.1　移动UI设计中用到的单位 ........................................................... 14
1.4.2　iOS的界面设计规范 ..................................................................... 16
1.4.4　Android的界面设计规范 .............................................................. 18
1.4.5　为触控而设计 ............................................................................... 20
1.4.6　从iOS10的特点看设计趋势 ......................................................... 20
1.5 专家支招 .............................................................................22
1.5.1　移动UI设计师常用的设计工具有哪些？ ................................... 22
1.5.2　什么是屏幕密度？ ....................................................................... 23
1.6 本章小结 ..............................................................................23
Chapter 02　初识Sketch
2.1　Sketch的安装和启动 ...........................................................26
2.1.1　实战——安装Sketch .................................................................... 26
2.1.2　实战——启动Sketch .................................................................... 27
2.2　Sketch的欢迎介绍 ...............................................................28
2.3　Sketch的主界面 ...................................................................29
2.3.1　菜单栏 ........................................................................................... 29
2.3.2　工具栏 ........................................................................................... 31
实战——自定义工具栏 ........................................................................... 32
2.3.3　工具介绍 ....................................................................................... 33
2.3.4　画布 ............................................................................................... 33
2.3.5　检查器 ........................................................................................... 35
2.3.6　图层面板 ....................................................................................... 36
2.3.7　画板 ............................................................................................... 36
2.3.8　蒙板 ............................................................................................... 37
2.3.9　布尔运算 ....................................................................................... 37
2.3.10　符号与共享样式 ......................................................................... 37
2.4　Sketch的快捷键 ...................................................................38
2.4.1　Sketch的快捷键列表 .................................................................... 39
2.4.2　实战——自定义快捷键 ............................................................... 43
2.5　Sketch的系统偏好设置 .......................................................44
2.5.1　通用选项卡 ................................................................................... 45
2.5.2　画布选项卡 ................................................................................... 46
2.5.3　图层选项卡 ................................................................................... 47
2.5.4　插件选项卡 ................................................................................... 48
2.5.5　预设选项卡 ................................................................................... 49
2.5.6　Cloud选项卡 ................................................................................. 49
2.6　Sketch的标尺、参考线和网格 ................................................ 49
2.6.1　标尺 ............................................................................................... 49
2.6.2　参考线 ........................................................................................... 50
2.6.3　网格 ............................................................................................... 51
2.7　Sketch的常见问题 ...............................................................53
2.7.1　Sketch是否支持Windows系统？ ................................................. 53
2.7.2　Sketch能否替代Photoshop？ ....................................................... 53
2.7.3　Sketch是否有汉化版 .................................................................... 53
2.7.4　Sketch如何升级？ ........................................................................ 53
2.7.5　Sketch价格能不能优惠？ ............................................................ 54
2.8　专家支招 ..............................................................................54
2.8.1　Sketch怎么兼容低版本文件？ .................................................... 54
2.8.2　Sketch是否有类似Axure的组件库的功能？ .............................. 55
2.9　本章小结 ..............................................................................55
Chapter 03　从线框原型开始
3.1　线框原型的基本概念 ..........................................................58
3.2　绘制线框原型的注意事项 ..................................................59
3.2.1　巧用明暗对比的运用 ................................................................... 59
3.2.2　不使用截图和颜色 ....................................................................... 60
3.2.3　标记第一屏高度 ........................................................................... 60
3.2.4　合理的布局和间距 ....................................................................... 61
3.3　Sketch绘制线框原型 ...........................................................61
3.3.1　文件的新建和保存 ....................................................................... 61
3.3.2　回到Sketch文档的历史版本 ........................................................ 63
3.3.3　画板预设 ....................................................................................... 64
3.3.4　画板检查器 ................................................................................... 65
3.3.5　图层面板 ....................................................................................... 66
3.3.6　关于模版 ....................................................................................... 70
3.3.7　图层组的检查器 ........................................................................... 71
3.3.8　形状图层的检查器 ....................................................................... 73
3.3.9　文字图层的检查器 ....................................................................... 76
3.4　使用Sketch绘制线框原型 ...................................................78
3.4.1　实战——计步APP线框图的绘制 ................................................ 78
3.4.2　实战——内容列表页线框图的绘制 ........................................... 82
3.5　完整线框原型的绘制 ..........................................................86
3.5.1　实战——注册页1线框图的绘制 ................................................. 86
3.5.2　实战——注册页2线框图的绘制 ................................................. 90
3.5.3　实战——注册页3线框图的绘制 ................................................. 92
3.5.4　实战——注册页4线框图的绘制 ................................................. 94
3.6　绘制线框原型的思考 ..........................................................95
3.7　专家支招 ..............................................................................96
3.7.1　画好APP线框图流程图的要点有哪些？ .................................... 96
3.7.2　线框原型的优势有哪些？ ........................................................... 97
3.8　本章小结 ..............................................................................97
Chapter 04　使用Sketch设计图标
4.1　图标的设计准则 ................................................................ 100
4.1.1　图标设计的必要性 ..................................................................... 100
4.1.2　了解图标的属性 ......................................................................... 102
4.1.3　不同系统中的图标格式 ............................................................. 105
4.1.4　不同系统图标的更换方法 ......................................................... 105
4.2　图标集的制作过程 ............................................................ 109
4.2.1　创建制作清单 ............................................................................. 109
4.2.2　设计草图 ..................................................................................... 109
4.2.3　数字呈现 ..................................................................................... 110
4.2.4　确定最终效果 ............................................................................. 110
4.2.5　命名并导出 ..................................................................................111
4.3　使用Sketch插入面板 ......................................................... 111
4.3.1　插入矢量 ......................................................................................111
4.3.2　插入铅笔 ..................................................................................... 115
4.3.3　插入形状 ..................................................................................... 116
4.3.4　插入文本 ..................................................................................... 120
4.3.5　插入图片 ..................................................................................... 121
4.4　图形的布尔运算 ................................................................ 121
4.5　实战——绘制iOS APP图标 ............................................. 124
4.6　实战——绘制音乐应用图标 ............................................ 128
4.7　图标的源文件格式 ............................................................ 132
4.8　专家支招 ............................................................................ 133
4.8.1　iOS系统中图标的尺寸 ............................................................... 133
4.8.2　如何获得专业图标 ..................................................................... 134
4.9　本章小结 ............................................................................ 134
Chapter 05　使用Sketch设计移动UI
5.1　移动UI的设计原则............................................................ 136
5.1.1　视觉一致性原则 ......................................................................... 136
5.1.2　视觉简易性原则 ......................................................................... 137
5.1.3　从用户的考虑角度出发 ............................................................. 137
5.2　移动界面的色彩搭配与视觉效果 .................................... 138
5.2.1　冷暖色调的对比 ......................................................................... 138
5.2.2　色彩的意向 ................................................................................. 138
5.2.3　色彩的搭配技巧 ......................................................................... 139
5.2.4　APP界面配色原则 ...................................................................... 140
5.2.5　APP UI设计的用色规范 ............................................................. 142
5.3　iOS应用界面设计规范...................................................... 142
5.3.1　Sketch的iOS UI模板 ................................................................... 143
5.3.2　模板使用的注意事项 ................................................................. 144
5.4　安卓界面及Material Design设计规范 .............................. 146
5.5　移动界面中色彩应用 ........................................................ 147
5.5.1　Sketch颜色面板的使用 .............................................................. 148
5.6　文字的创建与编辑 ............................................................ 157
5.6.1　文本的添加 ................................................................................. 158
5.6.2　文本的编辑 ................................................................................. 158
5.6.3　文本路径 ..................................................................................... 160
5.6.4　文本转换轮廓 ............................................................................. 160
5.7　使用共享样式 .................................................................... 161
5.8　文字的导出 ........................................................................ 163
5.9　实战——绘制iOS音乐播放界面...................................... 164
5.10　实战——绘制iOS社交APP界面 .................................... 168
5.11　实战——绘制iOS支付APP界面 .................................... 172
5.12　专家支招 .......................................................................... 176
5.12.1　移动界面中的文字使用技巧 ................................................... 176
5.12.2　移动界面中的色彩选择 ........................................................... 177
5.13　本章小结 .......................................................................... 178
Chapter 06　使用Sketch设计PC端网站UI
6.1　网页设计PC端和移动端的区别 ....................................... 180
6.1.1　屏幕尺寸不同 ............................................................................. 180
6.1.2　操作方式不同 ............................................................................. 180
6.1.3　网络环境不同 ............................................................................. 181
6.1.4　传感器不同 ................................................................................. 181
6.1.5　使用场景和使用时间的不同 ..................................................... 181
6.1.6　软件迭代时间和更新频率不同 ................................................. 181
6.1.7　功能设计上的区别 ..................................................................... 181
6.2.1　图标和徽章 ................................................................................. 182
6.2　扁平化设计在UI设计中的应用........................................ 182
6.2.2　圆角和折角 ................................................................................. 183
6.2.3　标签和条纹 ................................................................................. 184
6.2.4　装饰元素 ..................................................................................... 185
6.3.1　分组和取消分组 ......................................................................... 186
6.3　编辑绘制的图形 ................................................................ 186
6.3.2　编辑和变换图形 ......................................................................... 187
6.3.3　旋转图形 ..................................................................................... 187
6.3.4　蒙板 ............................................................................................. 189
6.3.4　剪刀与描边宽度 ......................................................................... 192
6.4　位图的编辑 ........................................................................ 192
6.4.1　编辑位图 ..................................................................................... 193
6.4.2　色彩校正 ..................................................................................... 195
6.5.1　阴影 ............................................................................................. 195
6.5　应用样式 ............................................................................ 195
6.5.2　内阴影 ......................................................................................... 196
6.5.3　模糊 ............................................................................................. 196
6.6　混合模式 ............................................................................ 198
6.7　组件 .................................................................................... 199
6.7.1　创建组件 ..................................................................................... 200
6.7.2　覆盖文本 ..................................................................................... 200
6.7.3　管理组件 ..................................................................................... 201
6.8　实战——绘制企业PC端网站界面 ................................... 202
6.9　实战——绘制企业PC端网站界面 .................................. 205
6.10　专家支招 .......................................................................... 215
6.10.1　理解以用户为中心 ................................................................... 215
6.10.2　界面设计中的内容与形式统一 ............................................... 215
6.11　本章小结 .......................................................................... 216
Chapter 07　UI的输出与交互设计
7.1　适配多分辨率移动界面 .................................................... 218
7.1.1　适配安卓设备 ............................................................................. 218
7.1.2　适配iOS设备 ............................................................................... 218
7.1.3　使用自适应设计插件 ................................................................. 218
7.2　实现在设备上实时预览 .................................................... 219
7.3　分享设计稿 ........................................................................ 219
7.4　交付给开发的文件 ............................................................ 220
7.5　使用Sketch切图 ................................................................. 221
7.5.1　切片图层检查器 ......................................................................... 223
7.5.2　点九切图 ..................................................................................... 224
7.6　使用Sketch标注 ................................................................. 227
7.7　设计移动交互动效 ............................................................ 230
7.7.1　了解移动设备的手势 ................................................................. 230
7.7.2　移动交互动效设计的注意事项 ................................................. 233
7.7.3　常见的动效制作软件 ................................................................. 234
7.8　使用Sketch插件 ................................................................. 237
7.8.1　插件的安装 ................................................................................. 237
7.8.2　实用的插件 ................................................................................. 238
7.9　专家支招 ............................................................................ 240
7.9.1　如何多移动界面进行标注 ......................................................... 240
7.9.2　常见角度动画效果 ..................................................................... 241
7.10　本章小结 .......................................................................... 242

本书遵守广大设计者的需求，采用循序渐进的方式指引设计者了解并掌握Sketch 4设计制作移动UI的方法和技巧。本章共分为7章，逐级渗透的讲解方法，全面的向读者讲解Sketch 4的使用。

第1章　移动UI设计师入门。主要讲解了移动UI的发展、移动UI设计师的工作流程、iOS和Android设计特色、移动UI设计师应了解的基本常识等内容。
第2章　初识Sketch。主要讲解了Sketch的安装和启动、Sketch的欢迎介绍、Sketch的主界面、Sketch的快捷键、Sketch的系统偏好设置、Sketch的标志、参考线和网格和Sketch的常见问题等内容。
第3章　使用Sketch绘制线框原型。主要讲解了线框原型的基本概念、绘制线框原型的注意事项、Sketch绘制线框原型、使用Sketch绘制线框原型和完整线框原型的绘制等内容。
第4章　使用Sketch设计图标。主要讲解了图标的设计准则、图标集的制作过程、使用Sketch插入面板、图形的布尔运算、绘制iOSAPP图标、绘制音乐应用图标和图标的源文件格式等内容。
第5章　使用Sketch设计移动UI。主要讲解了移动UI的设计原则、移动界面的色彩搭配与视觉效果、Ios应用界面设计规范、安卓界面及Material Design设计规范、移动界面中色彩应用、文字的创建与编辑、使用共享样式、文字的导出、绘制iOS音乐播放器界面、绘制iOS社交APP界面和绘制iOS支付APP界面等内容。
第6章　使用Sketch设计网站UI。主要讲解了网页设计PC端和移动端的区别、扁平化设计在UI设计中的应用、编辑绘制的图形、位图的编辑、应用样式、组件、绘制企业PC端网站界面、绘制企业PC端网站界面等内容。
第7章　UI的输出与交互设计。主要讲解了适配多分辨率移动界面、实现在设备上实时预览、分享设计稿、交付给开发的文件、使用Sketch切图、使用Sketch标注、设计移动交互特效、使用Sketch插件等内容。
本书的目的在于编写一本对读者真正有帮助的移动界面设计教材，让读者在阅读过本书以后可以轻松的掌握Sketch设计移动界面的方法。在制作移动界面的过程中起到事半功倍的作用，由于互联网的更新较快，书中所提供的网址仅供参考。

查看更多 > 图书评论

暂无评论

发表图书评论

评论标题：
评论内容：
验证码：: 看不清楚
点击刷新
: 您还没有登录，请登录后再评论。
点击“登录”

购买过本书的顾客还买过

{{data.bookName}}

￥{{data.price}}