新版 iOS 15 Safari 有哪些值得学习的交互设计？全总结好了！

其实在今年 WWDC 之后许多人都在吐槽 iOS 15 短少明晰的记忆点，没错。多数功用似乎都服务于疫情肆掠之下的长途协作，从规划角度上来说，相反提及不算太多的 iOS Safari 让我感到颇为惊喜。

我为了尝鲜将手头的 iPhone 晋级了 iOS 15 （大概是在 Beta 2 的阶段），在日常运用进程中，明晰感知到了许多 Safari 的规划改动。

老实说，调查 iOS 体系的迭代进程，是一个学习UI/UX规划乃至于规划决策的良好契机，尤其是在每年6月到9月之间看到这个操作体系从勉强能用，到逐步完善、增删迭代，成为一个老练体系，这个进程傍边能够看到许多东西。

iOS 15 的 Safari 阅读器的这次改版晋级，给我们供给了一个规划范式。

下面简单共享其间的一些关键。

1、视觉：从头收束控件的空间

主要是为了更好地应对大屏交互，iOS 15 将整个界面交互进行了浓缩和收束，将阅读器中简直悉数的交互都会集到屏幕底部，在视觉上从头做了梳理，将本来现已相对精约的界面，进一步简化，将顶部地址栏和底部工具栏完全合并成为为一个交互控件悬浮条：

图片来自 https://jonas.do/

在向下滚动阅读的时分，悬浮工具栏会自动隐藏缩小到底部：

这种简化的逻辑，遵从了交互规划师常常会用到的 Miller 规律：

Miller 规律
一般人的作业记忆中只能保存 7 个（正负 2 个）项目。

这一规律在UI规划傍边其实有广泛使用，这主要是由于这一规律环绕着尽或许下降用户契合的逻辑，来让 UI 界面、菜单选项更加天然舒适，不会由于过多的选项而给用户带来更多的认知负荷。

在绝大多数的情况下，我们在 UI 界面中最多会采用 5 个选项，这是一个能够被绝大多数用户习气和承受，又能够承载满足多功用的一个控件数量。

可是，要从本来的 5+3 个交互控件压缩到一个工具栏，就需要根据运用频率来作挑选了，其间回来按钮比前进按钮的运用频率高，收藏夹运用频率不算高，而本来左上角的地址栏菜单按钮的运用频度页相对较低，大概遵从这样的逻辑来进行了精简。

2、决策：贴合用户习气的迭代

为了供给更加天然顺滑的过渡体会，在初度运用新版的 Safari 的时分，会供给一个标准的引导功用，让用户选择是否要切换到新版规划傍边。

而在 iOS 15 Beta 6 这个版别傍边，整体的规划又往回退了一步，将紧凑的悬浮工具栏恢复到相似 iOS 14 的样式，只是方位依然靠下。

这种强连续性的规划毫无疑问是根据「学习本钱」来考量的，前后两大版别的 Safari 阅读器在视觉和交互上的体会，假如按照 Beta 4 的规划无疑差别上十分大的，Beta 6 相对更照顾绝大多数用户的习气和认知。

相应的，本来的地址栏菜单页回来了，一起保存了长按方便菜单，以及将地址栏移回顶部的选项：

可是不论是以上哪个版别，在手势交互上的进化，都显得十分冷艳。

3、交互：添加手指操作的层级

在 iOS 体系傍边，Action/Share 按钮简直是替代了传统的汉堡菜单，来承载「共享」和「更多」按钮的两层功用，将共享和更多的菜单选项收纳到其间。只是太多的功用选项被包容到这个菜单傍边，使得它的便捷性下降许多。

为了更简单操作，交互会集到页面底部之后，新增了长按呼出方便菜单的功用，让部分高频运用的功用更简单被快速调出。

除了长按呼出方便菜单之外，还新增了左右快速滑动切换标签页的交互：

为了告诉用户工具栏是能够左右滑动的，让左右两头的工具栏露了个头，作为视觉指引，奉告用户周围还有标签页，滑动即可快速切换曩昔。在这个小细节上的规划，能够说是灵性十分了。

除了单击多标签页按钮来预览一切页面之外，还能够在悬浮工具栏上上滑，快速预览一切标签：

最有意思的当地在于，Safari 的这个交互逻辑并非随便创造的，而是从 iOS 现有的手势交互继承而来的，而这种「经历搬迁」的规划思路正是 Jakbo 规律的使用。

Jakob 规律
「 用户大部分时间都花在其他网站上。这意味着用户更喜欢您的网站以与他们现已知道的一切其他网站相同的方式作业。规划用户习气的模式。」

用户会根据他们最熟悉的习气搬迁到相似的当地——用户会复用相似的行为模式和模型，而 Safari 用户最熟悉的恰恰是 iOS 体系。

如今的全面屏 iOS 上的手势交互，根本都是环绕着底部这条小横线，也就是主页指示器（Home indicator）：

iOS 采用的交互逻辑简单笼统下来的几个关键：

• 左右滑动手势快速翻页
• 在 Home indicator 快速上滑回到主屏幕
• 在 Home indicator 缓慢上滑动呼出最近打开使用的卡片

在新的 Safari 傍边，这种交互范式被天然的搬迁了过来：

• 将地址栏视作为一个确认的交互目标
• 左右滑动地址栏，快速切换左右两头临近的页面
• 在地址栏向上滑动呼出一切标签页面
• 在屏幕边缘左右滑动，来完成当前页面的前进后退

这种天然的经历搬迁，在很大程度上下降了用户的学习本钱，即使在 Beta 6 版别傍边，这种手势交互的逻辑也悉数连续了下来。

这种交互的逻辑添加了交互操作的层级，也让手势操作进入了一个新的阶段。

4、手势：拇指交互区域是中心

将交互控件放置在拇指天然出触及的区域，是大屏年代 UI 规划的「根本」。

Fitts 规律
「获取目标的时间是到目标的间隔和巨细的函数。」

Fitts 规律在很大程度上上环绕桌面端屏幕交互来进行讨论的，可是在手持设备上，还要考虑手指天然的限制，在绝大多数时分，是以拇指作为主要的交互中心：

通常，越靠近拇指的区域，天然也就是越简单交互和触及的区域，而在目前 5英寸起步的屏幕上，这个交互区域就十分狭隘了。

这个问题在小屏为主的年代，规划师早就现已考虑过了，甚至执行得十分深入：

手势交互的先驱者 webOS 从方便方式、告诉到根底的手势全都环绕着屏幕底部来进行，而这次 Safari 发布之后，前 Windows Phone 规划师 Jon Bell 也在自己的博客上讨论过这一问题，并共享了其时的 Windows Phone IE 阅读器就所采用的相似规划：

在其时，他们 认为最麻烦的问题在于「畅通无阻的标签页要怎么切换」才好，不过这个问题在 Safari 上现已处理了，不只沿用了之前的按钮，还加入了快速上划，以贴合用户习气的方式处理了这个问题。

值得一提的是，Safari 的这个工具栏作为手势交互中心的规划，为下一个阶段的 UI 规划指明晰方向，而且跟着屏幕尺寸的添加，点击交互覆盖的区域简直是不会变的，那么手势来承载更多的功用就成了简直仅有的答案。

5、总结：大屏 UI 交互的新方向

新的 Safari 阅读器的规划，作为 iOS 渠道的中心工具之一，对于用户和规划师而言，都是十分重要的参考范式：

• 在完全大屏化的年代，展现了将交互悉数会集在屏幕底部的简化方向、交互逻辑；
• 在手势交互认知度普遍较高的今天，继续前进一步，演示了手势交互的或许性；
• 以地址栏为范式，呈现了点击+滑动手势的多功用浓缩式控件的规划逻辑；

当然，这种新的规划本身也是存在缺点的：

• 新增的手势是有学习本钱的，需要引导来引导用户了解
• 悬浮式的交互控件不能承载太多太杂乱的手势
• 悬浮式的交互控件不能在其间放置太多按钮

不过，从我个人的角度上来看，Beta 4 版别中这种单一悬浮工具栏虽然更加急进，可是更加精约随手，整体体会或许更加契合未来的趋势，是一个颇有价值的参考案例。

延伸阅读：