UI设计基础

2014-12-03 本文已影响615人糊君

为iOS设计

iOS包含了以下主题：

遵从：UI是帮助用户理解内容并与其交互，而不是反之
清晰：任何大小的文字都清楚，图标清晰易懂，装饰物精妙、适当，明确的功能驱动设计。
纵深：视觉层和交互带来了活力，增加了用户的愉悦和理解

无论你是重新设计已经存在的应用还是创造新的应用，尝试这样做：

首先，确认UI与应用核心功能的相关性
接着，使用iOS主题设计UI和用户体验，谨慎增加细节和装饰，避免随便添加
最后，确保你的UI适应各种设备和模式，这样用户才能在尽可能多的环境下使用你的应用

当然，也要做好打破常规，质疑假设的准备，使内容和功能来驱动每一处设计。

遵从内容

尽管清新、漂亮的UI和流畅的交互是iOS体验的亮点，但内容才是它的核心。

以下是确保你的设计提高功能性和遵从用户内容的一些方法。

利用整个屏幕 天气应用是这种方法的一个很好的例子，漂亮的全屏展现当地天气，快速地传达了重要信息，腾出地方展现每小时数据。

重新考虑物质和现实的视觉指示 边框，渐变和阴影有时导致UI过重，压制了内容。因此，应该以内容为重，使UI为其服务。

让透明UI元素暗示其后的内容透明元素（如控制中心）提供内容，帮助用户了解更多可用的内容，也可以展示短暂的信息。在iOS中，透明元素仅使直接在他们后面的元素模糊（就好像透过米纸看）屏幕剩余的部分不模糊。

提供清晰

提供清晰是另一种保证你的app内容为首的方法。以下是一些使内容和功能清晰、简单的方法。

运用大量负空间 负空间使重要的内容和功能更醒目和易于理解。负空间也能给人一种平静的感觉，使应用感觉更专注和高效。

让颜色简化UI 主色（如笔记中的黄色）突出了重要的状态，也巧妙指出了交互。也使应用有一致的视觉主题。内置应用使用一组纯净的系统颜色，这些颜色的每一种色调，明暗背景下都很好看。

使用系统字体以确保清晰 为了使文字易读和漂亮，iOS系统字体会自动调整字母间距和行高。无论你使用系统或自定义字体，确保使用动态字体以使你的应用可以在用户选择不同的字体大小时有所响应。

拥抱无边框按钮 默认情况下，导航栏按钮都是无边框的。在文字区域，无边框按钮使用文字，颜色和行为召唤标题指明交互。当有意义时，内容区域按钮可以展示一个细边框或者带颜色的背景使它不同。

使用纵深交流

iOS经常在不同的层展示内容来传达层级和位置关系，帮助用户了解屏幕上内容的关系。

通过使用透明背景并让其漂浮在主屏幕上，文件夹便同屏幕其他内容分开了。

如下图所示，备忘录在层中展示列表。当用户打开一个列表时，其他列表便在屏幕底部收起来。

日历使用递增的转化，当用户在浏览年月日时，给其一种层级和纵深的感觉。这里的滚屏年视图，用户可以立即看到今天的日期和其他日历任务。

当用户选择月时，年视图缩小，展现出月视图。今天的日期仍然保持高亮，年视图显示在返回按钮中，因此用户清楚的知道他们在哪，他们从哪来，以及怎么返回。

一个相似的过度发生在用户选择天时，月视图分开，将当前星期推到屏幕顶部，显示选中那天每小时试图。每次转换，日历增强了年月日之间的层级关系。

iOS应用剖析

几乎所有iOS应用都会采用一些由UIKit框架定义的UI部件。了解这些部件的名字，用途和功能有助于你决定应用UI的设计。

UIKit提供的UI元素可以分为四类：

栏：栏包含文字信息和控件，分别告诉用户在哪和帮助用户导航或者开始行动。
内容视图：内容视图包含应用详细信息的内容和行为如滚动，插入，删除和重新排列项目。
控件：控件采取行动或展示信息。
临时视图：临时视图简洁地展现重要信息或更多选择和功能。

除了定义UI元素，UIKit定义执行功能的对象，如手势识别，画手势，手势理解和输出帮助。

编程上来说，UI元素是一类视图，因为它从UIView继承。该类可以在屏幕上画图，并知道用户触摸其边界。控件（如按钮和滑块），内容视图（如集合视图和表哥视图）和临时视图（如警告和上拉菜单）都是视图的类型。

为了管理应用中的视图集合，通常使用视图控制器。视图控制器协调视图的展示，在用户交互背后执行功能，还可以管理视图的转换。例如，设置使用导航控制器展示层级视图。

以下是视图和视图控制器如何组合呈现应用UI的例子。

尽管开发者认为就视图和视图控制器而言，用户倾向于体验如同一组屏幕（screen）的iOS应用。由此看来，一个截图在应用中通常符合一个不同的视觉状态或模式。

注意：iOS应用包含窗口，但（与电脑应用中的窗口不同）iOS窗口没有可见的部分，并且不能被移动。多数iOS应用只包含一个窗口，应用支持外部显示可以有多个窗口。

在iOS人机交互规范中，单词屏幕（screen）如多数用户理解那样。作为开发者，你可能还会在其他文章中看到屏幕（screen）一词，可能会涉及UIScreen对象，使用它可以获取外部显示。

自适应和布局

内置自适应

用户通常希望在其所有设备上以任意方向使用其喜欢的应用。在iOS8和之后的系统，使用尺寸等级和自动布局来帮助你满足用户这一预期，定义屏幕（screen）布局，视图控制器，当环境改变时视图会自动调整。（展示环境的概念可以适用于整个屏幕或仅仅是屏幕的一部分。如弹出框的面积或在分裂视图控制器中的首要视图。）

iOS定义了两种尺寸等级：普通和紧凑。普通尺寸等级与广阔的空间有关，紧凑尺寸等级与有限的空间有关。为了描述显示环境，要先解释水平尺寸等级和垂直尺寸等级。你可能会猜到，iOS设备可以对垂直方向使用一套尺寸等级，对水平方向使用另一套。

显示环境的尺寸等级变化时，iOS自动做出布局调整。例如，当垂直尺寸等级从紧凑变为普通，导航栏和工具栏自动变高。

当你使用尺寸等级还驱动布局的变化，你的应用会在任何显示环境下看起来都很棒。了解更多如何在界面构建中使用尺寸等级，查看尺寸等级设计帮助。

注意：在尺寸等级中，持续使用自动布局来做小的布局调整，比如拉伸或压缩内容。

下面具体的例子会帮助你理解尺寸等级如何描述不同设备的显示环境。例如，iPad在水平和垂直方向都使用普通尺寸等级。也就是说，iPad显示环境总是水平和垂直的普通等级。

iPhone的显示环境根据设备和方向进行变化。

竖屏时，iPhone6 Plus使用紧凑的水平和普通的垂直尺寸等级。横屏时，iPhone6 Plus使用普通的水平和紧凑的垂直尺寸等级。

其他所有iPhone模型，包括iPhone6，使用相同的尺寸等级。

竖屏时，iPhone6，iPhone5和iPhone4s使用紧凑的水平和普通的垂直尺寸等级。

横屏时，这些设备在水平和垂直方向都使用紧凑的尺寸等级。

在每种环境下都提供一流的体验

如果使用自适应，可以确保你的UI在显示环境下对变化做出正确的响应。遵从以下的原则以给用户在所有设备和方向上提供一流的体验。

在所有环境中保持对主要内容的专注。这是你的最高优先级。用户使用你的应用来浏览并与他们在乎的内容交互。当环境改变的同时改变焦点会使用户迷惑，让他们觉得失去了对应用的控制。

避免无谓的布局变化。一个在所有环境中相似的体验，当他们旋转设备或在不同的设备上使用你的应用时，使用户保持其使用习惯。例如，如果你使用网格在水平普通环境下来显示图像，你不必在水平紧凑环境下显示同样的信息，尽管你可能需要调整网格的尺寸。

如果你的应用只能在一个方向运行，直接告诉用户。用户期望在各个方向使用你的应用，最好能满足用户这一期望。但是如果你的应用只能运行于一个方向，应该：

避免出现让用户旋转设备的UI元素。清楚地运行在支持的方向，如果有必要，不要给UI增加没有必要的元素。
支持一个方向的所有变体。例如，如果一个应用仅在横屏下运行，无论用户持设备时Home键在右边还是左边，都能使用。如果用户在使用时将设备旋转180度，应用最好也能将内容旋转180度。

如果你的应用将设备方向变化当做用户输入的话，用应用指定的方法处理旋转。例如，一款游戏让用户旋转设备来移动游戏碎片，不能将屏幕旋转。这种情况下，应用应该支持要求方向的所有变体，允许用户在这些变体间转换直到他们开始应用的主要任务。用户一旦开始主要任务，开始以应用指定的方法处理设备的运动。

运用布局交流

布局不仅仅是在应用屏幕中UI元素看起来的样子。通过布局，可以告诉用户追重要的东西，他们有哪些选择以及相互之间的关系。

提升重要内容或功能，使专注于主要功能更轻松。一些好的方法是，把主要的项目放在上半屏，在由左至右的文化中，靠近左边屏幕：

使用视觉权重和平衡来暗示用户屏幕上元素的相关重要性。大的元素吸引眼球，感觉上比小的元素更重要。较大的元素同时也更容易点击，这就让他们在应用中更有用——例如手机和时钟——用户经常在容易分心的环境中使用。

使用对齐来使仔细观察更容易并且表现分组或层级。对齐倾向于让一款应用看起来干净、整齐，让用户在滚动整屏的信息时可以集中注意。不同信息分组的缩排和对齐指明了分组之间的关系，让用户更容易找到特定的元素。

确保用户在默认大小时能明白主要内容。例如，不应该让用户横向滚动查看重要文字，或者缩放查看主要图片。

准备好文字大小的变化。用户期望大多数应用当他们在设置里选择了不同的字体大小时，应用会有适当的响应。为了适应字体的变化，你需要调整布局。需要更多关于显示字体的信息，查看文字应该总是易读的。

尽可能避免UI的不一致性。总的来说，有相似功能的元素应该看起来也是相似的。用户通常会猜测是不是有什么原因才不一致。他们易于花时间去琢磨这个问题。

给每个可交互的元素足够的控件，使用户更容易与之交互。给可点击控件大约44x44点（points）。

开始和停止

立即开始

据说，用户评价一个应用不会超过一分或两分钟。如果你利用好这短暂的时间，立即呈现给其有用的内容，你会获得一名新用户，给所有用户一个优秀的体验。

重要：安装完程序后，不要让用户重启他们的设备。重启要花时间且让用户觉得你的应用不可靠、不好用。

如果你的应用有内存使用或者其他导致应用无法运行的问题，除非系统刚刚启动，你需要声明这些问题。开发一款调试良好的应用的帮助，查看高效内存使用。

尽可能避免展示启动画面或其他类似启动体验。用户最好能立即使用你的应用。

避免让用户提供设置信息。换之：

聚焦80%用户的需求。这样做，多数用户不用进行设置，因为应用早已按用户的预期设置好了。如果某个功能只有少数用户需要——或者多数用户只用一次——忽略了吧。
从其他地方获取尽可能多的信息。如果你能用到用户在内置应用或设备设置中提供的信息，那么从系统获取。不要让用户再输入一次。
如果你必须所要设置信息，让用户在你的应用中输入。然后，立即存储这些信息（也就是说，在你的应用内的设置里）。这样，用户不会在使用应用前被迫进行设置。如果用户更改设置，他们会随时去设置中更改。

尽量延迟用户登录。最好能让用户在未登录的情况下浏览应用并使用部分功能。例如App Store在用户决定购买前不会要求其登录。用户通常会卸载那些在他们使用前就让其登录的应用。

如果用户必须登录，在登录页告诉简洁、友善的告诉用户登录的原因及对用户的好处。

仔细想清楚再提供启动页体验。（启动页介绍应用的特点并演示如何完成一般任务。）考虑启动页前，尽量使你应用的所有特点和任务直观且易发现。启动页不是好的应用设计的替代品。如果你仍然认为启动页是必须的，遵从以下原则创造不妨碍用户的、简洁、目标明确的体验。

只给用户开始时需要的信息。良好的启动页体验告诉用户先做什么或者简洁地演示一些多数用户感兴趣的特点。如果在用户体验应用前给他们太多信息，便迫使用户记住太多当下不需要的细节，还会使用户觉得不好用。某些任务如果需要额外的帮助，仅在用户执行那些任务时提供相应帮助。
使用动画和交互吸引用户并帮助他们在实践中学习。仅当能丰富体验时添加少量文字；别指望用户会阅读大段文字。例如，可以用动画演示简单任务时，不要使用文字描述。引导用户完成一个复杂任务时，可以使用一个短暂的覆盖视图来描述用户要做的每一步。尽量避免使用应用的截图，因为它们不能交互且用户会被应用的UI迷惑。
使跳过启动页简单。用户浏览完启动页后，可能不会想看第二遍了；其他用户或许根本不想看。确保记住用户的选择，不要强迫他们每次打开应用都选一次。

避免过早让用给应用评论。过早让用户评论会惹恼用户，可能减少有用评论的数量。为了鼓励深思熟虑的反馈，确保在你让用户做出评价前，给他们形成观点的机会。例如，等到用户已经访问不同页面达到最小次数，或执行任务达到最小次数。

总之，运行在设备当前方向下。然而，如果应用仅在一个方向运行，应总是运行在该方向并在必要时让用户旋转设备。例如，如果一个游戏或媒体浏览应用仅横屏运行，即使设备当前为竖直，让应用横屏运行比较合适。这样，如果用户在竖屏方向打开应用，他们会将设备旋转为水平来浏览内容。

注意：仅横屏运行的应用最好支持横屏的两种变体——就是，Home键在左边或右边。如果设备已经在水平方向，除非有充分的理由，仅横屏运行的应用应运行在正确的变体下。否则，运行在Home键在右边的方向。（了解更多关于支持不同设备方向，查看响应设备方向变化。）

提供运行文件或图片。在应用启动时，iOS展示一张运行图片——给用户一种应用很快的印象并给用于充分的时间加载内容。在启动图中了解如何创造一个启动文件或内容。

当应用重启时，还原它的状态以便用户从离开的地方开始。用户不该记住到达之前页面的每一步。了解更多关于保存和恢复应用状态的有效方法，查看状态保存和恢复。

随时做好停止的准备

iOS应用从不显示关闭或退出选项。当用户切换到其他应用，回到桌面，或锁屏时，用户停止使用应用。

当用户从你的应用切换走时，iOS多任务处理将它转变为背景并替换UI为新应用的UI。为了准备这种情况，应用应该：

尽快并尽可能频繁合理地保存用户数据。这么做是因为后台应用随时可能被退出或关闭。
当停在最好的细节等级时，尽可能保存当前状态。这样，当用户切换回来时，不会丢失当前的环境。例如，如果应用显示滚动数据，保存当前滚动位置。你可以在状态保存和恢复中了解更多关于保存和恢复应用状态的高效方法。

一些应用可能需要在其他应用在前台运行的同时一直在后台运行。例如，用户可能想听着歌查看to-do list或者玩游戏。在多任务处理中了解如何正确并优雅地处理多任务处理。

永远不要以程序方式退出iOS应用。
用户会认为是崩溃。如果应用不能按预期工作，要告诉用户发生的情况并告诉用户他们可以做什么。以下是这样做的两个好方法：

如果所有应用功能都不可用，展示一个页面描述发生的情况并给出处理办法。
这些信息给用户反馈并告诉用户应用没有问题。让用户感觉应用在其掌控之中，让他们决定到底是更正错误并继续使用或者切换到其他应用。

如果只有一些功能不可用，当用户尝试使用这些功能时，展示一个页面或者警告框。否则，用户可以使用剩下的功能。如果你决定使用警告框，确保仅当用户尝试使用不能使用的功能时展示该警告框。

当应用的每一屏都代表一个不同类型的条目或页面，使用页面控制。页面控制很好的展示给用户有多少条目或页面以及用户当前的位置。例如，天气使用了页面控制来告诉用户打开了多少指定地点的天气页面。了解更多关于页面控制，查看页面控制。

总的来说，最好给用户一条通往各个屏幕的路径。如果有一屏用户需要在多种环境下看到，考虑使用临时视图，比如模态视图，动作表单，或者警告框。

UIKit同样提供了一下相关控件：

分段控件。分段控件提供给用户查看屏幕上内容的不同类目或方面；无法用它到达新的屏幕。
工具栏。尽管工具栏与导航栏或标签栏看起来很像，但它不能导航。反之，工具栏提供给用户作用在屏幕中内容的控件。