行业焦点

流体界面设计：让苹果手机操作如此“丝滑”的秘诀

浏览量：4276

基于流体界面设计的苹果手势设计，让你在交互过程中充分地体验屏幕流畅性。

神译局是36氪旗下编译团队，关注科技、商业、职场、生活等领域，重点介绍国外的新技术、新观点、新风向。

编者按：一直以来，苹果系统的设计都受到了不少用户的青睐。在推出iPhone X过后，苹果更是直接移除了原有的Home键。因此，手势设计也显得愈加重要。毫不意外的是，手势设计并没有影响苹果用户的整体交互体验。这篇文章，原标题是Apple's Fluid Interface Design，作者Ali ÇORAK在文章中就详细介绍了让苹果手机操作如此顺滑的秘诀。

如果你仔细去观察iOS系统和Android系统，你肯定会发现，苹果iOS系统更关注用户使用的流畅性与可用性。

就苹果而言，其在设计方面始终坚持一个原则：自然性。正如苹果推出的许多产品一样，iPhone的灵感也同样来自于大自然。

如果你再去阅读苹果联合创始人史蒂夫·乔布斯（Steve Jobs）的传记，你会了解到，乔布斯认为，苹果应该推出人人都能使用的产品，并且在不看说明书的前提下也能使用。

例如，iPhone的主屏幕就好比现实生活中的书页。从下面的动图中，你就能明白我举的这个例子。

当我们手握一本书时，我们无法上下翻页。同理，iPhone在设计时，也无法上下滑动翻页。然而，你也可能会质疑，并不是所有的智能手机都采用了这样的设计。的确如此，不过，Android系统之前很多老版本的设计，都存在让用户很难明白和操作的交互设计。

另外值得一提的就是光标。iPhone屏幕上的手势设计，也是根据我们使用光标的习惯来设计的。我们在屏幕上移动手指的方式，就好比我们在电脑上使用光标一样。

等待与响应

当我们在与手机交互过程中，如果我们触摸屏幕后出现响应延迟的话，我们就会认为，手机的响应效果不好。因此，更快速的响应，就代表更流畅的交互。

2018年WWDC大会现场。图中分别展示的是10毫秒、50毫秒、100毫秒以及200毫秒的响应延迟。

实际上，苹果也不仅仅关注于iPhone本身的响应。响应延迟进而可能会导致用户的等待。因此，苹果也希望阻止这种情况的发生。对此，苹果的解决方式，就是借助于手势设计。

从苹果推出iPhone X时移除原有的Home键后，手势就变得愈加重要。可以说，手势几乎是手机交互过程中最重要的一个因素。在iPhone X上，由于原来需要通过Home键来操作功能，现在都转而用手势来替代交互。

那么，苹果又是如何用手势设计来提升交互速度的呢？实际上，如果你在应用手势之前不需要去考虑做什么的话，那你自然而然地就会加快交互速度。

因此，当你首先开始与屏幕交互，然后再决定下一步要做什么的时候，你就可以迅速完成交互动作。如果你不懂这句话的意思，可以直接参考下列的动图。

在打开某个应用程序过程时，当你突然意识到点错了过后，我们就可以立即通过手势撤回这一交互行为，并快速切换并选择你想打开的应用程序。

再比如说，如果你想尽快向其他人发送照片的话，你就可以通过手势操作快速地完成这一交互。

你可能会觉得，这些都是一些不重要的小细节。然而，如果错误地打开某个应用程序后，你再花2秒钟重新思考一下这个问题，也许你就会承认这些细节设计的重要性了。

在有Home键的iPhone上，如果你错误地打开了某个应用程序，你的手指肯定会第一时间去按Home键。然而，在没有Home键的iPhone上，你的手指已经在屏幕上了。如果没有手势设计的话，那你可能只有等待应用程序先打开，然后再通过交互操作关掉这个应用程序。

如果你本来想打开推特应用程序时，突然想检查一下邮件的话，这个手势操作就适合你。

界面响应

现在，我们已经基本上习惯了全面屏手势操作的交互方式。当我们在屏幕上点击某个应用程序，或者打开通知中心时，我们希望看到屏幕上的交互变化。

由于屏幕可以提供振动和图标颜色变化等反馈，我们也可以及时地感受到，屏幕对我们的手势交互做出了响应。

除此之外，通过前面的动图还可以发现，所有的应用程序都是从很小的比例逐渐变大并覆盖整个屏幕的。

反过来也一样。

橡皮筋效果

当我们在网页端阅读文章时，我们会不断向下滑动页面，去确认文章是否已经完结。同样地，在手机应用程序中，也是同样的道理。当你上下滑动时，这个手势就会让你知道，你已经滑到了页面顶端或底端了，这就是所谓的“橡皮筋效果”。

橡皮筋效果，即通过手势滑动到页面顶端或底端时出现的回弹动效。

上图中，苹果手势界面设计师Chan Karunamuni说，如果没有橡皮筋效果这一设计，你就不知道手机屏幕到底是卡顿了，还是真的滑到了页面的某端尽头。

动画

另外，如果要让动画在感官上更加容易接受，同时还能让过渡更加顺滑的话，那又该如何设计呢？

对此，苹果认为，仅靠每秒钟显示的帧数还不足以达到这一目的，在此基础上，还需要下图中的其它标准。

此外，动画的速度以及每帧的效果都非常关键。基于此，动画中还加入了运动模糊和运动拉伸。

3种动画的同一帧对比图。其中，左侧是正常显示情况，中间出现了运动模糊，右侧出现了运动拉伸的情况。

例如，当我们点击某个应用程序时，它会不断放大并迅速覆盖至整个屏幕。这个顺滑的过渡，就有运动拉伸的动效。

所以，苹果公司实际上主动地揭露了许多我们甚至没有留意的细节内容。

毋庸置疑的是，在设计应用程序时，文档是最重要的资源。不过，这些演示文件中的细节，对用户界面设计也起到了很好的提示作用。

译者：俊一