作者：李万军
出版社：电子工业出版社
格式: AZW3, DOCX, EPUB, MOBI, PDF, TXT
UI设计必修课：Sketch移动界面设计教程试读：
前言
本书遵守广大设计者的需求，采用循序渐进的方式指引设计者了解并掌握Sketch 4设计制作移动UI的方法和技巧。本章共分为7章，采用逐级渗透的讲解方法，全面地向读者讲解Sketch 4的使用。
Chapter 01 移动UI设计师入门。主要讲解移动UI的发展、移动UI设计师的工作流程、iOS和Android设计特色、移动UI设计师应了解的基本常识等内容。
Chapter 02 初识Sketch。主要讲解Sketch的安装和启动，Sketch的欢迎介绍，Sketch的主界面，Sketch的快捷键，Sketch的系统偏好设置，Sketch的标尺、参考线和网格，以及Sketch的常见问题等内容。
Chapter 03 从线框原型开始。主要讲解线框原型的基本概念、绘制线框原型的注意事项、Sketch绘制线框原型、使用Sketch绘制线框原型和完整线框原型的绘制等内容。
Chapter 04 使用Sketch设计图标。主要讲解图标的设计准则、图标集的制作过程、使用Sketch插入面板、图形的布尔运算、绘制iOS App图标、绘制音乐应用图标和图标的源文件格式等内容。
Chapter 05 使用Sketch设计移动UI。主要讲解移动UI的设计原则、移动界面的色彩搭配与视觉效果、iOS应用界面设计规范、安卓界面及Material Design设计规范、移动界面中的色彩应用、文字的创建与编辑、使用共享样式、文字的导出、绘制iOS音乐播放器界面、绘制iOS社交App界面和绘制iOS支付App界面等内容。
Chapter 06 使用Sketch设计PC端网站UI。主要讲解网页设计PC端和移动端的区别、扁平化设计在UI设计中的应用、编辑绘制的图形、位图的编辑、应用样式、混合模式、组件、绘制企业PC端网站界面等内容。
Chapter 07 UI的输出与交互设计。主要讲解适配多分辨率移动界面、实现在设备上实时预览、分享设计稿、交付给开发的文件、使用Sketch切图、使用Sketch标注、设计移动交互动效、使用Sketch插件等内容。
本书的目的在于编写一本对读者真正有帮助的移动界面设计教材，让读者在阅读过本书以后可以轻松地掌握Sketch设计移动界面的方法，在制作移动界面的过程中起到事半功倍的作用。由于互联网的更新较快，书中所提供的网址仅供参考。
参与本书编写人员有高金山、张艳飞、鲁莎莎、吴潆超、田晓玉、佘秀芳、王俊平、陈利欢、冯彤、刘明秀、谢晓丽、孙慧、陈燕、胡丹丹、李万军。由于时间仓促，书中难免有错误和疏漏之处，希望广大读者朋友批评、指正，我们一定会全力改进，在以后的工作中加强和提高。编著者 第01章 chapter01移动UI设计师入门
手机和电脑是当代社会人们接触和使用最为频繁的媒体类型之一。随着4G网络资费的下调，WiFi的进一步普及，移动设备在性能和网速上都与计算机等传统设备不断缩小差距。就目前而言，利用手机上网的比例已超过计算机。
本章知识点：
★ 了解移动UI设计的发展
★ 了解移动UI设计师的工作流程
★ 了解iOS和Android设计特色
★ 掌握移动UI设计师应了解的基本知识1.1 移动UI设计的发展
移动UI这个名词大家都不陌生了，但是移动UI从何时起，又是为什么这么火的呢? 大家接触移动UI这个名词是最近几年的事情，但是移动UI设计在设计行业一直存在。1.1.1 早期设计保证软件可用性
在2007年苹果公司推出iPhone之前，世界上的手机大部分都是以键盘为主的，当时智能手机的市场以诺基亚和摩托罗拉为主。
当时的手机键盘设计较为单一，第1排和第2排一般是确定键、返回键、五维导航键和电话的接听与挂断键，顶部是信号栏，菜单和退出等功能按钮位置固定在下方，如图1-1所示为当时主流的几款智能手机。图1-1
提示：当时大部分智能手机运行的系统为塞班S60，除此之外，市场占有率较高的智能手机系统还有微软的Windows Mobile以及黑莓的BlackBerry OS。
当时手机上功能按钮的位置基本上是固定的，尤其是同一厂商生产的不同手机之间的操作几乎相同。但不同厂商生产的手机之间却有很大不同，比如从诺基亚手机换成摩托罗拉手机需要适应一段时间，因为两者的确定和退出按钮的顺序是完全相反的。
提示：移动UI设计需要满足的最低要求必须是可用的，如果当时手机厂商把功能菜单设计到屏幕的顶端，用户便无法通过按键选择，从而导致这个手机不可用。1.1.2 中期设计保证软件易用性
早期和中期的转折点可以设定为2007年，那一年苹果公司发布了iPhone，如图1-2所示，号称重新定义了手机。
提示：提到苹果手机重新定义了手机，是因为整个手机的正面只有一个按键（Home键），其余便是一整块屏幕，这在当时是无法想象的。
在苹果公司召开的发布会上，人们第一次看到iPhone时，整场惊叹声和掌声不断，这款完全使用触控操作，拥有流畅动效的手机彻底颠覆了人们对手机的认识。
2.08年，世界上第一款运行谷歌研发的安卓（Android）系统的手机HTC Dream发布，如图1-3所示。当时的安卓系统还非常不完善，甚至连虚拟键盘都不支持。
到2009年，全球首款搭载安卓1.6操作系统的手机HTC Hero发布，如图1-4所示，并且HTC Hero手机成为2009年度最受欢迎的手机。图1-2图1-3图1-4
在该阶段的UI设计，随着手机性能和屏幕分辨率的不断提升，界面的精细程度和动效得到了前所未有的提升。
相比2007年之前运行Windows Mobile系统的触屏手机，运行iOS和安卓系统的手机均使用了电容屏，即使没有触控笔也能精确点击，该阶段的UI均是为触控而生的。
提示：UI界面设计结合对拇指热区的研究，以及使用眼动仪等设备来科学准确地定位用户的行为习惯，无论是图标还是界面都采用高度的拟物设计，通过对生活中物体的拟真来尽可能降低新用户的学习成本。
移动UI设计在满足可用的前提下，应尽可能地做到易用。易用包括极低的学习成本、极少的思索过程，以及可预见性的操作。
拟物化设计能够极大地降低学习成本，如图1-5所示。新用户在面对一个新事物时，能尽快上手，不需要或者尽量少地给出新手指导。极少的思索过程要求用户在使用一款软件的时候能用已经掌握的知识知道如何操作。图1-5
手机在使用过程中是自然的、不需要花时间去思考的，用户在点击屏幕后出现的界面是符合他心理预期的。1.1.3 后期设计保证软件实用性
到2010年，微软推出了移动操作系统Windows Phone，如图1-6所示。全球第一款搭载Windows Phone操作系统的手机诺基亚Lumia800于2011年上市。
该手机操作系统的出现打破了iOS系统的理念，以一种不寻常的方式重新诠释了手机界面设计的含义。图1-6
提示：该手机界面最大的特点是由动态磁贴构成，与iOS和安卓以应用为主要呈现对象不同，Metro界面强调的是信息本身。
Windows Phone的推出是UI设计史上一个重要的里程碑，虽然Windows Phone的市场份额非常少，但是却引发了人们对UI设计的思考。
2.13年苹果公司发布iOS 7，如图1-7所示，将iOS的风格全面带入扁平化时代。而安卓则早在2011年发布的Android 4.0就有扁平化设计的趋势，更是在2014年发布的Android 5.0中全面应用了扁平化的设计方法，如图1-8所示，移动UI设计迈向了一个新的时代。图1-7图1-8
现在移动UI的设计开始朝着扁平化和极简化的方向发展。以iOS为例，从2007年发布到2013年推出的iOS 7中间已经有近7年的时间，大部分用户已经完全熟悉iOS的基本操作，此时便可以不再需要拟物化的界面来降低用户的学习成本，反而建议通过更少的视觉干扰来让用户将注意力集中在内容本身。
现在的手机屏幕越来越大，一些大屏手机用户已经无法实现单手操作，这时候移动UI设计更是同手势的运用相结合，如iOS系统的左滑出现删除界面，下滑出现搜索界面等，满足可用的前提下，做到了易用的同时应追求好用。
提示：现在的移动UI设计更加理性和成熟，UI界面视觉元素占据界面比重越来越低，但是用户能在更少的时间获得更多的内容，并拥有了更加沉浸式的体验。1.1.4 未来UI设计的展望
通过对移动UI发展史的大致介绍，可以看到移动UI设计追求的过程是一个从可用到易用到好用的过程，并且也注意到硬件的发展和局限同样对移动UI的设计有着至关重要的影响。
提示：判断一套UI是否优秀，视觉方面只是高层次的部分。我们首先应关注的是这套设计是否可行，毕竟设计界面的出发点，是为了解决用户的某个问题。
扁平化设计从最初Windows Phone理念的提出，到2013年iOS 7的出现，并且延续到了今天，扁平化的移动UI设计潮流已经坚持了很多个年头。就像拟物化设计一样，设计风格是随着时代潮流而改变的。
现在移动UI设计正朝着极简化的方法发展着，未来在UI设计中将会使用简单的图形和文字元素构成界面。如图1-9所示为一套极简化风格的移动UI设计作品。图1-9
提示：精简设计风格会给用户一个干净、现代且功能突出的界面。想要分割、区分不同的元素，方法有很多，比如使用色块，控制间距，添加色彩和内容、适度的阴影、明快而易于聚焦的色块、充满呼吸感的间距，让不同的区块、内容都清晰地分隔在屏幕上不同的地方。1.2 移动UI设计师的工作流程
和普通的UI设计师一样，一般来说，一个产品的开发大概包括以下过程：需求分析→交互原型→界面设计、研发→测试→上线这几个流程。各个公司根据自己研发团队的习惯有所不同，但是总体来说是大同小异。一个非常典型的工作流程如图1-10所示。图1-10
但是需要注意的是，虽然从上面的流程图来看，移动UI设计师的工作处于工作流的一部分，但是不代表UI的工作仅限于此。
移动UI设计师的工作流程基本上贯穿整个项目过程，从最基本的了解用户人群，再到需求分析和细化，再到线框图和交互设计，以及最终的用户界面设计，移动UI设计师都需要参与其中。如图1-11所示为移动UI设计师在各个流程中的作用。图1-11
提示：参与到整个项目进程中，设计师能够更好地把握项目需求及其之间的层级关系，对用户特征有更为深切的理解，有利于在界面设计过程中，设计出布局合理、配色得当以及用户体验佳的作品。
通常情况下，根据公司规模以及对UI定位的不同，在同一流程中UI设计师所需要做的工作也可能不同。在中小型研发团队中，多数没有设置交互设计师岗位，这时候UI设计师还需要同时参与交互原型的设计。
一般来说，最有效率的工作模式是UI设计和程序开发同步进行，但是由于团队习惯的不同，通常情况下需要UI设计走在程序开发前面。
当UI设计完成后，在程序开发阶段UI设计师做的工作更多的是协助并监督程序开发人员对设计界面1：1的实现。
提示：建议所有的UI设计师在工作中可以适当对流程的各个节点的工作内容做一些了解，特别是产品研发前期，对需求分析得越深入，对需求文档理解得越透彻，设计出来的UI界面才能更加符合产品的定位，避免了反复修改，降低了沟通成本，提升了工作效率。
在产品上线后，不代表UI设计师工作就结束了，还应该多关注用户的反馈，并多做总结和思考，在产品的后期版本迭代中不断对界面设计进行优化。
大多数优秀的产品UI界面都不是一次成型的，而是在不断改进中慢慢变好的。作为一名移动UI设计师，要脚踏实地地设计好每个界面，平时多虚心听取他人的意见，要相信没有完美的界面，永远有值得改进的空间。1.3 iOS和Android设计特色
移动UI设计师和其他设计师不同，设计的最终效果会受很多客观因素的影响，如不同平台的差异会对设计产生一些影响。
iOS和Android是现在移动互联网的两个主流平台，如图1-12所示为iOS和Android系统界面。在设计的过程中，因为这两个平台的不同特性，往往要充分考虑设计兼容性，以满足不同平台的需求。提示：从理论上来说，无论设计出什么样的界面，程序都可以实现出来。但是设计的UI界面越符合对应平台的设计规范，越能够降低用户的学习成本，提升用户体验。图1-121.3.1 iOS的设计特色
无论是重新设计旧的应用程序或创建一个新的，都可以考虑用以下这种方式完成工作。首先要准确凸显UI元素的核心功能，并明确元素之间的相关性。其次使用iOS的主题来定义UI并进行用户体验设计。完善细节设计，并进行适当修饰。最后，保证设计的UI可以适配各种设备和各种操作模式，使得用户在不同场景下都可以使用。
提示：在整个设计过程中，要打破惯例，提出问题，做出假设，让重点内容和功能激励每个设计决策。
1.按照内容
尽管清新美观的UI和流畅的动态效果都是iOS体验的亮点，但内容始终是iOS的核心。通过以下几种方式可以确保你的设计不仅能够提升功能体验，又可以关注内容本身。
· 充分利用整个屏幕
天气应用是个绝佳范例，用漂亮的全屏天气图片呈现现在的天气，直观地向用户传达了最重要的信息，同时也留出空间呈现了不同时段的天气数据，如图1-13所示。图1-13
· 用半透明UI元素样式来暗示背后的内容
半透明的控件元素可以提供上下文的使用场景，帮助用户看到更多可用的内容，并可以起到短暂的提示作用，如图1-14所示。图1-14
提示：在iOS系统中，半透明的控件元素只让它遮挡住的地方变得模糊，看上去像蒙着一层米纸，但它并没有遮挡屏幕剩余的部分。
· 扁平化设计风格的运用
遮罩、渐变和阴影效果的运用会加重UI元素的显示效果，从而分散用户对内容的关注。相反，应该以内容为核心，扁平化风格的运用让用户界面成为内容的支撑，如图1-15所示。图1-15
2.保证清晰
确保你的应用始终是以内容为核心的另一种方法是保证清晰度。这里有几种方法可以让最重要的内容和功能清晰可见，并且易于交互。
· 使用大量留白
留白不仅可以使重要的内容和功能更加醒目、更易理解，还可以传达一种平静和安宁的心理感受，它可以使一个应用看起来更加聚焦和高效，如图1-16所示。
· 让颜色简化UI
内置的应用使用了同系列的系统颜色，这样一来，无论在深色或浅色背景上看起来都很干净和纯粹，如图1-17所示。图1-16图1-17
提示：使用一个主题色，例如日历中使用了红色，高亮了重要区块的信息并巧妙地用样式暗示可交互性，也让应用有了一致的视觉主题。
· 通过使用系统字体确保易读性
iOS的系统字体使用动态类型来自动调整字间距和行间距，使文本在任何尺寸大小下都清晰易读，如图1-18所示。
提示：无论用户是使用系统字体还是自定义字体，一定要采用动态类型，这样一来当用户选择不同字体尺寸时，系统的应用才可以及时做出响应。
· 使用无边框的按钮
在默认情况下，所有的栏上的按钮都是无边框的。在内容区域，通过文案、颜色以及操作指引标题来表明该无边框按钮的可交互性。当它被激活时，按钮可以显示较窄的边框或浅色背景作为操作响应，如图1-19所示。图1-18图1-19
3.深度层次
iOS经常在不同的视图层级上展现内容，用深度层次来进行交流，不但可以表达层次结构和位置，还可以帮助用户了解屏幕上对象之间的关系。
➢ 对于支持3D触控的设备，轻压、重压，以及快捷操作能让用户在不离开当前界面的情景下预览其他重要内容，如图1-20所示。
➢ 通过使用一个在主屏幕上方的半透明背景浮层，文件夹就能清楚地把内容和屏幕上其他内容区分开来，如图1-21所示。图1-20图1-21
➢ 通过不同的层级来展示内容，例如用户在使用备忘录的某个条目时，那么其他的项就会被集中收起在屏幕的下方，如图1-22所示。
➢ 具有较深层次的应用还包括日历，例如当用户在翻阅年、月、日时，增强的转场动画效果给用户一种层级纵深感。在滚动年份视图时，用户可以即时看到今天的日期以及其他日历任务，如图1-23所示。图1-22图1-23
➢ 当用户选择了某个月份时，年份视图会局部放大该月份时，过渡到月份视图。今天的日期依然处于高亮状态，年份会显示在返回按钮处，这样用户可以清楚地知道他们在哪儿，他们从哪里进来以及如何返回，如图1-24所示。
➢ 类似的过渡动画也出现在用户选择某个日期时，月份视图从所选位置分开，将所在的周日期推向内容区顶端并显示以小时为单位的当天时间轴视图。这些交互动画增强了年、月和日之间的层级关系，以及用户的感知，如图1-25所示。图1-24图1-251.3.2 Android的设计特色
在设计Android 界面之前，首先要先了解Android UI的设计特色，在整个设计过程中应当考虑将这些准则应用在自己的创意和设计思想中。除非有其他特殊的目的，否则尽量不要偏离。
1.漂亮的界面
无论UI界面设计如何发展，美观始终是吸引用户的首要条件，在Android UI设计当中，可以通过以下几点来实现。
· 惊喜
漂亮的界面、精心设计的动画或悦耳的音效都能带来愉快的体验。精工细作有助于提高易用性和增强掌控强大功能的感觉，如图1-26所示。
· 真实的对象比菜单和按钮更有趣
让人们直接触摸和操控应用中的对象，这样可以降低完成任务时的认知难度，并且使得操作更加人性化，如图1-27所示。图1-26图1-27
· 展现个性
人们喜欢个性化，因为这样可以使他们感受到自在和对应用的掌控力。提供一个合理而漂亮的默认样式，同时在不喧宾夺主的前提下尽可能提供有趣的个性化功能。
2.便捷的操作
由于手机的发展速度迅猛，手机的功能也逐渐强大，便捷的操作就显得越来越重要，为了使用户更快地适应手机操作，需要通过以下几点来简化界面。
· 了解用户
逐渐认识人们的偏好，而不是询问并让他们一遍又一遍地做出相同的选择。将之前的选择放在明显的地方。
· 保持简洁
使用简洁的短句。人们总是会忽略冗长的句子，如图1-28所示。
· 展示用户所需要的选项
人们在同时看到许多选择时就会手足无措。分解任务和信息，使它们更容易理解。将当前不重要的选项隐藏起来，并让人们慢慢学习，如图1-29所示。图1-28图1-29
· 让用户了解现在在哪儿
让人们有信心了解现在的位置，进行耗时的任务时提供必要的反馈，如图1-30所示。
提示：通过色彩和图形的运用，使应用中的每个页面看起来都有些不同，同时使用一些切换动画体现页面之间的关系。
· 一图胜千言
尽量使用图片去解释想法，图片可以吸引人们注意并且更容易理解，如图1-31所示。图1-30图1-31
· 实时帮助用户
试读结束[说明：试读内容隐藏了图片]