iOS 12 人机交互指南(一):主题与基本界面元素

产品小白专属,10周线上特训,测、练、实战,22位导师全程带班,11项求职服务,保障就业!了解详情

要想发布一款能够位于App Store排行榜之首的产品,产品在质量和功能上的高标准表现是必不可少的,而为了达到这种高度,我们应该如何做呢?本文主要讲述的是 iOS 12 界面交互设计指南,一起来看看~

主题(Themes)

1. iOS设计主题

作为一个app设计师(其实我是一只产品狗),其实便意味着你将有机会去设计发布一款能够位于App Store排行榜之首的惊世骇俗之产品。而为了达到这个高度,你的产品在质量和功能上的高标准表现是必不可少的。(我理解的原文中app designer其实正是产品狗一职而非传统意义上的UI设计师,正所谓成也萧何败也萧何,固此文别称《产品狗的iOS指南》也不枉为过)。

iOS平台不同于其它平台的三大基本原则:

  • 清晰(Clarity):纵观整个iOS系统,清晰意味着,每种尺寸下的文本都应该是易读的,所有图标都应该是精确易懂的,每一个装饰都应该是精心恰当的,而且应该本着功能驱动设计的原则。利用留白,颜色,字体,图像以及其它界面元素来共同巧妙的突出重点内容且表达其不同的可交互性。
  • 遵从(Deference):干净美观的界面和清晰流畅的动态效果有助于用户去理解界面内容并与之进行交互,从而避免给用户带来干扰。而如果当前的内容占据了整个屏幕时,可以利用半透明以及模糊处理等方式来暗示用户其更多内容的存在。尽可能少的使用边框,渐变以及阴影可以让界面更轻,从而突出更多的内容。
  • 深度(Depth):鲜明的视觉层级以及生动的动态效果可以对界面有更深层次的表达,赋予了界面活力也更有助于用户去理解。易于发现且易于触发的界面元素能够提升用户的体验愉悦感,而用户在成功触发相应功能或获得更多内容的同时,也掌握了当前所在位置的由始至终(可以理解为PC端的面包屑)。因此当用户在浏览内容的同时,流畅的过渡其实便体现出了一种纵深感。

2. 设计原则

为了最大化产品的影响力及达到以上目标,以下的原则更是需要你在产品定义及设计时牢记于心的:

(1)美学完整性(Aesthetic Integrity)

美学完整性代表了一款应用的视觉表现和交互行为与其功能整合的优良程度。例如:如果一款应用的目的是帮助用户去完成一项非常重要的任务,那么我们就应该使用不易察觉且不会太引人注目的图形,或使用一些标准化的控件以及可预知的交互行为来保持用户的专注性。

反而言之,对于一款沉浸式体验应用(如游戏),我们就需要利用更加吸引人的视觉表现,去鼓励用户深入探索的同时为其带来无穷的乐趣和刺激。

(2)一致性(Consistency)

一致性代表了一款应用需要贯彻相同标准和规范的原则,使用系统提供的界面元素,风格统一的图标,标准的字体样式以及一致的措辞。同时应用所包含的特征和交互行为,应该是符合用户心理预期的。

(3)直接操作性(Direct Manipulation)

直接对屏幕上的对象(而非通过一堆控件)进行交互,有助于用户理解从而提升用户的参与度。这里的直接操作指的是包括旋转屏幕或手势控制等操作,通过此类交互用户的交互行为能够得到及时可视的反馈。

(4)反馈性(Feedback)

反馈可以认证交互行为,呈现结果,通知用户。iOS系统自带的应该对用户的每个行为都提供了明确的反馈,如:可交互的元素被点击时的临时高亮,进度指示器(进度条、缓冲条等)显示任务需要进展的时间及当前的进度,声音和动态效果则更是加强了对行为结果的提示。

(5)隐喻性(Metaphors)

当一款应用的虚拟对象和交互行为能够与用户所熟悉的体验相似时(无论这种体验是来源于现实生活亦或是数字世界),用户就更够更快的学会使用这款应用。

隐喻能够在iOS中起到作用的原因是用户可以与屏幕进行物理上的交互,如:用户可以通过将视图引出屏幕来显示下方的内容,通过拖拽(drag)、滑动(swipe)对象、拨动(toggle)开关、移动(move)滑块、滚动(scroll)选择器,甚至通过轻扫(flick)来翻阅书籍和杂志。

(4)用户控制性(User Control)

在iOS内部,应该是用户(而非应用)在控制。应用可以对一系列的用户行为提供建议,或对可能造成的严重后果的行为发出警告,但绝不应该替用户做决定。而好的应用,会在用户主导和避免不想要的结果中找到平衡。

为了让用户感觉到是他们在控制应用,应该使用用户熟悉且可预知的交互元素,让用户二次确定其有破坏性的行为,并且允许即使在运行中的操作也能够被轻易取消。

基本界面元素(Interface Essentials)

大部分的iOS应用使用UIKit中的部件来定义一个基本的界面元素框架,而这个框架不仅让各个应用在保持视觉上的一致的同时,也给予了其高度化的个性定制空间。

UIKit部件是灵活的、常见的,可配置性极高的,它能够支持你去设计一个能够在任何iOS设备中都表现出高水准的应用,而且能够使其随着系统发布新版本的同时而自动更新。

以下便是UIKit中三大基本界面元素:

(1)栏(Bars)

栏可以告知用户其当前所在应用中的具体位置,提供导航,还有可能包含按钮或其他可以用来触发功能或交流的元素。

(2)视图(Views)

视图包含了用户所最关注的内容,如文本,动画及一些交互元素。而视图更是支持滚动,插入,删除及排列等行为方式。

(3)控件(Controls)

控件用于触发功能及传递信息,像按钮、开关、输入框、进度条等便是极典型的控件。

为了进一步的定义iOS界面,UIKit定义了你的应用所能用到的功能。通过这个框架,你的应用可以对触屏上的手势操作做出响应,还可以包含一些,例如:绘画、辅助、打印等功能。

UIKit同其它部件框架一样紧密相连,如:Apple Pay、HealthKit、ResearchKit等,来帮助你设计出一个强大的应用。

 

本文由 @沸腾 翻译发布于人人都是产品经理。未经许可,禁止转载

题图作者提供

给作者打赏,鼓励TA抓紧创作!
6人打赏
评论
欢迎留言讨论~!
  1. 想问问一下有没有完整的可下载的文档,能提供一下吗?网上没找到,谢谢

    回复
    1. 没有整理成可下载的,后面有时间再整理整理

      回复
  2. 有用,收藏了

    回复
  3. 本人正在做海外APP的交互 新产品从0-1 有些无从下手,流程架构 页面布局 操作行为 权限等等与国内产品有什么需要注意的不同点,所以想请教一下您,如果可以微信:raincnos

    回复
    1. 海外大多是IOS 和安卓原生,只要遵循这两个的设计规范基本不会有什么大问题,还有就是使用习惯问题,国内安卓基本是定制,国外基本原生,不用国内定制的交互方式去定义国外用户的使用习惯即可,当然可以优化的地方还是可以做的,但是不要违背用户使用习惯即可。至于登录这块,肯定邮箱、非死不可、推特登录啥的,很少用手机号

      回复
    2. :!:

      回复