魅族Flyme OS之Smart Bar：精巧創(chuàng)新簡潔實現(xiàn)

★★★★★【文章導(dǎo)讀】：魅族Flyme OS之Smart Bar：精巧創(chuàng)新簡潔實現(xiàn)具體內(nèi)容是：原生android虛擬按鍵的缺陷在smartbar之前，google就已經(jīng)嘗試使用虛擬按鍵取代實體按鍵了。這樣的介紹有助于android設(shè)備在體驗上的統(tǒng)一。但是虛擬按鍵有兩個很明顯的缺點：1.占用屏幕空間。在android的界面布局中，虛…

來源：日期：2013-11-23 22:17:31 人氣：標(biāo)簽：

原生 android 虛擬按鍵的缺陷

在 smart bar 之前，google 就已經(jīng)嘗試使用虛擬按鍵取代實體按鍵了。這樣的介紹有助于 android 設(shè)備在體驗上的統(tǒng)一。但是虛擬按鍵有兩個很明顯的缺點：

1.占用屏幕空間。在 android 的界面布局中，虛擬按鍵占用屏幕下方 48dp 的高度，換算成像素的話，一個號稱 1280x768 分辨率的屏幕，實際上用于顯示內(nèi)容的空間是 1184x768

2.除了底端的系統(tǒng)級虛擬按鍵之外，按照 google 官方的應(yīng)用設(shè)計指南，應(yīng)用普遍會在屏幕下方再放上一排按鍵。雙排按鍵上下疊加的情況下，很容易導(dǎo)致誤觸的發(fā)生。這也是很多第三方廠商堅持使用實體按鍵的原因之一。

smart bar 的出現(xiàn)，在很大程度上規(guī)避了上述兩個問題。

整合，與釋放

smart bar 的作用，簡單的來說，就是：整合界面元素，釋放內(nèi)容空間。

下圖是原生 android 系統(tǒng)的底部結(jié)構(gòu)，按照官方命名方法標(biāo)出了 action bar 和 navigation bar：

下圖是帶有 smart bar 的 flyme os 底部結(jié)構(gòu)：

這是發(fā)布會上的展示圖。從圖上我們可以看出，這個 smart bar 在豎屏狀態(tài)下主要的改動是合并了原生系統(tǒng)中在屏幕下方上下疊加的 action bar 和 navigation bar。從不同的展示圖中我們可以注意到，smart bar上只有五個可操作圖標(biāo)，多余的圖標(biāo)都進(jìn)入了右邊的菜單鍵中。從各種角度上說，這樣的設(shè)計都使得誤操作概率大大降低。

如果你有讀過 google 官方的 android design，相信會對這段話感到非常的眼熟吧？在 android design 中，google 曾經(jīng)強(qiáng)調(diào)底部 action bar 上不能有超過五個按鍵，而魅族 smart bar 在所有展示圖里按鍵的上限都是5個——多余的全部進(jìn)入了右邊的菜單鍵中，而且連菜單鍵的位置都和官方 action bar 里的那個菜單鍵位置對應(yīng)。

再看看這個橫屏模式下的 smart bar。它同樣對各種橫欄進(jìn)行了整合，在smart bar 中統(tǒng)一顯示，大限度地把界面空間留給屏幕上的內(nèi)容。并且所有的操作按鈕都位于屏幕頂端的左右兩邊，便于在橫屏模式下雙手操作。這是不是很像 android 4.0 平板的作風(fēng)？在橫屏模式操作支持這一方面，smart bar 比其它國內(nèi)第三方 rom 甚至 google 官方 android 4.1 的解決方案都要更好些。

借鑒，與創(chuàng)新

在看到 smart bar 的時候，我非常自然的想起了當(dāng)初 google 為了相同的目的而創(chuàng)造出來的一種交互形式：combined bar。它同樣整合了平板上的各種橫欄，并把操作按鍵放在屏幕底部的左右兩邊，適合平板持握下的雙手操作。

這個對雙手操作極端友好，而且節(jié)省屏幕空間的設(shè)計，google 在 android 4.1 之后不知何故放棄了。而魅族的這個 smart bar 和 combined bar 的設(shè)計思路如出一轍，并且在 combined bar 的基礎(chǔ)上對用戶體驗的提升更進(jìn)了一步。試想，你所有的操作都被集中在慣用手的大拇指能夠很容易操作的地方，而且還不容易誤觸… 是不是很夢幻？為什么之前都沒有人好好利用到這點呢？

但是我非常好奇的是，魅族是怎么做到將 action bar 中的按鈕整合進(jìn)smart bar中的。魅族方面表示只要是按照 android 4.0 規(guī)范進(jìn)行設(shè)計的應(yīng)用都可以無需改動直接兼容，而在魅族的演示中，除了這些按照標(biāo)準(zhǔn)制作的應(yīng)用之外，沒有套用標(biāo)準(zhǔn)的老應(yīng)用也同樣有很好的集成效果。不知 google 的 android 團(tuán)隊對這個 smart bar 有何感想。反正我可以說，他們的臉色必定不會好看：當(dāng)初被拋棄了的 combined bar 以另一種方式出現(xiàn)在了 flyme os 2 上，而且還進(jìn)行了大量的優(yōu)化和改進(jìn)，用比較夸張的話說——打臉打得啪啪響。

魅族的 ui 設(shè)計師一定有認(rèn)真的考慮過 android design，站在用戶的角度設(shè)身處地地考證這些設(shè)計。你可以把 smart bar 看作是 action bar(實際上它也確實是 action bar 的一種形式)，但是它又同時起到了 navigation bar 的作用，同時還可以和標(biāo)準(zhǔn)與非標(biāo)準(zhǔn)應(yīng)用有良好的兼容性，比 google 的原生解決方案要好很多。

在實際的使用中，它確實有效地節(jié)省了屏幕空間，提高了屏幕使用的效率。這也正是當(dāng)初 google 在 android 3.0 里使用 combined bar 的初衷吧？

結(jié)語

把 j.wong 的人品性格之類的話題拋開不談，把將這種交互上的創(chuàng)新命名為 j.wong 交互到底合適與否的問題拋開不談，把 j.wong 設(shè)計的外殼與邊框拋開不談，這次，在 smart bar 這個簡潔精巧的改進(jìn)上，我們看到的，是真正的用心。

【看看這篇文章在百度的收錄情況】