《Sketch移动UI与交互设计视频讲解版》PDF下载

  • 购买积分:11 如何计算积分?
  • 作  者:夏志丽主编
  • 出 版 社:北京:人民邮电出版社
  • 出版年份:2018
  • ISBN:9787115485342
  • 页数:252 页
图书介绍:本书通过大量的案例制作,详细地向用户介绍了Sketch在设计网页界面时的使用方法。分别针对Sketch绘制线框原型、设计图标、Android界面设计、iOS界面设计、PC端网站UI和UI的输出与交互进行了讲解。通过学习读者应该熟悉移动UI设计和PC端UI设计的规范和设计要点。同时掌握网页界面的输出以及交互动效的添加方法。

第1章 网页UI设计入门 2

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.2UI视觉设计 10

1.2.3产品技术开发 11

1.2.4BUG测试 12

1.2.5产品上线 12

1.2.6产品迭代 13

1.3UI设计的注意事项 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 28

2.1绘制iOS照片分享界面 28

2.1.1Sketch的安装与启动 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章 绘制线框原型 58

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绘制图标 93

4.1绘制iOS11提醒事项图标 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.1Android图标设计准则 116

知识点讲解——图标设计准则 118

4.3.2图标设计的三大原则 120

知识点讲解——三大原则 122

4.3.3极简化设计 123

知识点讲解——极简化设计风格 126

操作案例——绘制记事本图标 127

4.4本章小结 128

第5章 Android UI设计 130

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.4Android系统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设计 171

6.1绘制iPhone X App界面 171

6.1.1iOS系统UI用户元素 171

知识点讲解——顶部导航栏 173

知识点讲解——标签栏和搜索栏 173

操作案例——绘制iPhone X启动界面 174

知识点讲解——表格视图 176

6.1.2iOS系统UI设计要求 177

知识点讲解——确保程序可行 178

知识点讲解——确保App可以在iPhone和iPad中通用 178

知识点讲解——基于Web网页重新设计 179

6.1.3iOS系统UI设计原则 179

知识点讲解——美观性 182

知识点讲解——一致性 183

知识点讲解——控制可行性 184

知识点讲解——及时性 184

知识点讲解——暗喻性 184

知识点讲解——自主性 185

6.1.4iPhone X的App UI设计 185

知识点讲解——编辑位图 188

知识点讲解——iPhone X的屏幕尺寸 190

知识点讲解——iPhone X的布局 190

6.2绘制iPhone 8 App界面 191

6.2.1iOS App UI设计模板 192

知识点讲解——iPhone 8的组件 193

操作案例——绘制iPhone系统视频播放界面 194

知识点讲解——iPhone X的组件 195

6.2.2iOS UI设计规范 195

知识点讲解——界面尺寸 198

知识点讲解——图标尺寸 198

知识点讲解——内部设计 199

6.2.3移动App设计过程中的要点 199

知识点讲解——App UI设计流程 202

操作案例——绘制系统发生错误界面 203

知识点讲解——App UI配色原则 204

6.3本章小结 206

第7章 PC端UI设计 208

7.1绘制网站登录界面 208

7.1.1PC端和移动端UI设计的区别 208

知识点讲解——网页设计PC端和移动端的区别 211

7.1.2铅笔工具和剪刀工具 213

知识点讲解——铅笔工具 215

知识点讲解——剪刀工具 216

操作案例——设计制作设置按钮① 216

知识点讲解——旋转复制 217

设置按钮② 218

知识点讲解——变形工具 219

7.2绘制医学网站首页 219

7.2.1PC端UI设计原则 220

知识点讲解——以用户为中心 223

知识点讲解——视觉美观 224

知识点讲解——主题明确 224

知识点讲解——内容与形式统一 226

知识点讲解——有机整体 227

操作案例——绘制“休闲空间”启动页① 227

7.2.2PC端UI设计要点 229

知识点讲解——设计与技术相结合 231

知识点讲解——视觉导向性 232

7.2.3PC端UI设计风格 233

知识点讲解——大众化设计风格 234

知识点讲解——个性化设计风格 234

操作案例——绘制“休闲空间”启动页② 235

7.3本章小结 236

第8章 UI的输出与交互设计 238

8.1UI图像的输出 238

8.1.1图标的输出 238

知识点讲解——适配设备 238

知识点讲解——导出图层 240

知识点讲解——导出和切片 241

8.1.2界面的输出 241

知识点讲解——切片工具 242

操作案例——为切片重命名 245

8.2UI设计的交互 245

知识点讲解——了解移动设备的手势 245

知识点讲解——移动交互动效设计的注意事项 248

知识点讲解——使用Xcode模拟交互效果 249

8.3Sketch插件的安装与使用 250

知识点讲解——实用的插件 251

8.4本章小结 252