魅族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性能