iOS 7人机交互指南-UI设计基础:整合iOS系统

移动开发 iOS
本文为大家介绍了iOS 7人机交互指南UI设计基础的Integrating with iOS(整合iOS系统):使用标准UI元素;对设备使用方向(横屏和竖屏)做出相应;弱化对文件和文档的处理;如果需要,可提供app的设置选项。希望对大家有所帮助。

使用标准的UI元素

尽可能使用UIKit框架提供的标准UI元素,这样用户和开发者都能从中获益:

对开发者而言,如果iOS进行了重新设计,那么标准的UI元素能够在系统更新时自行更新,而自定义的元素则不会。

对用户而言,标准的UI元素会让他们觉得很舒服,这样他们可以立即理解如何在应用中使用这些标准的UI元素。

为了好好利用这些标准的UI元素,需注意以下至关重要的几点:

遵循每个UI元素的使用指南。当UI元素的外观、运行方式和用户期望的一样时,他们可依据此前的经验在你的app使用这些元素。你可以在Bars,Content ViewsControls以及Temporary Views中找到UI元素使用指南。

一般来说,不要使用自定义UI控件来执行一个标准的交互操作。首先,要问问自己为什么要创建一个交互行为方 式与标准元素一致的自定义UI元素。如果你仅仅是想要一个自定义的外观,那可以考虑通过使用UIKit框架的外观自定义API来改变标准UI元素的外观, 或者改变元素的色调。如果你想要一个略有不同的UI控件交互行为,那首先要确保通过对标准元素的调整可以达到你想要的效果。如果你想要一个完完全全的自定 义UI,那么***是设计一个和标准元素看起来很不一样的自定义元素。

TIP:Interface Builder可以帮你简单地创建标准的UI元素,使用外观自定义API,设置属性,并在控件中添加自定义图标或者系统提供的图标。关于Interface Builder更多详情,可以查看Xcode 用户指南

不要使用系统定义的按钮和图标来表达其他一些含义。你可以在应用中使用iOS 提供的按钮和图标。要确保你已理解了相关文档,理解了按钮和图标使用的语义环境,不要简单依赖你对按钮和图标外观的理解和看法。

如果系统没有提供适当的按钮或者图标来准确地传达app的功能,那么你可以自行创建一个。Bar Button Icons这一章节可以帮你更好地设计自定义图标。

如果你的app能提供沉浸式的任务或体验,那么创建完全自定义的控件就可能是合理的做法。因为你正在创建一种***的环境,并且知道如何在这类app中管理用户体验所期待的环境。

对设备使用方向(横屏和竖屏)做出相应

用户一般期望在横屏和竖屏模式下都能使用设备,所以你的app***能做出响应。

不管设备处于什么方向,首先都要维持对主要内容的聚焦和关注。用户使用你的app来浏览他们关心的内容或者与内容进行交互。移动设备旋转后,改变用户的视觉焦点可能会让他们倍感迷惑,并产生对app失控的感觉。

一般情况下,要让app支持横屏和竖屏两种模式。用户期望在任何模式下都能使用你的app,***能满足用户的要求,尤其是iPad用户。不过,也有一些app只有横屏或竖屏运行方式。如果你的app只能在一个方向(横屏或竖屏)运行,你应该:

1.不管设备处于横屏模式还是竖屏模式,都要以应用支持的方向启动。比如,如果游戏app或者视频观看类app只能以横屏模式运行,以横屏模式启动app是合乎情理的,即便当前设备处于竖屏模式。这样即便用户以竖屏模式启动app,他们也知道把设备旋转至横屏模式。

2.避免用UI元素告知用户需旋转设备。以app支持的方向运行已经清楚地告诉用户需要旋转设备,不需要增加多余杂乱的UI元素。

3.支持横屏和竖屏两种模式。比如,如果app仅支持横屏模式,不管Home键在左还是在右,用户应该都会使用它。如果用户把设备旋转180度,那么app***也能作出旋转180度的响应。

如果旋转设备持有方向是用户“输入”(或者行为输入)的一部分,那么你可以以APP独有的方式处理。比如, 一款游戏可以让用户通过旋转设备来移动游戏块,那么这款游戏就不能再对设备方向旋转进行相应。这种情况下,在用户进入游戏的主任务之前,你的游戏应当支持 横屏和竖屏两种模式,允许用户在两者之间进行选择。在用户开始应用的主任务后,你可以以app“特有”的方式来相应设备方向的更改(此处特有的方式指的是 旋转设备来进行特定的游戏操作)。

在iPhone上,对设备方向更改进行相应的同时也要预测用户的需求所在。用户从竖屏模式旋转为横屏模式,通常是想要查看“更多内容”。仅按比例缩放内容会难以满足用户心理期望。相反应该重新设计文本的行数,需要的话,也得更改一些UI元素的布局,这样用户才能在屏幕上看到更多内容。

在iPad上,app要尽量支持所有的方向,努力满足用户的需求。iPad更大的屏幕降低了用户旋转设备以 “查看更多”内容的欲望。用户并不十分关心设备的框架或者Home键的位置,因此他们不认为设备应该有一个默认的方向。不管设备处于什么方向,你的app 应该能为用户提供良好的用户体验,应该尽可能地鼓励用户从不同方向(横屏或竖屏)与iPad进行交互。

以下是iPad app设计相关的几点规范:

1.考虑设备方向改变时如何展示辅助信息和功能。虽然重要内容是视觉的焦点,但你也可以通过对设备方向更改的响应来展示次要功能和内容。

比如iPad上的Mail应用,账户和邮箱列表属于次要内容(选中信息是主要内容)。横屏模式下,次要内容展示在左侧面板;而竖屏模式下,次要内容展现在弹出面板中。

还有个例子,一款iPad游戏以横屏模式展示了一个矩形游戏棋盘。在竖屏模式下,棋盘顶部和底部多出了一些空间,那么这款游戏就需要重新设计以适应竖屏显示模式。不是简单地拉伸棋盘,而要展现补充信息来填充额外的空间。

2.避免无端地改变布局。如果可能的话,不管设 备处于横屏模式还是竖屏模式,都要为用户提供始终如一的用户体验。这样当设备旋转时,相似的使用体验可以让用户维持一贯的使用模式。比如,你的iPad app在横屏模式下以网格的形式展示图片,那么在竖屏模式下,就没必要以列表的形式展示相同的信息。

3.可能的话,在设备方向旋转的情况下,尽量避免重新定义信息内容和重新设计文本。不管设备处于什么方向,应用都应该维持相似的信息格式。如果用户在阅读文本,他们旋转设备后,要避免用户因离开原先阅读的位置而感到迷惑。如果应用内容格式 更改是不可避免的,要用动画来帮助用户明白其中的改变。比如设备在横屏和竖屏模式之间进行了切换,你必须增加或者删除一些文字,这时候你可以考虑使用淡入 和淡出的动画效果。为了设计出适当的横屏竖屏方案,你可以思考下,在现实世界中你期望如何与内容进行物理性的交互。

4.为app横屏和竖屏模式各自设计一个***的启动页。不管当前设备处于什么方向,一个平滑运行的***的启动页可以让用户忽略设备当前的方向。与iPhone主屏形成了一个对比,iPad主屏支持横屏和竖屏两个模式,所以如果用户刚从其他app中退出来,那么他会喜欢以上个app的使用方式启动你的app。

弱化对文件和文档的处理

iOS app可帮用户创建和管理文件,但这并不意味着用户不得不考虑iOS 设备上的文件系统。

在iOS app中,没有一个类似OS X系统中的Finder,用户不应该被要求与文件进行交互,不应该面对任何让他们想到文件元数据或者储存位置之类的信息。比如:

1.一个会暴露文件层级的打开或保存文件的对话框。

2.关于文件权限状态的信息

尽量允许用户在不需要打开电脑iTunes的情况下管理文档。考虑使用iCloud来帮助用户访问他们所有设备上的内容。App如何为用户提供优秀的iCould体验?可参考iCould一节。

如果你的应用帮助用户创建和编辑文档,那么可以尝试提供某种文档选择器,来帮用户打开现有文档或创建新文档。理想情况下,文档选择器应该:

1.具有高质量的图形外观。用户应该可以简单地通过屏幕上文档的可视化形式来识别出他们想要的文档。

2.让用户使用最少的手势来做他们想做的。比如用户可能通过横屏滚动或者网格的形式来操作文档,并通过点击来打开文档。

3.提供新建文档动能。文档选择器允许用户点击图片占位符来创建新文档,而不是让用户去某个地方创建新文档。

TIP:你可以使用Quick Look预览功能让用户在你的应用中预览文档,即便你的app不支持打开文档。如何在应用中提供该功能呢?可参考Quick Look一节。

给用户一种安全感,让他们知道自己的工作进程始终会被保存,除非他们准确地执行取消或者删除。如果你的应用为用户提供创建和编辑文档的功能,要让用户知道无需他们自己动手执行保存。iOS app应该承担保存用户输入内容的责任,无论是在他们打开一个不同的文档时,或者与其他app进行切换时,app都能保存他们的输入内容。

如果你应用的主要功能不是创造内容,但你允许用户在查看信息与编辑信息之间进行切换,那么这时候你可以要求用户对信息变更进行保存。

这种情况下,在展示信息的视图中提供一个编辑按钮。当用户点击编辑按钮进入编辑状态后,你可以使用一个保存按钮来替代编辑按钮,并增加一个取消 按钮。编辑按钮的变化可以提醒用户处于编辑状态,可能需要对内容进行保存,而取消按钮则为用户提供了不保存内容变更的情况下推出编辑状态的选择。

这种变化可以提醒人们,他们现在正处于编辑模式,可能需要执行保存操作,而“取消”按钮则为他们提供了在不保存变更的情况下直接退出编辑模式的出口。

如果需要,可提供app的设置选项

有些app可能需要为用户提供配置或设置的选项,但是大多数app不需要这样的设计,或者可以延迟对这个环节的设置。成功的app可以让用户快速上手,或者在主要的UI中提供一些可调整的方法。

可能的话,避免把用户引导至“设置”需求中。很重要的一点,用户必须首先离开你额应用才能打开“Settings app”,你也不想鼓励用户这么做。

当你能按照大多数用户期望的那样来设计app,你也就降低了用户设置app的需求。如果你需要用户的某些信息,可先查询系统储存的用户信息,而不是首先要求用户为你提供。如果你确定你必须在iOS app中提供相关设置,可查看iOS app编程指南的“The Settings Bundle”一节。

如果需要,尽量让用户在你的app中进行操作。在app中集成配置选项可以让变化同步表现出来,这样用户不需要离开你的app就能进行相关设置。

如果需要,尽量在主要的UI中提供设置选项。如果主要UI代表着主要任务,或者是用户可能会频繁地更改设置,这些情况下,把设置选项放在主要UI中就非常有意义了。如果用户只是偶尔改变下app的设置,那就把它们放在单独的视图中。

责任编辑:闫佳明 来源: cocoachina
相关推荐

2013-06-17 16:12:23

iOS 7人机交互UI设计基础

2013-07-03 15:29:45

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

2013-07-03 14:48:25

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

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 16:36:35

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

2013-07-03 13:34:57

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

2013-07-03 16:52:24

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

2013-07-03 15:39:58

iOS 7人机交互UI设计Terminology

2013-07-03 17:04:12

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

2013-07-03 14:26:19

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

2013-06-24 11:01:30

IT技术周刊

2011-03-02 08:35:19

人机交互界面iOS

2015-11-04 09:54:34

ios9人机界面ui

2021-08-17 10:54:57

AI 数据人工智能

2021-08-17 09:54:05

人机交互交互模型国际主流

2013-02-28 15:22:44

iOS人机交互

2010-04-20 09:08:36

2020-12-08 09:12:22

人机交互智能
点赞
收藏

51CTO技术栈公众号