Android Design與Holo Theme詳解
在國(guó)內(nèi),有個(gè)很有意思的現(xiàn)狀。一方面,幾個(gè)國(guó)內(nèi)最大的公司/企業(yè)的客戶端/應(yīng)用依舊冥頑不靈,絲毫不愿意遵循 Android Design,以各種扯淡的理由堅(jiān)持使用 iOS UI 或者 Metro UI,或者其他叫不出名字的 UI;另一方面,Holo Theme 作為 Android Design 的一部分,漸漸為更多的用戶和開(kāi)發(fā)者所知曉。很多個(gè)人開(kāi)發(fā)者都開(kāi)始在 Play Store 和國(guó)內(nèi)各大市場(chǎng)發(fā)布較為簡(jiǎn)陋但符合 Android Design 的應(yīng)用。
什么是 Android Design? 這個(gè)詞很少被人提起,就算被提到,很多人對(duì)它的理解也是錯(cuò)誤的。甚至現(xiàn)在提到 Android Design,很多人會(huì)做出”啊,知道,就是黑色的背景和灰藍(lán)色的平的按鈕嘛”這種令人啼笑皆非的反應(yīng)。于是,作為國(guó)內(nèi)最早一批了解 Android Design 的人,本文準(zhǔn)備理一理Android Design 和 Holo Theme 的關(guān)系,探討一下它們的本質(zhì)。
先從比較小的入手。
什么是 Holo (視覺(jué)語(yǔ)言/主題)?
Holo Theme 是 Android Design 的最基礎(chǔ)的呈現(xiàn)方式。因?yàn)槭亲顬榛A(chǔ)的 Android Design 呈現(xiàn)形式,每一臺(tái) Android 4.X 的手機(jī)系統(tǒng)內(nèi)部都有集成 Holo Theme 需要的控件,即開(kāi)發(fā)者不需要自己設(shè)計(jì)控件,而是直接從系統(tǒng)里調(diào)用相應(yīng)的控件。如果完全使用 Holo Theme,那么做出來(lái)的效果大致是下圖這樣的。
可以看出,這些應(yīng)用在 UI 方面沒(méi)有任何的亮點(diǎn),和 Android4.X 的設(shè)置/電話的視覺(jué)效果極度統(tǒng)一。由此帶來(lái)的好處顯而易見(jiàn),這個(gè)應(yīng)用作為 Android 應(yīng)用的辨識(shí)度極高,且完全不可能與系統(tǒng)風(fēng)格產(chǎn)生沖突。不過(guò),調(diào)用系統(tǒng)控件在天朝是風(fēng)險(xiǎn)十足的行為,因?yàn)?MIUI 和很多國(guó)產(chǎn)ROM 私自替換了 ROM 中 Google 原本規(guī)定保留的 Holo 控件,這樣直接導(dǎo)致了一個(gè)原本在原生系統(tǒng)上運(yùn)行時(shí)是 Holo Theme 的應(yīng)用在 MIUI 之流上運(yùn)行時(shí)變成不倫不類的樣子。
原本完全符合 Android Design 但因?yàn)?MIUI 而變得不倫不類的兩個(gè)應(yīng)用:Dropbox 和 Press
在這里我必須再埋汰一下 MIUI,這喪心病狂的東西不但篡改系統(tǒng)自帶的 Holo 控件,還擅自更改開(kāi)發(fā)者嵌入應(yīng)用的 Holo 風(fēng)格控件,簡(jiǎn)直罪大惡極。不過(guò),三星和 HTC 也對(duì)一些系統(tǒng)的 Holo 控件做了修改(當(dāng)然沒(méi)有像 MIUI 這么喪心病狂)。在這方面做得最好的反而是魅族,魅族修改的控件都依然符合 Android Design。
而 Holo Theme 最大的特點(diǎn)是什么?簡(jiǎn)單,質(zhì)樸。Google 提供的 Holo 控件是不可能違背 Android Design 的,而這些控件的樣式和配色也非常保守,不會(huì)影響用戶的操作或者分散用戶的注意力,Holo Theme 的布局也是最為普通的列表。而 Android 系統(tǒng)對(duì)這些默認(rèn)元素的優(yōu)化已經(jīng)很到位了,所以就算是默認(rèn)的 Holo 主題也能帶來(lái)不錯(cuò)的閱讀/操作體驗(yàn)。
但是,就如同在 Windows Phone 上的 Metro UI 引起的一個(gè)問(wèn)題一樣,如果開(kāi)發(fā)者全盤在照搬 Holo Theme,那么最后的結(jié)果就是做出來(lái)的應(yīng)用除了圖標(biāo)之外都長(zhǎng)得一個(gè)樣。這個(gè)時(shí)候,開(kāi)發(fā)者就需要跳出 Holo Theme 這個(gè)框架,進(jìn)入更高的境界了。
什么是 Android Design?
Holo Theme 是 Android Design 的一部分,是 Android Design 最基礎(chǔ)的表現(xiàn)形式。如果要以 VennDiagram 來(lái)表示的話,大概是下圖這樣的。
如果整個(gè)背景的淺灰代表了 Android Design,那么其中淡藍(lán)的圓圈便是 Holo Theme。曾經(jīng)在 Android4.0 剛剛發(fā)布的時(shí)候,Holo Theme 還是Android Design 的絕對(duì)的主流,但是時(shí)至今日,Android Design 的主流早已遠(yuǎn)離 Holo Theme 而去。
那么 Android Design 究竟是什么?
是”擬真“。
Android Design 的”擬真”是根植于基因中的。Android Design 的主導(dǎo)者(也是創(chuàng)始人)之一的 MatiasDuarte 在 webOS 上就已經(jīng)開(kāi)始踐行擬真這一信條了?;叵?webOS 的卡片吧,那就是 Android Design 遙遠(yuǎn)的雛形。
webOS 的卡片式多任務(wù)操作,便是 Android Design 的真的元祖。在之前的文章里我也提到,Android Design 的每個(gè)控件都在極力模擬光影與凹凸感。這就是 Android Design和 Metro Design 最大的不同。Metro 不擬真,Android 擬真。
那么 Android Design 和 iOS Design 最大的不同又是什么? 我們都知道 iOS 以”擬物”而聞名。而 iOS 和 Android 的最大不同就在于它們”擬”的對(duì)象不同。如果要以 VennDiagram 來(lái)表示的話,大概是下面這樣的。
底座的皮革代表擬物,中間的藍(lán)色矩形代表擬真。Android 拋棄了堪稱”擬物”之核心的材質(zhì)與具體的樣式,保留了光影效果,立體感和抽象的操作方式。在真正的 Android Design 中,你不會(huì)看到任何對(duì)材質(zhì)的模仿,對(duì)現(xiàn)實(shí)中事物的模擬也只會(huì)以抽象的形式出現(xiàn)。
普通的 Android Design 隨處可見(jiàn),很多國(guó)際大廠也做出了非常精美的 Android Design 應(yīng)用,比如 Pocket、Evernote 及 Pintrest。下面是個(gè)人覺(jué)得最棒的 Android Design 應(yīng)用的截圖。
上面展示的這些應(yīng)用很大的共同點(diǎn)就是,它們都做到了出色的光影效果與清晰的層級(jí)表達(dá)。這些應(yīng)用大多數(shù)都使用了自制控件和自定義布局。自制控件的好處 有很多,其中之一就是可以保證在大多數(shù)機(jī)器上看起來(lái)都是一個(gè)樣子(當(dāng)然遇上 MIUI 這樣的惡棍就沒(méi)辦法了,道高一尺魔高一丈)。而自定義布局能夠?qū)ζ桨甯押茫部梢允沟脩?yīng)用內(nèi)的導(dǎo)航更加便利,比如 WeatherEye 的手機(jī)版和平板版:
#p#
新一代 Android Design 是怎樣的?
在開(kāi)始論述之前,先來(lái)看幾張圖片。
這幾張圖片,就是代表性的”次世代 Android Design”。在之前那張文氏圖里,綠色的大圓就是它們。那么它們有什么特征呢?
更加專注擬真
也許我也可以簡(jiǎn)單粗暴的總結(jié)為”更加泛濫的使用卡片”? 無(wú)論是 Google Now 還是 Keep,它們都大量的使用卡片飛入這個(gè)動(dòng)畫,和使用滑動(dòng)卡片消除這一手勢(shì)。而卡片的使用范圍也已經(jīng)從單純的復(fù)合內(nèi)容擴(kuò)展到對(duì)話(Hangouts),表單(鬧鐘)等地方,卡片的展示形式也從單純的卡片流進(jìn)化到卡片組,卡片平鋪等等。
更加大膽豐富的用色
最開(kāi)始的時(shí)候 Android Design 給人的印象基本上就是黑底藍(lán)色加亮,但是在新一代的 Android Design 中,Google 采用了豐富多彩的配色。不過(guò),雖然配色的使用變得豐富,這些配色依然都是低飽和度,不是很鮮艷,搭配起來(lái)比較容易的中性色。而新一代 Android Design 應(yīng)用逐漸拋棄了黑底,大多采用柔和的淺灰底色配上白色卡片。
更加豐富的交互形式
除了標(biāo)準(zhǔn)的列表、Tabs、Spinner 等交互方式,新一代 Android Design 應(yīng)用中越來(lái)越多的用到了 Drawer 這樣的頂級(jí)導(dǎo)航方式。Drawer 的加入彌補(bǔ)了原本 Android Design 在導(dǎo)航方式上的短板,同時(shí)也解放了屏幕空間。除了 Drawer,還有很多全新的交互形式——比如Qucikreturnlistview(向下卷動(dòng)時(shí)隱藏 SplitActionBar 和/或ActionBar,向上卷動(dòng)時(shí)顯現(xiàn)),右劃返回等——極大地改進(jìn)了屏幕空間的利用率,對(duì)用戶更為友好。而卡片式UI 的泛用也使得滑動(dòng)消除/開(kāi)啟隱藏功能這一手勢(shì)廣為流傳。
更加靈活的布局形式
在早些時(shí)候,Android Design 在平板上的應(yīng)用布局形式還只有比較單一的”列表|詳細(xì)”這種和 iOS 平板沒(méi)什么兩樣的布局形式。而新一代的Android Design 在平板上的布局變得更加靈活——很大一部分可以說(shuō)歸功于卡片式UI 的泛用——產(chǎn)生了五花八門的平板布局。這些平板布局在對(duì)應(yīng)正確的內(nèi)容形式的時(shí)候,會(huì)極大的提升用戶體驗(yàn)。
更加宏觀的說(shuō),新一代的 Android Design 正是新一代的 Google Design。拿前天的 I/O大會(huì)做例子,可以發(fā)現(xiàn),下一代的 Google Maps 無(wú)論是在 Web(尚未開(kāi)放)還是 iOS版還是 Android版(尚未發(fā)布),它們的 UI 都是一脈相承的,讓人能夠一眼認(rèn)出。而已經(jīng)發(fā)布的 Google+ 更是在全平臺(tái)上做到了 UI 風(fēng)格的完全統(tǒng)一。
而 UI 統(tǒng)一的直觀體現(xiàn)就是現(xiàn)在 Google 力推新一代 Android Design。這樣的例子還有很多,比如 Play Music 的新移動(dòng)端/網(wǎng)頁(yè)端界面。可以說(shuō),推行新一代 Android Design 使得 Android 身上 Google 的烙印更加深刻,而 Google 也在從不同的角度反過(guò)來(lái)借鑒 Android Design 的很多設(shè)計(jì)。新一代 Android Design 是 Android Design 和下一代 Google Design 融合的第一步。
Android Design 在中國(guó)
很不幸的是,在國(guó)內(nèi),Android UI 的現(xiàn)狀就是我的標(biāo)題。越來(lái)越多的人知道 Holo Theme,而且拜該死的魅族所賜,還有不少人誤以為那就是所謂的”Android4.0規(guī)范”。而真正了解 Android Design 的人則太少太少,了解 Android Design而又能運(yùn)用自如的,我現(xiàn)在還沒(méi)見(jiàn)到——也許撫波的開(kāi)發(fā)團(tuán)隊(duì)將會(huì)是第一個(gè)。
可以說(shuō)在 Android4.X 時(shí)代,國(guó)外的優(yōu)秀開(kāi)發(fā)者正在把國(guó)內(nèi)開(kāi)發(fā)者甩得越來(lái)越遠(yuǎn),而國(guó)外 Android UI 設(shè)計(jì)的總體水平已經(jīng)完全不在國(guó)內(nèi)水平追趕范圍之內(nèi)了。這種現(xiàn)狀作為用戶看來(lái),實(shí)為痛心疾首。
不過(guò)也許情況確實(shí)是稍有好轉(zhuǎn)吧。一年前我在向開(kāi)發(fā)者宣傳 Android Design的時(shí)候,還有很多人拒不接受。而如今,就在不久之前才傳出消息,騰訊將會(huì)在日后給微信 for Android 用上 Android Design。而普通用戶對(duì) Android Design 的了解也變多了 (Holo Theme 畢竟也算是Android Design 的一部分),新浪甚至為了 MX2 專門推出了一個(gè)符合 Android Design 的微博版本(雖然基本上就沒(méi)更新過(guò))。
結(jié)語(yǔ)
看完了之后,你對(duì) Android Design有了基本的概念了嗎? 如果你想要詳細(xì)的了解 Android Design,請(qǐng)?jiān)L問(wèn) Google 提供的官方 Android 應(yīng)用設(shè)計(jì)與兼容指南。