谈谈魅族“MBack”的前世今生

魅族手机 Home 键演变历史

一、MBack 的到来

在 602 魅蓝 Note2 的发布会上，魅族向大家宣布了一种新的交互方式：MBack。 在 630 魅族 MX5 的发布会上，魅族又把 MBack 带到了 MX5 上面，并将它与 MTouch 结合起来，使得 Home 键的功能再次得到升级。

MBack 的核心交互载体是手机正面的实体 Home 键，这颗实体 Home 键具备按压与触摸的功能操作，分别对应 Home 与 Back/指纹识别功能。MBack 的最大亮点在于，解决了在安卓手机上让人诟病的“导航栏”空间占用及操作上的问题。简单粗暴的说，就是从此解决了安卓手机屏幕底部出现多层底栏的问题。

对于这个独特的“返回”操作方式，魅族把它称之为“革命性”的 MBack。然而，每当听到类似“革命性”、“颠覆”等词语时，我总是采取一种相对审慎的态度。因为能够称得上“革命性”的东西实在是少之又少，不能把新出现的东西就称之为“革命性”，而是要看它以何种方式为用户解决了哪些问题。

那么，为什么产生了 MBack 这种交互方式？仔细一想，发现也只有魅族才有可能推出这样一种交互方式。

二、MBack 的诞生历程

1、魅族手机 Home 键演变历史

我们先来回顾一下魅族手机 Home 键演变历史。

魅族手机 Home 键演变历史

M8：实体 Home 键

M9：实体 Home 键+虚拟按键（Back+Menu）

MX：实体 Home 键+虚拟按键（Back+Menu）

MX2：虚拟 Home 键+虚拟按键（SmartBar）

MX3：虚拟 Home 键+虚拟按键（SmartBar）

MX4：虚拟 Home 键+虚拟按键（SmartBar）

MX4 Pro：实体 Home 键+虚拟按键（SmartBar）

MX5：实体 Home 键

看到最后，你会发现 MX5 又回到了 M8 时代的单一实体 Home 键。当然，MX5 这颗 Home 键也比 M8 的 Home 键要聪明得多。此外，我们还发现，SmartBar 存在了一段时间，然而又消失了。这是为什么呢？

2、Android 的应用结构

在讨论 SmartBar 之前，我们先来看一下 Android 的 应用结构：

应用结构：状态栏、导航栏、工具栏（应用栏、顶部栏、底部栏）、侧边导航抽屉。

注：在最新的 Material design 中，应用栏（App bar）取代了原来的操作栏（Action bar）的位置，操作栏（Action bar）的形式及功能得到了扩展进而演变为工具栏（Tool bar）。

Android 的应用结构

以上就是一个典型的 Android 应用结构，其中透明的顶部栏与底部栏可以根据实际的需求来选取与设计。

3、 Smartbar 的设计理念

了解 Android 的应用结构之后，我们再来看看 SmartBar 的核心设计理念：

将操作按钮尽量放置在屏幕底部。

Smartbar 的设计理念

因此，SmartBar 想要做的就是把操作栏上的按钮拉到下面来，与 Back 按钮一起就构成了 SmartBar。所以， SmartBar 最好的表现是下面这个样子的：

SmartBar 最好的表现

这看起来是个完美的方案，然而魅族似乎高估了自己。

4、 SmartBar 的无奈

大部分应用程序并没有按照 Android design 中的规范来设计，很多应用只是照搬 iOS 的设计规范，抄的最多的莫过于屏幕底部用来切换视图的“标签栏”。虽然，Google 在 Android design 的 Pure Android 章节中一再强调：

Don't use bottom tab bars.Other platforms use the bottom tab bar to switch between the app's views.Android's tabs for view control are shown in action bars at the top of the screen instead.

不要使用底部的标签栏。其他平台的应用使用底部标签栏切换视图，Android 应用的标签切换应当放在顶部的操作栏中。

但是，这依然起不到太多作用，开发者还是固执地移植了 iOS 的那一套界面过来。这样， SmartBar 就无法兼容“标签栏”，于是就出现了“双底栏”。用户也就是在这个时候，对 SmartBar 产生了不满的情绪。

另外，Smartbar 的兼容情况也没有想象中的那么乐观。

在 Android design 规范中虽然不建议开发者使用底部“标签栏”，但并不意味着底部就不放其它东西了。因为，上面也有提到底部栏（Bottom bar），那么底部栏应该什么时候使用呢？

To display actions and, if necessary, the action overflow, use the bottom bar.

如果有必要显示更多操作按钮，则可以使用底部栏。

SmartBar 很多时候对底部栏上的操作按钮也无法兼容，所以还是会出现“双底栏”的情况。此外，有些应用在操作栏上使用了自定义的控件，即使按照规范来设计也不能兼容 SmartBar 。因此，依然会出现“双底栏”的情况，有时候甚至出现“三底栏”。不过，魅族对这种情况也无可奈何，因为原生安卓也会出现这种情况。

期间，魅族也有对 SmartBar 进行过小改善。例如，降低 SmartBar 的高度以减少空间占用，隐藏 SmartBar 以避免出现双底栏(配合上滑 Back 返回)。其实，与其说是改善，不如说是一种妥协。从这时开始，我就知道 SmartBar 终究会被取代。

5、“悬浮球”的出现

于是，魅族再次冥思苦想，终于又想出了“悬浮球”，它是类似于 iPhone 的“小圆点”（Assistive Touch）。

“悬浮球”

“悬浮球”可以通过单击、双击、上下滑动、左右滑动实现相应的返回、下拉悬停、展开通知栏及应用切换等功能。当看到“悬浮球”功能发布的时候，我并没有像现场观众那样欢呼鼓掌，而是陷入了沉思。

因为，Android design 中对桌面小部件的设计有明确的规范：

Because widgets live on the home screen, they have to co-exist with the navigation that is established there.

由于小部件是放在主屏幕上的，其手势必须和主屏幕的导航手势能够彼此共存。

The only gestures available for widgets are:

所以适用于小部件的手势只有:

Touch

Vertical swipe

触摸

垂直（纵向）滑动

现在，回到魅族的“悬浮球”。上下滑动/左右滑动手势与主屏幕导航手势相同，在应用程序界面中也同样如此，于是就产生了手势冲突。虽然苹果的“小圆点”手势与桌面导航手势也有冲突，但是它并不会直接对应用产生相应的动作，它只是使得“小圆点”的位置移动或者展开触摸菜单。而魅族的“悬浮球”并不是这样，对它的点击或者滑动会直接产生相应的操作效果。所以，“悬浮球”在看似带来方便的同时，也带来了较为严重的误操作问题。同时，“悬浮球”在视觉上也表现的不够友好。

因此，“悬浮球”只能算是一种辅助的交互方式，不可能取而代之成为“正统”的交互方式。

那么，难道就没有一种方式可以把 Android 的导航交互做得好看又好用？

6、MBack 终于到来

这一次，魅族终于给出了相对完美的答案：

MBack，触摸返回上一级，按压返回桌面主页。

将 Back 键与 Home 键集成在一起，把视觉上和操作上的问题都同时解决了。手机应用不会出现导航栏空间占用的问题，也不会出现让人诟病的多层底栏的问题，甚至在运行全屏应用时也不会出现满世界找“返回”键的问题。

因为 MBack 的出现，让一切看起来都似乎完美无瑕。然而，有一件“怪事”却引起了我的注意。

苹果既然能想到双触摸 Home 键触发屏幕下拉悬停，那它为什么没有想到单触摸 Home 键触发“返回”功能？难道它真的没有想到？这可能吗？要知道，iPhone 左上角的“返回”键也是最多人吐槽的。我也相信苹果在衡量触摸 Home 键实现“返回”功能与从屏幕左侧边缘右滑实现“返回”功能时做过一番思考，但最终还是选择了后者。

是的，无论如何，我们都要有思辨的精神。

三、MBack 是否完美？

1、MBack 与指纹识别的冲突？

先来看看，MX5 Home 键上面包含有哪些功能？

单击：点亮屏幕、桌面主页

触摸：指纹识别、返回上一级

长按：语音助手/锁屏

我们可以发现一些问题：当需要进行指纹识别时，触摸代表的是指纹识别还是返回上一级？刚开始我想到的是，利用触摸时长来判别：

短触摸：返回上一级

长触摸：指纹识别

后来慢慢发现，这个方案体验不够友好。触摸时长本来就足够短了，短到什么程度，长到什么程度，用户更无法对此进行量化。另外，用户在做某件事情的时候，他也可能随时在中途突然取消它。所以，这个方案实施起来稍显混乱。

魅族的解决方案是：

好大一只饺子：正确的做法是在业务调起指纹识别时轻触 Back 要屏蔽掉，且在 UI 上有明显的 Back 或取消设计。这并不是很严重的问题，日常使用中指纹识别频率不及 Back 1/10，这种小冲突可以用 UI 设计规避而并不破坏整体交互逻辑。

进行指纹识别时，"返回"键的设计

通过 UI 设计来规避，只能说是在目前的条件下的最优解。我不知道具体通过那种形式的UI设计来提示用户，是简单的在屏幕上放置“取消”按钮，还是附上“此时触摸 Home 键返回功能不可用”的文字提示（由上图看来，并没有附上这个文字提示）？

此外，手机“返回”键的使用频率是很高的，用户的操作习惯一旦被养成，便会容易形成惯性思维。因此，上面的方案虽然解决了指纹识别与“返回”功能冲突的问题，但是它并没有解决用户因惯性思维想要触摸“返回”而变成了指纹识别的问题。不要责怪用户笨，这个操作习惯是这个系统本身培养起来的。

2、MBack 弱化了 Home 键的使用？

再来看一下 Back 键与 Home 键的操作方式：

触摸返回上一级

按压返回桌面主页

这个操作有什么问题吗？把 Back 键与 Home 键集成在一起，在一定程度上弱化了对 Home 键功能的使用。iOS 的 Back 键大部分情况下只能返回到应用程序的顶层界面，而 Android 的 Back 键除了可以返回到应用顶层界面外，还可以返回到桌面主页，甚至还可以在应用之间相互导航。

因此，大多数 Android 用户会一直触摸 Back 键直至退出应用回到桌面主页，因为这个过程在触摸体验上也是十分连贯的。所以，这在一定程度上弱化了实体 Home 键功能的使用。当然，这个问题在所有 Android 手机都会出现，只不过在魅族手机上可能会表现得更加明显一些。

3、MBack 弱化了实体按键的优点？

把 Back 键与 Home 键集成在一起，除了在一定程度上弱化对 Home 键功能的使用外，同时也把实体按键最大的优点给抹掉了。实体按键最大的特点是需要给予一定的力度才会进行反应，这种交互方式带给了用户难得的安全感。因为你甚至可以把一直悬空的手指放在实体按键上停留片刻，而不必去担心产生像触摸虚拟按键那样的误触动作。是的，iPhone 用户直到现在也依然可以获得这份安全感。另外，我想这也是为什么老罗坚持在锤子手机上使用实体按键的部分原因吧。

4、MBack 带来了操作逻辑上的混乱？

在同一个按键上，集成两种不同且需要进行频繁操作的交互方式，会容易导致操作逻辑上的混乱。

你可能会说，触摸 Back 键返回上一级，按压 Home 键返回到桌面主页，这样的逻辑很清晰啊。是的，从这个角度看确实如此，但当两者都是需要进行频繁操作的时候，就不一定那么清晰了。你可能还会说，怎么会导致逻辑混乱呢，或者说习惯就不会发生这种情况了。是的，我可能也会在一定程度上同意这样的说法，但我相信你在说这句话的时候底气是不足的。

你怎么就这么事儿逼呢？这又不是什么大问题。是的，这都不是事儿，用户看到没有双底栏才是最重要的。不信？你看！！！

MX5 和 HTC M8 在新浪微博的表现

偷偷告诉大家一个秘密，其实小编并没有 MX5，只是用的魅蓝 Note2 来假装拥有 MX5（希望能在 笔戈玩 栏目中有机会试玩 MX5 ^_）。还有，其实我也不是小编，只是假装是小编，哈哈。

5、其它手机厂商怎么做？

其它手机厂商对于 Android 导航栏有做出哪些努力吗？几乎没有，你看到的基本上都是以下两种情况：

把导航栏放在屏幕外面；

照搬 Android 原生导航栏。

无论如何，魅族花费了几年的时间与精力去探索这个问题，这也是魅族目前所能提供最好的解决方案，也可能是 Android 阵营中最好的解决方案。单凭这一点，魅族理应获得相应的掌声。

四、最后的话

1、现在的 Material design 表现如何？

在最新的 Material design 规范中，Android 已经不是当年的那个乱七八糟的Android 了，Android 应用也可以表现得很优雅美观，有些应用甚至和 iOS 比起来也毫不逊色。不信？你看！！！

遵循 Material design 规范的应用-1 遵循 Material design 规范的应用-2

还有，当年大家吐槽的导航栏，现在反而成为了优势。因为它用起来直观、顺手、效率高，这也才是 Android 应用原有的样子。其实，现在国内也有一些应用在遵循 Android design 规范的应用，如知乎：

Android 版本的知乎

作为对比，我再来看一下 iOS 版本的知乎：

iOS 版本的知乎

你更喜欢哪个平台的设计风格？就拿 Android 与 iOS 两个平台的知乎应用来说，我更喜欢 Android 平台知乎应用的设计风格。

2、一点思考：

最后，我们把话题引回到魅族身上。

目前魅族的整个交互逻辑建立在实体 Home 键的基础之上，这也使得魅族手机的交互方式与其它手机显得不太一样，甚至有时候充当了一个领路人的角色。那么，我们是否可以看得更远一些？如果以后指纹识别可以在屏幕内进行，或者是因为某种原因取消了实体 Home 键，这是否意味着魅族要重建新的交互体系？

这并不是没有可能，现在一系列的专利技术表明苹果未来可能会取消实体 Home 键。不过，无论未来科技如何发展，相信魅族都可以拿出更好的解决方案。同时，也希望自己能有机会参与到其中去。

（全文完）