iPhone X 设计师教你设计流畅自然的界面
导读：
Chan Karunamuni 是苹果人机界面团队 iPhone X 手势界面设计师，在 2018 年苹果开发者大会上 Chan 以「Designing Fluid Interfaces」为题介绍了 iPhone X 手势界面设计的思考，从人、动机、行为、手段和场景等不同的角度对设计流畅自然的界面进行了全面阐述。
什么让界面感觉流畅自然？
每个人对于流畅的界面都会自己的描述，「这感觉很快速」，「这感觉很平滑」，「这感觉很自然」，「这感觉很神奇」。这是一种什么样的感觉？当你感受到它的时候就知道了，整个界面就像你思想延伸的工具。
iPhone 是一个用于信息与沟通的手持工具，通过融合我们的感觉和视觉发挥作用。如果我们仔细考虑就会发现它实际上是千百万年来手持工具发展长河中的一部分。左面的是 150,000 年前用于提取骨髓的工具，拓展了手指的锋利程度，令人惊奇的是我们的双手已经进化并且适应了我们制造的工具。我们进化出了一双富集肌肉、神经、血管的双手，能够完成最精细的手势操作以及做出最轻柔的触摸，我们已经完全适应了这个触觉世界。
如果回顾电脑的历史，我们从人机之间的多个抽象层起步，你要学习各种复杂的操作，这将大多数人拒之门外。但是过去的几十年间，我们通过一对一的间接操控装置将这些抽象层进行剥离，最终我们可以直接和内容进行交互。这对于我们就像是魔法一般，这种感觉更像是自然世界的延伸。我们对此标准极高，如果有一丁点东西感觉不好这种幻想就会被粉碎，但是如果感觉良好，这就像你身体的延伸。它会跟你的思想同步，使用起来会很愉悦，毫无阻力甚至会非常开心。
如何设计感觉像是自我延伸的界面？
我们认为要做到这一点，需要进行界面与我们思考和运动的方式的匹配。其中最重要的部分是要意识到我们的思维会不断地对变化的刺激做出响应，我们的思维和身体一直处于这种动态变化的状态，所以并非界面需要是流畅变化的，而是我们本身就是流畅变化的，我们的界面需要对此做出回应，所以界面始于响应 。
寻找各处的延迟
我们对工具的使用取决于等待时间，现实世界中如果工具在使用时响应延迟，那该会有多难用。我们发现人们对延迟真的非常非常敏感。如果在移动物体的过程中引入任何延迟，对响应的感受都会直线下降，人们感觉到完全失去连接，不再是自我的延伸。这就是我们如此努力的工作来减少延迟感的原因。
实际上，最新的 iPhone 能更快地响应你的手指操作，因此我们才能实时检测到你手势的所有细微差别。我们对此十分关注并且认为所有开发者都应如此。这意味着寻找各处的延迟，这并不局限在滑动手势，而是包括点击、按下等所有的界面交互操作，所有元素都应该即时响应。我们要警惕那些在界面中可能引入的延迟，界面需要始终即时响应。这虽然简单，但却是让界面感觉充满活力的关键。
考虑持续的重新定向与中断
我们的思维和身体始终处于对变化进行重新定向的状态，如果我在走向舞台另一端的过程中意识到我把东西落在了后面，我会马上掉头而非等到走到另一头才进行，所以我们的界面展示出这种持续重定向的能力十分重要。这会感觉与你紧密相联，这也是我们为什么要在 iPhone X 中建立可重定向界面的原因。
尽快响应重新定向
iPhone X 实际上非常易于手势操作，你可以横向轻扫切换应用，竖向轻扫回到桌面，也可以将这两个方向的操作混合，因此你可以在返回桌面的过程中看下多任务界面来决定是否点进去，也可以进入多任务界面的时候直接返回桌面，这些看起来不太重要但是如果它不支持重新定向将会怎样？假如你能做的唯一手势就是横向轻扫不同的应用，竖向轻扫返回桌面，无法进行我刚才提到的的任何中间操作，你将不得不在进行手势操作前想明白自己想做什么，那么这一系列事件就会是线性操作。你需要思考我要不要回桌面，要不要进入多任务，然后做出决定进行操作然后松手。
但如果它是可重新定向的，你的思考和手势就可以并行，你可以边思考边操作，这被证明是比在做前想好更高效的方式，这实际上是一个多方向的混合操作而非几个需要你思考的独立操作。你可以在现有手势的基础上探索一个新的手势操作，并让你伴随思考做出对应手势。例如你可以在返回桌面的过程中滑动切换主屏幕，在应用启动的过程进入多任务界面，在启动应用的过程中将其关闭，以及在应用启动的过程中进行交互操作。
实时响应中断操作
我们发现界面及时响应并了解你的意图是如此重要，这也适用于运动中的改变，不仅是在交互的开始，还包括交互的中间过程。我们需要对中断进行实时响应，一个好的案例是 iPhone X 的多任务界面触发机制，当你向上轻扫暂停时会进入多任务处理界面，我们需要解决如何检测这个运动中的变化，而且人们期望可以马上进入多任务，最终我们通过检测手指加速度的方式解决了这个难题。在你向上轻扫暂停时手指的加速度会极具上升，实际上你停止的越快，iPhone X 检测到的也就越快。
保持移动中的空间一致性
在现实世界中我们会感受到物体以对称路径的方式出现消失，假如某个事物以某种方式消失了，我们会期望它从出现的地方再次显露。如果我从舞台的一侧下走去然后从舞台的另一侧出现，你就会非常疑惑，因为这是不可能的，所以我们希望延续这种现实世界中的空间一致感。在界面中如果某个元素在你的视野中消失然后再出现，它应该以对称路径的方式进行并拥有一致的出现消失路径。
比如说，在 iOS 的导航中，如果我点击列表中的元素它从屏幕右边滑入，当我点击返回按钮时，它将返回右侧，这就是对称式路径。两个状态下，每个元素都有一个存在的固定区域，这也强化了我将其滑回右侧的手势操作，因为我知道它属于那里，而且是可预期的。如果我们不这么做，我点击后页面从右侧滑入然后我点击返回它下移消失，这就会有种割裂感并让人疑惑。空间一致性让手势操作与我们对物理世界空间的理解相匹配。
暗示手势操作方向
人类会根据经验来预测下一步，我们总是通过世界中万物的轨迹来预测接下来的运动。所以当界面中引入预测时，你需要处理好初始态和终止态的转换，物体应该从初始态平滑过渡到终止态，不管是通过手势操作或是动效变化。以控制中心举例说明，控制中心的模块会随着你的按下操作变大并向你手指移动，并最终弹开。这个暗示就让手势操作充满预期并可预测。
触摸交互轻量化
多点触控的轻盈是其最被低估的一面，它可以检测到空气般的轻扫、滑动、点击等操作。这些操作是如此轻柔，我们希望放大它们的动作，我们希望在移动或投掷某物的时候让小的投入产生大的效果，从而产生令人满意的感觉。以短交互（Short interaction，短小轻量的交互）举例，我们运用了所有的传感器和技术来尽可能的理解并建立了手势操作的能量和动量文档，我们检测并放大了移动的效果，使其仍然感觉像是你自身的延伸，因此你通过一个轻量的交互就可以获得满意的结果。
例如在滚动页面的过程中，虽然你的手指仅和屏幕短暂接触，但是系统保留了你的所有能量和动量并将其优雅地转入到界面中，所以如果没有这些相同的滑动，你将无法移动这么远的距离。而且为了滚动页面，你将不得不进行一些费劲的滑动操作，使用的时候将会异常痛苦。
另一个案例是上滑返回桌面，你只需要在屏幕上轻轻一滑，就呈现出一个流畅轻量的多点触控手势操作，同时大量复用了底部操作的肌肉记忆，当你松手的时候，屏幕就会返回面板状态。不仅滑动，点击也是如此。界面对每个交互进行令人满意的响应是一件非常重要的事情，界面不停向你传递它理解你的信号，让你感觉界面感觉充满活力并与你相联。
柔和地表明边界
界面渐进且柔和地让你知道那边没有内容，全程追踪你的操作并让你知道它很理解你。如果没这么做的话，移动整个界面的手感将会非常粘涩、令人不安，就像撞上了一堵墙，你将无法理解冻结的手机和上滑到屏幕边缘的手机间的区别。所以告诉你已经抵达了边缘是一件重要的事情，这也适用于从一个状态到另一个状态的过渡。以上滑程序坞和应用为例，这并不像撞上了一面墙，停止追踪物体然后由另一个物体接管，而是它们都以顺滑的曲线进行平滑切换，而不会让你感觉这是一个物体接管另一个物体的严酷时刻。
设计平滑的运动效果
在物体运动的过程中如果相邻的两帧出现明显的视觉变化，这时候整个界面会感觉有点不连贯，出现视觉频闪。在设计中重要的不是帧速率而是帧内容，为了降低视觉频闪可以通过提高帧速率、增加动态模糊和运动拉伸的方式来进行解决。上面的每种方式都试图在运动中将更多的信息进行视觉编码。在 iPhone X 中我们采用了运动拉伸的方式，当你启动应用的时候应用图标会弹性伸缩成应用界面，并在你关闭应用的时候以相反的方向进行伸缩，由于在运动的每帧之间增加了一点额外的信息因此整个运动看起来更加顺滑。
考虑行为而非动画
现实世界中的事物总是处于动态变化中，它们总是会受到你的影响，并不像动画片中的那样运动，也没有现实生活制定的动画曲线，所以我们认为动画和行为更像是你和物体之间的一场对话，而非界面的描述，所以动态的看待界面并思考人们的行为。在「照片」这个应用中滑动照片的阻力很小因为它在概念上就很轻量化，但是当你滑动切换应用时阻力会稍微大些，因为它在概念上更重，所以我们赋予了系统更重的质量。
总结
流畅自然的界面会像我们一样思考，它始于及时响应和持续的重新定向。
界面通过响应来让我们感受到与事物的连接并且适应我们不停变化的思维。
保持空间一致性来加强统一的空间感，以及对称的过渡方式。
暗示手势操作的方向来影响我们对未来的预期。
保持交互轻量化但放大其效果来获得令人满意的响应。
在界面中采用柔性边界，并在你触及边界以及转换追踪物体时进行优雅的响应。
设计顺滑动态的行为。
以上就是如何构建感觉像是思维延伸的界面的一些原则，希望对你有所启发。
评论