IOS.10人机交互指南(自译)

原文:https://developer.apple.com/ios/human-interface-guidelines/overview/design-principles/

概论(Overview):

1.设计原则:

作为一名移动端软件设计师,意味着有机会推出一款可以荣登苹果商店榜首的超凡产品,为了实现这个目标,必须在质量和功能上都达到高标准。

清晰(Clarity):整个系统中,每个尺寸的文字都应该是清晰易读,每个图标都应该明确易懂,每个修饰恰当且微妙,聚焦于功能来驱动设计。留白、色彩、文字、图形以及其他的界面元素巧妙地突出重点内容并表达交互性。

参考(Deference):流畅界面的动效和清爽美观的界面有助于用户理解内容并与之进行交互,而不会受到干扰。一般内容占据整屏的时候,半透明和模糊处理暗示有更多其他内容。减少边框、渐变、阴影的使用可以保持界面的轻量简洁,从而突出内容。

深度(Depth):清晰分明的视觉层次和生动的动画效果表现了层次结构,赋予活力并有助于理解。易于发现并可触发的设计元素可以提升体验的愉悦感,并且使用户在触发功能或者加载更多内容时理解前后关系。当用户浏览内容时,流畅的过渡提供一种纵深感。

要想最大程度的扩大影响力与涉及范围,在设计你独特的应用时,需要将以下原则谨记在心。

美学完整性(Aesthetic Integrity):美学完整性代表了一款应用视觉、交互与其功能整合的完善程度。例如一款协助用户完成重要人物的应用,可以通过不引人注目的图形,标准化的控件和可预见性的交互使用户保持专注。而沉浸式的应用(immersive app),例如游戏,需要提供具有吸引力的视觉,在鼓励用户探索的同时带来无限的乐趣与刺激。

一致性(Consistency):一款具有一致性的应用,拥有贯穿相同的标准与规范:使用系统提供的界面元素、风格统一(众所周知)的图标、标准化的文字样式和一致的措辞,应用包含的特征与交互是符合用户心里预期的。

直接操作(Direct Manipulation):屏幕上的直接操作可以提升用户的参与度(engage)并有助于理解。用户直接操作包含旋转设备或者手势来控制屏幕内容。通过直接操作,用户的行为可以得到即时可视的反馈(results of their actions)。

反馈(Feedback):反馈响应动作,呈现结果并通知用户。苹果自带的应用为用户的每个行为提供反馈。被点击时,界面元素被短暂高亮(highlighted),进度指示器(progress indicator)指示耗时操作的进程,动效和声效帮助提示行为结果。

隐喻(Metaphors):当一款应用的虚拟对象和动作与用户所熟悉的体验相似(无论是来源于现实生活还是数字世界),会使用户更快速地学习。隐喻在iOS系统中起到很好的作用是因为用户与屏幕的物理交互。她们将视图移出屏幕来显示接下来的内容,他们拖拉(drag)和滑动(swipe)对象,拨动(toggle)开关,移动滑块(move sliders),滚动(scroll)数值选择器(picker values)。她们甚至通过轻扫(flick)翻阅书籍和杂志。

用户控制(User Control):用户控制(而不是应用控制)贯穿于iOS系统中,一个应用可以提示一系列的动作或者警告有严重后果的行为,但让应用替代用户作决策者是错误的行为。最好的应用应该在用户主导(enabling users)与避免不期待结果中寻找平衡。应用可以通过使用熟悉并可预知的交互元素、向用户二次求证破坏行为、在运行中可轻易被取消操作让用户感知他们才是控制者。

2.iOS10更新内容

在iOS10上你可以创造出前所未有更强大的应用


3.界面基本元素

大多数iOS应用使用来自UI组件(UIKit)中的构件,UIKit是定义了界面的基本元素的编程框架。这个框架让应用在系统中保持视觉上的一致性,同时还提供了高度的个性化(customization),UIKit是灵活且用户所熟悉的。UIKit具有适配性,让你可以设计一个在任何iOS设备上都看上去很棒的应用。当系统发布新版本(The system introduces appearance changes)时UIKit会自动更新,由UIKit提供的界面元素可以分为以下三类:

栏(Bar):提示用户其所位于应用的位置,提供导航(navigation),栏中可能包含按钮或者是其他用来触发功能(initiating actions)、交流信息的元素。

视图(View):包含用户在你的应用中所看到最主要的内容。例如:文字、图片、动效和其他交互元素,视图中也可以进行例如:滚动、插入、删去、排序等行为。

控件(Controls):触发功能,传递信息。典型的控件包含:按钮、开关、输入框、进度指示器。

为了进一步(in addition to)定义iOS应用界面,UIKit还定义了应用所可以引用的功能。例如:通过这个控件,你的应用可以对触摸屏上的手势进行响应,并且可以实现如绘画、辅助(accessibility)、打印功能。

iOS也与其他编程框架和技术紧密结合,例如苹果支付(Apple Pay)、健康组件(HealthKit)和ResearchKit, 让你可以设计出一个强大到不可思议的应用。

交互(Interaction):

1.3D触摸(3D Touch):

3D Touch为触碰式交互增加了一个维度(touch-based interaction),可以通过对触摸屏幕施加不同级别的压力来实现更多的功能。应用可以通过展现菜单,显示更多内容或者播放动画来响应。用户不需要为了实现3D Touch交互而学习更多的手势,当他们轻触触摸屏并得到响应时,会立刻发现这一新增的交互维度。

2.主屏交互(Home Screen Interaction):

在主屏幕上按压支持3D Touch的应用图标会触发相应的操作视图(displays an action view)。该视图让你可以快速执行应用常用的任务或者浏览有趣的信息。例如日历,提供了创建事项的快捷操作(shortcut),也可以显示你的日程表中下一个事项,了解更多设计指南,请浏览Home Screen和Widgets。

5.数据输入(Data Entry):

无论是点击界面元素还是使用键盘,输入信息都会是一个繁琐冗长的过程。如果在做任何有用的事情之前应用要求用户做一连串的输入,进而拖缓了进程,用户将很快感到气馁,甚至可能彻底放弃应用。

尽可能展示选项:使数据输入更加高效。用选择器(Picker)或者列表(Table)代替输入框,从有预设选项的列表中选择比输入文字简单。

尽可能从系统中获取信息:不要强迫用户提供可以自动获取或者在用户的许可下就可以收集的信息,比如联系人或是日历信息。

提供合理的默认值(Default Values):尽可能预填最可能的值。提供合理的默认值可以缩短决策时间,加快进程。

只有在收集完必需信息(Required Values)后才能进行下一步操作:在启用"下一步"或者"继续"按钮前,要确认所有必需输入框都有值。使用可用的按钮作为一种视觉提示,表示可以继续进程。

动态检验输入值:当完成一张长表单后却不得不返回更正错误会让用户感到气馁。尽可能的在用户输入后立刻检查输入值,让用户可以立即更正输入值。

只要求必要信息:只将影响进程的信息设为必填信息。

简化值列表导航:尤其是在列表和选择器中,必需能够简单地选择值。考虑通过将值列表按首字母排序或是其它逻辑排列,从而加快浏览和选择的速度

在输入栏显示提示以辅助说明:当输入框没有其他文字时,可以包含占位符文字—例如"邮件"或"密码"。当占位符文字已经足够时不要再用单独的标签描述输入框。

6.反馈(Feedback)

反馈让用户知道应用在做什么,发现下一步会做什么,并且理解操作的结果。

悄悄地在你的界面中整合状态和其他类型的反馈:理想情况下用户可以在不做操作或者不被打断的情况下得到重要信息。例如,邮箱,当用户在邮箱里浏览邮件时状态信息巧妙地在工具栏上显示。这个信息不会影响屏幕的主要内容,但可以让用户在任何时间一眼就能查看到。

避免不必要的警告:警告是强有力的反馈机制,所以应该被用来传递重要的、最好是需要操作的信息。如果用户看到太多包含无关紧要信息的警告,会学会无视之后的警告。了解更多帮助,请参阅Alerts。


Haptic Feedback

On supported devices, haptics provide a way to physically engage users with tactile feedback that gets attention and reinforces actions. Some system-provided interface elements, such as pickers, switches, and sliders, automatically provide haptic feedback as users interact with them. Your app can also ask the system to generate different types of haptic feedback. iOS manages the strength and behavior of this feedback.

Use haptics judiciously. Overuse can cause confusion and diminish the significance of feedback.

In general, provide haptic feedback in response to user-initiated actions. It’s easy for people to correlate haptics with actions they initiated. Arbitrary feedback can feel disconnected and be misinterpreted.

Don’t redefine feedback types. To ensure a consistent experience, use feedback types as intended. Don’t, for example, use "impact" feedback to notify the user that a task has succeeded. Instead, use the "success" variation of "notification" feedback.

Fine tune your visual experience for haptics. Provide visual and haptic feedback together to create a deeper connection between actions and results. Make sure animations are sharp and precise, to visually match what the user feels.

Don’t rely on a single mode of communication. Not all devices support the full range of haptic feedback, and people can disable the feature entirely in Settings if they choose. In addition, haptic feedback occurs only when the device is active and your app is frontmost. Supplement haptics with visual and audible cues to ensure that important information isn’t missed.

Use haptics when visual feedback may be occluded. Some interactions, such as dragging an object to a location onscreen, are hidden by the user’s finger. Consider generating feedback that lets the user know when they’ve reached a particular location or value.

Prepare the system before initiating feedback. Because there may be some latency involved when providing haptic feedback, it’s best to get the system ready shortly before requesting the feedback. Otherwise, the haptics might come too late and feel disconnected from the user's actions or what they’re seeing on the screen.

Synchronize haptics with accompanying sound. Haptics don’t automatically synchronize with sounds. If you want an accompanying sound, you’re responsible for synchronizing it.

7.文件处理(File Handing)

当用户创建、查看、操作文件时不需考虑文件系统。如果你的应用运行需要文件时,尽可能降低文件处理。


Instill confidence that work is always preserved unless canceled or deleted. In general, don’t make people explicitly save files. Instead, save changes automatically at regular intervals, when opening and closing files, and when switching to another app. In some cases, such as while editing an existing file, save and cancel options may still make sense for the sake of confirming when the edits are actually captured.

让用户相信除非主动取消或删除

文件会随时被保存。总而言之,不要让用户去即时保存文件。反之,在文件被打开、关闭,或是跳转至其它应用时,应该自动定时地替用户保存文件。但在某些情况,比如正在编辑一个已被创建的文件时,保存和取消的选项也是有意义的,因为它们帮助确认何时编辑的内容应该被保存。

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

推荐阅读更多精彩内容