新媒体设计系列 Sketch移动UI与交互设计 视频讲解版作者： 夏志丽 出版时间：2018年版内容简介 本书通过大量的案例制作，详细地向用户介绍了Sketch在设计网页界面时的使用方法。分别针对Sketch绘制线框原型、设计图标、Android界面设计、iOS界面设计、PC端网站UI和UI的输出与交互进行了讲解。通过学习读者应该熟悉移动UI设计和PC端UI设计的规范和设计要点。同时掌握网页界面的输出以及交互动效的添加方法。目录第1章 网页UI设计入门1．1 UI设计发展史 21．1．1 早期UI设计的风格 31．1．2 中期UI设计的兴起 31．1．3 后期UI设计的发展 5知识点讲解——iOS系统 6知识点讲解——Android系统 6知识点讲解——Windows 系统 7知识点讲解——拟物化风格设计 8知识点讲解——扁平化风格设计 81．2 网页UI设计的制作流程 91．2．1 产品调研阶段 101．2．2 UI视觉设计 101．2．3 产品技术开发 111．2．4 BUG测试 121．2．5 产品上线 121．2．6 产品迭代 131．3 UI设计的注意事项 131．3．1 图稿一致性原则 13知识点讲解——字体 13知识点讲解——表单录入 14知识点讲解——鼠标手势 141．3．2 图稿准确性原则 151．3．3 布局合理化原则 161．3．4 操作合理性原则 171．3．5 系统响应时间原则 181．4 配色对于UI设计的影响 181．4．1 网页配色基本概念 18知识点讲解——网页主色 18知识点讲解——网页背景色 19知识点讲解——网页辅色 19知识点讲解——网页点缀色 201．4．2 网页配色基本方法 20知识点讲解——根据产品内容确定网页主色 20知识点讲解——根据网页主色确定配色方案 211．4．3 网页色彩搭配技巧 22知识点讲解——同色系 23知识点讲解——邻近色 23知识点讲解——对比色 25知识点讲解——互补色 251．5 本章小结 26第2章 初识Sketch2．1 绘制iOS 照片分享界面 282．1．1 Sketch的安装与启动 28操作案例——安装与启动Sketch 282．1．2 了解Sketch界面 30知识点讲解——Sketch的主界面 31知识点讲解——菜单栏 31知识点讲解——工具栏 34操作案例——自定义工具栏 342．1．3 设置Sketch的快捷键 35知识点讲解——Sketch的快捷键 35操作案例——自定义快捷键 372．1．4 添加图片、形状 39知识点讲解——Sketch插入面板 39知识点讲解——插入图片 40知识点讲解——插入形状 412．1．5 添加文本 42知识点讲解——插入文本 432．2 绘制手机登录页 452．2．1 新建和保存Sketch文件 45知识点讲解——文件的新建和保存 45操作案例——设置Sketch 的标尺 472．2．2 使用Sketch 画板 48知识点讲解——画板预设 48知识点讲解——画板检查器 502．2．3 使用Sketch 模板 51知识点讲解—— “iOS 用户界面设计”模板 522．3 本章小结 56第3 章 绘制线框原型3．1 绘制手机信息界面线框图 583．1．1 线框原型的基本概念 58知识点讲解——线框原型概念 60知识点讲解——线框原型视觉特性 613．1．2 绘制线框原型的注意事项 61知识点讲解——巧用明暗对比 63知识点讲解——不使用截图和颜色 64知识点讲解——标记第一屏高度 64知识点讲解——合理的布局和间距 653．2 绘制注册页面线框图 653．2．1 图层面板 66知识点讲解——图层面板简述 67操作案例——添加和编辑图层 68知识点讲解——选择图层 69操作案例——移动图层 703．2．2 图层类型 71知识点讲解——图层类型详解 73操作案例——变换大小 753．2．3 图层的调整 75操作案例——新建、重命名、复制和删除页面 78知识点讲解——复制、剪切和粘贴图层 79知识点讲解——图层组的检查器 803．3 绘制完整的线框原型图 833．3．1 计步App 线框图的绘制01 843．3．2 计步App 线框图的绘制02 873．4 本章小结 91第4 章 使用Sketch 绘制图标4．1 绘制iOS 11 提醒事项图标 934．1．1 矢量工具 93知识点讲解——矢量图形（形状） 95知识点讲解——点模式 95知识点讲解——编辑矢量图形 96操操作案例——矢量工具绘制箭头图标 974．1．2 路径的使用 98知识点讲解——路径 1004．2 绘制Android 照相机图标 1014．2．1 使用“形状”绘制图标 102操作案例——使用布尔运算绘制照相机图标 106知识点讲解——布尔运算 1074．2．2 使用“蒙板”绘制图标 108知识点讲解——蒙板命令 109操作案例——使用透明度蒙板制作简易图标 1104．2．3 添加阴影效果为图标添加质感 112知识点讲解——图标基本属性 1134．3 绘制极简化的Android图标 1164．3．1 Android 图标设计准则 116知识点讲解——图标设计准则 1184．3．2 图标设计的三大原则 120知识点讲解——三大原则 1224．3．3 极简化设计 123知识点讲解——极简化设计风格 126操作案例——绘制记事本图标 1274．4 本章小结 128第5章 Android UI 设计5．1 绘制Android 音乐播放器界面 1305．1．1 组件的编辑及使用 130知识点讲解——创建组件 133知识点讲解——更换文本 133知识点讲解——管理组件 134操作案例——使用组件工具绘制导航栏 1355．1．2 应用软件UI 设计 136知识点讲解——什么是应用软件UI设计 137知识点讲解——应用软件UI设计规范 138知识点讲解——软件启动UI设计 1395．1．3 移动App UI 设计 140知识点讲解——什么是App 142知识点讲解——移动UI的设计趋势 143知识点讲解——移动UI和平面UI的区别 1455．1．4 Android 系统UI设计 146知识点讲解——Android系统文字规范设计 148操作案例——绘制返回或菜单按钮 149知识点讲解——Android 系统UI 设计特色 1505．2 绘制Android 信息界面 1515．2．1 “文本”命令 152知识点讲解——添加文本 154知识点讲解——文本框 1545．2．2 “文本”检查器 155知识点讲解——文本的编辑 157知识点讲解——共享样式 159操作案例——使用共享样式绘制界面 1605．2．3 “文本”选项 161知识点讲解——文本路径 163知识点讲解——文本转换轮廓 164操作案例——转化为轮廓绘制界面元素 164知识点讲解——导出文字 165知识点讲解——应用样式 166知识点讲解——混合模式 1685．3 本章小结 169第6 章 iOS UI 设计6．1 绘制iPhone X App 界面 1716．1．1 iOS 系统UI 用户元素 171知识点讲解——顶部导航栏 173知识点讲解——标签栏和搜索栏 173操作案例——绘制iPhone X启动界面 174知识点讲解——表格视图 1766．1．2 iOS 系统UI 设计要求 177知识点讲解——确保程序可行 178知识点讲解——确保App 可以在iPhone 和iPad 中通用 178知识点讲解——基于Web 网页重新设计 1796．1．3 iOS 系统UI 设计原则 179知识点讲解——美观性 182知识点讲解——一致性 183知识点讲解——控制可行性 184知识点讲解——及时性 184知识点讲解——暗喻性 184知识点讲解——自主性 1856．1．4 iPhone X 的App UI 设计 185知识点讲解——编辑位图 188知识点讲解——iPhone X 的屏幕尺寸 190知识点讲解——iPhone X 的布局 1906．2 绘制iPhone 8 App 界面 1916．2．1 iOS App UI 设计模板 192知识点讲解——iPhone 8 的组件 193操作案例——绘制iPhone 系统视频播放界面 194知识点讲解——iPhone X 的组件 1956．2．2 iOS UI 设计规范 195知识点讲解——界面尺寸 198知识点讲解——图标尺寸 198知识点讲解——内部设计 1996．2．3 移动App 设计过程中的要点 199知识点讲解——App UI设计流程 202操作案例——绘制系统发生错误界面 203知识点讲解——App UI配色原则 2046．3 本章小结 206第7 章 PC 端UI 设计7．1 绘制网站登录界面 2087．1．1 PC 端和移动端UI 设计的区别 208知识点讲解——网页设计PC 端和移动端的区别 2117．1．2 铅笔工具和剪刀工具 213知识点讲解——铅笔工具 215知识点讲解——剪刀工具 216操作案例——设计制作设置按钮① 216知识点讲解——旋转复制 217设置按钮② 218知识点讲解——变形工具 2197．2 绘制医学网站首页 2197．2．1 PC 端UI 设计原则 220知识点讲解——以用户为中心 223知识点讲解——视觉美观 224知识点讲解——主题明确 224知识点讲解——内容与形式统一 26知识点讲解——有机整体 227操作案例——绘制“休闲空间”启动页① 2277．2．2 PC 端UI 设计要点 229知识点讲解——设计与技术相结合 231知识点讲解——视觉导向性 2327．2．3 PC 端UI 设计风格 233知识点讲解——大众化设计风格 234知识点讲解——个性化设计风格 234操作案例——绘制“休闲空间”启动页② 2357．3 本章小结 236第8 章 UI 的输出与交互设计8．1 UI 图像的输出 2388．1．1 图标的输出 238知识点讲解——适配设备 238知识点讲解——导出图层 240知识点讲解——导出和切片 2418．1．2 界面的输出 241知识点讲解——切片工具 242操作案例——为切片重命名 2458．2 UI 设计的交互 245知识点讲解——了解移动设备的手势 245知识点讲解——移动交互动效设计的注意事项 248知识点讲解——使用Xcode 模拟交互效果 2498．3 Sketch 插件的安装与使用 250知识点讲解——实用的插件 2518．4 本章小结 252 上一篇: 微信小程序项目开发实战 用WePY、mpvue、Taro打造高效的小程序 张帆 著 2019年版 下一篇: 新工科建设之路 计算机类专业规划教材 Android Studio移动开发教程 肖琨，吴志祥，张智 等编著 2
