谈谈 iOS “返回”键的那些事

谈谈 iOS “返回”键的那些事

前面的话

谈起 iOS 的“返回”键，大家的心跳开始加速了吧。

加速可以，但请不要脸红。

下面，我们来好好聊一聊。

关于“返回”键

众所周知，无论是 iOS 还是 Android OS ，要实现返回操作存在以下种方式：

• 点击返回按钮返回；
• 向右滑动屏幕返回。

一、先来谈谈第一种：点击返回按钮返回。

要实现点击返回按钮返回，首先得要有一个返回按钮（这不是废话么）。那么，什么是返回按钮，iOS 又是怎样定义它的？

The back button uses several cues to indicate its interactivity and convey its function: It appears in response to navigation, it displays a back-pointing chevron, it typically uses a key color, and it can display a title that describes the previous screen.

概念性的描述或许显得有点抽象，我们结合具体的使用场景来描述一下：

When users select a month, the year view zooms in and reveals the month view. Today’s date remains highlighted and the year appears in the back button, so users know exactly where they are, where they came from, and how to get back.

通过苹果官方对返回键的描述，我们也对其有了大致的了解。同时，我们也可以猜想到：返回按钮的使用频率很高。当你进入一个 APP ，你不可能只是停留在它的主界面，你会进入到其它层级的界面，所以你必须要有一个途径返回到原来的界面。因此，对用户来说，它是一个强需求。

在 iOS5 及之前，我们主要是通过点击返回按钮实现返回动作。而且，我们也早已习以为常，因为它足够简单、直观，所以我们安然渡过了前五代 iPhone 的使用时期。

你或许会问：iOS6 也是只有通过点击返回按钮实现返回动作（不考虑向左滑动导航栏实现返回），为什么这一代 iPhone 被排除在“安然渡过”时期之外？

这个问题，问得很好。

一个简单的事实：iOS6 是与 iPhone5 同步推出的，iPhone5 是苹果首次在 iPhone 的屏幕尺寸做出改变（当然，你或许也会理解为妥协），由经典的 3.5 英寸增大到 4.0 英寸。

iPhone4S 及之前的屏幕比例为3：2，在这个屏幕尺寸/比例下，手指可以轻松覆盖到屏幕的大部分区域。乔布斯所说的最佳屏幕尺寸，并不是没有道理的。

iPhone5 的屏幕比例接近16：9，其屏幕也只是纵向拉长，横向尺寸/像素没有变化。这也是为什么人们把它笑称为“马脸 iPhone” 的原因。

就好像我，这些年以来，只是变高，没有变胖。

这有什么问题吗？

有。

由于屏幕纵向尺寸的增加，手指不再能轻易点击左上角的返回键，用户就感觉到没有原来用的舒服。然后，用户就开始抱怨，骂苹果是脑残的，骂把返回键放在左上角是反人类的设计。

请，稍安勿躁。

（一）苹果为什么选择把“返回”按钮放在左上角？

苹果是否因为头脑发热、不经思考就把返回键放在左上角？又或者是为了延续用户在 Web 浏览器上的操作习惯，以及因为智力上的懒惰直接沿用了这一体验？

我想，很多人都会有这个疑问。

我们总是很容易被事物的外表迷惑住，或许我们应该学会转移一下注意力。

那就，先来了解一下与 iOS 设计规范相关的一些东西。

1、Status Bar（状态栏）

The status bar displays important information about the device and the current environment.

Status Bar
Status Bar

2、Navigation Bar（导航栏）

A navigation bar enables navigation through an information hierarchy and, optionally, management of screen contents.

Navigation Bar

3、Toolbar（工具栏）

A toolbar contains controls that perform actions related to objects in the screen or view.

Toolbar

4、Tab Bar（标签栏）

A tab bar gives people the ability to switch between different subtasks, views, or modes in an app.

Tab Bar

其实，当看到 Tab Bar 时，你或许还不明白苹果为什么把返回键放在左上角，但你应该会明白苹果不可能把返回键放在其它地方。因为放在其它任何地方都是不合适的，你能想象把一个 Back Button 放在 Tab Bar 上的情形吗？不伦不类。

当屏幕底部没有 Tab Bar 的时候呢？Back Button 单独在底部显示吗？那会是一种怎样的孤独感？

（二）那么，为什么一定是左上角？

Navigation Bar（导航栏）。

When the user goes to a new level in a navigation hierarchy, two things should happen:

• The navigation bar title should change to the new level’s title, if appropriate.

• A back button should appear in the left end of the bar; it can be labeled with the previous level’s title if it adds value.

Navigation Bar 存在的意义是：我在哪里（我是谁），我从哪里来，我要到哪里去？哲学上的三个终极问题，在 Navigation Bar 上得到了完美的体现。

从设计理念和操作逻辑方面来说，把返回键放在 Navigation Bar 的左侧，几乎是 iOS 唯一的选择。

（三）那么，Android OS 呢？

Android OS 那些“迷人”的“双底栏”，或者是“三下巴”，甚至是 HTC M8/M9的 “四下巴” 。在 Apple Design 大行其道的时代，每当想到这些我都无比伤感， Android Design 本也可以有很好的表现。

其实，有一个小厂商曾经试图解决这个问题，它就是来自中国的魅族和它那“远近闻名”的 Smart bar。无论结果如何，我们应该为这种尝试表示赞赏，因为它的初衷是纯粹的、美好的。

Smart Bar 最重要的一个设计理念：

坚持将操作按钮尽量放在底部，在单手覆盖面积之内，方便操作。

先不说这样的设计逻辑有没有问题，但至少在易用性方面是有所提升的（在应用兼容的情况下）。魅族的问题在于没有号召力，你怎么能轻易在别人的领地上制定自己的规则呢？

在很多时候，我们并不是一味追求易用性的，大部分的思考与设计都是一个妥协的结果。如果只是考虑易用性，返回键无论是放在左上角还是放在左下角，都没有比放在屏幕中部偏下的位置来得方便、顺手。但是，很明显，这在实际中是不可行的，因为它在美观、逻辑上是有缺陷的。

就算是追求易用性的 Smart bar，也不是固执的在任何情况下都把返回键放在屏幕底部。当手机处于横屏的状态下时，Smartbar 显示在屏幕顶部，这时候“返回键”也被放在了我们所“吐槽”的左上角。

（四）苹果就真的没有把返回键放在屏幕底部左下角吗？

有，Safari 是个特别的存在。因为它是个浏览器，它的内容不是固定的，也就没有被贴上各种“标签”，因此它便可以游移在规则之外。

这也让我们意识到，没有一劳永逸的解决方案，也没有统一标准的世界图式。生而为人，在任何情况下，我们都是自由的。

好了，关于通过点击返回按钮实现返回的讨论，就暂时讨论到这里。

二、下面来谈谈第二种：向右滑动屏幕返回。

随着 iPhone 屏幕尺寸的增大，返回键依然停留在屏幕的左上角，从设计/交互逻辑上说这没有太大问题，但从用户的操作体验上来说，就是个不容忽略的问题了。无论用户是习惯于左手操作还是右手操作，点击左上角的“返回”键都是一件十分吃力的事情。苹果明显意识到这件事情了。

好雨知时节，当春乃发生。

到了 iOS7，苹果终于加入滑动屏幕返回操作。

（一）滑动屏幕返回操作现在大致有以下两种类型：

• 手指从屏幕边缘由左向右滑动屏幕，手指松开后页面返回；

• 手指从屏幕任意位置向右滑动屏幕，手指松开后页面返回；

苹果选择的是第一种滑动返回方式。但是在我们日常的使用当中发现，从屏幕边缘位置实现滑动返回的体验并不是太好，特别你是习惯用右手使用手机时。

然而，在操作上不太好友好的同时，它却带来了一个“意想不到”的好处：
不会因为手势误触而导致滑动返回操作。所以，与那些允许从屏幕任意位置实现滑动返回动作的应用相比，苹果在这方面无疑思考得更加深入一些。

另外，iPhone6 的 2.5D 玻璃让用户在屏幕边缘滑动屏幕时更加连贯顺畅，避免产生了手指在屏幕边缘滑动时的那种割裂感，手指由边缘圆弧曲线完美过渡到平面。

但是，无论苹果是出于防止用户误操作，还是出于配合 iPhone6 的2.5D 曲面玻璃的考虑，也要承认从屏幕边缘由左向右滑动屏幕返回的体验不够友好这一事实。很明显，从屏幕任意位置实现滑动返回来得更加自然顺手，而且这种方式对左右手的操作体验是一致的。

（二）细谈 iOS 的滑动返回操作

打开苹果的任意一个官方应用，如邮件。

打开其中任意一封邮件，我们一起来发现一些有趣的事情。

• 用手指从屏幕边缘开始滑动，然后在接近屏幕中间位置时手指停止滑动（保持手指不要松开），这时把手指松开，你会发现刚才滑动得页面回弹到原来的位置，并没有实现滑动返回操作。

• 用手指从屏幕边缘开始滑动，然后在超过些许屏幕中间位置或是屏幕三分之二左右时手指停止滑动（保持手指不要松开），这时把手指松开，你会发现刚才滑动的页面有时会回弹到原来的位置，有时却又会发现页面不回弹实现了返回操作。

• 用手指从屏幕边缘开始滑动，滑过屏幕的三分之一左右时把手指松开（此过程不是滑到屏幕三分之一时停顿一下再松手，这个过程是流畅、无停滞的，你甚至不必在到达屏幕的三分之一再松手，你可以在将要到达三分之一时就有倾向松开手指的趋势）。这时候，你会惊喜的发现，页面随着你手指滑动得趋势实现了返回操作。这种情况下，页面滑动返回的效果也是最美的。

我以为，这就是技术的乐趣。它可以捕捉人的信息，预测人发出如此信息的意图，从而帮我们实现我们想要达到的某种效果。

但是，滑动返回操作也并不是万能的：

• 在全屏浏览图片时，从屏幕边缘向右滑动屏幕实现返回动作是失效的；
• 在日历的月份界面，从屏幕边缘向右滑动屏幕实现返回动作是失效的。

期待以后有更多有趣的体验。

（三）细谈第三方应用全屏滑动返回操作

打开几个自带全屏滑动返回操作的应用，如新浪微博、知乎、汽车之家。

1、新浪微博

点击进入任意一条微博内容界面，然后在屏幕中向右滑动手指。然后你会发现，在新浪微博客户端这里，是无法通过上面提到的“流畅、无停滞滑动”实现返回动作的。

只有滑动超过某一特定距离时，才会实现滑动返回的动作。同时，它的滑动返回效果也是比较突兀的，虽然速度很快，却少了一种本该有的温柔。

2、知乎

点击进入其中任意一个问题，然后在屏幕中向右滑动手指。只要滑动一小段距离就可以轻松实现滑动返回操作，而且它的过渡动画效果刚柔并济，令人感到舒服。

还有一点值得说的是，当你的手指滑过滑动返回距离，而此时你并不想进行滑动返回动作时，你只需要轻轻向左滑动一下，便可以取消本次的滑动返回动作。

这个动如此潇洒，请允许我，为知乎点个赞。

3、汽车之家

汽车之家的滑动返回操作和知乎的滑动返回操作体验差不多，其中有一点区别比较有意思。

如上面所提到的那样，当你的手指滑过滑动返回距离，而此时你并不想进行滑动返回动作时，即使你轻轻向左滑动一下，它还是比较“顽固”的进行了滑动返回动作。如果真的要想撤销滑动返回动作，只有往左滑到最小距离之内，才可以撤销本次的滑动返回动作。

我以为，负责这个产品设计的人可能是经过这样的思考：

人要学会为自己的行为负责，也勇于为自己犯的错误承担相应的后果。毕竟，挫折更容易让人成长。

哪怕是我的过度解读，请再次允许我，为汽车之家点个赞。

这次关于对 iOS “返回”键的讨论就暂时到这里。

最后的话

强烈的自信，同时也伴随着强烈的自我怀疑。

期待与大家的再次相见。^_

我的微信公众号：跨界汪