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

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

点击 "TCC翻译情报局关注,回复 "社群" 加入我们

本文共 1919 字,预计阅读 5 分钟

TCC 情报局的 第 151 篇 干货分享

2022 年的 第 49 


TCC 推荐:大家好,这里是 TCC 翻译情报局,我是张聿彤。交互设计作为数字行业中的新名词,一直以来有很多人不清楚它的定义。在我看来,交互就是用户与数字设备的对话,数字设备对用户行为的反馈。而这之间的交流与反馈逻辑是怎么样的就是交互设计师们所需要设计的了。作者认为00,这篇文章举了四个简单的例子来阐述她的观点。
今天的苹果手机拥有十亿用户。苹果是这个世界上最有价值的企业,虽然有很多不同的原因使得它成为拥有 2 万亿市值的第一公司,设计始终是其中最强大的原因之一。Steve Jobs 对此有一个绝妙的形容:我们是一家设计公司,只是刚好做的是电脑产业。是什么使得苹果设计如此的简洁又令人赞叹?他们的设计来源于现实生活,我们和手机的交互正如我们在现实生活中所做的一样。


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


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

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

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

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


打开一个列表单元格


点击TAP栏

3. 清晰的空间逻辑使用户更顺畅的使用产品

这里对通过向下滑动页面以到达 IOS 通知中心以及安卓控制中心进行了比较。在 IOS 系统里,通知中心页面和启动页面之间的空间逻辑关系是非常直接的。通知中心页面在启动页面的上方,在滑动的过程中,手势和屏幕的移动是同步的。因为这里含有物理世界的隐喻,因此我们可以非常直观的理解。



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


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


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


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



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

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

让我们看看在 IOS 里开启和关闭软件的动效。当打开一个软件,软件图标扩大并逐渐消失,软件界面则在用户面前渐出并逐渐占据整个屏幕。这个动效告诉用户这个软件在手机界面上的存在空间逻辑:这个软件存在于这个 icon 内部。关闭软件的动效就像是开启动效的镜像效果,就如同用户所期待的一般,软件界面缩回成了原本icon的样子。

在IOS上打开和关闭APP



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


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

安卓打开和关闭APP


原文:https://bootcamp.uxdesign.cc/space-logic-can-make-the-design-of-your-product-easier-a1b8ffe4cfa2
者:Hiten Saxena
译者:郑伊妮
审核:李泽慧、张聿彤
编辑:李莉好
本文翻译已获得作者的正式授权(授权截图如下)   


往期精选文章:

十个技巧帮助你设计一款在线学习 APP

这些色彩心理学知识教你如何传递信息

案例研究|康奈尔大学副业社区网站设计

Web Vitals —— 谷歌的新一代 Web 性能体验和质量指标

网页设计师能从日式美学中学到什么?

案例研究|一款为你带来难忘体验的美食 APP

如何制作打动面试官的作品集,这里有一份完整的指导手册

如何做好用户体验项目?从一个好计划开始

如何建立设计系统

如何把握不同层级用户的需求:回归本质,打磨信息架构

TCC 视野|2021 年用户体验设计趋势分析


- 设计师自习社区 -
TCC 设计情报局欢迎小伙伴加入,一起交流设计知识,了解全球设计资讯,锻炼英文能力,发掘更多可能性~
添加小助手微信,备注「社群」,即可加入读者群。

本文来自微信公众号“TCC翻译情报局”(ID:TCC-design)。大作社经授权转载,该文观点仅代表作者本人,大作社平台仅提供信息存储空间服务。