苹果iOS人机交互界面开发指南

移动开发 iOS
我们曾经介绍过《iPhone应用界面设计指南》,我们将介绍iPhone应用界面设计指南的一个章节——《苹果iOS应用人机交互界面开发指南》。

我们曾经介绍过《iPhone应用界面设计指南》,我们将介绍iPhone应用界面设计指南的一个章节——《苹果iOS应用人机交互界面开发指南》。

用户界面原则

 

用户界面原则

好的人机界面规范遵从于用户思考和行动的方式,而不屈从于设备的性能。一个缺乏吸引力,复杂的,或违悖逻辑的用户界面,却会让原本优秀的应用变得索然无味。反过来,

一个漂亮的,直觉感知的,引人入胜的界面能强化应用程序的功能,并且能在用户心中激发出正面的情绪。

整体之美

整体之美,并不是简单地指应用界面有多漂亮,而是指应用的外观和功能是否完美地结合。例如,用来处理实际工作的应用通常会简化装饰性的UI元素,并置于背景中,而将重要的地位让给任务本身,因而会仅提供标准的控件和行为。这样传递给用户的,关于这个app目的和特性,是简单而统一。相反地,如果类似的app提供的是古怪,花哨的界面,用户可能无法理解,或理解为矛盾而荒谬的。

一致性

界面上的一致性,确保用户能借鉴先前使用app的知识和经验。做到一致性的应用程序并不是一味地抄袭别人。确切的讲,而是充分利用了规范化和模式化带来的体验上的优势。

判断一个应用是否遵循了一致性原则,请先思考以下问题:

◆该应用是否符合IOS标准?是否正确使用了系统自带的控件,视图和图标?是否跟设备的特性可靠地结合?

◆该应用自身是否保持一致性?字体样式及专业术语是否统一?相同的图标是否都意味同一件事物?当用户在不同场景执行同样的操作时能否预测系统的反应?定制的UI是否从头到尾都有一致的外观和行为?

◆当前的应用跟之前的版本是否统一?各版本的术语表及含义是否一致?基本的概念本质上来讲是否未曾改变?

直接操作

当用户可以直接操作屏幕中的物体,而不再需要通过控件来操控时,他们会更容易沉浸于工作任务本身,也更容易理解操作的结果。多点触摸技术让iOS用户真正体验到了直接操作的便利。通过手势操作的方式,让用户对界面有更多的亲近感,以及控制感,原因是他们不再需要通过中间媒介,例如鼠标,间接地触摸物体。

在一个iOS应用程序,以下方式可以让用户体验到直接操作:

◆通过旋转或移动设备来影响屏幕中的物体

◆通过手势来操作屏幕中的物体

◆操作结果以可见,迅速的方式展示给用户

反馈

反馈是对用户的操作的回应,使他们确信自己的请求正在被处理。用户希望操作控件时能接受即时的反馈,如果操作过程比较久,需要不断更新操作进展。

内置的应用程序能响应每一个用户操作行为。例如,列表项在用户点按时会高亮。持续数秒的操作,会有一个控件来显示过程进度,合适的话,还可以加上补充性的文字。

细微的动画能作为意思明确的反馈,清晰地展示操作结果。例如,列表添加新行时的动画,能帮助用户追踪这个改变过程。

声音同样能提供有用的反馈,但这个不应该做为主要或唯一的反馈机制,因为在有些场所,用户可能听不到声音,或者他们关闭了声音。

隐喻

当应用中的物体和操作是由现实世界映射过来时,用户能快速地掌握如何使用这个应用。

软件隐喻的典型例子是文件夹:在真实世界,人们用文件夹放置东西,因而在计算机中,把文件放入文件夹,就能迅速地被理解。

恰当的隐喻,在使用或体验方面不需要拘泥于现实世界的限制。比如,用户能往计算机的文件夹放入尽可能多的文件,而这在现实中是不可能的。

iOS为隐喻提供了巨大的施展空间。iOS支持多种图片格式和手势。用户实实在在的跟屏幕中的物体产生交互,在很多情况下的操作跟现实中没有两样。在iOS中隐喻包括:

◆点按iPod播放控制键

◆在游戏中,拖动,翻动,滑出物体

◆滑动双向开关

◆翻动照片

◆点滑选择器来选择

一般来说,只要映射得不过,隐喻都能发挥很好的效果。假如电脑上的文件夹还需要被组织到某个虚拟橱柜中,就灰常不好用了!

让用户来控制

让用户而不是程序来触发和控制操作。虽然程序可以给出操作建议,或者对危险的操作提出警告,但如果因此而完全剥夺了用户处理错误的权利,这样就不对了。好的app既能给予用户足够的权限,又能帮助用户避免危险的后果,这需要做到一个平衡。

熟悉且可预测的控件和行为能够加强用户对app的控制感。并且当操作简单而直接,用户能轻易地理解并记住。

用户希望有足够多的机会,在操作被处理前取消它。并且,他们希望能有机会执行一个可能的毁灭性的操作来达到他们的目标。最后,对正在被执行的操作,他们也希望能优雅地停止它。#p#

App设计策略

 

定义你的应用程序

用一句描述性的语句来清晰,具体地定义出你的app的主要用途和受众人群。

在开发的早期就定义好你的app,这能帮助你成功地将产品想法和特性转化为一致性的应用产品。在开发过程中,利用这个定义来帮助你判断哪些潜在的特性和行为是有意义的。请按照以下的步骤来定义你的app。

1. 列出所有用户可能喜欢的特性

现在就开始头脑风暴吧,你将会获得有关你产品主要想法的所有相关的任务。不要担心这份列表会太长;稍后你可以进行缩减。

2.明确你的用户

你的用户可能都是在移动的,并且都希望应用程序拥有漂亮的图片,简单的交互和高效的性能,如何再细分呢?你可以问问自己,对用户来说哪些是重要的事,以便利店购物应用为例:

◆用户通常在家做饭还是更喜欢便当

◆用户是优惠券控还是对其不感冒

◆喜欢尝试新的食材还是一成不变

◆教条地遵照食谱还是勇于创新

◆购物方式是少量多次还是多量少次

◆是将需要的东西列在购物清单一次采购还是在回家的途中凭记忆购买需要的东西

◆认品牌还是无所谓

深思熟虑这些问题后,可能你会给出最能描述你的受众人群的3个特征:依赖食谱,忙碌,节俭。

3.精简app特性列表

根据受众人群的特征,对app特性列表做精简,最后可能只留下了少数的app特性,这就对了,伟大的iOS应用高度专注于用户需要完成的任务。

举例来说,考虑你在步骤一列出的那一长串特性,尽管都很有用,但并非对所有用户都如此。也不会所有用户都欣赏你提供的那些特性。

你检查这份列表后,最后得出需要关注3个主要特性:创建列表,激活并使用代金券,获取菜谱。

现在你可以打造应用的定义语句了,准确概括出谁使用app,做什么事情。还是这个便利店购物应用的例子,一个好的定义语句可能是:

那些热爱烹饪,节俭的人们创建购物清单的工具。

4.还没有结束

在整个开发过程中使用这个定义来界定app特性,所使用的控件,及术语是否合适。

为设备设计App

你清楚你的app功能及用户群;与此同时,你需要确保仅从外观和感觉,就能明显判断出这是一个iOS设备上的应用。这一点至关重要,因为用户对选择安装到设备上的应用都寄予了很高的期望。如果你的app感觉像是为其他设备所设计的,或者是像网页上的应用,用户就不会对你的应用给出好评。

拥抱iOS UI模式

 

习惯了内置app外观和行为的用户,对那些下载的应用他们会有类似的体验期望。你不用模仿这些内置app的每一处细节,不过理解其中的设计模式将很有帮助。从理解各种iOS设备的特征,及运行的app开始。然后,记住下面几件事情:

让控件看起来都是可点按的。iOS控件,例如按钮,选择器,滑动条,都带有轮廓线和渐变,这会引导用户去点按。

App的结构是清晰且易于导航。iOS提供了导航条用于多层级内容的导航。

为用户任务量身定制UI

最好的app能够让定制的UI体现出清晰的用途,且便于使用。要做到这一点,在设计的初期就应该考虑到UI定制的问题。原因是对品牌打造,原创性及市场销售的考量经常会影响UI定制的决策,而这个过程也会持续,直到你考虑定制对用户体验的影响。

使用iOS SDK,你可以选择尽可能多或少的定制UI。因为没有对定制的数量做任何限制,你需要考虑这么定制对app提供的任务会有什么影响。关于任务,你需要考虑用户多久来执行一次,并且是在什么情况下执行。

不要为了定制而定制。理想情况下,经过定制的UI能够方便用户处理任务,并且加强他们的用户体验。你应该尽可能的让app任务本身来决定是否及如何定制UI。例如:

◆如果你的app需要处理大量具体数据,用户会非常希望提供的界面便于理解,尽可能的使用标准控件,和高效的导航。

◆如果你的app只是用于浏览内容,用户通常不希望UI太突出。

◆如果你的app是游戏,或者是模拟真实世界,具有故事情节的应用,用户很希望自己能进入一个奇特的世界,充满了漂亮的图片和丰富的交互。

尽可肯能不要加重用户的认知负担。用户习惯于标准UI控件的外观和行为,他们不用再停下来思考如何使用。当面对那些无论是外观还是行为都不同于标准的UI控件,用户就无法利用先前知识和经验。除非你特制的UI能帮助用户简化工作,他们不太愿意花时间去学习这种并不普遍的用法。

保持一致性。你定制了越多的UI,你就越需要确保UI的外观和行为跟app保持一致。当用户花时间来使用那些专门定制的陌生控件时,他们会期盼从你的app中获得使用的些许线索。

内容至上。标准的控件对用户来说太熟悉了,因而不会跟内容来争夺用户的注意力。当你在定制你的UI控件,请注意不要它喧宾夺主了,应该确保用户能将注意力放在他们更关心的内容上。举例来说,如果你的app可以播放视频,你可能会定制播放控制按钮。当你与其在是否选择定制还是标准的控件的抉择中犹豫不决,还不如花时间考虑下控件是否在用户开始观看视频后消失的问题。

反复考虑能帮助你更好地定制。如果你想定制出比标准控件更好的控件,请确保你设计的控件能提供同标准控件一样足够多的信息。比如你创建了一个远离用户观念中的按钮形象,没有圆角和没有三维效果,用户就意识不到这是可点按的。又或者,你创建了一个双向开关,却没有展示反向值,用户可能就意识不到这是个双向开关。

确保对定制的UI做充分的用户测试。测试过程中,请密切观察测试者,观测其能否对控件的行为做出预测,以及能否轻松的交互。比如你设计了一个可点按区域小于44*44pixel的控件,那么用户就不能轻松地点按。

原型和迭代

在将你的设计付诸实现以前,先制作出原型来进行用户测试是一个不错的想法。即使你只能邀请为数不多的同事来测试你的原型,他们对你的app功能和用户体验上的全新视角也能使你获益良多。

在你设计的最初阶段,你可以使用纸质原型或线框图对主要视图和控件进行布局,同时确定出屏幕之间的转换地图。原型测试能提供一些有用的反馈,但原型信息的匮乏也会误导测试者。用户很难凭空想象在真实数据下app的体验将会变得如何。

如果你能将新鲜出炉的app放在真机上运行,你将会获得更有价值的反馈。当用户与你真机上的原型进行交互时,他们会更容易发现哪个功能还未实现,哪里用户体验太复杂。

创建出一个可靠原型的最简单的方法是使用Xcode的模板,先新建一个基本的app,并且用合适的可占位的内容来填充。然后将原型安装在设备上,提供用户一个真实的测试环境。你不必提供大量的数据,也不用做到每个控件都是可点按的。只需测试者能通过点按屏幕的某个区域跳转到下个逻辑视图,或者能完成主要的任务,他们就能给出建设性的反馈意见。

当你使用Xcode来制作原型,你能很轻松的修改原型。一旦修改周期缩短,你就有时间来做多轮的迭代测试,从而确保在开发之前完善并确定你的最终设计。#p#

用户体验指南

 

抓住主要的任务

当应用程序一直关注于核心任务,就能让人感到满意和愉快。你的应用定义语句会帮助你专注于核心任务上。如要持续地关注,你需要判断出每块内容和屏幕中最重要的部分。

分析每个屏幕,哪些是必需的。当你考虑每个屏幕需要展示哪些,问问自己,这个关键的信息和功能,用户现在就需要吗?如果回答不是,考虑其在上下文中是否必不可少,或者可能根本就不重要。

 

内容至上

非游戏类的应用,考虑设计一个简洁的UI框架,你可以通过以下方式:

最小化控件的数量和所占的地位,以减轻其在UI界面中的比重。照片应用中,把一些不起眼的控件放置在一个半透明条中。

定制控件时,请尽量完美地与你图片风格统一。

用户停止与控件的交互,过一定时间后,考虑将控件隐去。

从上到下地考虑

屏幕的顶部是最容易被用户注意到的。用户手握设备,通常会有如下的交互方式:

◆用他们不常用的手握住(或平躺在平面上),用常用的手的手指操作。

◆用一个手握住,并用那个手的拇指操作

◆放在双手间,且用两个手的拇指同时操作

将最常被用到的信息放在顶部,那里是最容易被发现和够到。当用户从上到下的访问屏幕,展示的信息应该是从通用到特殊,从高级别到低级别。

符合逻辑的路径

符合逻辑的信息路径,能方便用户做出预测。另外,请使用标记,例如在后退按钮上标记将回退到哪里,用户通过此标记能知道当前的位置,也知道将回退到何处。

大多数情况下,要访问一个屏幕只有唯一的路径。如果需要在不同场景下访问同一个屏幕,考虑模式视图的方式。

让一切变得简单和显而易见

你应该努力让你的应用程序容易理解,因为你无法确定用户是否愿意花时间或者精力来研究它。

开门见山地展现核心功能。通过以下方法来达成:

◆减少要让用户做选择的控件

◆合理地使用标准控件和手势,并注意保持一致性

◆控件的标签需要明确,这样用户能清楚的知道他们在做什么事

同内置应用程序所采用的使用规范保持一致。用户了解如何在具有层级关系的屏幕间导航,编辑列表内容,和通过tab条在程序的各模块间切换。通过强化用户体验让这一切变得简单。

 

使用能被用户理解的术语

在使用文本与用户沟通时,请使用那些能被用户理解的术语。特别说明的是,要尽量避免在界面中出现技术性的行话。站在用户的角度来考虑所使用的词句是否贴切。

Wifi网络设置界面就使用朴素的文字来解释,对用户的偏好设置,iOS是如何响应的。

 

最小化必要的输入

输入信息会花费时间和精力,不管是点按控件还是键盘输入。

【编辑推荐】

  1. Windows Phone 7 免费线下培训火热报名中
  2. 揭秘苹果最新iOS 4.3操作系统
  3. iOS操作系统多任务设计的繁与简
  4. 不编程也开发 13个无需编程的iOS开发工具
  5. 斯坦福大学iPhone开发中文字幕视频教程 持续更新中
责任编辑:佚名 来源: 译言网
相关推荐

2014-09-18 10:53:38

Apple Pay开发人机界面

2013-07-03 14:48:25

iOS 7人机交互iOS 7 UI设计Navigation

2013-06-17 16:12:23

iOS 7人机交互UI设计基础

2013-07-03 15:29:45

iOS 7人机交互iOS 7 UI设计Interactivi

2013-07-03 17:08:14

iOS 7人机交互UI设计基础整合iOS系统

2013-07-03 16:36:35

iOS 7人机交互UI设计Animation动画

2013-07-03 16:58:36

iOS 7人机交互UI设计Icons

2013-07-03 14:44:24

iOS 7人机交互iOS 7 UI设计Layout

2013-07-03 15:03:46

iOS 7人机交互iOS 7 UI设计Modal Conte

2013-07-03 13:34:57

iOS 7人机交互iOS 7 UI设计App Anatomy

2013-07-03 15:39:58

iOS 7人机交互UI设计Terminology

2013-07-03 17:04:12

iOS 7人机交互UI设计基础Branding品牌化

2013-07-03 16:52:24

iOS 7人机交互UI设计基础文字和色彩

2020-12-08 09:12:22

人机交互智能

2021-04-18 13:50:10

人机交互人工智能

2013-07-03 14:26:19

iOS 7人机交互iOS 7 UI设计iOS设计师

2023-03-02 09:27:00

智能

2013-02-28 15:22:44

iOS人机交互

2023-01-18 10:06:07

数字人自然语言生成

2022-06-27 15:06:03

元宇宙人工智能区块链
点赞
收藏

51CTO技术栈公众号