自拍偷在线精品自拍偷,亚洲欧美中文日韩v在线观看不卡

Android Design的前世今生

移動(dòng)開(kāi)發(fā) Android
花了兩年的時(shí)間,Google 將 Android Design 之舞臺(tái)的燈光,音響,布景與道具準(zhǔn)備妥當(dāng),自此開(kāi)始,將這片宏大的舞臺(tái)完完全全開(kāi)放給了設(shè)計(jì)師。

Google Nexus系列的進(jìn)化

兩年前的這個(gè)時(shí)間,Google 發(fā)布了 Android 有史以來(lái)***的版本更新 Ice Cream Sandwich,以及隨著更加完善的 Android 4.0.3 一起發(fā)布的,Android 有史以來(lái)***個(gè)設(shè)計(jì)規(guī)范 —— Android Design。 在我看來(lái),這一天可以說(shuō)是 Android 歷史中最重要的一天。 這一天的日期是 2012 年一月十二日。

前世

[[89704]]

來(lái)到Google之前,Duarte在Palm作為副總裁負(fù)責(zé)webOS的交互

說(shuō)到 Android Design,就不得不提堪稱(chēng) Android Design 之父的 Matias Duarte。在來(lái)到 Google 之前,Duarte 在 Palm (后被惠普收購(gòu)) 作為副總裁,與 Peter Skillman,Mike Bell 和 Michael Abbott,以及 Manu Chatterjee 這些當(dāng)時(shí)設(shè)計(jì)界的天之驕子們一起,負(fù)責(zé) webOS 界面與交互。在 Palm 被惠普收購(gòu)不久后,Duarte 因?yàn)閷?duì) webOS 的前途感到無(wú)望而離開(kāi)了惠普,投奔兩年前曾經(jīng)將橄欖枝伸向他的 Google。這個(gè)時(shí)間點(diǎn)是 2010 年五月。

NexusS3Phones_800-81d2107de351e9e0 拷貝

就在 Duarte 加入 Google 六個(gè)月后,Android 開(kāi)始進(jìn)行了***次改變 —— Android 2.3 Gingerbread 正式發(fā)布。比起以前的版本,Matias Duarte 在 Android 2.3 里加入了一個(gè)東西 —— Action Bar (當(dāng)然,那時(shí)候還不叫這個(gè)名字)。 Action Bar 的加入規(guī)范了應(yīng)用中操作的位置,為 Android 將來(lái)的蛻變打下了重要的基礎(chǔ)。

但是,Duarte 畢竟是在 Android 2.3 開(kāi)發(fā)進(jìn)程已經(jīng)不止一半的時(shí)候加入 Android 團(tuán)隊(duì)的, Gingerbread 不久之后就要發(fā)布,他能做到的更改還是少數(shù)。在 Gingerbread 發(fā)布之后,Duarte 便開(kāi)始全心投入到 Android 3.0 的界面設(shè)計(jì)中。

screenshot13_framed

這套閃耀著具有科技感輝光的各類(lèi)控件,成了Android Design的一塊奠基石

Duarte 在離開(kāi)惠普之前,其實(shí)已經(jīng)完成了大部分的 TouchPad 界面設(shè)計(jì)了。他將 Android 原先的風(fēng)格 (如果那算是風(fēng)格的話(huà)) 與這套設(shè)計(jì)相融合,完成了 Holo Theme 的原型 —— Honeycomb 主界面的編排。在 Honeycomb 的主界面中,黑底, 藍(lán)紫高光的用色基調(diào)被確定下來(lái),而閃耀著具有科技感的輝光的各類(lèi)擬真控件,也成了 Android Design 的一塊奠基石; 在 3.0 中加入的屏幕虛擬鍵整合條 (Combined Bar) 也成為了 Navigation Bar 的前身.

除了帶來(lái)了這些大方向上的改進(jìn),3.0 還帶來(lái)了一些小的設(shè)計(jì)細(xì)節(jié),比如可以改變大小的 Widget,這些都對(duì) 4.0 以及之后的 Android 產(chǎn)生了重要的影響.

#p#

今生

出世

Android-Design

基于 Honeycomb 的這套 UI 與 UE 風(fēng)格,Duarte 帶領(lǐng)著他的新團(tuán)隊(duì)開(kāi)始了 Ice Cream Sandwich 的 UI/UE 設(shè)計(jì)。這一次,他們非常大膽的讓一個(gè)系統(tǒng)在平板與手機(jī)上的使用了不同布局風(fēng)格的 UI。盡管這套 Tablet UI ***不被市場(chǎng)所接受,但是這依然是一次非常有意義的嘗試.

Screenshot_2012-01-04-21-57-05_framed

Android 4.0大量繼承了webOS的手勢(shì)操作

webOS 的交互有個(gè)非常顯著的特點(diǎn),那便是滑動(dòng)手勢(shì)的泛用 —— 比如,向上滑動(dòng)滑動(dòng)區(qū)域進(jìn)入應(yīng)用抽屜,向上滑動(dòng)某個(gè)應(yīng)用將其關(guān)閉。而這一點(diǎn),也隨著 Matias Duarte 一起,來(lái)到了 Android 4.0 上。在多任務(wù)界面與通知欄中,橫向滑動(dòng)某項(xiàng)目都會(huì)將其忽略/關(guān)閉。而原本只是一個(gè)圖標(biāo)的多任務(wù)界面,也繼承了 webOS 的卡片界面,美觀度獲得了質(zhì)的提升。滑動(dòng)手勢(shì)被大量開(kāi)發(fā)者看好,并且以不同的形式出現(xiàn)在各式應(yīng)用中。

除了 Action Bar,Android 4.0 還帶來(lái)了全新的”選取”方式 —— 長(zhǎng)按選取以及多選。這個(gè)新操作方式的引入離不開(kāi) Action Bar,因?yàn)樵谶M(jìn)行多選操作之后,代替原先彈出操作選擇窗口的便是 Action Bar 的一個(gè)變體 —— contextual action bar。

honeycomb-ui-14_framed

Motorola-Xoom-4G-4_framed

而由于直接加入了平板支持,Android 也開(kāi)始強(qiáng)調(diào)起平板布局了。通過(guò)簡(jiǎn)單的 XML 語(yǔ)句,同一個(gè)應(yīng)用 (APK) 能夠在不同的設(shè)備上呈現(xiàn)出不同的形態(tài)。為了方便平板布局,Android Design 專(zhuān)門(mén)強(qiáng)調(diào)了 multi-pane layout, 即多分欄布局。Android 4.0 中介紹了多種多分欄布局思路,試圖開(kāi)拓 Android 平板應(yīng)用的新思路。新的平板布局和 Honeycomb 一脈相承,Google 自己也在系統(tǒng)應(yīng)用和***方應(yīng)用中采用了豐富的布局形式。可惜,Google 在這方面的努力直到今天都還是收效甚微,Android 應(yīng)用對(duì)平板的支持,總體水平并不好。

Google***次明確了“一個(gè)Android應(yīng)用應(yīng)該長(zhǎng)什么樣”

在此之前,谷歌從來(lái)沒(méi)有談過(guò)”Android 應(yīng)用應(yīng)該長(zhǎng)什么樣”這種問(wèn)題,直到 Android Design 出現(xiàn)。谷歌說(shuō),”Android 應(yīng)用應(yīng)該長(zhǎng)這樣”,并且在網(wǎng)站中明確指出了“照搬iOS或者Windows Phone的UI是不好的 (Don’t mimic UI elements from other platforms)”這一點(diǎn),讓人不禁為之精神一振,覺(jué)得谷歌終于打算出手為 Android 應(yīng)用的體驗(yàn)統(tǒng)一做些什么了。

阿喀琉斯之踵

隨著 Android 4.0 發(fā)布,Google 建立了一套新的返回邏輯 —— Back 與 Up。

navigation_with_back_and_up

Up 和 Back,原本是為了更好地配合 4.0 上改進(jìn)的多任務(wù)而生的。Up 能快速在應(yīng)用內(nèi)進(jìn)行導(dǎo)航,而 Back 能快速在應(yīng)用間進(jìn)行導(dǎo)航,兩者配合, 如果能夠合理的利用,將會(huì)讓 Android 的多任務(wù)能力如虎添翼。

navigation_between_siblings_market2

(Back 的返回與 Up 的向上)

但是,即便是 Google,也沒(méi)能搞清楚這兩個(gè)按鈕應(yīng)該怎么用。

navigation_indirect_notification

在 Android Design 中,Google 認(rèn)為,從通知抽屜進(jìn)入一個(gè)應(yīng)用之后,Back 和 Up 都將起到向上的作用。 但實(shí)際上,這和前面提到的”Up 向上,Back 返回”的規(guī)則自相抵觸。而很多開(kāi)發(fā)者又自作主張的重寫(xiě)了 Back 鍵讓它變得和 Up 鍵功能一致。就算是到了今天,還有很多開(kāi)發(fā)者沒(méi)能搞清楚 Up 和 Back 的區(qū)別,更不用說(shuō)廣大普通用戶(hù)了。而 Up 鍵由于位置和 iOS 所上的返回鍵一樣,很多用戶(hù)都認(rèn)為 Up 鍵就是返回鍵。

可以說(shuō),Up 與 Back,在 Android 的 UE 上留下了一個(gè)隱患。每當(dāng)開(kāi)發(fā)者和設(shè)計(jì)師在規(guī)劃應(yīng)用時(shí),都不免在這個(gè)地方頭疼一番。而導(dǎo)航這個(gè)章節(jié),雖然幾經(jīng)修改,卻依然沒(méi)能修正這些問(wèn)題。

Holo,茁壯成長(zhǎng)

在 Android Design 發(fā)布之后,漸漸有一些應(yīng)用開(kāi)始采用 Android Design —— 確切的說(shuō),是 Holo Theme。 隨著一些較為知名的應(yīng)用將自己的 UI 改成了 Holo Theme,一段時(shí)間里,Play Store 里漸漸可以看到越來(lái)越多 Holo Theme 的應(yīng)用,Holo Theme 也為越來(lái)越多的用戶(hù)所知曉。在 Android Design 發(fā)布快一年之后,Holo Theme 終于漸漸成為了 Play Store 的主流。

但是,Holo Theme 應(yīng)用數(shù)量的增多,卻并不能讓人們覺(jué)得高興。

一方面,Play Store 的首頁(yè)上依然滿(mǎn)是非 Android Design 應(yīng)用的身影,有的應(yīng)用或許是套用了 Holo Theme,但是它們也僅僅是外觀相像罷了,操作什么的和谷歌的規(guī)范差十萬(wàn)八千里。而如果只看國(guó)產(chǎn)應(yīng)用,你會(huì)發(fā)現(xiàn), 國(guó)產(chǎn)應(yīng)用里占絕對(duì)主流的都是非 Android Design Apps,而真正符合 Android Design 的應(yīng)用則難覓蹤跡。

更重要的是,另一方面,Holo Theme 的新應(yīng)用雖說(shuō)算是層出不窮,但是這些新的 Holo Themed Apps 在功能上與已有的應(yīng)用比起來(lái)卻顯遜色。而另一些 Holo Themed Apps 純粹是為了好看而生的,可以說(shuō)是”為了切合規(guī)范而切合規(guī)范”, 這些應(yīng)用在功能上并無(wú)新意。這種類(lèi)型的應(yīng)用就算有再多也沒(méi)有意義。

2012-05-16 10.46.18_framed

就在 Holo Theme 逐漸擴(kuò)大它的影響力的時(shí)候,Navigation Drawer 悄無(wú)聲息的出現(xiàn)在了 Android 應(yīng)用上。 這樣的一個(gè)導(dǎo)航方式并沒(méi)有出現(xiàn)在官方規(guī)范中,但是有一些開(kāi)發(fā)者創(chuàng)造性的以各式各樣的方式實(shí)現(xiàn)了 Drawer。由于 Drawer 具有隱蔽性, 也可以很方便的歸納應(yīng)用的導(dǎo)航,使得應(yīng)用的層級(jí)結(jié)構(gòu)更加清晰,這個(gè)導(dǎo)航方式也開(kāi)始漸漸流行起來(lái)了。更多的開(kāi)發(fā)者開(kāi)始對(duì) Drawer 進(jìn)行探索。 很快,這樣的趨勢(shì)便引起了 Google 方面的注意。

#p#

成熟

在 2012 年中旬,Android 4.1 發(fā)布了。在這個(gè)版本中,Google 進(jìn)一步完善了 Android 的通知功能 —— 通知欄中的通知現(xiàn)在可以被展開(kāi)了。

notifications_pattern_expandable_

notifications_expand_contract_msg

富通知不僅可以顯示更多的信息,還可以顯示圖片與簡(jiǎn)單的操作按鈕。有了富通知的支持,用戶(hù)得以更加快捷的獲取信息與對(duì)信息進(jìn)行回應(yīng)。不久之后,很多應(yīng)用便開(kāi)始嘗試著利用富通知來(lái)簡(jiǎn)化用戶(hù)的操作和讓用戶(hù)更便捷的獲取信息。

增強(qiáng)應(yīng)用與用戶(hù)之間的聯(lián)系

在 Android 4.1 發(fā)布之后不久,Google 再次對(duì) Android Design 進(jìn)行了更新,加入了兩個(gè)新的指導(dǎo) —— “幫助“的使用和”確認(rèn)消息“的運(yùn)用 —— 并大幅更新了輔助功能的說(shuō)明頁(yè)面。幫助的規(guī)范強(qiáng)調(diào)了幫助的重要性,簡(jiǎn)明易懂的描述了應(yīng)該如何制作引導(dǎo)界面以及撰寫(xiě)幫助界面。而確認(rèn)消息的規(guī)范則增強(qiáng)了應(yīng)用與用戶(hù)之間的聯(lián)系,讓用戶(hù)對(duì)于自己的操作 (以及由這些操作帶來(lái)的結(jié)果) 更加有把握。

在 2012 年年底,Google 發(fā)布了 Android 4.2。這個(gè)連名字都沒(méi)改的小版本卻帶來(lái)了滑動(dòng)輸入,球面全景相機(jī), 快速設(shè)置抽屜和鎖屏 Widget。鎖屏 Widget 從某些角度而言相當(dāng)于把主屏擴(kuò)展到了鎖屏上,它的加入使得用戶(hù)能夠在鎖屏就獲得更多信息, 而有的開(kāi)發(fā)者甚至制作出了一個(gè)鎖屏通知聚合器。

unnamed_framed

就像 iOS 發(fā)布發(fā)布初期時(shí),絕大部分第三方應(yīng)用都只是簡(jiǎn)單的模仿系統(tǒng)應(yīng)用的樣式一樣,市場(chǎng)上 Android Design 的應(yīng)用幾乎都是跟隨著官方應(yīng)用的樣式做出的,很少看到能夠突破官方樣式的應(yīng)用。這種狀況直到 Press 出現(xiàn)才被打破。

在 Press 之前, Holo 作為谷歌提供的基礎(chǔ)的 UI 解決方案已經(jīng)令大部分開(kāi)發(fā)者滿(mǎn)足了, 但是精通設(shè)計(jì)規(guī)約的高階開(kāi)發(fā)者卻不會(huì)滿(mǎn)足于被規(guī)約束縛,他們開(kāi)始尋求在 Holo 的基礎(chǔ)之上做出更優(yōu)秀的 Androdi Design UI 設(shè)計(jì)。Press 就是其中佼佼者。

Android Design精品應(yīng)用數(shù)量開(kāi)始逐漸提升

Press 采用了全套的自制主題,重寫(xiě)了布局,添加了右劃返回手勢(shì),用聰明的方式優(yōu)化了平板 UI,一時(shí)名震 Android Design 界。

借著 Press 的發(fā)布,很多 Android 開(kāi)發(fā)者和設(shè)計(jì)師開(kāi)始重新思考 Android Design。很快, 更多優(yōu)秀而精美的應(yīng)用出現(xiàn)了。隨著這一批應(yīng)用逐漸為更多開(kāi)發(fā)者和設(shè)計(jì)師所熟知,Android Design 應(yīng)用的精品數(shù)量也開(kāi)始逐漸提升。 更多的開(kāi)發(fā)者開(kāi)始嘗試在自己的應(yīng)用中采用更大膽的配色來(lái)彰顯個(gè)性。

2013-05-25 08.04.07_framed

光陰飛逝,一晃半年過(guò)去。這半年里,Android Design 基本上沒(méi)有發(fā)生什么改變。時(shí)間到了 2013 年五月。在 Google I/O 2013 大會(huì)中,Google 正式將 Navigation Drawer 納入 Android Design 的麾下,規(guī)定了官方的 Drawer 樣式,推出了專(zhuān)門(mén)的指導(dǎo)頁(yè)面并且大幅更新了”應(yīng)用結(jié)構(gòu)”頁(yè)面。 Google 自家的大部分應(yīng)用也都把導(dǎo)航方式改成了新版的 Drawer。在 Google 的強(qiáng)力推行之下,大量的 Android Design 應(yīng)用都投向了 Drawer 的懷抱。

Inside Out Design能夠更好的展現(xiàn)信息

與此同時(shí),幾乎所有的 Google 應(yīng)用都已經(jīng)采用了”卡片式”的布局形式.所謂的卡片式布局,最早出現(xiàn)在隨 Android 4.1 一起發(fā)布的 Google Now 中,這些卡片起到了高效的組織信息的作用。Google 官方給這種布局起名叫”Inside Out Design (由內(nèi)而外式)”。這種布局的精髓就在于,它打破了傳統(tǒng)的”先設(shè)定框架,在向內(nèi)填充內(nèi)容”的設(shè)計(jì)思路,采用”先確定內(nèi)容以及呈現(xiàn)形式, 再利用不同的內(nèi)容組合出框架”的思維,因而得以更好的呈現(xiàn)出信息。而 Inside Out Design 中最常見(jiàn)的內(nèi)容載體/呈現(xiàn)形式, 就是卡片。

和 Drawer 相同,隨著 Google 的強(qiáng)力推廣,越來(lái)越多的開(kāi)發(fā)者開(kāi)始探索卡片式布局與 Inside Out Design。他的出現(xiàn),讓 Android 應(yīng)用的信息呈現(xiàn)更加有條不紊,清晰易讀。

更大的舞臺(tái)

在 Android 4.0 剛剛發(fā)布的那段時(shí)間里,Android 上的精致的應(yīng)用還太少太少。Google 不得不依靠 Android 系統(tǒng)本身來(lái)完成 Enchant meSimplify my life 以及 Make me amazing 的任務(wù)。但是兩年后的今天,跟隨著 Google 的腳步,越來(lái)越多的開(kāi)發(fā)者領(lǐng)悟了 Android Design 的精髓,Android 上優(yōu)秀的應(yīng)用不斷增加,已經(jīng)達(dá)到了一個(gè)足夠的量了。他們貫徹 Android design 的核心思路,一起肩負(fù)起了令人著迷, 簡(jiǎn)化生活以及制造驚喜的職責(zé),幫助 Android 系統(tǒng)本身卸下了重?fù)?dān)。

于是,Google 意識(shí)到,是時(shí)候讓 Android 系統(tǒng)的 UI 功成身退了。

不久之前發(fā)布的 Android 4.4 中,Google 做出了幾個(gè)重大的調(diào)整。Android 系統(tǒng)通知欄狀態(tài)圖標(biāo)與默認(rèn)的觸摸反饋的顏色都不再是之前具有鮮明 Android 特色的那明艷的藍(lán)色,取而代之的是低調(diào),中性的灰色與白色。

通過(guò)降低默認(rèn)觸摸反饋的醒目程度,設(shè)計(jì)師將不必?fù)?dān)心自己選取的顏色與 Android 默認(rèn)的藍(lán)色產(chǎn)生沖突,可以盡情施展自己的身手了。Android Design 也同時(shí)新增了 Your Branding 頁(yè)面,簡(jiǎn)明扼要的對(duì)應(yīng)用中的用色,標(biāo)志與圖標(biāo)設(shè)計(jì)的原則進(jìn)行了闡述。

而 Translucent Bars 的加入,則是體現(xiàn)了 Google 對(duì) Edge to edge design (無(wú)邊距/無(wú)邊框設(shè)計(jì)) 的理解,希望通過(guò)使系統(tǒng)欄透明,進(jìn)一步降低系統(tǒng)欄的存在感,凸顯內(nèi)容的價(jià)值。

花了兩年的時(shí)間,Google 將 Android Design 之舞臺(tái)的燈光,音響,布景與道具準(zhǔn)備妥當(dāng),自此開(kāi)始,將這片宏大的舞臺(tái)完完全全開(kāi)放給了設(shè)計(jì)師。

責(zé)任編輯:徐川 來(lái)源: phonekr
相關(guān)推薦

2011-08-23 09:52:31

CSS

2015-11-18 14:14:11

OPNFVNFV

2014-07-30 10:55:27

2025-02-12 11:25:39

2014-07-21 12:57:25

諾基亞微軟裁員

2016-12-29 13:34:04

阿爾法狗圍棋計(jì)算機(jī)

2016-12-29 18:21:01

2019-06-04 09:00:07

Jenkins X開(kāi)源開(kāi)發(fā)人員

2021-06-17 07:08:19

Tapablewebpack JavaScript

2012-05-18 16:54:21

FedoraFedora 17

2013-05-23 16:23:42

Windows Azu微軟公有云

2014-07-15 10:31:07

asyncawait

2016-11-08 19:19:06

2016-11-03 13:33:31

2011-05-13 09:43:27

產(chǎn)品經(jīng)理PM

2022-11-07 14:23:35

RPA人工智能流程自動(dòng)化管理

2019-08-05 10:08:25

軟件操作系統(tǒng)程序員

2019-04-28 09:34:06

2015-06-11 11:10:09

對(duì)象存儲(chǔ)云存儲(chǔ)

2021-04-15 07:01:28

區(qū)塊鏈分布式DLT
點(diǎn)贊
收藏

51CTO技術(shù)棧公眾號(hào)