苹果用户体验:几张动图带你直观设计背后的简单原则

6 评论 7337 浏览 14 收藏 7 分钟
大厂导师团亲自授课,超过200小时的精品课程,从0到1为你构建“产品+业务”的复合型知识体系,让你在职场竞争中脱颖而出。

编辑导语:如何提升用户的产品使用体验?也许,简单、明晰、便捷的交互操作是影响用户体验的关键因素之一。而苹果手机的交互设计逻辑也许可以在设计原则层面上给你一定启发,不如一起来看看作者的解读吧。

今天的苹果手机拥有十亿用户。苹果是这个世界上最有价值的企业,虽然有很多不同的原因使得它成为拥有 2 万亿市值的第一公司,设计始终是其中最强大的原因之一。

Steve Jobs 对此有一个绝妙的形容:我们是一家设计公司,只是刚好做的是电脑产业。

是什么使得苹果设计如此的简洁又令人赞叹?他们的设计来源于现实生活,我们和手机的交互正如我们在现实生活中所做的一样。

就像是真实的世界中一样,当你通过数码产品导航的时候,人们需要知道自己现在在哪里,到目的地的路怎么走,以及选择什么样的交通工具。这就是为什么各部分之间应该有清晰的空间逻辑。

一、流畅的操作感意味着它在隐喻着物理世界

打开 IOS 的文件夹就像是在现实世界打开了一个盒子。“扩展”的动画效果代指着打开文件夹的后续行为:就像是我们在现实生活中打开了一个文件夹并把它拿到眼前去查看里面的东西。

苹果用户体验:几张动图带你直观设计背后的简单原则

在IOS上打开APP

二、人们有时候也需要接触一些物理世界不存在的数字原生操作方式

举个例子,IOS 用户经常打开列表来推入下一个页面或点击底部的按钮来查看另一个页面。操作这些按钮在物理世界中并没有对应的行为,但是在成百上千次重复中用户习惯了这个操作。作为设计师,我们应该尽量的使用同样的设计语言以方便用户认知。

苹果用户体验:几张动图带你直观设计背后的简单原则

打开一个列表单元格

苹果用户体验:几张动图带你直观设计背后的简单原则

点击TAP栏

三、清晰的空间逻辑使用户更顺畅的使用产品

这里对通过向下滑动页面以到达 IOS 通知中心以及安卓控制中心进行了比较。在 IOS 系统里,通知中心页面和启动页面之间的空间逻辑关系是非常直接的。

通知中心页面在启动页面的上方,在滑动的过程中,手势和屏幕的移动是同步的。因为这里含有物理世界的隐喻,因此我们可以非常直观的理解。

苹果用户体验:几张动图带你直观设计背后的简单原则

在iOS上向下滑动以获得通知屏幕

对比来看,类似的操作在安卓上就不是那么的清晰了。在屏幕上的任何地方向下拉,启动页会先进入一个白色的蒙层,物理世界中不会发生这样的事情。

操作页面,黑色背景和白色蒙层之间的空间逻辑关系无法通过视觉表达清晰的说明。他们是在同一个层级?或者说黑色背景是放在下方的?对比而言,IOS 中通过对上方层级的模糊玻璃效果清晰的对这种空间层级关系进行了说明。

用户当然可以通过多次重复使用习惯这种操作,但是缺少空间逻辑容易造成认知失调。像这样的细微处的操作困难会使产品感觉不那么流畅,因此质量也较差。

苹果用户体验:几张动图带你直观设计背后的简单原则

在安卓上向下滑动控制中心

四、流畅的动效在建立空间逻辑和提升产品质量方面也发挥着巨大作用

让我们看看在 IOS 里开启和关闭软件的动效。当打开一个软件,软件图标扩大并逐渐消失,软件界面则在用户面前渐出并逐渐占据整个屏幕。

这个动效告诉用户这个软件在手机界面上的存在空间逻辑:这个软件存在于这个 icon 内部。关闭软件的动效就像是开启动效的镜像效果,就如同用户所期待的一般,软件界面缩回成了原本icon的样子。

苹果用户体验:几张动图带你直观设计背后的简单原则

在IOS上打开和关闭APP

苹果用户体验:几张动图带你直观设计背后的简单原则

在IOS上打开和关闭一个应用程序的速度变慢了

对比一下,安卓上的软件打开/关闭动效比较零碎。但是我不会多说,你可有看一看下面的示例自己来比较一下。

苹果用户体验:几张动图带你直观设计背后的简单原则

在安卓上打开和关闭APP

 

原文作者:Hiten Saxena(本文翻译已获得作者的正式授权)

原文地址:https://bootcamp.uxdesign.cc/space-logic-can-make-the-design-of-your-product-easier-a1b8ffe4cfa2

译者:郑伊妮;编辑:李莉好;微信公众号:TCC翻译情报局(ID:TCC-design);连接知识,了解全球精选设计干货

本文由@TCC翻译情报局 翻译发布于人人都是产品经理,未经许可,禁止转载

题图来自 Unsplash,基于 CC0 协议

更多精彩内容,请关注人人都是产品经理微信公众号或下载App
评论
评论请登录
  1. 没看出来安卓苹果打开关闭软件有什么不同。。。

    来自浙江 回复
    1. 苹果是从icon放大打开,并再缩小回icon上,安卓是从icon放大打开,但缩回时是向下收的。安卓的想法应该是收回到后台里并不是彻底关闭了app,苹果的交互动效还是比较统一的

      来自广东 回复
    2. 你仔细舔,用心说从ios10之后,往后的ui和动效已经没有惊艳的感觉了,稍微轻舔吧

      来自北京 回复
  2. 流畅的动效在建立空间逻辑和提升产品质量方面也发挥着巨大作用,很赞同这一点。

    来自云南 回复
  3. 看来软件打开的动图,苹果的动态感觉的确更舒适一些,也的确会慢一些

    来自广西 回复
  4. 打开 IOS 的文件夹就像是在现实世界打开了一个盒子。“扩展”的动画效果代指着打开文件夹的后续行为:就像是我们在现实生活中打开了一个文件夹并把它拿到眼前去查看里面的东西。

    来自吉林 回复
专题
14235人已学习14篇文章
在生活中,我们总是能被各种各样的事情挑起不同的情绪,如果将情绪映射到设计/运营中呢?本专题的文章分享了如何将“情绪”映射到设计/运营中。
专题
12191人已学习12篇文章
针对新零售行业的发展现状,面向新零售企业的SaaS系统,可以如何进行系统架构和规划?本专题的文章分享了新零售saas架构指南。
专题
13953人已学习12篇文章
用户调研作为产品人员最常用的工作方式,相信各位一定不会陌生。但如何提高用户调研的有效性却是一直困扰大家的问题。本专题的文章分享了用户调研的方法论。
专题
15717人已学习13篇文章
说到“账号”,想必大家对于这个名词已经习以为常。现在市场上的大多数应用,都会有自己的账号体系。本专题的文章分享了如何搭建账号体系。
专题
16863人已学习13篇文章
本专题的文章分享了基础功能的实现原理和设计理解。