作者：黄方闻
出版社：人民邮电出版社
格式: AZW3, DOCX, EPUB, MOBI, PDF, TXT
动静之美 Sketch移动UI与交互动效设计详解试读：
前言
。本书适合广大初、中级UI设计师，交互设计师和产品经理等相关从业人员阅读使用，同时也适合需要学习Sketch软件的设计爱好者阅读。前言
随着移动互联网的迅速崛起，对移动产品界面的设计质量和迭代速度都有了更高的要求，市面上开始涌现出一批专门针对移动UI设计的软件，Sketch便是其中的佼佼者。Sketch因其强大的功能以及极低的入门门槛已经成为越来越多UI设计师和交互设计师的首选设计工具。UI设计和交互设计相对于其他设计而言已经不仅仅是视觉层面的需求，更多的是从用户需求和用户心理去分析思考，并在工作中经常需要将界面“动”起来。
在Sketch出现之前，我使用Photoshop作为主要的UI设计工具，当时设计一个界面，需要拉各种辅助参考线，每次新设计一个界面又得重新创建一个文件，切图也需要花很长时间……可是当时觉得一切都很自然，直到Sketch的出现。
接触到Sketch是一个偶然的机会，得益于我天生较强的好奇心，喜欢尝试一切新的事物，当时国内知道Sketch的人少之又少，但当我试着使用Sketch设计完第一个界面的时候，发现再也离不开它了。慢慢地我习惯向周围的人介绍Sketch的各种优点，从同事到朋友；也习惯在使用Sketch的几年内不断在互联网上获取和Sketch相关的一切资源，从国内到国外。
到2016年，Sketch在国内的普及度已经非常高了，关于Sketch的特点以及这款软件在UI设计方面所具备的优势，我相信随着大家对本书的深入阅读，心中会有一个答案，但是我想说的是，非常感谢选择了Sketch的你，你也应该要感谢勇于尝试新软件的自己，可以确定的是，学完Sketch，你所得到的将远大于你所付出的。
本书在编写过程中尝试使用一种不同于市面上一般软件教程的写作顺序，即采用实际工作中的设计顺序去写作，让大家在学习过程中，不仅可以掌握软件的使用方法，同时可以明白不同功能会在什么情况下使用。我希望大家在阅读完本书后不仅能掌握使用软件的技能，更能成为一名合格的UI设计师。
本书内容分为两部分：第一部分是UI界面的设计教程，大家可以在该部分中学习如何使用Sketch进行移动UI界面、图标和Apple Watch界面的设计；第二部分是交互动效教程，大家可以在该部分学习如何将几款优秀的交互动效设计软件和Sketch搭配进行动效的设计。
本书适合刚从事UI设计行业的新人、在校学生以及所有想学习Sketch和交互动效的朋友们。在本书的编写过程中，因时间和个人水平有限，如果有错漏之处敬请各位读者和前辈批评指正！
另外，特别感谢本书的编辑佘战文先生，没有你的帮助和支持，本书不可能完成；衷心感谢史晨旭、onez、张汉东、陶振兴、张钰、汤微、王铎、张玲、阁楼妖怪和慕歌为本书写的
推荐
语。还需要感谢我的父母和我的妻子刘女士，在本书写作过程中，是你们给了我坚持下去的信心。本书献给所有勇于尝试的你们。
本书所有的学习资源文件均可在线下载，扫描封底的“资源下载”二维码，关注我们的微信公众号即可获得资源文件下载方式。资源下载过程中如有疑问，可通过我们的在线客服或客服电话与我们联系。在学习的过程中，如果遇到问题，也欢迎您与我们交流，我们将竭诚为您服务。
您可以通过以下方式来联系我们。
官方网站：www.iread360.com
客服邮箱：press@iread360.com
客服电话：028-69182687、028-69182657黄方闻2016年于北京推荐
Sketch是一款非常适合UI设计师的潮流工具，而这本书不但深度讲解了Sketch的设计技巧和规范，还巧妙搭配了其他最新的互联网设计工具。可以说这是一本设计师的枕边书。史晨旭 时光创新联合创始人 工信部“中国用户体验联盟”理事
这是一本Sketch和交互动效结合的参考书，不高大上，也不小清新，但满满干货。不仅谈“怎样做（how-to）”，更告诉你“为什么（why）”。onez sketch.im创始人
本书不仅是一本简单的Sketch使用说明书，作者站在设计之“道”的角度，来帮助你活学活用，尤其对我这种程序员来说，更是福音，让我真正做到以道驭器！张汉东 资深程序员、Rubyist、《诱人的Ruby》视频作者、《Ruby原理剖析》译者
本书是Sketch和交互动效结合的参考书，为我们品牌设计师转型提供了非常好的学习资料，让我们一起跟上时代步伐。陶振兴 诺班品牌策划创始人
Sketch是UI、UE设计师常用的设计工具，在高效输出设计和辅助制作动效上有良好的表现。本书不仅详细地讲述了Sketch的基础知识，还从应用场景、规范思考和动效设计的角度进行了深刻的讨论，为想要了解学习Sketch的人带来了福音。张钰 百度高级交互设计师
身为设计师了解最流行的设计趋势以及最高效实用的设计软件是必修之课。Sketch是新晋神器，功能完备，轻量宜用。扁平化设计的流行和屏幕分辨率的提升推动了Sketch这款软件的流行。本书中有详细的基础介绍，还从流行趋势、设计规范、动效，以及更多方面进行思考分析，并总结出来分享给大家，想了解更多关于UI、UE和产品的人，此书必看。汤微 美丽说高级UI设计师
这是一本对UI界面和交互动效设计进行全面介绍的书，面向移动应用的设计师和产品经理。特别是在操作系统上有详细的介绍和分析。看完这本书，你可以在实际的工作中更好地使用移动设计的模式和基础规范。把这本书当作移动界面设计和交互设计的源泉，好好享受这本书带来的乐趣吧！王铎 MICU创始人
对于设计工作者来说，这是一本很好的工具书，它可以帮助你推进项目；而对于初学者，它则是一本很好的参考书，能在设计道路上助你一臂之力！张玲 泊藏优选首席UI设计师
当阅读完本书的内容后，在我的脑海中蹦出的第一个关键词是“实用”，第二个关键词是“方法”。当然，肯定还会有更多的关键词，等你来发现。阁楼妖怪-奚郁浩
看得出来这是一本十分用心写的书。
在移动网络日渐发达的今天，能够有一本专门讲解UI设计的启蒙书籍真是广大设计爱好者及向往UI设计同仁们的福音。本书由浅入深地帮助读者剖析了UI设计的来龙去脉，从行业发展到设计核心无一不全！不得不说这是一本能够帮助诸多迷途中渴望求学的设计师找到明亮方向的灯塔！这不仅是一本能够带你进入UI设计世界的书，更是一本能够让你读懂UI设计的书。
本书融合了作者多年的从业实战经验以及个人对UI设计的独到理解，真实地讲解了设计体验、出稿流程、理论知识和个人技巧等。更加惊喜的是本书结合实例，带领大家进入一个犹如工作的环境，通过实战更有代入感地让大家学会实践操作。一本书能够做到“动静结合”地传递知识是很难得的。
不断地学习，不断地进步，这是作为设计师不被淘汰的基本！而学习是个十分困难、长久的过程。这本书精而不枯，相信一定能够给大家带来一种新的学习感受和学习思维。
相信您仔细阅读此书后一定能与我产生共鸣！慕歌 第01章 CHAPTER 01移动UI设计师的入门
中国互联网信息中心（CNNIC）在2014年7月21日发布的数据显示，截至2014年6月，我国网民手机上网比例首次超过计算机，并且手机网民规模持续上涨，而计算机网民规模持续下降。2015年底，安卓手机的旗舰机型内存大部分达到了3GB，甚至到了4GB，且随着WIFI的进一步普及，4G网络覆盖范围的扩大以及费率的不断下调，移动设备无论从性能上还是网速上都在和传统桌面设备不断缩小差距。可以预见，对移动设备的支持，将成为所有公司的首要战略目标。对设计师产生的直接影响是越来越多的设计师转型成为移动UI设计师。
在本章中，我将和大家一起来探讨移动UI的基本知识，相信无论您是从传统的桌面UI设计师转型为移动UI设计师，还是完全从其他行业转型过来的设计师，都会对移动UI有新的体会和收获。1.1 移动UI的发展1.1.1 第一阶段：移动UI设计的目的是保证软件的可用
在2007年苹果公司推出iPhone之前，世界上的手机大部分都是键盘手机，当时智能手机的市场还是诺基亚的天下，手机键盘的第1排和第2排一般是确定键、返回键、五维导航键和电话的接听与挂断键，顶部是信号栏，菜单和退出等功能按钮位置固定在下方，如图1-1所示。大部分智能手机运行的系统为塞班S60，除此之外，市场占有率较高的智能手机系统还有微软的Windows Mobile以及黑莓的BlackBerry OS。图1-1
当时手机上功能按钮的位置基本上是固定的，特别是同一厂商的不同手机之间的操作几乎相同。正因为如此，我把手机从诺基亚换成摩托罗拉的时候适应了很长的一段时间，因为两者的确定和退出按钮的顺序是完全相反的。
在这一阶段我们得出移动UI设计的一条很重要的启发：移动UI设计需要满足的最低要求必须是可用的。试想一下，如果当时手机厂商把功能菜单设计到屏幕的顶端，用户便无法通过按键选择，从而导致这个手机不可用。1.1.2 第二阶段：从可用到易用
2007年，苹果公司发布了iPhone，如图1-2所示，号称重新定义了手机。事实上也确实如此，整个手机的正面只有一个按键（Home键），其余便是一整块屏幕。在苹果公司召开的发布会上，人们第一次看到iPhone时，整场惊叹声和掌声不断，这款完全使用触控操作，拥有流畅动效的手机彻底颠覆了人们对手机的认识。
2008年，世界上运行的第一款谷歌研发的安卓（Android）系统手机HTC Dream（G1）发布，如图1-3所示。当时的安卓系统还非常不完善，甚至连虚拟键盘都不支持。但到2009年，全球首款搭载安卓1.6操作系统的手机HTC Hero（G3）发布，如图1-4所示。安卓开始有了同iPhone OS（在2010年更名为iOS）竞争的能力，并且HTC Hero手机成为2009年度最受欢迎的手机。图1-2图1-3图1-4
在该阶段的UI设计，随着手机性能和屏幕分辨率的不断提升，界面的精细程度和动效得到了前所未有的提升。相比2007年之前运行Windows Mobile系统的触屏手机，iOS和安卓设备的手机均使用了电容屏，即使没有触控笔也能精确点击，该阶段的UI均是为触控而生，UI界面设计结合对拇指热区的研究，以及使用眼动仪等设备来科学准确地定位用户的行为习惯，无论图标还是界面都是高度的拟物设计，通过对用户生活中物体的拟真来尽可能降低新用户的学习成本。
这一阶段我们得出移动UI设计的第2个重要启发：移动UI设计在满足可用的前提下，应尽可能地做到易用。易用包括极低的学习成本，极少的思索过程以及可预见性的操作。极低的学习成本要求新用户在面对一个新事物时，能尽快上手，不需要或者尽量少地给出新手指导；极少的思索过程要求用户在使用一款软件的时候能用他已经掌握的知识知道如何操作，这一过程是很自然的、不需要花时间去思考的；而可预见性的操作是指用户在点击屏幕后出现的界面是符合他心理预期的。
这一阶段iOS和安卓的影响力越来越大，几乎垄断了整个触屏智能手机系统。1.1.3 第三阶段：内容为王的设计追求减法和好用
到2010年，PC操作系统的霸主微软推出了移动操作系统Windows Phone，如图1-5所示。全球第一款搭载Windows Phone操作系统的手机诺基亚Lumia800于2011年上市，该系统采用全新的UI——Metro UI。该界面最大的特点是由动态磁贴（Live Tile）构成，与iOS和安卓以应用为主要呈现对象不同，Metro界面强调的是信息的本身。
Windows Phone（WP）的推出是UI设计史上一个重要的里程碑，虽然Windows Phone的市场份额非常少，但是Metro界面引发人们对“内容为王”的思考。2013年苹果公司发布iOS7，如图1-6所示，将iOS的风格全面带入扁平化时代。而安卓则早在2011年发布的Android 4.0就有扁平设计的趋势，更是在2014年推出全新的设计语言Material Design，如图1-7所示，将移动UI的设计推向了一个新的时代。图1-5图1-6图1-7
在该阶段，移动UI的设计开始朝着“内容为王”的方向发展，以iOS为例，从2007年发布到2013年推出的iOS7中间已经有近7年的时间，大部分用户已经完全熟悉iOS的基本操作，此时便可以不再需要拟物化的界面来降低用户的学习成本，反而建议通过更少的视觉干扰来让用户将注意力集中在内容本身。在该阶段，手机屏幕越来越大，一些大屏手机用户已经不能单手操作，这时候移动UI设计更是同手势的运用相结合，如iOS系统的左滑出现删除界面，下滑出现搜索界面等。
这一阶段的移动UI设计更加理性和成熟，UI界面视觉元素占据界面比重越来越低，但是用户能在更少的时间获得更多的内容，并拥有了更加沉浸式的体验。由此我们得出的第3个启发：移动UI的设计在满足可用的前提下，做到了易用的同时应追求好用。
通过对移动UI的发展的大致介绍，可以看到移动UI设计追求的过程是一个从可用到易用到好用的过程，并且也注意到硬件的发展和局限同样对移动UI的设计有着至关重要的影响。
判断一套UI是否优秀，视觉方面只是高层次的部分。我们首先应关注的是这套设计是否可行，毕竟设计界面的出发点，是为了解决用户的某个问题。
大家在今后对某UI进行分析的时候，也可以从这3个层次进行思考和分析，也同样建议大家利用业余时间多关注一下移动设备硬件的发展，了解我们设计的界面运行在何种设备上，对提升我们设计水平也有着很大的积极作用。1.2 移动UI设计师的工作流程
和普通的UI设计师一样，一般来说，一个产品的开发大概包括：需求分析→交互原型→界面设计、研发→测试→上线这几个流程。各公司根据自己研发团队的习惯有所不同，但是大同小异，一个非常典型的工作流程如图1-8所示。需要注意的是，虽然移动UI设计师的工作处于工作流的一部分，但是不代表UI的工作仅限于此。图1-8
根据公司规模以及对UI定位的不同，在同一流程中UI设计师所需要做的工作也可能不同。在中小型研发团队中，很可能没有设置交互设计师岗位，这时候UI设计师有可能需要同时参与交互原型的设计。
一般来说，最有效率的模式是UI设计和程序开发同步进行，但是也有可能因为团队习惯的不同，需要UI设计走在程序开发前面。当UI设计完成后，在程序开发阶段UI设计师做的工作更多的是协助并监督程序开发人员对设计界面1∶1的实现。
建议所有的UI设计师在工作中可以适当对流程的各个节点的工作内容做一些了解，特别是产品研发前期，对需求分析得越深入，对需求文档理解得越透彻，设计出来的UI界面才能更加符合产品的定位，避免了反复修改和沟通成本，提升工作效率。而在产品上线后，应多关注用户的反馈，并自我多做总结和思考，在产品的后期版本迭代中不断对界面设计进行优化。
很多优秀的产品UI界面都是在不断迭代中才慢慢变好的。作为一名移动UI设计师，要脚踏实地地设计好每个界面，切忌好高骛远，平时应多虚心听取他人的意见，要相信没有完美的界面，永远有值得改进的空间。同时也要认真对待每一次界面的修改，尊重自己的劳动成果，对自己的设计负责。1.3 不同移动平台之间的差异
UI设计师和其他设计师不同，设计的最终效果会受很多客观因素的影响，如不同平台的差异会对设计产生一些影响。尽管从理论上来说，无论设计出什么样的界面，程序都可以实现出来，但是你设计的UI界面越符合对应平台的设计规范，越能够降低用户的学习成本，提升用户体验。另外不同平台会有自己固有的一些组件（UIkit），若能恰当地引入到你的产品中，不仅尊重了用户固有的操作习惯，也方便了程序员的直接引用，节省了开发时间。
说到移动平台，目前市场上占有率排名前3的为安卓、iOS和Windows Phone。而此三者中，安卓和iOS又占据了绝大部分的市场份额，且已经相对成熟。因此建议大家在进行UI设计的时候，优先考虑安卓和iOS平台的设计规范；而安卓和iOS之间，除非产品本身只支持安卓系统，否则建议优先考虑iOS平台的设计规范。
作为移动UI设计师，我们关注不同平台的差异，其实更多的是视觉和交互层面的差异，幸运的是，谷歌和苹果公司有分别对安卓和iOS系统编写设计规范。强烈建议任何移动UI设计师在进行UI设计之前，都一定要至少读一遍相应平台的设计规范。
设计规范在相应的开发者官网可以查找到。iOS的设计规范地址为：https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/index.html#//apple_ref/doc/uid/TP40006556-CH66-SW1（iOS Human Interface Guidelines），如图1-9所示。国内一些设计团队有将其翻译成中文，影响比较大的有腾讯ISUX团队的翻译：http://isux.tencent.com/ios8-human-interface-guidelines.html和极客学院的翻译：http://wiki.jikexueyuan.com/project/ios-human-interface-guidelines/。但是翻译毕竟有滞后性，国内的中文翻译基本上停留在iOS8的设计规范上，所以建议英文好的朋友直接阅读官方文档。
安卓虽然没有系统地设计规范，但是谷歌公司为其研发的Material Design编写了详细的设计规范，该规范的地址为http://www.google.com/design/spec/material-design/，如图1-10所示。对于英文阅读有一定困难的朋友，极客学院也已经将该规范翻译成中文，大家可以通过http://wiki.jikexueyuan.com/project/material-design/访问。图1-9图1-10
上述设计规范是对应平台的设计理论基础，本书后面所有涉及的界面、图标以及动效设计均遵循上述设计规范。
大家读完设计规范，便可更有目的性地去分析市面上上线产品的UI设计的好坏，以及这样设计的背后逻辑，也自然会清楚不同平台之间的差异。
我们同样也可以从一些跨平台的App上直观地看到不同平台的差异。一般来说，同款产品在不同平台上是否设计不同的界面取决于研发团队本身的设计理念、大的市场环境以及实现的成本和效率。团队本身的设计理念是指是否崇尚尊重整个生态的规范和秩序，大的市场环境是指该产品的核心用户是否以某一平台为主，或者多平台用户是否有相似的使用习惯，而实现成本和效率更好理解，因为任何一处的不同都会消耗更多的时间在开发上。
以Apple Music为例，图1-11～图1-13是同一版本Apple Music在iOS平台的UI界面。3个界面分别为应用的主界面、搜索界面以及功能菜单界面。图1-11图1-12图1-13
而图1-14～图1-16分别是该应用在安卓平台对应的3个界面。大家可以直观地看到最大的区别在导航上的不同。图1-14图1-15图1-16
大家可以看到在iOS平台上，导航采用的是经典的底部标签导航，而在安卓平台上，导航采用的是随着大屏手机出现而诞生的侧滑菜单（又名汉堡包菜单，Hamburger Menus），这是为了尊重不同平台的规范而进行的不同设计，还有一些细节如iOS平台上，顶部标题在标题栏的正中间，而安卓平台在左侧等。
大家再来看看微信在两大平台上的界面差异。
图1-17～图1-19是微信在iOS平台的界面，分别是聊天列表界面、列表交互界面以及设置菜单界面。图1-17图1-18图1-19
图1-20～图1-22是微信在安卓平台的界面。图1-20图1-21图1-22
大家可以看到在微信上面导航的样式是一致的，其实微信在安卓平台上也采用过侧滑菜单的样式，但是用户反馈中得到太多的否定态度，因为用户反映侧滑菜单没有底部标签菜单效率高，微信考虑到用户体验将安卓平台上的导航又重新设计成跟iOS平台一致。
但是两个平台之间，大家可以看到，iOS平台的下拉搜索功能被很完美地集成在微信iOS平台的聊天列表，而安卓平台上，搜索功能则放在顶部标题栏。iOS平台下的左滑删除交互形式也被微信的iOS版采用，而安卓平台上实现该功能则采用长按弹出框的形式。
有意思的是在设置界面，两者的设计也不同，除了iOS平台上列表右侧有右箭头而安卓平台上没有之外，两者的顺序也不同。在iOS平台上，“账号与安全”排在第1排，而安卓平台上，排在倒数第3排。这是因为相比iOS，安卓系统更容易受到攻击，安全性稍差，而导致了设计顺序的不同。
通过上面的一些简单分析，大家应该对不同平台的差异性有所了解，我们在不同平台采取何种设计方案，往往受很多因素影响，但是无论怎样，我们进行UI设计的出发点和归属便是提供良好的用户体验，让产品从可用到易用到好用。关于两个平台的差异性，在本书后面的设计实例中还会涉及，大家平时也可以用两个系统的设备分别对同一款产品进行体验和分析，相信一定有所收获。1.4 移动UI设计师应了解的基本常识
在前面的知识中，向大家介绍了移动UI的发展，移动UI设计师的工作流程以及不同平台的设计规范，相信大家对移动UI设计的基本概念已经有所了解，在学完本节之后，便可以正式开始移动UI的设计了。但是在开始设计之前，有一些基本常识还需要介绍给大家。1.4.1 移动UI设计中用到的单位
在移动UI设计中，经常会用到的单位有4种：px、pt、dp和sp，很多人对这4种单位有时分辨不清，在此做简单的介绍。
px（像素）：位图的最基本单位，也经常在描述屏幕分辨率时使用该单位。1px代表一个像素，我们所说的iPhone 6的分辨率为750px×1334px，则表示在该手机屏幕上，水平方向每行有750个像素点，垂直方向每列有1334个像素点。大家知道，iPhone 3Gs的屏幕分辨率为320px×480px，iPhone 4/4s的屏幕分辨率为640px×960px，但是两款设备的屏幕的物理尺寸一样为3.5寸。在相同物理尺寸屏幕的设备上，分辨率越高，显示效果越清晰。因为对应的PPI（每英寸拥有的像素数）也越高。PPI的计算方法相对比较复杂，大家不必深入了解，明白含义即可。
pt（磅）：专用的印刷单位，大小为1/72英寸，是一个长度单位。在iOS开发中，特别是文字，也经常使用该单位。pt和px之间有个换算单位，在PPI为72时，1pt=1px；而PPI为144时，1pt=2px。也就是说当我们使用750px×1334px的尺寸进行设计时，标注的文字尺寸给开发人员时，一般开发人员会用除以2的数值。这就是为什么本书中我们使用的设计软件——Sketch，采用1倍尺寸进行设计的原因。
dp（也称dpi，设备独立像素）：在安卓设备的开发中使用较多。以ppi为160的屏幕为标准，1dp=1px，dp和px的换算公式为dp×（ppi/160）=px。当ppi为320时，1dp=2px。为了简单起见，Android把屏幕密度分为了4个广义的大小，即低（120dpi）、中（160dpi）、高（240dpi）和超高（320dpi），大家在进行设计时，只需要对照相应尺寸进行换算即可。安卓手机的具体尺寸在后面会介绍到。
sp（可缩放独立像素）：谷歌官方推荐文字使用该单位，非文字使用dp单位。sp和dp类似，但是不同的是安卓系统里面可以设置文字大小，如果使用sp单位进行开发，则文字大小会随着系统文字大小改变，而使用dp则不会。但考虑到有时候文字大小的变化会导致界面布局发生改变，所以建议大家可以根据文字内容选择使用dp还是sp。如果是菜单和标题等文字，可以考虑使用dp，如果是大篇的文本，如新闻类和短信类等文字内容，推荐使用sp为单位。
总之，这些基本单位是构成UI设计的最基本的前提之一，要真正理解并彻底掌握最好的办法便是不断地实践，大家可以在设计后将界面导入到手机查看以便加深理解。另外我们将要学习的设计软件Sketch，有强大的插件支持，会自动进行换算，让单位的问题变得异常简单。如果大家一口气没法明白也没关系，随着我们学习的深入，再回过头来看这里，会有一种顿悟的感觉。1.4.2 常用移动设备的尺寸
1.iOS设备
iPhone从2007年面世到现在一共有11款设备，屏幕分辨率从最初的320px×480px到iPhone 6/6s Plus的1242px×2208px。其实iPhone每一款设备屏幕的选择都是有一定的逻辑的，如iPhone 2G/3G/3GS的分辨率相同，iPhone 4/4s的分辨率是上一代产品的4倍，即每个像素中长和宽各多了一倍，而iPhone 5/5s的屏幕的宽和上一代产品相同等，这些特性让开发人员无需变动太多的代码便能轻松适配iPhone的各种设备，这也是iOS平台拥有最多App且各App质量都相对较高的原因之一。
对于UI设计师来说，在设计界面时，了解iPhone各屏幕的尺寸且熟悉iOS系统本身的一些元素的尺寸对于设计合格的界面是非常有必要的，下表中列出了目前市面上所有的iPhone设备的屏幕分辨率以及相同iOS系统元素在不同设备上的尺寸。列表中元素名称所在位置如图1-23所示。图1-23
在进行iOS平台界面设计的时候，大家可以根据自己的习惯先选择一种分辨率进行设计后再进行适配，目前业内习惯使用iPhone 6/6s分辨率进行设计，因为在该分辨率下设计，往下适配与往上适配都比较方便。
2.安卓设备
安卓设备相对于iOS设备品牌和机型太多不可能一一统计，因此谷歌将市面上的所有设备按照屏幕分辨率不同分成低密度、中密度、高密度和超高密度4种类型，这样分的好处之一是系统会根据屏幕的分辨率自动判断使用多大的字号等，下表是常见的安卓设备的屏幕尺寸。需要注意的是，分辨率和屏幕大小并不一定正相关，相同ppi下分辨率越大屏幕尺寸越大，但是若ppi不同，则不一定，所以下表中左侧会有一个小屏幕、中屏幕、大屏幕和超大屏幕的分类，但是每个屏幕分类中可能出现几种分辨率的情况。
对于下表，大家无需像iOS设备尺寸表格那样完全熟悉并记住，大家只需要了解并知道这样的概念即可，实际上大部分安卓设备的屏幕长宽比为16:9，在设计中使用1920px×1080px尺寸进行设计即可。
注：以上为安卓设备SDK模拟机的尺寸。
提示
大家不用被上述如此多的尺寸所吓倒，实际上在Sketch中已经内置了相关的尺寸，在实际设计中，我们在iOS平台设计时一般以iPhone 6/6s为基准进行设计，而安卓设备众多，一般以1920 px×1080 px尺寸进行设计。1.4.3 文字设计注意事项
在iOS9设备上，系统默认的英文字体为San Francisco字体，中文字体为苹方字体。官方对中文字体没有做过多介绍，但是对英文字体San Francisco（SF字体）有详细的介绍（https://developer.apple.com/fonts/）。值得注意的是，SF字体会随着字号的变化自动调整字母之间的间距，以确保无论什么情况下都能很清楚、清晰地阅读，在前面介绍的《iOS人机交互指南》中有介绍到。但规范中是以Photoshop为例，我将其转化成Sketch的间距数值，如下表所示。
即当字体设置为16pt时，在Sketch中将字符间距设置为-0.32时阅读体验最佳。
中文虽没做如此说明，但大家在设计的时候也可以参考该表，适当地进行字符间距的调节，获取最佳的阅读体验。
安卓原生系统字体为Droid Sans Fallback字体，但是国内的ROM基本上都是第三方厂商定制而成，均对原生系统字体有所变动。大家在设计的时候使用华文黑体或者冬青黑，或者Mac系统上的黑体-简均可。
在设计界面的时候，也可以自定义字体，但是如果使用了自定义的字体，开发时必须将该字体文件放入安装包，这样会导致安装包体积变大，且自定义字体不一定符合所有人的审美，建议大家慎重使用。
为了保证移动UI界面的可读性，文字的尺寸不应低于11pt，即在iPhone 4及以上设备上，文字的尺寸应大于22px。一般正文的最佳阅读尺寸在16pt左右，并且行高一般为字体尺寸的1.2～1.5倍。以虾米音乐App为例，该界面最小文字尺寸为12pt，正文字体以16pt为主，如图1-24所示。图1-241.4.4 为触控而设计
本章第一节介绍移动UI界面发展的时候，大家应该感受到了移动UI的设计受硬件的影响很大，本书之后所有讨论的移动UI设计均是为触屏设备而设计。这便要求我们设计的界面不仅是可点击的，而且应是容易点击的。
经过科研人员对大量数据的研究，得出“最小40像素”的概念。即在Retina设备上，可点击的范围不应低于40px即20pt。否则就是难以点击到的。但随着手机屏幕越来越大，分辨率的不断提升，现在已经将该数值提升到了30pt。
一般来说，我们在设计一个按钮或者一个可点击范围时，点击区域应在30pt以上，一个比较合适的尺寸是44pt。在本书第3章介绍界面设计的时候，还会讲到这一点。若可触控区域低于40px，手指大于触控区域，很可能会发生误触情况，如图1-25所示。图1-251.4.5 从iOS9的特点看设计趋势
移动UI设计的一个重要特点便是多分辨率的适配。从iOS8开始苹果便提倡使用自适应布局。自适应布局通俗地讲便是一套界面在不同尺寸屏幕上均能得到较好的显示效果，界面根据屏幕大小自动适配呈现最佳显示效果。这就要求我们对自适应布局以及响应式设计等知识稍作了解。图1-26和图1-27分别是“大众点评App”在iPhone 5s和iPhone 6 Plus上的显示效果。这一设计思路在本书后面章节会详细介绍，在此不做展开。图1-26
试读结束[说明：试读内容隐藏了图片]