移动UI动效设计_Principle+Sketch高效入门.pdf

Principle+Sketch高效入门CMYCMMYCYCMYK移动UI动效设计PrincipleSketch高效入门-fy.pdf 1 2018/11/13 10:09:16移动UI动效设计：Principle+Sketch高效入门.indd 12018/11/22 16:38:54内 容 简 介现在对UI设计已经有了更进一步的要求，设计师和产品经理用会“动”的产品方案提高客户的认可率。动效设计让设计师与开发人员、高层领导关于设计方案的沟通和设计意念的传达更简单、直观。但是使用如After Effects等专业软件时，新入门的设计师需要投入更多的精力去学习和调整，无法实现高效的工作和学习，本书解决了如何高效地制作动效设计稿的难题。用Sketch配合Principle软件可以高效完成设计稿的动效设计，并支持动效视频录制和Gif动图导出，为设计方案加分。本书共分8章，首先讲述了Sketch和Principle软件的基础知识和基本操作；然后深入、系统地介绍设计思维，操作具体的实例，学习动效设计流程等；最后讲解如何导出交互操作视频、设计稿和Gif图，以此提升设计稿的通过率。本书配套有教学视频、练习素材和源文件，帮助读者学以致用，迅速掌握这一设计技能。本书可作为从事UI设计行业的新入门设计师、资深UI设计师、高级UI设计师，以及产品经理、交互设计师等对动效感兴趣的设计爱好者学习。未经许可，不得以任何方式复制或抄袭本书之部分或全部内容。版权所有，侵权必究。图书在版编目（CIP）数据移动UI动效设计:Principle+Sketch高效入门/Here180编著.-北京:电子工业出版社,2018.11ISBN 978-7-121-35098-6.移.H.移动电话机人机界面程序设计.TN929.53中国版本图书馆CIP数据核字(2018)第218111号责任编辑：孔祥飞印 刷：装 订：出版发行：电子工业出版社 北京市海淀区万寿路173信箱 邮编：100036开 本：7201000 1/16 印张：12.5 字数：220千字版 次：2018年11月第1版印 次：2018年11月第1次印刷定 价：69.00元凡所购买电子工业出版社图书有缺损问题，请向购买书店调换。若书店售缺，请与本社发行部联系，联系及邮购电话：（010）88254888，88258888。质量投诉请发邮件至，盗版侵权举报请发邮件到。本书咨询联系方式：010-51260888-819，。移动UI动效设计：Principle+Sketch高效入门.indd 22018/11/22 16:38:54前 言当UI设计师完成设计稿的时候，总会感到无比的兴奋和自信，但把设计稿交给客户或开发人员时，客户却无法体会其中的设计理念，以及开发人员搞不懂其中的设计效果，此时UI设计师内心是崩溃的！为什么会出现这样的情况呢？因为我们设计的稿件是一件“死物”，无法传达出设计师的设计思想和效果。传统上设计师可以在设计稿上加上描述文字，但并不是人人都有耐心去看设计师写的长篇大论！所以设计师必须和客户或开发人员面对面沟通细节，在开发后期还要24小时跟踪页面细节，这是既费时间又低效的做法。那有什么办法解决设计的是“死物”这个难题呢？有！就是动效！本书共分为8章，使用设计工具Sketch与Principle配合，通过Sketch设计UI界面，再调用Principle软件来高效快速完成动效设计，让设计稿“活”起来！其中第1章普及了UI的设计知识和设计要点；第2章是Sketch的应用教学，让没接触过Sketch软件的新手设计师快速学会和使用；第3章是动效软件Principle的介绍和教学；第4章是用Sketch配合Principle完成我们的动效设计，包括时间延迟、点击反弹、运动曲线、Components部件、Drivers部件等重要功能的使用和学习；第4至第7章则是通过具体的实例操作，学习动效设计流程，达到学以致用的目的，让各位读者迅速掌握这一设计技能；第8章是介绍如何导出动效文件。本书适合从事UI设计行业的新入门设计师、资深UI设计师、高级UI设计师，以及产品经理、交互设计师等专业人士学习使用。通过本书，不同层次的读者都有所收获：1.新入门设计师、设计爱好者，可以学习基础的UI设计知识和动效设计方法。移动UI动效设计：Principle+Sketch高效入门.indd 32018/11/22 16:38:544 移动UI动效设计：Principle+Sketch高效入门2.UI设计师，可以学会用Sketch和Principle软件设计动效稿、录制动效视频和导出动效Gif图。3.产品经理等使用原型图的专业人士，可以学习如何简化和降低交互线框图的复杂度，方便、高效地展示产品设计方案。4.交互设计师，可以通过Principle设计简单的动效原型来解析产品的交互细节。Here180读者服务轻松注册成为博文视点社区用户（），您即可享受以下服务：下载资源：本书教学视频及资源文件，均可在“下载资源”处下载。提交勘误：您对书中内容的修改意见可在【提交勘误】处提交，若被采纳，将获赠博文视点社区积分（在您购买电子书时，积分可用来抵扣相应金额）。与作者交流：在页面下方【读者评论】处留下您的疑问或观点，与作者和其他读者一同学习交流。页面入口：http:/ 42018/11/22 16:38:54目 录Chapter 1 初识UI设计/91.1 认识移动UI/101.1.1 UI发展历程/101.1.2 如何学习UI/121.2 认识动效设计/151.2.1 什么是动效/161.2.2 动效的用途/201.2.3 动效设计要点/241.3 UI设计流程/351.3.1 UI设计师工作流程/361.3.2 UI设计师职能/381.4 认识 iOS与Android/391.4.1 关于 iOS/401.4.2 关于Android/401.5 iOS设计规范/431.5.1 界面尺寸/431.5.2 图标规范/451.5.3 字体规范/491.5.4 设计素材/521.6 本章小结/54移动UI动效设计：Principle+Sketch高效入门.indd 52018/11/22 16:38:546 移动UI动效设计：Principle+Sketch高效入门Chapter 2 用Sketch去设计/552.1 Sketch的简介/562.2 Sketch的安装/572.3 Sketch的界面/592.4 画布和图层/672.4.1 画布/672.4.2 图层/702.5 形状/712.6 文本和图片/762.6.1 文本/762.6.2 图片/822.7 符号/822.8 样式/862.9 导入和导出/872.10 本章小结/89Chapter 3 用Principle去设计/903.1 Principle的简介/913.2 Principle的界面/923.2.1 工具栏/953.2.2 检查器/983.2.3 图层/1013.2.4 绘图区/1033.2.5 预览/1043.3 持续交互/1073.3.1 Drag（拖动）/1073.3.2 Scroll（滚动）/108移动UI动效设计：Principle+Sketch高效入门.indd 62018/11/22 16:38:547Chapter1 初识UI设计目录3.3.3 Page（分页）/1103.4 动效事件/1123.5 动画/1193.5.1 动画画板调整/1203.5.2 自定义曲线/1223.5.3 属性冻结/1223.6 联动/1233.7 导入和导出/1273.7.1 文件导入/1273.7.2 文件导出/1303.8 本章小结/132Chapter 4 邮件App动效设计/133案例分析/134学习目标/134关键知识点/135案例操作/135案例小结/148Chapter 5 App引导页动效设计/149案例解释/150学习目标/150案例操作/151案例小结/160移动UI动效设计：Principle+Sketch高效入门.indd 72018/11/22 16:38:548 移动UI动效设计：Principle+Sketch高效入门Chapter 6 闹钟App设置界面/161案例解释/162学习目标/162关键知识点/162案例操作/163案例小结/173Chapter 7 直播App界面动效/174案例解释/175学习目标/175关键知识点/175案例操作/176案例小结/190Chapter 8 Principle动效导出/1918.1 Principle视频录制/1928.2 动效导出/1948.3 Mac系统App/1978.4 手机端镜像/198移动UI动效设计：Principle+Sketch高效入门.indd 82018/11/22 16:38:55初识 UI 设计Chapter 1 移动UI动效设计：Principle+Sketch高效入门.indd 92018/11/22 16:38:5510 移动UI动效设计：Principle+Sketch高效入门1.1 认识移动UI对于新入行的设计师，一直听着别人说UI，却很少有人真正了解到底什么是UI。UI是User Interface（用户界面）的简称，也称人机界面，它包括界面外观设计、人与机器交互体验设计和软件操作逻辑设计。优秀的UI界面能让用户在使用过程中的操作高效便捷，使产品服务信息高效传达，优秀的UI界面同时会让用户感到愉悦、轻松，以及有趣和快乐。1.1.1 UI发展历程众所周知，初期的操作系统是命令行操作界面，没有任何的图片和界面元素，用单纯的文本命令行的输入和输出来达到人和机器的交互。初期的操作系统是命令行操作界面直到后来发展到窗口页面的出现，初期的页面是简单、粗糙的图文排版，页面甚至是程序员自己做的，随着电脑的普及才逐渐出现了页面设计师、软件设计师，他们的工作是美化页面和软件的界面等。那时候界面是立体的，通过投影、高光具象地描绘现实物体，以此为操作线索让人学会怎样操作，典型代表就是 Windows 95系统界面。移动UI动效设计：Principle+Sketch高效入门.indd 102018/11/22 16:38:5511Chapter1 初识UI设计Windows 95系统界面UI发展的下一个时期就是拟物化的设计，通过材质、阴影、光影、渐变等，将真实的物体描绘出来，在机器上呈现出更为逼真的物体界面。利用人的现实思维的设计，将操作交互与现实世界联系起来。代表就是早期的iPhone界面，其采用了拟物化的设计风格。早期的iPhone 拟物化界面移动UI动效设计：Principle+Sketch高效入门.indd 112018/11/22 16:38:5512 移动UI动效设计：Principle+Sketch高效入门发展到目前，主流的设计风格是扁平化风格。扁平化风格并不以现实物体的外观为主，而是简约与提炼，更注重内在涵义。因为人们已经养成了基本的交互操作习惯，所以界面的简化在软件上让用户更集中在信息层面，达到信息的有效传达。扁平化风格以服务内容为主，交互更加简单、便捷，方便了动效的设计，让界面变化更多样。硬件上使手机的运行更加顺畅和稳定，使用内存更少。扁平化风格的界面1.1.2 如何学习UI盲目地学习一门技能是得不到好的效果的，就算弄懂了入门的基础知识，对怎么设计也是一知半解的。所以学习UI设计与我们在学校学习课程的道理是一样的，即由浅入深，但与学校的教学不同的是，这里笔者分享的是自己的经验，是给大家一个更清晰明了的方向。移动UI动效设计：Principle+Sketch高效入门.indd 122018/11/22 16:38:5513Chapter1 初识UI设计设计规范设计不是无章可循的，不是盲目地画画。这里说的设计规范，是指尺寸、系统要求、设计风格等。在公司里面无论是产品经理还是需求分析人员在给你一份需求文档后，我们首先要沟通的是：要做什么？是做电商海报、iOS版Ap