iOS 8人机交互指南(7)

前一篇:iOS 8人机交互指南(6)

7. 交互与反馈(Interactivity and Feedback)

7.1 用户需了解的标准手势(Users Know the Standard Gestures)

People use gestures—such as tap, drag, and pinch—to interact with apps and their iOS devices. Using gestures gives people a close personal connection to their devices and enhances their sense of direct manipulation of onscreen objects. People generally expect gestures to work the same in all the apps they use.

人们使用手势——例如点击、拖拽以及捏合——来与 app 和 iOS 设备交互。使用手势会带给人们与设备之间一种亲密的个人联系,也会加强他们直接操控屏幕对象的感觉。人们通常期待所有 app 中手势操作的效果一致。

此处为一段视频,可以到原文链接中查看

Tap To press or select a control or item.

点击(Tap):通过点击来按压或选择一个控件或条目。

此处为一段视频,可以到原文链接中查看

Drag To scroll or pan—that is, move side to side.

To drag an element.

拖拽(Drag):拖拽元素由一个位置移动到另一位置。

此处为一段视频,可以到原文链接中查看

Flick To scroll or pan quickly.

轻按滑动(Flick):轻按并滑动来实现快速滚动。

此处为一段视频,可以到原文链接中查看

Swipe With one finger, to return to the previous screen, to reveal the hidden view in a split view controller, or the Delete button in a table-view row.

With four fingers, to switch between apps on iPad.

滑动(Swipe):使用单指滑动,可以实现返回上一界面,显示分割视图控制器中的隐藏视图或图表视图中行的左滑/右滑删除按钮。

iPad 上四指滑动可以实现 app 间的切换。

此处为一段视频,可以到原文链接中查看

Double tap To zoom in and center a block of content or an image.

To zoom out (if already zoomed in).

双击(Double tap):双击一段内容或者图片可以以其为中心来进行放大。如果已经处于放大状态,再次双击就会缩小。

此处为一段视频,可以到原文链接中查看

Pinch Pinch open to zoom in; pinch close to zoom out.

捏合(Pinch):两指向外捏开可以放大;两指向里捏合可以缩小。

此处为一段视频,可以到原文链接中查看

Touch and hold In editable or selectable text, to display a magnified view for cursor positioning.

长按(Touch and hold):长按可以唤起编辑态,内容可以进行编辑或选择,此时显示一个带光标的放大视图。

此处为一段视频,可以到原文链接中查看

Shake To initiate an undo or redo action.

摇动(Shake):通过摇动来撤销或重做某一个操作。

In addition to the standard gestures users know, iOS defines a few gestures that invoke systemwide actions, such as revealing Control Center or Notification Center. Users rely on these gestures to work regardless of the app they’re using.

除了用户已知的标准手势,iOS 还定义了几个手势用于调用起系统级的操作,例如显示控制中心和通知中心。无论当前正在使用什么 app,用户都可以使用这些手势。

Avoid associating different actions with the standard gestures. Unless your app is a game, redefining the meaning of a standard gesture may confuse people and make your app harder to use.

避免与标准手势含义不一致的操作。除非是游戏 app,不然的话,对标准手势含义的重定义会让用户困惑,app 也变得难用。

Avoid creating custom gestures that invoke the same actions as the standard gestures. People are used to the behavior of the standard gestures, and they don’t appreciate being expected to learn different ways to do the same thing.

避免创建与标准手势含义相同的自定义手势。用户已经习惯于标准手势的行为,他们不希望学习不同的方式来完成同样的任务。

Use complex gestures as shortcuts to expedite a task, not as the only way to perform it. As much as possible, always give users a simple, straightforward way to perform an action, even if it means an extra tap or two. Simple gestures let users focus on the experience and the content, not the interaction.

可以使用复杂手势作为快捷方式来迅速完成任务,但不要将它作为唯一可用的方式。尽可能总是为用户提供一个简单、直接的方式来进行操作,即使可能会多几次点击。简单的手势让用户专注于体验和内容,而不是交互。

In general, avoid defining new gestures unless your app is a game. In games and other immersive apps, custom gestures can be a fun part of the experience. But in apps that help people do things that are important to them, it’s best to use standard gestures because people don’t have to make an effort to discover them or remember them.

通常,只在游戏 app 中才定义新手势。在游戏或其他拟真 app 中,自定义手势是体验中一个有趣的部分。但在帮助人们完成重要任务的 app 中,最好还是使用标准手势,因为人们不必费劲探索或者记住手势。

In a regular environment, consider using multifinger gestures. Although complex gestures aren’t appropriate for every app, they can enrich the experience in apps that people spend a lot of time in, such as games or content-creation environments. Always bear in mind that nonstandard gestures aren’t discoverable and should rarely, if ever, be the only way to perform an action.

在常规情况下,考虑使用多指手势。虽然复杂的手势并不适于每一个 app,但它们丰富了那些用户会为之花费很多时间的 app 的体验,例如游戏或内容创作 app。牢记:非标准手势不应该让用户探索才能发现其用法,也尽量不要成为进行某项操作的唯一方式。

7.2 交互元素引发触摸(Interactive Elements Invite Touch)

To signal interactivity, the built-in apps use a variety of cues, including color, location, context, and meaningful icons and labels. Users rarely need additional decorations to show them that an onscreen element is interactive or to suggest what it does.

为了标明可交互之处,内置 app 使用了许多线索,包括颜色、位置、上下文,以及有意义的图标和标签。用户很少需要额外的装饰来表明屏幕元素是可交互的、或者它们能做什么。

联系人 app

A key color gives users a strong visual indicator of interactivity, especially in apps that don’t use an abundance of other colors. In Contacts, blue marks the interactive elements and gives the app a unified and recognizable visual theme.

关键色带给用户一种很强的可视化交互指示,尤其是在其他用色不多的 app 中。在联系人 app 中,蓝色标明了可交互元素,并给 app 一个统一可辨识的可视化主题。

日历 app

The back button uses several cues to indicate its interactivity and convey its function: It appears in response to navigation, it displays a back-pointing chevron, it typically uses a key color, and it can display a title that describes the previous screen.

返回按钮使用一些线索来表明它的交互性,同时传达它的功能:它与导航相配合,显示回退点标记,通常使用关键色,而且显示上一个界面的标题。

地图 app

An icon or a title that provides a clear call to action invites users to tap it. For example, the titles in Maps, such as “Flyover Tour” and “Directions to Here,” clearly describe actions that users can take. Combined with a key color, actionable titles tend to make button borders or other embellishments superfluous.

图标或标题提供明确指引让用户来点击。例如地图 app 中的标题,“城市导览地图”和“到这里的路线”都很清晰地描述了用户可以采取的操作。与关键色结合、可操作的标题通常使按钮边框或其他装饰变得多余。

In a content area, add a button border or background only if necessary. Buttons in bars, action sheets, and alerts don’t need borders because users know that most of the items in these areas are interactive. In a content area, on the other hand, a button might need a border or a background to distinguish it from the rest of the content. For example, Music, Clock, Photos, and App Store use such buttons in a few specific contexts.

在内容区,只在确实必要时才为按钮增加边框或背景。栏目上的按钮、操作表单、警告提示都不需要边框,因为用户知道这些区域内大部分条目是可交互的。在内容区,按钮可能需要边框或背景来与其他内容相区别。例如音乐、时钟、照片和 App Store 在一些特定的上下文下使用这样的按钮。

照片 app

Photos uses a button border to differentiate the Start Sharing button from the explanatory text that appears above it.

照片使用按钮边框来将”开始共享“按钮与其上方的解释性文字相区别。

时钟 app

Clock uses button backgrounds in the Stopwatch and Timer screens to draw attention to the Start and Pause buttons and to make them easy to tap even when the user's surroundings are distracting.

时钟 app 在秒表和计时器中使用按钮背景,以此方式吸引用户注意开始和暂停按钮,很容易进行点击。

App Store

App Store uses a button border in a table row to emphasize the distinction between tapping the row to get more information and tapping the button to initiate (or install) a purchase.

App Store 在图表行中使用带边框的按钮,以此区别点击行来获取更多信息与点击按钮获取(安装)应用两种不同的行为。

7.3 反馈有助于理解(Feedback Aids Understanding)

Feedback helps users know what an app is doing, discover what they can do next, and understand the results of their actions. UIKit controls and views provide many kinds of feedback.

反馈帮助用户了解 app 正在做什么,发现下一步他们可以做什么,以及了解他们操作后的结果。UIKit 控件和视图提供了多种反馈方式。

As much as possible, integrate status and other relevant feedback information into your UI. It’s best when users can get this type of information without taking action or being distracted from their content. For example, Mail displays the current mailbox status in the toolbar where it doesn’t compete with the user’s content.

尽可能集成状态和其他相关反馈信息到 UI 中。最好用户无需采取行动或离开内容就能了解到这些反馈信息。例如,邮箱 app 在工具栏显示当前邮箱状态,这不会与用户内容显示相冲突。

邮箱 app

Avoid unnecessary alerts. An alert is a powerful feedback mechanism, but it should be used only to deliver important—and ideally actionable—information. If users see too many alerts that don’t contain essential information, they quickly learn to ignore all alerts. To learn more about using an alert, see Alert.

避免不必要的警告提示。警告提示是一个强有力的反馈机制,但它应该仅用于传达重要的、理论上可操作的信息。如果用户看了太多没有包含重要信息的警告提示,他们很快就会养成忽略所有警告的习惯。了解更多,参见 Alert

7.4 输入信息应该易于操作(Inputting Information Should Be Easy)

Inputting information takes time and attention, whether people tap controls or use the keyboard. When an app slows people down by asking for a lot of user input before anything useful happens, people can feel discouraged from using it.

无论用户采用点击控件还是使用键盘,输入信息都会花费时间和精力。如果 app 在有用内容尚未出现前就频繁要求用户输入,那用户就会不想再使用它了。

Make it easy for users to make choices. For example, you can use a picker or a table view instead of a text field, because most people find it easier to select an item from a list than to type words.

要使用户易于选择。例如,你可以提供一个拾取器或者表格视图来代替输入框,因为大部分用户觉得从列表中选择某项会比打字更容易。

提醒事项 app 中的日期拾取器  和  设置 app 中的选项列表

Get information from iOS, when appropriate. People store lots of information on their devices. When it makes sense, don’t force people to give you information that you can easily find for yourself, such as their contacts or calendar information.

可以的话,从 iOS 中直接读取信息。人们在设备中会存储很多信息。如果可以的话,不要迫使用户提供那些你可以轻松从设备中读取的信息,例如联系人或日历信息。

Balance a request for input by giving users something useful in return. A sense of give and take helps people feel they’re making progress as they move through your app.

要求用户输入时要给予有用的信息反馈。这种施与受的体验让用户明确感觉到自己在 app 中进行逐步操作的过程。

英文原文链接

后一篇:iOS 8人机交互指南(8)

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 158,425评论 4 361
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,058评论 1 291
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 108,186评论 0 243
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,848评论 0 204
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,249评论 3 286
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,554评论 1 216
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,830评论 2 312
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,536评论 0 197
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,239评论 1 241
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,505评论 2 244
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,004评论 1 258
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,346评论 2 253
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,999评论 3 235
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,060评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,821评论 0 194
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,574评论 2 271
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,480评论 2 267

推荐阅读更多精彩内容