从iOS10的交互设计中学到的3个设计启示

本文用交互设计的思维对iOS 10的新特性进行分析。撇开平时我们考虑的界面排布，页面元素等问题不谈，将视角转移到屏幕外的东西：如时间维度的，空间维度的，手势操作等等，以提升我们的用户体验。

先上iOS 10 官方指南的原地址：https://developer.apple.com/ios/human-interface-guidelines/

本文作者是蘑菇街的设计团队，欢迎大家关注他们的追波地址哟：https://dribbble.com/mogu

背景

前段时间被一篇名为《从iOS 10设计指南变化看设计的新趋势》的文章刷屏，文中从UI设计的角度分析了iOS 10带给我们的设计新趋势：“大而简，简而精”。文中指出，未来的设计将更注重产品的内容和操作体验，降低其他因素对用户使用上的干扰。设计师则需要在界面设计中去把握「大」和「简」的程度，以及思考如何通过更有限的手段和空间来传达更多的信息和指引用户来达到「精」的目标。

iOS 10于一周前正式推送更新，相较于前几代的系统，他在交互方式上有了比较多的改变，在很多细节设计上，更是值得我们把玩和品位。正如苹果官方在他的更新说明里所描述的：“iOS 10是iOS发布史上的重磅之作”。

所有iOS 10新特性罗列的文章网上已有很多，这里就不赘述了，本文则将从交互设计的角度出发，聊聊iOS 10的变化带给我们设计上的启发和借鉴意义。

一、基于行为的设计

著名的交互设计专家Jon Kolko在他的《交互设计沉思录》中指出：“行为是发生在第四个维度(时间维度)上的，而交互设计的目标是试图随着时间的推移，逐渐理解并进而塑造人的行为”。

举个例子，iOS 10最明显的细节之一：拿起手机就亮屏。

很多人之前会有这样的困扰：我只是想看个时间，一按Home键，duang!一不小心就进入系统界面了。现在有了这个设计，我们再也不用为了看时间或通知去按电源键或Home键了。

看图就懂(此功能目前只适用于iPhone SE,iPhone 6s或更新的机型)

“拿起手机就亮屏”这个看似简单的功能，用过之后，就会让人自然而然地成为习惯。值得我们去思考：设计的目的是传达信息，除了界面上的交互行为，除了通过好看的UI来吸引用户的注意，更多地需要我们重新审视利用手机本身的特性以及用户特定场景下的行为需求，将产品渗透到人的生活中去，以最平易的方式做出更契合行为的交互。

二、交互体验更扁平

说到扁平，很多人直觉上觉得就是视觉上去掉了光影、特效、简化了元素，其实远不尽然。在移动互联已占据我们生活方方面面的今天，从用户操作的角度，将信息更加简单直接且高效地展示出来，提升交互的易用性和操作的便捷性，则更是设计“扁平化”的体现。

作为交互设计师，在产品的设计工作中，遇到最纠结的问题莫过于：需要在有限的屏幕空间内，将产品的信息内容尽可能多地展现出来，同时又要兼顾界面的优雅美观。

iOS 10在这次的优化中给我们提供了很好的设计思路。

1）横向空间的扩展

以Apple Music为例：

在新版本中，他用每个单元模块左右滑动浏览更多内容的操作，替代了每块只展示一个内容的设计形式。相比之前的版本，将并列的信息在当前界面浏览，无形中扩展了屏幕的空间，增加了单位面积的使用效率，减少了页面的跳转。

这种交互形式其实并非Music中首创，早有几年前就出现的window phone，近有4月更新的Airbnb，以及国内以设计品质感而著称的美食类App-Enjoy中，都采用了这种交互形式。

这种设计形式使页面的层级结构变少，用户不用一次次地在一级和二级页面之间切换，提高效率的同时也使结构变得清晰了。

相信这种趋势会越来越多地在各种内容类的App中被采用。

2）Z轴空间的扩展

在三维空间中，如果说纵向滑动利用的是Y轴空间，横向滑动利用的是X轴空间，那么iOS 10中对Z轴空间的利用和拓展则给我们的操作着实带来了不小的快捷和方便。

我最喜欢iOS 10的地方在于它改进的通知，可以通过3D touch快速地打开回复界面进行操作，完全不用进入app，可以就那样一直回复别人，直到离开为止。

对于我们App设计者来说，无论是针对推送信息，还是app内的内容，更好地利用好手机的这一特性，在提升操作体验的同时，还可以更好地去实现我们的业务目标。

3）手势操作更便捷

iOS10对于手势的操作，也有了更便捷的设计。以锁屏界面为例：

iOS9中：

进入系统界面：

有touch ID识别指纹：按下Home键

无touch ID识别指纹：右滑屏幕

插件中心：从顶上往下滑

消息中心：从顶上往下滑，并切换tab

相机：从右上角往上滑

iOS10：

进入系统界面：

有touch ID识别指纹：按下Home键

无touch ID识别指纹：按下Home键，输入密码

插件中心：右滑

消息中心：从顶上往下滑

相机：右滑

对比以上的两个操作，功能还是那些功能，但整体的操作却更加舒适便捷了，手指的操作变得更灵活直接，不需要上下来回，或者准确地对着某块控件才能完成操作。

Josh Clark在《Tapworthy-Designing Great iphone Apps》一书中分析得出，当我们单手操作时，虽然拇指能划到整个屏幕，但只有三分之一的屏幕是真正容易触及的——也就是拇指正对的区域。

随着iPhone手机屏幕越来越大，如何设计操作体验，使操作更舒适，也是设计师们需要好好打磨的一个体验问题。

随着iOS 10更新的地图应用中，对于手指操作体验的优化设计，使整个操作非常舒适，这种设计思路，也非常值得我们在平时的设计工作中借鉴。

原来的地图App中，各个界面中的手指操作区域是这样的：

在iOS 10中，他的手指操作变成了这样：

所有的操作都集中到了“舒适区域”内，让用户能更方便地使用体验，不用因为手指不够长也切换成双手操作而苦恼了。

三、细节，还是细节

用户体验的本质在于：既要关注大局，又要关注细节，只有这样用户才能获得最好的体验。

处女座如苹果公司，在提升用户体验的道路上，对于细节的追求，经常会到一个让人惊叹的地步。

举两个小例子，可能平时很多人不太会注意到，但确实给我们带来了操作使用的便利。

顶部的信息条：

在iOS 10中，回到上一个使用的App的回退操作，不再会遮住手机数据或者wifi信息条，可以让用户在不打断视野的情况下，快速回到之前用过的应用上。

另外有个很多人可能会注意不到的细节是：视频播放时，锁定屏幕，再次打开后，它会继续播放，不需要再一次点击播放按钮，so方便。

交互细节不是功能，在追求效率的公司里，往往会被觉得可有可无。但是往往只有对细节孜孜不倦追求的产品，才能做到足够让人惊艳。

结语

追求好的体验一直是我们的设计目标，不管是从视觉上，还是从交互上。

我们必须去思考，如何站在用户的角度，从问题的根源着手，从产品实际的使用场景出发，关注细节和情感，结合新系统，新趋势，为用户创造好的用户体验，以最终达到我们设计的目的。