@折折熊 的设计博客
用最简单地方式改变世界

[中文]iOS7人机界面指南-UI基础[转]

上网搜索了很多有关iOS7的设计指南,发现好多牛人已经转译成了中文。对比了一下,觉得@李林 的翻译相对丰满很多,只是分了12个段落,我把他们串一下,已做收藏存档。原文目录如下,有兴趣的同学可以去拜读一下。

(注:这个不是完整的界面指南,而是界面指南中UI基础的部分,所以其他部分的目录我省去了)
  • 为iOS7而设计

iOS7涵盖了以下3个方面的设计主题思想:

  • 依从:UI要帮助用户对内容进行理解和互动,但绝不能与内容产生竞争关系。

  • 清晰:任何字号的文字都要清楚易读,图标要精细且含义明确,装饰性元素要少而精,且使用得当;聚焦于功能性的实现,并以此激发设计的进行。

  • 纵深:视觉外观的层次以及逼真的动画效果可以传达出界面的活力,使界面更容易被理解,并提升用户的愉悦度。

天气应用,左图为iOS7,右图为iOS6。

无论你是在重新设计一款已有应用,还是在创建新产品,请考虑按照苹果官方重新设计内置应用的方式来进行你的工作:

  • 首先,剥离所有的UI元素,使应用的核心功能呈现出来,并重新确认它们的相关性。

  • 然后,使用iOS7的设计主题去重新构建UI与用户体验。

  • 自始至终,要做好挑战传统惯例、质疑各种臆测的准备;将注意力聚焦在内容和功能上,以此来推动每一个设计决策的制定。

依从于内容

虽然明快而漂亮的UI以及流畅的动画效果是iOS7当中的体验亮点,但内容才是其真正的核心。

下面这些方法将确保你的设计能够提升界面的功能性,并使其更好的依从于内容。

充分利用全屏空间

斟酌嵌入式结构及可视化的界面框架的用法,考虑能否将内容直接扩展至屏幕边缘。天气应用就是个很好的例子:通过漂亮的全屏方式呈现当前的天气情况,用户能够立即发现最重要的信息,而且每小时的气象数据也有充分的空间得以展示。

慎用拟物化的视觉元素

浮雕效果、渐变、阴影,这类视觉表现形式有时会使UI元素过于沉重,进而在视觉上喧宾夺主,压倒内容。要聚焦于内容,让UI扮演辅助支援型的角色。

让半透明的视觉元素透露其背后的内容

半透明的视觉形式可以体现出当前操作对象周围的环境背景,使用户知道有更多的内容可用。

提供清晰的视觉效果

提供清晰的视效,这是确保使内容处于核心地位的又一种方式。下面这些方法可以使最重要的内容及功能清晰易读、便于操作。

充分运用留白

留白可以使重要的内容及功能更加突出。同时,留白还可以传达出一种平静和稳定的感觉,使应用看上去更加专注和高效。

通过色彩简化UI

一种关键的颜色——例如备忘录应用中的黄色——可以突出重要信息,并巧妙的暗示出元素的可交互性。同时,它也可以为应用带来具有一致性的视觉主题。

使用系统字体,确保清晰易读

iOS7中的系统字体可以自动调整字间距及行高,使文字内容更加易读,在用户所选择的任何字号下都表现良好。


拥抱无边框的按钮

与以往依靠浮雕效果暗示元素可交互性的方式不同,在iOS7中,我们可以选取含义准确的标题文字,搭配一种关键色或系统色,来表达这是一个可交互的UI元素。新的通讯录应用使用了系统提供的蓝色来告诉用户,屏幕上的多数内容是可以对交互动作做出响应的。

利用纵深进行沟通

iOS7会在不同的层面上显示内容,以体现内容间的层级和位置关系,这有利于用户理解屏幕上各种元素之间的关联。

文件夹在视觉表现形式上采用了半透明背景,并悬浮于主屏幕之上,这能使其中所包含的内容与屏幕上的其他元素得以区分开来。

当用户在使用提醒事项应用中的某个条目时,其余的条目都会排列在界面底部的不同层面上。要查看所有条目,用户需要展开这些层面,如下图所示。

新的日历应用当中使用了增强的动画过渡效果,可以在用户切换年、月、日视图模式时带来到明显的纵深感。在下图所示的年份滚动视图中,用户可以立刻看到今天的日期,并能够执行其他的相关操作。

当用户选择了某个月份后,年份视图会自动放大扩展,而月份视图则会从它的后面呈现出来。

类似的动画效果还会发生在月份与日期的切换当中:月份视图向外扩展,呈现出日期视图

  • iOS应用解析

几乎所有的iOS应用都会用到一些由UIKit框架所定义的UI控件。对这些基本控件的名称、角色和作用加以了解,你将能更好的在打造界面的过程中做出正确合理的设计决策。

UIKit框架提供的UI元素可以分为4大类:
  • 栏(Bars):包含与上下文内容情境相关的信息,告诉用户他们在应用当中所处的位置;同时还包含相关的导航功能,或是可以由用户发起的操作。

  • 内容视图(Content views):包含当前应用所特有的内容,并支持相关的交互行为,例如滚屏、插入、删除、对列表条目进行重新排序,等等。

  • 控制元素(Controls):产生行为或显示信息。

  • 临时视图(Temporary views):临时性的向用户呈现重要信息,或提供额外的功能及选项。

除了定义UI元素以外,UIKit框架还定义了那些可以完成诸如手势识别、绘制、辅助支持、打印支持等功能的对象。

从编程的角度来讲,UI元素可以被看做是不同类型的视图(views),因为它们都继承自UIView类。一个视图知道怎样将它自己输出到屏幕上,知道怎样捕获用户在它的范围内执行的点击行为。

要在应用中管理一组或一系列具有继承关系的视图,你通常需要使用视图控制器(view controller)。视图控制器可以协调不同视图的显示方式,在用户发起行为后执行相应的功能,并且对界面切换时所需的动画过渡效果进行管理。

下图展示了视图和视图控制器是怎样协同工作来呈现iOS应用界面的:

虽然开发者们习惯于从视图和控制器的角度来思考问题,但用户只会将应用看做是由一个个界面所组成的整体。从这个角度讲,每一“屏”都对应着应用中的一个明确的视觉状态或模式。

注意:每个iOS应用都包含一个窗口(window)。与桌面应用中的概念有所不同,iOS中的窗口没有真正的可视部分,而且不能从屏幕上的一个地方移动到另外一个地方。多数iOS应用只有一个窗口;那些支持外接显示设备的应用会有多个窗口。

iOS界面设计规范当中会用到“屏(screen)”这个词,因为它能被多数用户所理解。作为开发者,你可能还会在其他不同的上下文当中读到“屏”的概念,例如被用来指代UIScreen对象(用于访问外界显示设备)

  • 启动与退出

即刻启动

一般情况下,用户可以在一到两分钟内对一款应用做出评估。如果你能利用这段时间迅速地呈现最有用的内容,就能充分激发新用户的兴趣,并且给所有用户带来出众的体验。

重要:绝不要在用户安装好你的应用之后告诉他们需要重启设备。重启需要花费时间,而且会让你的应用看起来非常难用且不可信赖。

如果出于内存使用或其他方面原因,使你的应用确实只有在设备重启之后才能正常工作,那么你需要首先解决这类问题。请参考iOS应用开发指南中的“高效地使用内存”。

尽可能地避免使用无意义的启动画面(欢迎画面)或其他类似的启动体验。最好让用户在启动你的应用之后可以立刻开始使用。

推荐的模式(左图)与不推荐的模式(右图)

应用安装完成后,不要让用户必须进行设置才能使用。取而代之地:

  • 将解决方案聚焦在80%的用户需求上。这样,多数用户不需要进行任何设置就可以开始使用,因为默认参数可以确保应用能够按照这部分用户所期望的那样进行工作。

  • 尽可能地从其他来源获取信息。如果用户在iOS内置应用或系统设置当中输入的信息可以为你所用,那么就尽量向系统查询这些信息,不要再让用户输入一遍了。

  • 如果确实需要用户进行安装设置,尽量让他们在你的应用内部进行输入。然后,尽快储存这些信息(例如在应用的设置项当中)。这样,用户在享受你的应用之前就不需要被迫切换到iOS的设置当中了。如果他们将来需要修改这些信息,可以在任何时候进入应用设置当中进行操作。

尽可能晚些让用户登录。比较理想的状况是,让用户在不登录的情况下也能在应用当中尽量多的浏览内容,并使用部分功能。如果在用户上手你的产品之前就强迫他们登录,则会导致启动流程变得累赘拖沓。

一般来说,要按照默认的屏幕定向方式启动应用。对于iPhone,竖屏是默认的定向方式,而对于iPad来说,设备当前所处的状态就是其默认定向方式。如果你的应用只能在横屏模式下运行,那么要始终以横屏状态启动,让用户在必要的时候自己调转设备的方向。

最好让横屏应用能够同时支持两种模式的横屏,也就是Home按键分别在左侧和右侧的状况。如果设备当前已经处于横屏状态,那么横屏应用就应该按照当前的定向方式加载,除非你有充分的理由不这样做。在其他情况下,可以按照Home按键在右侧的方式加载横屏应用。

可以提供一张与应用首屏看上去几乎一致的启动图片,iOS会在应用被打开的同时即刻展现这张图片,这可以让用户觉得你的应用加载起来非常快,降低对等待时间的感知,使真正的内容有相对充裕的时间可以进行加载。可以参考启动图片了解相关的实现方法。

如果可能,不要让用户在初次加载应用时阅读免责声明或必须对用户协议进行确认。你可以直接在App Store当中展示这些内容,使人们在下载应用之前就能有所了解;不过,虽然这种方式通常能最大限度的减少麻烦的产生,但也不是一直可行的。如果在某些情况下你必须在应用内提供这类内容,那么要确保这些内容与整体UI保持和谐统一,与产品实际的业务功能带来的用户体验达成平衡。

在应用重启后,要恢复到用户退出时的状态,让他们可以中断的地方继续使用。不要让用户必须记住之前是通过怎样的步骤到达退出时的状态的。可以参考状态的维持与重置来了解相关的实现方法。

时刻准备着退出

iOS应用永远不会有用来执行关闭或退出的操作。用户退出一个应用的方式就是切换到另外一个应用、回到系统主界面,或是使设备进入睡眠模式。

当人们从你的应用切换到其他地方,iOS的多任务机制就会将它转至背景当中,并使用其他应用的UI替换掉当前的。为了应对这种情况,你的应用应该具备以下能力:

  • 及时地、尽可能频繁地保存用户数据,因为处于背景状态的应用随时都可能被终结。

  • 退出时,尽可能在细节层面保存当前状态,使用户回到你的应用之后不会失去之前的上下文状态。例如,如果你的应用包含可滚动的数据列表,那么在退出时要保存当前的列表位置。

有些应用即使处于背景状态也需要保持工作,譬如,用户会希望在查看待办事项或玩游戏时让另外一款应用继续播放音乐。可以参考多任务来了解怎样正确而优雅的处理这种情况。

永远不要以程序化的方式自动退出iOS应用,因为用户有可能将这种情况误解为程序崩溃。如果出于某些原因,你的应用无法按照预期正常的工作,你需要告诉用户当前的状态,并让他们了解自己能够做些什么。取决于问题的严重性,你有两种选择:

  • 通过一个能够吸引用户注意力的界面描述当前问题,并提出执行建议。使用这样的界面作为反馈,可以让用户了解到应用本身并没有出现问题。这样还可以将主动权交还给用户,让他们决定执行矫正性的行为并继续使用应用,或是切换到其他应用。

  • 如果只有一部分功能不可用了,那么可以在用户用到这些功能的时候,通过一个单独的界面或是弹出提示(alert)来告诉他们当前的情况。只在用户所访问的功能确实无法工作的时候再使用弹出提示

  • 布局

布局所关乎的远不止“界面元素在屏幕上看上去如何”这么简单。通过布局,你可以让用户知道哪些东西是最重要的,他们有哪些事情可做,内容之间具有怎样的关联。取决于设备类型及横竖屏定向方式,同一款应用的界面布局也可能会有不同的模式。

确保交互元素具有足够大的尺寸,以便用户可以很容易的与内容和功能进行互动。可点击对象的实际点击区域尽量不小于44*44像素。

将重要的内容和功能放在权重更高的位置上,使用户的注意力可以更好的聚焦在主要任务上。通常,将最重要的元素放在前半屏是比较好的做法,另外,对于阅读习惯是从左到右的用户来说,更贴近屏幕左侧的位置也是更容易引起关注的。

利用视觉表现形式的权重和平衡,向用户展示界面元素之间的相对重要程度。尺寸较大的元素拥有更高的权重,相比于尺寸较小的元素来说,更能吸引目光,看上去也更加重要。

通常情况下,要防止UI元素在外观上具有不统一的表现形式。尽可能让具有相似功能的元素同时具有相似的外观。人们一旦留意到不一致的外观表现,就很容易假设这背后是有原因的,并倾向于花费时间去搞清楚这种差异究竟代表什么。

确保界面中的主要内容在默认尺寸下可以被阅读和理解。不要让用户必须横向滚屏才能看到完整的文字内容,或是必须执行放大操作才可以看清楚内容图片

  • 导航

人们在使用应用时,通常不会感知到导航的存在,除非导航带来的体验没有达到他们的预期。而你的工作,就是以符合产品整体架构及目标的方式打造出不会被用户察觉到的导航机制。

总体上讲,导航可以分为三种类型,其中每一类都能很好的适用于一种特定类型的应用:

  • 树形信息结构的应用

  • 扁平化信息结构的应用

  • 由内容或体验所驱动的应用

某些情况下,几种不同风格的导航可以很好的整合在同一款应用当中。例如,扁平化信息结构的应用当中,某个分类里的信息也许可以很好的通过树形结构来呈现出来。

无论采用哪种风格的导航,最重要的是,要确保用户在内容当中的行进路径符合逻辑、可以预知、容易跟随。用户应该始终能够了解自己在应用当中所处的位置,以及怎样行进到下一个目标位置。

通过UIKit框架当中定义的一些标准UI控件,你可以很轻松的创建树形导航或扁平化结构的导航。此外,还有一些控件可以帮你创建以内容为中心的导航模式,例如很多图书风格或媒体浏览方面的应用当中所使用的那样。而那些围绕着体验来打造导航的应用,譬如游戏,通常都会使用订制化的UI元素及交互行为模式。

通过导航栏(navigation bar),为用户提供一种能够轻松的在树形信息结构当中前后行进的导航方式。导航栏的标题通常用来向用户展示当前界面在信息结构当中所处的位置,回退按钮可以帮助用户回到上一级结构。请参考导航栏一节,了解更多详情。

通过标签栏(tab bar)展示整体内容或功能之下的若干个同级分类项。标签栏可以很好的支持扁平化的信息结构,因为无论用户当前处于哪个界面,都可以直接在若干类别当中进行切换。请参考标签栏一节,了解更多详情。

通过分页控件(page control)来暗示多个条目或内容视图的存在。该控件可以有效的向用户展示内容单元的数量,以及当前所见的这一条在队列中的位置。请参考分页控件一节,了解更多详情。

注意:虽然工具栏(toolbar)在外观样式上与导航栏或标签栏很相似,但它不能用来承载导航方面的功能。要通过工具栏为用户提供那些针对当前上下文内容的功能操作。

一般来讲,最好让每个界面都有唯一的入口。如果用户可以在不同的上下文当中访问到同一个界面,那么请考虑使用一种临时化的视图,例如模态视图(modal view)、动作表单(action sheet)或是警告提示(alert)。请参考模态视图动作表单警告提示,了解更多详情

  • 模态情境

模态,一种用来承载特定内容、功能或体验的模式,有其自身的优缺点。它可以帮助用户完成某些任务,或在不受干扰的情况下获取信息,但会暂时性的强迫用户停止与应用其他部分的互动。

理想情况下,用户应该能够通过非线性的方式与iOS应用进行互动,所以最好尽可能的精简应用当中的模态体验。通常,仅在这些情况下考虑创建模态情境:
  • 非常有必要吸引用户的注意力。

  • 必须完成某些任务,或明确的放弃某项操作,否则用户数据将进入不稳定的状态。

保持模态任务的简单、简短、易聚焦。不要将模态视图打造的好像是嵌在应用当中的迷你应用。如果模态视图中的子任务过于复杂,人们很容易忘记进入模态视图之前的主任务是什么。在创建那些包含树形视图结构的模态任务时要特别小心,因为这种形式很容易使人们产生迷失感,忘记回退的步骤。如果你的模态任务当中必须包含那些需要通过不同的视图来呈现的子任务,那么一定要给用户提供单一且清晰的信息结构路径,避免产生循环。请参考模态视图一节,了解更多详情。

始终提供一种明显而安全的退出方式。要确保用户在退出模态视图时,能够对接下来要发生的事情有明确的认知。

如果主任务需要一系列层级化的模态视图,那么要确保用户知道当他们在模态视图中点击“完成”按钮后会发生什么。检查任务流程,以确定次级模态视图当中的“完成”按钮究竟是用来完成一部分任务的,还是用来完成整个模态任务的。鉴于有可能产生的困惑,尽量避免在次级模态视图中使用“完成”按钮。

使用警告框来传递那些必不可少的重要信息,通常还要提供可执行的功能选项。警告框会中断产品的体验流程,用户必须执行一次点击才能将其关闭掉,所以一定要让用户了解到这种干扰的出现是有正当理由的。请参考警告框一节,了解更多详情。

尊重用户对于是否接收通知信息所做的设定。在iOS的“设置”当中,用户会设定希望以怎样的方式接收通知。要确保你的应用能够遵守这些设定,以防用户一怒之下关闭掉所有来自你的应用的通知信息

  • 交互性与反馈

用户习惯于标准手势

人们会使用诸如点击(轻按)、拖拽、开合等手势与iOS设备及应用进行互动。手势能够在人与设备之间建立起更人性化的关联,增强用户对于直接操作(direct manipulation)的感知。通常,人们会希望所有应用当中的手势操作模式都保持一致,例如:

  • 通过点击(tap)来按压或选择一个对象。

  • 通过拖拽(drag)来滚屏或移动对象(将其从界面一边拖向另一边)。

  • 通过滑动(flick)来快速滚屏或移动对象。

  • 使用一个手指进行轻扫(swipe),可以展现更多内容,例如列表视图中的删除按钮、分隔视图(iPad)中的隐藏视图,或是从界面顶端展开通知中心。另外在iPad中,可以通过四指轻扫的手势在不同应用之间进行切换。

  • 通过双击(double tap)将内容或图片放大并置于屏幕中央;如果当前内容已呈放大状态,则将其缩小至默认尺寸。

  • 通过双指张开(pinch open)闭合(pinch close)对内容进行放大或缩小。

  • 通过长按(Touch and hold)在可编辑或可选择的文字上显示放大镜,用来定位光标。

  • 通过摇晃(shake)机身执行撤销或重做的操作。

除了人们熟识的那些标准手势以外,iOS还定义了一些用于在系统全局层面进行操作的手势,例如展开控制中心或通知中心。无论用户当前在使用什么应用,都可以直接通过这些手势进行系统层面的操作。

不要为标准手势赋予不同的行为。除非你的应用是游戏,否则重新定义标准手势的用途会导致用户产生迷惑,降低产品的易用性。

不要重复创建与标准手势具有相同作用的自定义手势。人们都习惯了标准手势的行为,他们不会希望花时间学习新的手势却只能达到同样的效果。

可以将复杂的手势作为完成任务的快捷方式,而不是唯一的方式。尽可能为用户提供简单而明显的方式来完成任务,哪怕需要额外的一两次点击。简单的手势可以让用户将注意力聚焦在内容和体验上,而不是交互过程本身。

不要定义新的手势,除非你的应用是游戏。在游戏或是其他沉浸型应用当中,自定义手势可以成为体验乐趣的一部分。但在那些帮助人们完成重要任务的应用里,最好使用标准手势,这样人们就不需要时刻想着操作方式本身了。

对于iPad应用,要考虑使用多指手势。iPad的大屏幕带来了广阔的空间,可以更好的支持多指手势,也就是同时使用超过一根手指进行的操作。虽然相对复杂的手势操作并不适用于所有的应用,但对于那些人们会花很长时间来使用的,例如游戏或需要创建内容的应用来说,多指手势是可以增强体验的。另外一定要记住,非标准手势的可发现性是较差的,不要让这类手势成为完成任务的唯一方式。

反馈有助于理解

iOS用户习惯于接收各种反馈。这些反馈可以帮他们了解应用当前的状态,发现接下来可以做些什么,或是预计自己的操作会产生怎样的结果。UIKit框架所定义的控件和视图当中包含了很多类型的反馈。

尽可能将状态或其他的相关反馈信息整合到UI当中。例如,邮件应用会在工具栏中显示更新状态,如下图所示。

避免不必要的警告提示。警告是一种强力有效的反馈形式,但它只应用于传达最重要的信息,并提供相关的后续操作选项。如果用户看惯了不包含重要信息的警告框,他们就会学会忽略这些提示了。请参考警告框一节,了解更多详情。信息输入方式要简单易行

无论是点击控件元素还是使用键盘,输入信息都需要耗费用户的时间和注意力。如果你的应用在帮助人们解决问题之前需要让他们进行太多的信息输入,他们就会感到受挫。

使用选择让输入更轻松。例如,你可以在某些地方使用列表视图或选择器(picker)来代替文本输入框,因为对于多数人来说,选择比打字更容易。

在合适的情况下,从iOS获取信息。人们会在设备系统中存储很多信息,不要强迫他们再次输入那些你能够在系统中获取到的信息,例如通讯录或日历信息。

给予用户有价值的反馈,来平衡向他们索取信息的要求。让用户了解付出与回报的关系,可以使他们感受到产品的使用流程正在向前推进。

  • 术语和修辞

应用当中所显示的任何一个词汇都是你与用户之间交流对话的一部分。要将这些对话看做是帮助人们提升舒适感的机会。

确保你所使用的术语能够被用户理解。基于你对用户的了解,评估你希望使用的词汇和短语是否恰当。例如,对于那些相对“简单”的用户,技术术语几乎是没有用处的,但对于专门面向技术型用户所设计的应用来说,这样的词汇又是非常得当的。

使用非正式的、友善的语气,但不要过于随便。希望避免生硬或过于正式是没错的,但也不要表现出过分的善于交际或屈尊俯就。要记得,UI当中的词汇是会被用户在一次次的使用过程中反复看到的,一些初次看去显得很聪明的说法,被反复读过之后很可能会给用户带来不快。

像报纸编辑一样思考,留意那些多余的、非必要的词语。简短而直接的文案可以让用户理解起来更快更容易。识别出最重要的信息,简明的表达出来,并通过显要的视觉形式进行输出,这样人们就不需要从一大堆文案当中寻找他们希望找到的信息了。

在交互控件旁边使用简短的标题或含义明确的图标,使用户能够对这些控件的用途一目了然

在描述日期信息时,一定要做到精确。很多时候,使用“今天”和“明天”这样更友好的词汇来表达日期信息是比较得当的,但如果你没考虑到用户所处的地理位置,那么这样的文案很可能产生迷惑。例如,要考虑到某些事件正好在午夜前。对处于相同时区的用户来说,事件是发生在“今天”的,但对于那些位于早一个时区的用户来讲,事情则发生在“昨天”。

在App Store中撰写优秀的产品描述文案,尽可能创造机会与潜在用户进行沟通。除了准确的描述你的应用,并突出人们可能欣赏的品质之外,还要确保:

  • 更正所有的拼写、语法和标点当中的错误。虽然这类小错误不会讨扰到每个人,但确实会使产品在一部分用户心中留下负面印象。

  • 尽量少使用全部大写字母的词语。某些时候,全部由大写字母组成的单词可以有效的吸引用户的注意力,但当通篇都是这样的单词时,就会变得很难阅读,好像这些文字正在用户眼前叫喊一样。

  • 考虑对特定的bug修正进行描述。如果你的应用在新上线的版本当中包含用户所期待的bug修正,那么在描述当中提到这一点将是个好主意。

  • 动画

漂亮而精致的动画效果遍及iOS各处,它们使应用体验更具动态性,更加吸引人。精细而恰当的动画效果可以:

  • 传达状态。

  • 增强用户对于直接操作(direct manipulation)的感知。

  • 通过视觉化的方式向用户呈现操作结果。

要谨慎的使用动画效果,特别是在非沉浸型应用当中。对于那些聚焦于严肃目标或效率型任务的应用来说,过度的、无意义的动画效果会阻塞任务流程,降低应用性能,分散用户注意力。

尽可能与iOS内置应用的动画模式保持一致。人们习惯于内置应用当中各种精妙的动画效果。实际上,用户往往会将内置应用当中的动效看作一种体验的标准,例如切换视图时的平滑过渡效果,切换横竖屏时的流畅反馈,或是能表现出各种物理效果的滚屏动画等等,这些都逐渐成为了人们预期当中的一部分。只有当你在设计一款沉浸型应用,譬如游戏的时候,才可以重点考虑订制化的动画效果。

在你的应用中保持动画效果的一致性。与其他类型的订制化设计相仿,如果你要在自己的应用中使用自定义动画效果,那么要确保使用方式的一致性,这样,用户才能随着不断使用你的应用而积累认知。

多数情况下,要在你的自定义动画效果中力争实现仿真效果。虽然,人们往往乐于接受表现形式当中破格体现出的艺术性,但当他们体验到不符合物理规律的运动效果时,仍然会感到怪异与迷惑

  • 文字排版与配色

文字必须易读

最首要的是,要确保文字排版的清晰易读。如果用户根本看不清界面当中的文案,那么文字本身再漂亮也没有意义。iOS7当中的动态文字(Dynamic Type)可以实现:

  • 在每种字号下都能自动调整文字的粗细、字间距和行高。

  • 针对在语义上有所区别的文本模块,例如Body、Footnote或Headline1等,可以自动指定不同的文字样式风格。

  • 文字可以根据用户在动态文字及可访问性设置当中指定的字号来自动的调整。

通常,应用全局应该只使用一种字体,包括它的几种不同风格样式。多种字体的混合使用会使你的应用看上去凌乱而草率。使用UIFont中的样式API,根据不同的语义用途,例如正文或标题,来定义不同文本区域的样式。


色彩可以增进沟通

考虑定义一种基本色。iOS7的内置应用有着各自的基本色,例如备忘录中的黄色,用来表达元素的交互性及状态。

色彩是具有沟通能力的,但不总是以你所希望的方式来实现。对于同一种色彩,每个人的感知都是有所区别的,另外在不同的文化当中,颜色被赋予的含义也有所不同。尽量花些时间来研究其他国家和文化群体是怎样理解你所用到的配色的。要尽最大努力确保你应用当中的色彩可以准确的传达信息。

多数情况下,不要让用户因为色彩而分神。除非色彩本身就是你应用的根本价值和目的所在,否则它们只应被用来在细节之中增强交互体验

  • 图标与图形

应用图标

每个应用都需要一个漂亮的图标。很多时候,人们都会根据应用图标来预判一款应用的质量、用途和可信赖性。

当你开始构思应用图标的时候,应该将以下几点牢记在心。另外,当你着手创建图标的时候,可以参考应用图标一节来了解更多的规则和指导。
  • 应用图标是产品品牌的重要组成部分。要将图标的设计看做是向用户讲述产品故事并与他们建立情感关联的重要机遇。

  • 最好的应用图标都是独特、简洁和吸引人的。

  • 应用图标在不同的尺寸规格下都应该表现良好,并且能够适应各种背景。另外需要注意的是,某些在大尺寸图标中可以增强视觉效果的元素,一旦缩小,有可能会使小号图标看上去非常脏乱。

其他图标

iOS提供了很多小图标,用来在标签栏、工具栏和导航栏当中代表那些最常见的任务或内容类型。要尽可能多的使用这些预设图标,因为用户已经很清楚它们的含义了。

当然,你可以在需要表现自定义行为或内容类型的时候使用订制化的图标。这些小巧而具有现代感的图标,在设计方式上与应用图标有很大的区别;可以参考栏按钮图标一节来了解更多。

图形

iOS应用往往包含有丰富的图形元素。无论是显示用户照片还是订制化的插图,以下这些原则都是需要遵守的:

支持Retina屏幕。确保为所有的图形元素提供Retina所需的@2x规格支持。

按照原始的长宽比例显示照片和图形,另外放大比率不要超过100%。你不会希望自己应用当中的图形元素看上去歪扭失真。此外,要让用户可以根据自己的需要对图片进行缩放。

不要在你的设计当中使用那些代表苹果公司产品的图形。这些图形的使用会涉及到版权问题,而且产品设计本身是经常会发生变化的

  • 品牌

品牌,不仅是在应用中呈现品牌的配色或logo这么简单。最理想的情况是,经由创造独特的外观和感觉,为用户带来印象深刻的优质体验,从而打造出你的应用所特有的品牌。

当你需要在应用中明确的向用户展示品牌信息的时候,要记住以下两点:

  • 将品牌元素中的色彩或图形进行必要的精炼,通过一种非侵入式的方式整合到应用当中。人们用你的应用,是为了完成某种任务或得到娱乐消遣,没人希望被迫去看广告。为了不影响整体体验,你需要安静的展示自己产品的品牌识别元素。在iOS7当中,你可以很轻松的定义一种和品牌相关的基本色,来表达元素的交互性和状态。

  • 不要从用户所关注的内容当中挤兑空间来展示品牌信息。例如在导航栏底部增加一个固定的信息条,只用作展示品牌信息,这样就会平白减少内容的显示空间;试着考虑其他非侵入式的方式,例如订制化的背景图片等等。

重要:应用图标是个例外,它应该完全聚焦在品牌识别性上。因为用户会很频繁的看到你的图标,所以要多花些时间在图标的设计上面,增强其对于用户目光的可识别性,这是很重要的

  • 与iOS的系统整合

使用标准UI元素

尽可能使用UIKit框架定义的各种标准UI元素。使用标准UI控件而非自定义元素,你和你的用户都会受益:

  • 如果iOS本身经过重新设计,那么标准的UI元素在系统更新时可以随之自动更新,而自定义的UI元素不会。

  • 人们会立刻了解怎样使用你的应用,因为他们已经习惯于标准的UI元素。

为了充分发挥系统标准UI元素的价值,你必须:

在使用任何一个标准UI元素的时候都要依照设计规范的指导。当一个UI元素无论看上去还是用起来都符合用户的期待时,他们就可以依靠已有的经验来更快更容易的使用你的应用了。你可以在UI元素一章中找到各类UI元素的规范。

通常,不要为标准的交互行为创建自定义UI控件。首先问问自己,为什么要创建一个行为方式与标准UI控件完全相同的自定义控件?如果你只是想要一种订制化的外观,可以考虑通过UIKit框架当中用来订制外观的API来改变标准UI元素的样式,或是改变元素的配色风格。如果你想得到的行为与标准控件的行为有些许区别,那么首先要确认能否通过属性的调整来使标准元素完成同样的目标。如果你需要的是彻头彻尾的订制化交互行为,那么在设计自定义控件的时候,要确保它看上去不会与标准控件相似。

技巧:Interface Builder可以帮你很轻松的创建标准UI元素、使用订制外观的API、设置外观属性、向控件中添加系统预设或自定义图标等等。可以参考Xcode用户指南了解更多详情。

不要为系统预设的按钮和图标赋予其他的含义。iOS提供了很多按钮与图标,你要读懂相关的文档,了解这些按钮与图标在语义上的含义,不要单纯依靠自己对它们外观的理解。如果你发现预设的按钮或图标无法准确的代表你想要表达的功能含义,那么可以自己创建。你可以在栏按钮图标一节当中找到相关规范,帮你更好的设计自定义图标。

如果你的应用可以带来沉浸型的体验,那么打造完全自定义的控件是合理的做法。因为你在创建一种独特的体验环境,对于用户来说,探索与该环境进行互动的方式也是他们所期待的体验之一。

对横竖屏切换的响应

人们通常会希望能够在任何定向方式下使用iOS设备,所以最好让你的应用可以在这些情况下做出恰当的响应。

让用户在横竖屏状态下都能聚焦于最重要的内容。这个目标具有最高优先级。人们需要在应用当中查看他们所关注的内容,并与之交互;如果横竖屏切换会使用户失掉焦点,他们便会感到迷失,并觉得丧失了对应用的控制权。

通常,要让应用能够运行在各种定向模式当中。人们可能会期望在任何定向方式下使用你的应用,能满足他们的期望是最好的。特别是iPad用户,他们会希望你的应用能够运行在他们当前所使用的任何持机方式下。当然,有些应用确实只能运行在竖屏或横屏当中;如果你的应用是这样,那么你应该参考以下几点原则:

  • 应用在启动时只按照默认支持的定向方式进行加载,忽略当前设备的屏幕方向。如果一款游戏或媒体浏览类型的应用只能运行在横屏下,那么就直接以横屏模式启动,即使设备本身是处于竖屏状态的;这种时候人们会明白需要调转屏幕才能正常浏览内容。

  • 避免在界面中通过UI元素提示人们调转设备屏幕。直接按照默认支持的定向方式启动应用,这就已经清楚的告诉用户需要旋转设备了,不需要再增加多余的UI元素进行引导。

  • 同时支持两种子状态。譬如,如果你的应用只能运行在横屏当中,那么无论当前横屏的方式是Home键在左手边还是右手边,人们都可以正常使用;如果人们在使用过程中将设备调转180度,那么应用最好也可以进行响应,自动调转180度。

如果对于你的应用来说,调转屏幕方向是用户输入方式的一部分,那么你可以通过特定的方式进行订制化的处理。例如,在一款游戏当中,人们需要通过旋转屏幕来产生相应的行为,那么游戏本身就不可以再响应横竖屏切换的规则了。这种情况下,你可以允许用户在进入主线流程之前仍然能够切换子状态(Home键在左手边或右手边),而一旦进入主线流程,那么旋转屏幕就只能用来触发游戏当中的特定行为。

在iPhone上,判断用户在调转屏幕方向时的需求所在,并进行响应。人们从竖屏切换到横屏时,通常是因为想要“看到更多”。如果你只是简单的将内容尺寸放大,那么未必能满足用户的期望。试着调整每一行文字显示的字数,如果需要,甚至是重新调整UI布局,使其能够呈现更多的内容。

在iPad上,尽量支持所有的定向方式,满足用户的期望。由于iPad自身屏幕规格较大,所以上一条中提到的“用户旋转屏幕以便看到更多”的需求是相对较弱的。相比于iPhone,人们不太关注于iPad的设备框架限制,以及Home键的位置,所以在很多时候,人们不会将iPad看做一种有默认定向方式的设备。如果可以,尽量让人们在任何持机状态下都能在iPad中与你的应用进行互动。

在为iPad应用设计横竖屏响应规则的时候,遵守以下几点规范:

  • 考虑改变辅助信息或功能的展示方式。虽然你必须确保重要内容始终能够获取用户注意力的焦点,但对于次要信息或功能,可以考虑随着横竖屏切换而改变呈现方式。以iPad内置的邮件应用为例,账户和邮箱列表就属于次要信息(当前选中邮件的详情是主要内容)。在横屏时,次要信息被放置在左侧面板中,而竖屏时,则是呈现在弹出面板里的。对于某些游戏,在横屏状态时的界面边界到了竖屏当中也许需要进行重绘,这就有可能导致边界上下留出额外的空余空间。这种情况下,可以考虑在这些空余空间当中展示一些游戏辅助信息或对象。

  • 避免无意义的布局变化。尽量在所有定向方式下都提供具有一致性的体验。具有相似性的体验可以让用户通过已经掌握的使用模式在横竖屏当中轻松操作。如果你的iPad应用会在横屏时以网格的形式展示图片,那么在竖屏时,就没有必要一定更改为列表形式。

  • 如果可能,在切换横竖屏时尽量避免对信息内容样式的重新定义。尽量保持内容具有相似的格式样式,特别是对于文字内容来说,不要让用户因为切换横竖屏所导致的版式变化而无法找到之前阅读到的地方。如果有些内容样式必须发生变化,那么要通过动画过渡效果来帮助人们更好的跟随这些变化。例如,当横竖屏切换时,内容当中必须增加或减少一行文字,那么可以考虑在增加和减少的过程里使用渐入和淡出的动画效果。为了让自己设计出更好的横竖屏切换方案,可以想象一下,如果你是在现实世界当中与这些内容进行物理性的互动,那么它们有可能表现出怎样的行为规律。

  • 为横竖屏各提供一张单独的启动图片。这样,无论人们在那种持机方式下打开应用,都可以感受到平滑的启动体验。与iPhone当中的系统首屏不同,iPad的系统首屏是支持横竖屏切换的,人们有可能在任何方式下退出前面一个应用,并继续打开你的应用。

弱化文件和文档的处理过程

iOS可以帮助人们创建和管理文件,但这不意味着人们在使用iOS设备时必须思考文件系统方面的问题。

在iOS当中,不存在类似OS X系统中的Finder这样的应用,用户也不应该被要求与文件直接打交道,特别是不该去面对任何会让他们联想到文件源数据或存储位置一类信息的东西,例如:

  • 确认打开或保存文件的对话框。

  • 关于文件访问权限的信息。

尽量让人们在不需要打开桌面端iTunes的情况下管理各种文档。考虑使用iCloud来帮助用户访问他们在不同设备上的内容。要为用户提供更好的iCould体验,可以参考iCould一节。

如果你的应用提供创建及编辑文档的功能,那么可以尝试提供某种“文档选择器”,帮助用户打开已有文档或创建新文档。理想情况下,这样的文档选择器应该:

  • 具有高度的图形化外观。让人们可以轻松的通过图形化的界面外观来识别出他们想要的文档。

  • 让人们使用最少量的手势来完成目标操作。例如,通过封面流或网格的形式组织文档,让用户通过滑动手势进行浏览,并通过点击来打开。

  • 提供新建文档的功能。不要让用户必须到其他地方创建新文档,而是直接在文档选择器当中点击文档图形上的某种默认占位图片来直接创建。

提示:你可以使用Quick Look预览功能让用户在你的应用中对文档进行预览,即使你的应用并不支持这类文档的打开操作。参考Quick Look一节了解更多。

给用户一种安全感,让他们知道自己的工作成果始终会被保存,除非他们主动取消保存或进行删除。如果你的应用提供创建及编辑文档的功能,要确保这些数据无需用户手动执行也可以得到保存。iOS应用应该承担起帮助用户保存输入内容的责任,无论是他们在当前文档仍然处于打开状态的时候去查看另外一个文档还是切换到其他应用。

不过,如果你的应用的主要功能并不是创造内容,但你需要让人们可以在查看信息与编辑信息在两种模式间进行切换,那么在这种情况下你可以提醒用户对信息变更进行保存。通常,可以在查看信息的视图界面中提供“编辑”按钮,当用户点击了这个按钮之后,就会进入编辑状态,同时原来的“编辑”按钮变为“保存”和“取消”这两个按钮。这种变化可以提醒人们,他们现在正处于编辑模式,可能需要执行保存操作,而“取消”按钮则为他们提供了在不保存变更的情况下直接退出编辑模式的出口。

必要的时候提供设置方式

有些应用可能需要向用户提供安装或设置选项,不过多数应用是不需要的,或是可以推迟必须进行设置的环节。成功的应用可以让多数用户立刻上手使用,而且会在UI当中提供一些可以调整体验模式的方法。

尽量避免将用户打发到系统的“设置”当中进行操作。要记得,用户必须首先离开你的应用才能进入系统的设置,你不会希望鼓励用户这样做的。

如果你能按照目标用户群当中大多数用户的期望来设计产品,就可以减少这种设置方面的需求。如果你需要用户的某些信息,可以首先试着从系统当中存储的用户信息当中进行查询,而不是让用户再次进行输入。如果你决定必须在应用中提供设置功能,可以参考iOS应用编程指南当中的“The Settings Bundle”一节了解更多信息。

如果有必要,让用户尽量在你的应用内部进行设置。在应用内提供设置选项,可以让相应的变更可以直接体现出来,让用户即时的看到变更结果,而无需在你的应用与iOS的“设置”之间进行切换。

如果需要,尽量在应用的主界面中提供设置选项。特别是当设置选项对应着应用的主要任务,或是用户可能频繁的变更设置的时候,最好将相关的设置选项直接放置在主界面当中。如果你要提供的设置功能对用户来说只是偶尔才会用到,那么就尽量将它们放在单独的界面当中。

------------------------------------------------------------

最后再次感谢@李林的翻译,能够节省我很大程度的阅读成本。有兴趣的同学也可以关注他的新浪微博,或者他的Be For Web | 为网而生(博客料很多!)


评论
热度 ( 72 )
  1. 仔仔Asialin 转载了此文字
  2. Peicoo独立设计 转载了此文字
  3. 戏子规则灵感星球 转载了此文字
  4. stand alone complex灵感星球 转载了此文字
  5. 我是南极熊3灵感星球 转载了此文字
  6. Norbbytao独立设计 转载了此文字  到 灵感星球
  7. 看山听水独立设计 转载了此文字
  8. hzlxin-起点 转载了此文字
  9. xin-起点独立设计 转载了此文字
  10. Asung独立设计 转载了此文字  到 Asung收藏集

© 独立设计 | Powered by LOFTER