UI设计可用性及视觉要点课件.ppt

1、1DesignUI设计基础课程UI设计基础课程2Contents目录UI的概念、设计流程及设计原则iOS 8 UI界面设计在优秀设计中学习UI3Part OneUI的概念、设计流程、设计原则01014UI即User Interface（用户界面）的简称。UI设计则是指对软件的人机交互、操作逻辑、界面美观的整体设计。好的UI设计不仅是让软件变得有个性有品味，还要让软件的操作变得舒适、简单、自由、充分体现软件的定位和特点。5从心理学意义来分，界面可分为感觉（视觉、触觉、听觉等）和情感两个层次。用户界面设计是屏幕产品的重要组成部分。界面设计是一个复杂的有不同学科参与的工程，认知心理学、设计学、语言学

2、等在此都扮演着重要的角色。用户界面设计的三大原则是：置界面于用户的控制之下；减少用户的记忆负担；保持界面的一致性。6UI设计从工作内容上来说分为3个方向。它主要是由UI 研究的3个因素决定的，其分别是研究工具，研究人与界面的关系，研究人。研究工具研究界面-图形设计师Graphic UI designer美工，但实际上不是单纯意义上的美术工人，而是软件产品的产品外形设计师。这些设计师大多是美术院校毕业的，其中大部分是有美术设计教育背景，例如工业外形设计，装潢设计，信息多媒体设计等。7人与界面关系在图形界面产生之前，长期以来UI设计师就是指交互设计师。交互设计师的工作内容就是设计软件的操作流程，树

3、状结构，软件的结构与操作规范等。一个软件产品在编码之前需要作的就是交互设计，并且确立交互模型，交互规范。8研究人任何的产品为了保证质量都需要测试，软件的编码需要测试，自然UI设计也需要被测试。这个测试和编码没有任何关系，主要是测试交互设计的合理性以及图形设计的美观性。测试方法一般都是采用焦点小组，用目标用户问卷的形式来衡量UI设计的合理性。9一致性设计目标软件中往往存在多个组成部分（组件、元素）。不同组成部分之间的交互设计目标需要一致。元素外观交互元素的外观往往影响用户的交互效果。同一个（类）软件采用一致风格的外观，对于保持用户焦点，改进交互效果有很大帮助。遗憾的是如何确认元素外观一致没有特别

4、统一的衡量方法。因此需要对目标用户进行调查取得反馈。交互行为在交互模型中，不同类型的元素用户触发其对应的行为事件后，其交互行为需要一致。对于交互行为一致性原则比较极端的理念是相同类型的交互元素所引起的行为事件相同。但是我们可以看到这个理念虽然在大部分情况下正确，但是的确有相反的例子证明不按照这个理念设计，会更加简化用户操作流程。10设计流程确认目标用户在软件设计过程中，需求设计角色会确定软件的目标用户，获取最终用户和直接用户的需求。用户交互要考虑到目标用户的不同引起的交互设计重点的不同。采集交互方式不同类型的目标用户有不同的交互习惯。这种习惯的交互方式往往来源于其原有的针对现实的交互流程、已有

5、软件工具的交互流程。当然还要在此基础上通过调研分析找到用户希望达到的交互效果，并且以流程确认下来。提示引导用户软件是用户的工具。因此应该由用户来操作和控制软件。软件响应用户的动作和设定的规则。对于用户交互的结果和反馈，提示用户结果和反馈信息，引导用户进行用户需要的下一步操作。11可用性可理解软件要为用户使用，用户必须可以理解软件各元素对应的功能。如果不能为用户理解，那么需要提供一种非破坏性的途径，使得用户可以通过对该元素的操作，理解其对应的功能。可达到用户是交互的中心，交互元素对应用户需要的功能。因此交互元素必须可以被用户控制。用户可以用诸如键盘、鼠标之类的交互设备通过移动和触发已有的交互元素

6、达到其它在此之前不可见或者不可交互的交互元素。要注意的是交互的次数会影响可达到的效果。当一个功能被深深隐藏（一般来说超过4层）那么用户达到该元素的几率就大大降低了。可达到的效果也同界面设计有关。过于复杂的界面会影响可达到的效果。可控制软件的交互流程，用户可以控制。控制功能的执行流程，用户可以控制。如果确实无法提供用户控制，则用能被目标用户理解的方式提示用户。12必备品质1.清晰清晰是用户界面设计必须要具备的一条品质，如果说你的界面设计的很模糊，用户就无法在其中体验到较好的使用体验，这样会影响用户的整体印象。2.简洁UI设计除了清晰还不够，还需要简洁，看上去一目了然。如果界面上充斥着太多的东西，

7、会让用户在查找内容的时候比较困难和乏味，而简洁的画面就能很好的解决这个问题。3.熟悉这里说的熟悉是只在设计UI的时候，要遵守一定的设计规范，就如有下划线的字符是有超链接的、叉号就是要退出或者删除，这样用户在使用的时候不但有熟悉的感觉，而且便于操控。4.响应良好的用户界面设计一定要响应迅速，不能让用户产生一种响应较慢的感受。而且界面应该有提醒的功能，让用户了解到一些反馈信息。5.一致在设计UI时，保持界面风格的一致性也是整个应用设计中很重要的环节，一致的风格不会让用户有错愕感。6.美观美好的事物总会让人有种愉悦之感，在页面设计的时候也要注重美观度的加强。13侧重流程 一个产品设计师的心得分享UI

8、产品设计 心得14ABCPre-processDrawingsPicturesMoodboardWorkWireframesCanvasFoldersUser-testingPost-processDiagramGuidelines15Pre-processDrawingsPicturesMoodboard可以专门用一个笔记本来收集你的创意，不时的翻翻，可能会找到一些非常有趣的旧想法，你可以根据这些旧点子想一些新创意。16Pre-processDrawingsPicturesMoodboard一位艺术家必定是一位收藏家。他懂得品味藏品，而不是单纯的贮藏，他们懂得有选择的去收藏。他们会根据自己内

9、心的喜好去收藏东西。还有一项前期要做的工作就是要收集图片，收集图片的方法可能有好几百种，我还是习惯最Old-School的方法Dropbox文件夹分类，每当有新项目的时候，我就会看看这些图片，用来寻找灵感。17Pre-processDrawingsPicturesMoodboardDribbble，Behance，Pttrns，Pinterest我们有很多可以寻找灵感的地方。而且在这些网站中你很容易找到和你的项目相关的作品，多去看看，你可能会从别人的经验中学会解决问题。当我开始新项目的时候，我总会准备四个文件夹PSD，屏，资源，灵感，我会把和这个项目相关的东西全部按照下面分类丢到文件夹里面。1

10、8Pre-processDrawingsPicturesMoodboard19不必在乎线框图的质量线框图的作用就是让彼此更好的理解目的，而不是最终结果。线框图能够帮助架构层级，让你了解大概需要多少屏界面。设计师必须懂得去“敏捷”设计，如果真的太在意线框图的细节，那么整个设计流程会拉长，设计师应该学会取舍。WorkWireframesCanvasFoldersUser-testing20PSD大尺寸画布最好用PS做一个大尺寸画布，用来承载流程中的一些细节。大尺寸画布不是用来画出整个应用的UI套件，而是用来记录元素在不同阶段的不同状态也就是流程。设计复用很方便开发看到这种东西也会工作的更快。Wor

11、kWireframesCanvasFoldersUser-testing所有屏都放入一个PSD中在设计移动应用时，我喜欢把整个流程中所有屏的界面设计全部装入到一个PSD中整体的对比效果会更好，也更容易让他人理解你的设计理念，元素的复用也非常方便。21和朋友沟通我非常重视那些能够给出专业反馈意见的人。留意他们的反应和初次看到你的设计时的想法，这未尝不是一种用户测试。而且多聆听别人的意见，能够让你从不同角度看待问题。WorkWireframesCanvasFoldersUser-testing22Post-processDiagramGuidelines图示用来暗示交互流程，且能充分感受到视觉设计

12、的细节。23Post-processDiagramGuidelines视觉规范完成了设计工作后，要做的事情就是做出一份视觉规范，然后检查一下整体的视觉层级。UI 套件套件UI套件非常重要，尤其对于工作对接来说，能够保持视觉高度的一致性。配色表字体表要完善的记录LOGO使用的字体，标题使用的字体等等，对于开发会大有裨益，个人复查作品时也会很有帮助。24UI设计新手不可错过的7条法则25法则1：光线来自天空这可能是学习 UI 设计时，最容易忽略却又极为重要的一点了:光线来自天空。光线总是从天空（上方）来的，从下面照上来的光看起来会非常诡异。当光线从天上照下来的时候，物品的上端会偏亮，而下方会出现阴

13、影。上半部分颜色浅一些，而下半部分深一些。26从下面打一束光到人脸上是不是看起来很渗人？UI 设计也是同理。我们的屏幕是平的，但是我们可以通过一些艺术手法让它看起来是 3D 的，在每个元素的下方加一些阴影。27就拿这个按钮举例，这是一个相对“扁平化”(flat)的按钮，但依然可以看出一些光线变化的细节:没有按下去的按钮底部边缘更暗，因为没有光线照到那里。没有按下去的按钮上半部分比下半部分稍微亮一些。这是在模仿一个略有弧度的表面（见侧视图）。没有按下去的按钮下方有一些细微的阴影，在放大图中看得更清楚。按下去的按钮整体颜色都更暗了，但下半部分的颜色依然比上面深。这是因为按钮在屏幕的平面上，光线不容

14、易照到。也有人说，在现实中，按下去的按钮颜色更深，因为手遮挡住了光线。这么一个简单的按钮就有 4 种不同的光线变化。实际上，我们可以把这种原则运用到各处。28iOS 6 有点过时了，但还是学习光线不错的案例。这张图是 iOS 6“勿扰模式”和“通知”的设置，看看上面有多少种不同的光线变化。控制面板的上边缘有一小块阴影。“开启”滑动槽上部也有阴影。“开启”滑动槽的下半部分，反射了一些光线。按钮是突出的，上边缘较亮，因为是与光源垂直的，接收了大量光线，折射到你的眼睛中。因为光线角度的问题，分割线处出现了阴影。29通常会内嵌的元素：文字输入框按下的按钮滑动槽单选框（未选择的）复选框通常会外凸的元素:

15、未按下的按钮滑动按钮下拉控件卡片选择后的单选按钮弹出消息等等，现在不是追求扁平化的设计吗？iOS 7 引发了科技界对于“扁平化设计”(flat design)的追求。也就是说图标是平的，不再模仿实物而外凸或内凹，只有线条和单一颜色的形状。30我很喜欢这种干净、简洁的风格，但是我认为这种趋势不会长久。通过细微的变化模拟出 3D 的效果非常自然，不会被完全取代的。在不久的将来，我们很可能会看到半扁平的 UI（这也是我推荐你使用的设计风格）我把它称为“flatty design”，依然非常干净简洁，但是也有一些阴影，有轻点、滑动、按下操作的提示。31现在，Google 也在各个产品上推行他们的 Ma

16、terial Design，提供一种统一的视觉设计语言。Material Design 的设计指导为我们展示了它如何运用阴影表现不同的层次。这也是我所认同的类型。用现实世界的元素来传递信息，关键在于:细微。你不能说它没有模仿现实世界，但也绝不是 2006 年的网页风格，没有纹理，没有梯度，更没有光泽。我认为“flatty”是未来的方向。扁平化？早晚会过时的。32法则2：黑白优先在上色前用灰度模式设计可以简化大量的工作，让你更加关注空间和元素布局。设计师现在都喜欢“移动优先”的概念，这就意味着你要先考虑好在手机上如何显示页面，然后才考虑在超清的 Retina 屏幕上的显示效果。这种限制非常好，能

17、够帮你理清思路。先解决一些棘手的问题（在小屏幕上显示）。然后再解决简单的问题（在大屏幕上的可用性）。我希望你先用黑色和白色设计，先把复杂的问题解决了。在不借助颜色帮助的情况下把 app 做得美观易用。最后再有目的地上色。33这种方法能保持 app“干净”、“简洁”。加入过多的颜色很容易毁掉简洁性。“黑白优先”会促使你关注空间、尺寸和布局这些更重要的问题。先来看一些经典的用灰度模式设计的页面。34“黑白优先”法则并不适用于所有情况，比如运动、卡通等有着鲜明特色的设计就需要好好地运用各种颜色。不过，大部分app并没有这样鲜明的特点，只要保持干净和整洁就好，绚丽的颜色被公认是很难设计的，所以，还是先

18、用黑色和白色来吧。3536第二步:如何上色上色最简单的方法就是只加一种颜色。在灰色的基础上只加一种颜色可以简单快速的吸引眼球和注意力。你也可以更进一步，在灰色的基础上加两种颜色，或者添加统一色调的多种颜色。37实践中的颜色法则什么是色调？网页主要用的是十六进制 RGB 表。但 RGB 不是个好的颜色设计框架，HSB 模式会更好用，其中 H(hues)表示色相，S(saturation)表示饱和度，B（brightness）表示亮度。HSB 模式是比 RGB 模式更适合我们看待颜色的方式。如果你对这方面不太了解，以下是一些 HSB 模式简单的入门知识。通过调整单一色相的饱和度和亮度，你可以生成各

19、种不同的颜色深色、浅色、背景色、强调的地方、吸引眼球的地方等，但是又不会很扎眼。使用一种或两种基础色调的多种颜色是强调和淡化某些元素，而又不把设计搞得一团糟的最可靠的方法。38关于颜色的其它几点建议颜色是视觉设计中最复杂的。我从复杂的理论和长期的实践中挑出了一些好的建议送给你:小工具箱：不要用纯黑色：在现实世界中几乎见不到绝对的黑色。调整不同的饱和度可以增加设计的丰富程度，也更接近现实世界。Adobe Color CC：寻找、调整、创造颜色组合的绝佳工具。在Dribble通过颜色搜索：寻找某种颜色如何搭配的好方法，非常实用，如果你已经决定了要用那种颜色，可以通过颜色搜索看看世界顶级的设计师是如

20、何配色的。39法则3：增加空白空间40为了让UI看起来更加有设计感，留出一些空白的空间。在第 2 条法则中，我说到了黑白优先的原则，让设计师在考虑颜色之前先想想空间和布局，那么现在我们就来说说如何安排空间和布局。HTML（超文本标记语言Hypertext Markup Language，是用于描述网页文档的一种标记语言）的默认版式是这样的：所有东西都堆在屏幕上，字号、行距都很小，段与段之间有一些间隔，但是也不是很大。这么布局实在是太难看了。如果你想设计出精美的UI，那就需要留出更多空白的空间。41留白空间、HTML 和 CSS（层叠样式表单），是一种用来表现HTML或 XML 等文件样式的计算

21、机语言。如果习惯用 CSS 来调整布局，那最好改掉这个坏习惯，因为 CSS 默认是没有留出空间的。试着把空白当作默认状态，在空白页面添加各种元素。从没有修饰过的 HTML 开始，先做好内容，然后再做排版。下图是 Piotr Kwiatkowski 设计的一个音乐播放器。42请注意左侧的菜单栏。字号是 12px，行间距有文字的两倍高。再看看列表的名称，“PLAYLISTS”和下划线之间有 15px 的空白，播放列表名称之间还有 25px 的间距。在顶部导航栏也有很大的空间，搜索图标和“Search all music”占到了导航栏高度的 20%。43留白的空间收到了良好的效果，不同的元素有机的组

22、合在一起，使得这个页面成为最好的音乐播放器 UI 之一。大量的空白可以把混乱的界面做得简洁美观，比如这个论坛：44 或者维基百科：很多人认为在维基百科的这个新页面上，很多功能找不到了，但是你不能否认这是学习页面设计的一个好案例。在行之间留出空间。在各个元素之间留出空间。在各组元素之间留出空间。分析一下哪些是可行的。45法则4：学会在图片上呈现文字如果你想要成为好的 UI 设计师，你必须学会在图片上美观地呈现文字。优秀的设计师在这方面做得都不错，而水平较低的设计师往往在这方面也比较差，甚至完全不会。在学习了这部分以后，相信你会有很大的提升。46方法0：直接在图片上放文字直接在图片上放文字时，有几

23、点需要非常注意：图片应该比较暗，而且颜色不能有太大的反差。文字必须是白色的，我知道你也能找到用其它颜色的案例。但是我觉得，你最好还是用白色。在不同屏幕，不同尺寸的窗口调试页面，确保各种情况下文字都是清晰、易于辨识的。上面这 3 个方面调整好就 OK 了，不要再做其它处理。47方法1：暗化整张图片可能在图片上放文字最简单的方法就是暗化整张图片，如果原图颜色不够深，你可以用半透明的黑色在上面覆盖一层，比如下面这个案例就加了一层不透明度 35%的黑色。48如果你直接放原图，底色太亮，和文字的反差不够明显，看不清文字。类似的方法同样适用于小图。49加一层黑色是最简单、普适性最强的。当然你也可以用其它合

24、适的颜色，比如这样：50方法2：给文字加个框这是一种简单有效的方法。在白色文字下方加上一个略透明的黑色方块，就可以放在各种各样的图片上了，而且显示效果非常清晰。当然，你也可以放别的颜色，只是需要小心谨慎。51方法3：虚化图片虚化图片是增加文字易读性的好方法，把文字下方的图片虚化了，同时把虚化部分亮度调低。iOS 7 用毛玻璃的效果虚化了背景52虚化图片的方法也有局限性，你需要确保在不同屏幕上图片尺寸调整后，文字依然是在虚化的区域上的。53看看下面这个例子，你能看清小标题吗？真不知道这样的设计是怎么通过审核上线的。54方法4：底部褪色所谓底部褪色是将图片的下边缘变暗一些，然后在放上白色的文字。这

25、是一种非常有独创性的方法，我不知道在 Medium 之前有没有人用过，但我是先在 Medium 上看到的。乍一看，你可能觉得这就是把文字放在了图片上。其实不然，图片上有一些非常细微的变化，中间完全没有黑色覆盖，而底部有不透明度大约 20%的黑色覆盖在上面。这样的变化很难看出来，但确实存在，而且确实提高了文字的可辨认性。此外，Medium 还给文集图片上的文字加了些许阴影，进一步提高了文字的易读性。最终的效果就是 Medium 可以把任何文字放在任何图片上，阅读体验非常好。有人可能会问了，为什么是把图片的底部变暗呢？为什么不能是图片的其它区域？要回答这个问题，请看法则1：光线来自天空。光线从上面

26、照下来，图片的上方亮一些，而底部较暗，看起来更自然。55此外，你还可以把虚化和底部褪色结合起来，做出底部虚化的效果，比如下面这张图的效果：56方法5：把图片部分区域的光线变得更柔和Elastica 的博客的题图并不是太暗，而且对比都较强。为什么文字的辨识度还这么高呢，就像下面两张图显示的这样：57这里实际上是把图片局部区域的光线变得更柔和，突出了文字。如果我们在浏览器上缩小 Elastica 博客，会看出到底发生了什么。在图片左下角有一块阴影区域，文字置于其上，就很容易辨认了。这可能是在图片优雅呈现文字最细微的一种方法。我还没在别处见过，保存下来，说不定将来什么时候就用到了。58法则5：做好强

27、调与弱化把文字设计得又美观又得体通常就是通过放大或缩小文字，做出反差的效果。我认为，UI 设计最困难的地方就在于文字的装饰，因为设计文字时需要考虑的因素太多了：字号颜色字体粗细大小写斜体字母间距页边空白（准确的说不是文字的一部分，但是容易影响阅读时的注意力，所以也算在这个列表里了）下划线 现在基本上等同于超链接了，我觉得你还是不要挑战人们的常识比较好。文字背景色 这个有时候也被当作超链接，只不过不是那么常见。就我个人经验来说，当我觉得一段文字设计的不好时，通常不是因为用了大写字母，或者颜色太重，而是因为各种要素的搭配出了问题。强调和弱化你可以把所有的文字样式分成两类：增强可读性的样式：大字号、

28、粗体、大写等；减弱可读性的样式：小字号、与背景对比不明显、空白较少等。59上图“Material Design”这个标题就很突出：字号大、反衬明显、字体较粗60上图页脚的字就是弱化处理的，字号小、反衬不明显、字体较细我认为文字设计的核心在于：标题是唯一需要全部强调的元素，其它的部分则应该将强调与弱化结合使用。如果网页上某个元素需要强调，把强调和弱化结合在一起，可以避免整个页面看起来太有压迫感，同时又让各个元素的呈现效果恰到好处。61上面这张 BluHomes 的首页堪称是这方面的典范：上方文字较大，突出显示，但是用了小写字母。没有给人强烈的压迫感。网页上的数字字号较大，是网页上的重要信息。但是

29、请注意，数字的字体很细，与背景色对比也不明显；而数字下方的单位虽然写得很小，却全部加粗，用大写字母。这就是设计中的平衡。62通常情况下，改变字体大小、大小写、粗细时会改变文字所占空间的大小，让人们理解鼠标正悬停在这里。此外，下面这些要素也能够影响人们的感受：文字颜色背景色阴影下划线细小的动画上升、下降等装饰文字是非常难的，但是每当我感到“这些文字不可能再变好看时”，我的判断都是错的。我需要做的就是不断优化，不断尝试。所以想开点吧，如果你设计出来的文字不好看，不要担心，你需要不断地提升自己的能力，让自己变得更好。63法则6：只用合适的字体有些字体很不错，就用它们吧。有的网站很有个性，会用到比较特

30、别的字体。但是，大多数产品的 UI 设计只要保持干净、简洁就可以了。所以，把那些太花哨的字体放到一边吧。我希望你把这些字体下载下来，在你开始项目设计之前，浏览一下它们。64Ubuntu（上图）字体偏粗，对于有些 app 来说太张扬了，但是对于大多数 app 来说还是不错的。在 Google Fonts 上可以找到.65Open Sans非常易于辩读，是一款很流行的字体，用在正文非常合适，在 Google Fonts 上也能找到。66Bebas Neue适合作标题，都是大写字母，在 Fontfabric 上能找到，这个网站上还有一些 Bebas Neue 的应用实例。67Montserrat只有

31、两种粗细，但也足够了。是 Gotham 和 Proximate Nova 最好的免费替代品，但不如那两种好。在 Google Fonts 上能找到。68Raleway适合作标题，但不适合用于正文。有一个极细的版本（上图没有展现），在 Google Fonts 可以找到。69Cabin在 Google Fonts 可以找到。70Lato在 Google Fonts 可以找到。71PT Sans在 Google Fonts 可以找到。72Entypo Social一个社交网络图标集，在 E 上能找到。73这里还有其它一些资源：Beautiful Google web fonts有Google Fo

32、nts的运用实例，我经常在这里找灵感。FontSquiirrel收集了不少可以免费商用的好字体。Typekit如果你用Adobe Creative Cloud（也就是用Photoshop或Illustrator等），你就可以从Typekit中获得包括Proximate Nova在内的大量字体。74法则7：像艺术家一样偷师我第一次坐下来试着设计按钮、图标、弹窗等各个 app 元素时，我感到我对于什么是“好”知之甚少。但是我也很幸运，我并不需要完全设计全新的 UI，因为有很多优秀的作品可以借鉴。下面列出一些资源，肯定会对你的设计非常有用(按照重要性从高到低排列)1.Dribbble这个专为设计师而

33、做的网站集合了网上最好的 UI 设计作品，在 Dribbble 上你能找到几乎各种类型的案例。Victor Erixon有着非常明显的个人风格，非常厉害。他的作品很漂亮、简洁，扁平设计。他做 UI 设计师已经 3 年了，是这方面数一数二的人才。75Focus Lab这些人是 Dribbble 中的名人，他们的作品非常多样化，绝对是一流的。76Focus Lab这些人是 Dribbble 中的名人，他们的作品非常多样化，绝对是一流的。772.Flat UI Pinboard这里面有一些特别棒的手机 UI 设计，你能找到很多精美的 UI 设计实例。783.Pttrns这里面有大量 app 截屏，它

34、的一大好处在于，它是按照 UX 模式分类的，因此，你在搜索你手头正在做的这一类作品时非常方便。我坚定地认为每个艺术家初期都该像鹦鹉一样，不断的模仿和学习，直到能把顶尖的作品模仿得惟妙惟肖，然后再开始找到自己的风格，引领新的潮流。所以，像个艺术家一样偷师吧！79Part TwoiOS 8 UI界面设计在优秀设计中学习UI0 02 2802.1 为iOS而设计（Designing for iOS）iOS 的革新关键词如下：遵从：UI能够更好地帮助用户理解内容并与之互动，但却不会分散用户对内容本身的注意力。清晰：各种大小的文字应该易读，图标应该醒目，去除多余的修饰，突出重点，很好地突显了设计理念。深

35、度：视觉的层次和生动的交互动作会赋予UI新的活力，不但帮助用户更好理解新UI的操作并让用户在使用过程中感到惊喜。812.1.1 以内容为核心（Defer to Content）虽然明快美观的UI和流畅的动态效果是iOS体验的亮点，但内容始终是iOS的核心。这里有一些方法，以确保你的设计能够提升你的应用功能体验并关注内容本身。a，充分利用整个屏幕天气应用是最好的例子：漂亮的天气图片充满全屏，呈现用户所在地当前天气情况这最重要的信息，同时也留出空间呈现了每个时段的气温数据。82b，尽量减少视觉修饰和拟物化设计的使用UI面板、渐变和阴影有时会让UI元素显得很厚重，致使抢了内容的风头。应该以内容为核心

36、，让UI成为内容的支撑。83c,尝试使用半透明底板半透明的控件比如控制中心关联了使用场景，帮助用户看到更多可用的内容，并可以起到短暂的提示作用。在iOS中，透明的控件只让它遮挡住的地方变得模糊看上去像蒙着一层米纸一样它并没有遮挡屏幕剩余的部分。842.1.2 保证清晰度（Provide Clarity）保证清晰度是另一个方法，以确保你的应用中内容始终是核心。以下是几种方法，让最重要的内容和功能清晰，易于交互。a,使用大量留白留白让重要内容和功能显得更加醒目。此外，留白可以传达一种平静和安宁的视觉感受，它可以使一个应用看起来更加聚焦和高效。85b,让颜色简化UI一个主题色比如在记事本中使用的黄色

37、让重要区域更加醒目并巧妙地表示交互性。这同时也给了一个应用一个统一的视觉主题。内置应用使用家族化的系统颜色，无论在深色和浅色背景上看起来都干净，纯粹。86c,通过使用系统字体确保易读性iOS的系统字体自动调整行间距和行的高度，使阅读时文本清晰易读，无论何种大小的字号都表现良好。无论你是使用系统或是自定义字体，务必使用动态型，这样你的应用可以在用户选择不同字号时做出应对。87d,使用无边框的按钮默认情况下，所有bar上的按钮都是无边框的。在内容区域，无边框按钮以文案、颜色以及操作指引标题来表明按钮功能。当按钮被激活时，该按钮呈现高亮的浅色状态来作为操作响应。882.1.3 用深度来体现层次（Us

38、e Depth to Communicate）iOS经常在不同的层级上展现内容，用以表达分组和位置，并帮助用户了解在屏幕上的对象之间的关系。通过使用一个在主屏幕上方的半透明背景浮层来区分文件夹和其余部分的内容。892.2适应性和布局(Adaptivity and Layout）2.2.1 在不同环境提供良好体验（Provide a Great Experience in Each Environment）当你使用自适应来开发UI时，你可以保证UI跟随显示环境变化而适当地响应。遵照这些指南，你可以给用户良好的设备响应体验。a,在所有环境下都保持对主体内容的专注b,避免布局上不必要的变化c,如果你

39、的应用只在一个方向上运行，那么请直接一点 避免提示人们旋转设备的提示UI出现 支持同一个方向上的变化d,如果你的应用将设备方向翻转视为用户输入（的一种指令），那么就按照程序设定的方式来响应设备翻转902.2.2 使用布局来沟通（Use Layout to Communicate）a,布局包含的不仅仅是一个应用屏幕上的UI元素外观你的布局，应该告诉用户什么是最重要的，他们的选择是什么，以及事物是如何关联起来的。b,提升重要内容或功能，让用户容易集中注意在主要任务上有几个比较好的办法是在屏幕上半部分放置主要内容，以从左到右的习惯，从靠近左侧的屏幕开始。91c,使用视觉化的重量和平衡向用户展示相关的

40、屏显重要元素大型控件吸引眼球，而比小的控件更容易在出现时被注意到。而且大型控件也更容易被用户点击，这让它们在应用中更加有用就像电话和时钟（上面的按钮）用户经常在容易分心的环境中能（正常）使用它们。92d,使用对齐来让阅读更舒缓，让分组和层次之间更有秩序对齐让应用看起来整洁而有序，也让用户在专注于屏幕时更有空间，从而专注于重要信息。不同信息组的缩进与对齐让它们之间的关联更清晰，也让用户更容易找到某个控件。e,确保用户能明白处于默认尺寸的首要内容的含义例如，用户无需水平滚动就能看到重要的文本，或不用放大就可以看到主体图像。准备好改变字体大小。用户期望大多数应用能有设置字号大小的功能。为了适应一些文

41、本大小的变化，你也许需要调整布局.93f,尽量避免UI上不一致的表现在一般情况下，有着相似功能的控件看起来也应该类似。用户常常认为他们看到的不同总有原因，而且他们倾向于花时间去尝试（译者按：因此为了避免用户做无用的尝试所以建议类似功能外观一样）。g,给每个互动的元素充足的空间，从而让用户容易操作这些内容和控件常用的点按类控件的大小是44 x 44点（points）。942.3起始与停止（Starting and Stopping）2.3.1即时启动（Start Instantly）有种说法是用户往往不会花超过一两分钟去审视一个新应用，当你将应用从打开到启动这段时间压缩得很短，并且同时在载入过程

42、中呈现一些对用户有帮助的内容，你就会激发用户的兴趣并给所有用户一个惊喜。95a,尽可能避免使用闪屏或者其他启动体验b,避免让用户做过多设置c,谨慎使用新手引导d,不要太早要求用户去给你的应用评分e,一般建议按照屏幕默认的定向方式启动你的应用f,如果可能，不要让用户在初次启动应用时阅读免责声明或者确认用户协议g,在应用重启后，需要恢复到用户退出使用时的状态，让他们可以从中断之处继续使用962.3.2 时刻准备好停止（Always Be Prepared to Stop）iOS 应用无需关闭或退出选项。当用户切换应用，回到主屏幕或者将设备调至睡眠模式的时候，其实就是停止了当前应用的使用。当用户切换

43、应用时，iOS的多任务系统会将其放置到后台并将新应用的UI替换上来。在这种情况下，你必须做到以下几点：随时并尽快保存用户信息，因为在后台的应用随时有可能被终止或退出。当应用停止的时候保存当前状态，使用户可以在回到应用时能从中断之处继续使用。例如，在使用可滚动的数据列表时，退出后保存列表所在的位置。97a,不要强制让应用退出。因为这样会让用户误以为是crash。如果有问题产生，需要告诉用户具体状况以及如何解决。以下有两个建议，取决于出现的问题有多严重而酌情使用：如果应用中所有的功能当前都不可用，那么应该显示一些内容来解释当前的情形，并建议用户如何进行后续操作。这部分内容给予了用户以反馈，使用户相

44、信你的应用现在没问题。同时这也可以稳定用户情绪，让他们决定是否要采取纠正措施，继续使用应用，还是切换到另一个应用。b,如果只有部分功能不可用，那么只要当用户使用这些功能时显示提示即可。不然的话，用户就应该能正常使用应用的其他功能。如果你决定使用警告框来进行提示，请确保只在用户尝试使用不可用的功能时再显示。982.4模态情境（Modal Contexts）模态是一个承载某些连贯操作或内容的优缺点并存的模式。它可以给用户提供一种不脱离主任务的方式去完成一个任务或者获得信息，但是也会临时性地阻止用户对应用的其他部分进行交互操作。理想情况下，用户可以与iOS 应用进行一种非线性的交互，所以，尽可能减少

45、应用中的模态体验是最好的。通常情况，在以下情形下可以考虑使用模态情境：必须引起用户关注的时候。一个独立的任务需要完成或者很明确需要被放弃，为了避免在模棱两可的状态下遗漏用户信息的时候。99a,保持模态任务的简单，简短和高度聚焦b,始终提供明显、安全的途径退出模态任务c,一个任务需要多层级的模态视图时，确保用户理解点击完成按钮的结果d,保证提醒对话框的内容都是重要且可操作的e,尊重用户关于接收通知的选择1002.5交互性和反馈(Interactivity and Feedback）2.5.1用户知道标准手势（用户知道标准手势（Users Know the Standard Gestures）用户

46、使用点击、拖拽、捏合等手势与iOS设备进行交互。使用手势拉近了用户和设备之间的距离，并且增强了直接操纵感。用户通常期待手势在不同应用之间都是通用的。101除了用户熟悉的标准手势，iOS还定义了一些系统范围内的操作，例如呼出控制中心或消息中心。在任意应用下都可以使用这些操作。a,不要给标准手势赋予不同的行为。除非你的应用是游戏，否则重新定义标准手势会使用户迷惑，且增加使用难度。b,不要创建和标准手势功能相似的手势操作。用户已经习惯了标准手势的行为，没有必要让用户学习达到同样效果的不同操作。c,可以用复杂手势作为完成某任务的快捷方式，但不能是唯一触达方式。最好给用户提供一些简单、直接的方式完成某操

47、作，即使这种方法需要额外的动作。简单的手势能让用户集中于当前的体验和内容，而不是交互操作本身。d,除非是游戏，否则避免定义新的手势。在游戏或其他沉浸式的应用中，操作手势也是有趣体验的一部分。但是在普通应用中，帮助用户达成目标要比操作本身重要的多，所以最好使用标准手势，尽量避免让用户去发掘和记忆新的操作。e,在特定的环境中，可以考虑使用多指操作。虽然复杂的操作并不一定适用于所有应用，但对用户会花大量时间使用的应用来说可以丰富体验，例如游戏或创建内容环境。但因为非标准手势可发现性差，要尽量少用，并且不要让这类手势成为完成任务的唯一方式。1022.5.2 可交互元素吸引用户点击（Interactiv

48、e Elements Invite Touch）为了暗示交互性，设计时会使用很多线索，包括颜色、位置、上下文、表意明确的图标和标签等。并不需要过于修饰元素来向用户展示可交互性。一个关键的颜色可以给用户提供很强的视觉指引，尤其是没有冗余的其它颜色时。为了有对比，使用蓝色标记可交互的元素，并且使用统一的、易识别的视觉风格。返回按钮使用多个线索指明其可交互性并传达其功能：它出现在导航中，显示了一个指向后方的图标，使用了关键色，显示了上一级页面的标题。103一个图标或者标题提供了清晰的名称指引用户点击它。例如，地图中的标题“立交桥路线”，“定位到这里”，清晰地说明了用户可做的操作。结合关键色，就可以省

49、去按钮边界或其他多余的修饰。104在内容区域，有必要给按钮添加边界或背景。操作条中的按钮、动作表单和提醒对话框可以不需要边界，因为用户知道在这种区域中大多数选项是可交互的。但是在内容区域，按钮有必要使用边界或背景将按钮从其他内容中区分出来。例如，系统自带的音乐、时钟、照片和App Store应用会在一些特别的场景中使用这种按钮。时钟应用在秒表和计时页面中给按钮增加背景来强调开始和暂停按钮，并且使按钮在周围的内容中更容易点击。App Store应用中使用有边界的按钮，将按钮和整个内容条区分开来，点击整条内容查看详细信息，点击按钮进行下载安装。照片应用中给分享按钮增加了边框，与其他解释性文本进行了

50、区分。1052.5.3 反馈有助于理解（反馈有助于理解（Feedback Aids Understanding）反馈会帮助用户了解应用当前在做什么，发现接下来可以做什么以及理解动作产生的结果。UIKit提供了很多反馈。a,尽可能将状态或其他的反馈信息整合到UI中。用户不进行操作或不跳出当前内容就能获得需要的信息是最好的。例如，邮箱应用将当前邮箱的状态显示工具条上，这样就不会影响当前内容。b,避免显示不必要的警告框。警告框是一种很强的反馈机制，只有在传递非常重要也是理论上可行的信息时才需要使用它。如果用户常看到很多不是重要信息的警告框，他们很快就会忽略所有对话框提醒。1062.5.4 输入信息的