魅族Flyme OS之Smart Bar：精巧创新 简洁实现

原生 android 虚拟按键的缺陷

  在 smart bar 之前，google 就已经尝试使用虚拟按键取代实体按键了。这样的安排有助于 android 设备在体验上的统一。但是虚拟按键有两个很明显的缺点：

1.占用屏幕空间。在 android 的界面布局中，虚拟按键占用屏幕最下方 48dp 的高度，换算成像素的话，一个号称 1280x768 分辨率的屏幕，实际上用于显示内容的空间是 1184x768

2.除了最底端的系统级虚拟按键之外，按照 google 官方的应用设计指南，应用普遍会在屏幕最下方再放上一排按键。双排按键上下叠加的情况下，很容易导致误触的发生。这也是很多第三方厂商坚持使用实体按键的原因之一。

smart bar 的出现，在很大程度上规避了上述两个问题。

整合，与释放

  smart bar 的作用，简单的来说，就是：整合界面元素，释放内容空间。

  下图是原生 android 系统的底部结构，按照官方命名方法标出了 action bar 和 navigation bar：

下图是带有 smart bar 的 flyme os 底部结构：

这是发布会上的展示图。从图上我们可以看出，这个 smart bar 在竖屏状态下主要的改动是合并了原生系统中在屏幕最下方上下叠加的 action bar 和 navigation bar。从不同的展示图中我们可以注意到，smart bar上只有五个可操作图标，多余的图标都进入了右边的菜单键中。从各种角度上说，这样的设计都使得误操作概率大大降低。

如果你有读过 google 官方的 android design，相信会对这段话感到非常的眼熟吧？在 android design 中，google 曾经强调底部 action bar 上不能有超过五个按键，而魅族 smart bar 在所有展示图里按键的上限都是5个——多余的全部进入了右边的菜单键中，而且连菜单键的位置都和官方 action bar 里的那个菜单键位置对应。

再看看这个横屏模式下的 smart bar。它同样对各种横栏进行了整合，在smart bar 中统一显示，最大限度地把界面空间留给屏幕上的内容。并且所有的操作按钮都位于屏幕顶端的左右两边，便于在横屏模式下双手操作。这是不是很像 android 4.0 平板的作风？在横屏模式操作支持这一方面，smart bar 比其它国内第三方 rom 甚至 google 官方 android 4.1 的解决方案都要更好些。

借鉴，与创新

在看到 smart bar 的时候，我非常自然的想起了当初 google 为了相同的目的而创造出来的一种交互形式：combined bar。它同样整合了平板上的各种横栏，并把操作按键放在屏幕底部的左右两边，适合平板持握下的双手操作。

这个对双手操作极端友好，而且节省屏幕空间的设计，google 在 android 4.1 之后不知何故放弃了。而魅族的这个 smart bar 和 combined bar 的设计思路如出一辙，并且在 combined bar 的基础上对用户体验的提升更进了一步。试想，你所有的操作都被集中在惯用手的大拇指能够很容易操作的地方，而且还不容易误触… 是不是很梦幻？为什么之前都没有人好好利用到这点呢？

但是我非常好奇的是，魅族是怎么做到将 action bar 中的按钮整合进smart bar中的。魅族方面表示只要是按照 android 4.0 规范进行设计的应用都可以无需改动直接兼容，而在魅族的演示中，除了这些按照标准制作的应用之外，没有套用标准的老应用也同样有很好的集成效果。不知 google 的 android 团队对这个 smart bar 有何感想。反正我可以说，他们的脸色必定不会好看：当初被抛弃了的 combined bar 以另一种方式出现在了 flyme os 2 上，而且还进行了大量的优化和改进，用比较夸张的话说——打脸打得啪啪响。

魅族的 ui 设计师一定有认真的考虑过 android design，站在用户的角度设身处地地考证这些设计。你可以把 smart bar 看作是 action bar(实际上它也确实是 action bar 的一种形式)，但是它又同时起到了 navigation bar 的作用，同时还可以和标准与非标准应用有良好的兼容性，比 google 的原生解决方案要好很多。

在实际的使用中，它确实有效地节省了屏幕空间，提高了屏幕使用的效率。这也正是当初 google 在 android 3.0 里使用 combined bar 的初衷吧？

结语

把 j.wong 的人品性格之类的话题抛开不谈，把将这种交互上的创新命名为 j.wong 交互到底合适与否的问题抛开不谈，把 j.wong 设计的外壳与边框抛开不谈，这次，在 smart bar 这个简洁精巧的改进上，我们看到的，是真正的用心。

相关文章

• 上一篇： 靠丢漂流瓶：微信比微博有价值？
• 下一篇： 微软Windows RT系统无法充分发挥Tegra3性能