在擬物和扁平之間尋找平衡 原生安卓UI設(shè)計(jì)進(jìn)化史
安卓P的第一個(gè)開發(fā)者預(yù)覽版終于放出了。除了各種新功能，最引人注目的就屬新UI設(shè)計(jì)了。目前關(guān)于安卓P的爭(zhēng)議也基本集中在UI風(fēng)格上。那么安卓的UI設(shè)計(jì)是如何一步步發(fā)展到現(xiàn)在的?本文會(huì)帶大家回顧安卓從1.0到9.0(P)的UI設(shè)計(jì)變化，了解現(xiàn)代智能手機(jī)UI的發(fā)展軌跡
第一階段：安卓1.0到1.6
從2008年9月23日到2009年9月15日這一年內(nèi)，安卓經(jīng)歷了四個(gè)大版本，分別是1.0、1.1、1.5紙杯蛋糕和1.6甜甜圈。它們的UI風(fēng)格幾乎一模一樣。
安卓1.0（圖片源于Malavida）
安卓1.1（圖片源于the1960POST）
安卓1.5（圖片源于the1960POST）
安卓1.6（圖片源于GIZMODO）
這段時(shí)間正好處于鍵盤機(jī)的末期，此時(shí)安卓的系統(tǒng)界面和圖標(biāo)造型等設(shè)計(jì)還沒有完全擺脫諾基亞塞班和微軟Windows Mobile的影響。充滿了各種3D擬物化圖標(biāo)和界面元素。值得注意的是從1.0開始，安卓就有了主屏谷歌搜索欄。
第二階段：安卓2.0 到2.2
安卓2.0/2.1松餅和2.2凍酸奶發(fā)布于2009年10月26日到2010年5月20日之間。這段時(shí)期是安卓發(fā)展的第一個(gè)高峰。諸如HTC Hero、HTC Legend、HTC Desire和索尼愛立信Xperia X10等經(jīng)典機(jī)型就誕生于這段時(shí)間。
安卓2.0（圖片源于Malavida）
安卓2.1（圖片源于Wikipedia）
相比于第一階段，第二階段最大的UI設(shè)計(jì)改變就是削弱“擬物風(fēng)格”，使視覺元素的“縱深”更淺。比如通知欄圖標(biāo)和字體都少了第一階段那種“圓鼓鼓”的感覺，整體線條更鋒利。應(yīng)用圖標(biāo)就更明顯了。
安卓2.2（圖片源于Wikipedia，GIZMODO）
舉個(gè)例子，第一階段安卓的“谷歌市場(chǎng)”圖標(biāo)是一個(gè)立方體購物袋，有著明顯的影子。而第二階段的“谷歌市場(chǎng)”圖標(biāo)的3D擬物化風(fēng)格就被大大削弱了。
第三階段：安卓2.3
安卓2.3姜餅發(fā)布于2010年12月6日。2.3在保留第二階段設(shè)計(jì)風(fēng)格的基礎(chǔ)上改變了某些界面元素，其中最明顯的就是通知欄。
安卓2.3（圖片源于GIZMODO）
從1.0到2.2，安卓頂部通知欄一直是中間突起的3D白色長條。到了安卓2.3，通知欄變成了黑色，削弱了凸起幅度。另外一個(gè)明顯的改變是主屏下方“二級(jí)菜單”按鈕的部位降低了透明度，削弱了凸起幅度。
第四階段：安卓3.0到4.4
安卓3.0蜂巢、4.0冰激凌三明治、4.1果凍豆和4.4奇巧巧克力發(fā)布于2011年2月22日到2013年10月31日之間。雖然3.0是平板專屬系統(tǒng)，沒被手機(jī)使用過，但它還是和4.x共享了同樣的設(shè)計(jì)風(fēng)格。
安卓3.0（圖片源于Wikipedia）
安卓4.0（圖片源于cubet）
安卓4.1（圖片源于Wkikpedia）
安卓4.1（圖片源于COMPUTERWORLD）
安卓4.1（圖片源于GIZMODO）
安卓4.4（圖片源于greenbot）
安卓4.4（圖片源于greenbot）
安卓4.4（圖片源于greenbot）
第四階段的主題是進(jìn)一步加強(qiáng)“扁平化，大范圍使用簡潔、鋒利的白色線條。最明顯的例子就是主屏“二級(jí)菜單按鈕”附近、虛擬時(shí)鐘和虛擬按鍵(4.0開始才有)的線條。第四階段基本完全實(shí)現(xiàn)了UI的扁平化。
第五階段：安卓5.0到8.1
在2014年6月25日舉辦的谷歌I/O大會(huì)上，谷歌發(fā)布了新的設(shè)計(jì)語言“Material Design”。Material Design隨即被應(yīng)用到了同年11月發(fā)布的安卓5.0棒棒糖上。之后的6.0棉花糖、7.0牛軋?zhí)呛?.0/8.1奧利奧雖對(duì)UI都有小范圍修剪，但它們都是標(biāo)準(zhǔn)的Material Design。
安卓5.0（圖片源于tech.blorge）
安卓5.0（圖片源于UPDATO）
和一味追求“扁平化”的微軟Metro Design不同，谷歌Material Design把扁平色塊和有立體感的光線/陰影結(jié)合到了一起，形成了一種“立體的扁平感”。靈感來源于紙張和墨水。
安卓6.0.1
安卓6.0.1
Nexus上的安卓7.1
Nexus上的安卓7.1
Material Design的另一個(gè)重點(diǎn)是有著輕快、互動(dòng)感強(qiáng)但不花哨的操作動(dòng)畫。
Nexus，左：安卓8.1，右：安卓8.0
Nexus上的安卓8.1
Nexus上的安卓8.1，下拉通知欄和8.0顏色不一樣
Material Design設(shè)計(jì)師Matías Duarte說：“和真實(shí)紙張不一樣，我們的虛擬材料(Materia)能夠“聰明地”展開或變形。材料有實(shí)體的表面和邊緣。接縫和陰影能讓你知道應(yīng)該按哪里?！?/p>
第六階段：安卓9.0
一周前，安卓終于放出了9.0的第一個(gè)開發(fā)者預(yù)覽版。9.0最大的變化就UI設(shè)計(jì)，它使用了新設(shè)計(jì)語言“Material Design 2”。
安卓9.0 DP1（圖片源于droid-life，CNET）
相比于第一代Material Design，Material Design 2的主要變化體現(xiàn)在圓潤線條增多和色彩更加繽紛上。其實(shí)在安卓7.0時(shí)，“圓潤化”就已經(jīng)開始，尤其是在Pixel系列手機(jī)上。這一改變明顯是為了迎合Pixel系列手機(jī)及其它谷歌硬件產(chǎn)品“圓潤化”的機(jī)身造型。
左：Nexus的安卓7.1，右：Pixel的安卓7.1
左：Nexus的安卓8.1，右：Pixel的安卓8.1
另外，安卓9.0也沿用了安卓8.0開始的大量白色背景，包括通知欄和設(shè)計(jì)界面。
結(jié)語
從2008年到2018年，從安卓1.0到安卓9.0，安卓系統(tǒng)UI風(fēng)格的轉(zhuǎn)變呈現(xiàn)了一個(gè)從3D擬物化到簡潔扁平化再到擬物扁平化的路線。作為市場(chǎng)份額最大的手機(jī)操作系統(tǒng)，安卓的設(shè)計(jì)轉(zhuǎn)變也是科技界UI風(fēng)格發(fā)展的縮影。給眾多第三方廠商的定制UI和第三方APP界面產(chǎn)生了深遠(yuǎn)的影響。
本文編輯：張哲
關(guān)注泡泡網(wǎng)，暢享科技生活。
關(guān)注我們
