33ecebab7acf2ef3baf49e1a94a9ce14
iOS 人机交互指南 · 概览

作者按:控件部分是交互设计的基本功,很多招聘信息上都有一条要求:熟悉 iOS 和 Android 等平台设计规范——最好的方式就是深入阅读这些官方规范。然而,实际上,这些规范内容很多,部分主平台是用英文撰写的,不太多设计师真正通读过。所以,我决定来做这件“傻事”,翻译成文并公布出来,可能还会在其中增加一些个人的理解和举例(会单独标注),希望能给看到的你带来一些帮助 ^-^。

iOS Human Interface Guidelines 开始,本文是概览部分。

主题

iOS 设计主题

如果你是一个 app 的设计师,就有机会做出位列 App Store 排行榜榜首的杰出产品。为了达到这个目标,需要对产品的品质和功能有更高的期待。

iOS 有三个不同于其他平台的主题:
- 清晰
整个系统中,每个尺寸的文字都清晰,每个图标都易懂,细微且适宜的装饰,聚焦于功能,一切设计由功能驱动。留白、颜色、字体、图形以及其它界面元素能够巧妙地突出重点内容并且表达可交互性。

  • 自然
    流畅的动效和清爽美观的界面有助于用户理解内容并与之交互,而不会干扰用户。当前内容占据整屏时,半透明和模糊处理能够暗示其它更多的内容。减少使用边框、渐变和阴影让界面尽可能地轻量化,从而突出内容。

  • 深度
    清楚的视觉层和生动的动效表达了层次结构,赋予了活力,并有助于理解。易于发现的且可触发的界面元素能提升体验愉悦感,让用户在成功触发相应功能或者获得更多内容的同时还能回溯到原来的页面。用户浏览内容时,页面过渡会提供一种纵深感。

设计原则

为了最大化产品的影响力,在你想象 app 的设计时,需要牢记下面这些原则:

  • 美学完整性 美学完整性代表了一款 app 的视觉和交互与其功能整合的优良程度。例如,一款协助用户完成重要任务的 app,为了让用户保持专注,应该使用不易察觉且不引人注目的图形、标准化的控件和可预知的交互行为。反之,一款沉浸式体验的应用(比如游戏),就需要吸引人的视觉,在鼓励用户探索的同时带来无穷的乐趣和刺激。
  • 一致性 具有一致性的 app 能够贯彻相同的标准和规范:使用系统提供的界面元素、用户熟悉的图标、标准的字体样式和一致的措辞。应用所包含的特征和交互是符合用户心理预期的。
  • 直接操作 对屏幕上的元素直接操作能够提升用户的参与度并有助于理解。用户旋转设备或者使用手势控制屏幕上的对象时,就是在体验直接操作。通过这样的直接操作,用户的交互行为能够得到即时可视的反馈。
  • 反馈 反馈的作用是验证交互行为和呈现结果,从而给用户对应的信息。系统自带的 iOS 应用对每一个用户行为都提供了明确的反馈。可交互的元素被点击时会被临时高亮,进度条显示了需要长时间运转的操作的进度,动效和声音加强了对行为结果的提示。
  • 隐喻 如果 app 上虚拟的控件和行为能对应到用户熟悉的体验,不论这种体验是来自现实生活还是数字世界,都能让人们学得更快。隐喻在 iOS 上能起作用是因为用户和屏幕之间进行物理交互。用户能通过把视图移出屏幕,看到隐藏在下方的内容。用户能拖拽和滑动内容。用户能拨动开关、移动滑块、滚动选择器。用户甚至可以通过轻扫翻阅书和杂志。
  • 用户掌控 通过 iOS,是用户——而不是应用——在控制。App 可以为用户行为提出一系列建议,或者对可能造成严重后果的行为提出警告,但是不应该让 app 自己去做决定。好的 app 能够找到用户主导和避免非预期结果之间的平衡。一款 app 通过熟悉和符合预期的控件,二次确认破坏性行为,让正运行的操作能轻易被取消让人们觉得一切尽在掌控。

基本界面元素

大多数 app 使用的组件来自于 UIKit。UIKit 是一个定义了通用页面元素的程序框架。它让 各种应用达到了视觉一致,同时保留了高度的个性化。UIKit 元素是灵活且常见的,而且是可适配的,能让你设计的 app 在任何 iOS 设备上都好看,在系统发布新版本时也能自动更新。UIKit 提供的界面元素可以分为以下三种:
-
在你的 app 里,「栏」会告诉用户他们所处的位置,提供导航,有时还可以包含按钮或者其他用来触发功能和交流信息的元素。
- 视图
「视图」包含了用户在你的 app 里最主要看到的内容,比如文字、图形、动效和交互元素。「视图」允许例如滚动、插入、删除和排序等行为。
- 控件
「控件」用于触发功能和传递信息,包括按钮、开关、输入框和进度条等。

为了进一步定义 iOS 界面,UIKit 规定了你的 app 能使用的功能。通过这个框架,你的 app 可以对触摸屏上的手势作出应答,还可以包含一些例如绘画、帮助和打印的功能。

iOS 也和其他程序框架和技术紧密结合,譬如 Apple Pay、HealthKit 和 ResearcKit, 它们能帮你设计出惊艳且强大的应用。

© 著作权归作者所有
这个作品真棒,我要支持一下!
核心内容:梳理总结交互设计从入门到进化的知识体系,对照体系解锁每一项技能 适合读者:零基础学交互的每个人
0条评论
top Created with Sketch.