Chrome重設計 P1

原文刊載于Medium ,by Sebastien Gabriel?

概要:當我寫下這篇文章,?我可能會事無巨細啥都往里放,結果內容會比較冗雜,因為我覺得重要的東西都舍不得刪掉,故決定分成兩部分

第一部分,在Chrome交互與視覺的角度,??適配Material Design?風格下重設計及其原因;后一部分多是關于視覺,如icon、配色。

介紹

2014年14月新安卓版本發布:Lollipop。L與前代有著諸多改進,且Material Design(下文簡稱MD)也重新塑造了設計風格。MD不僅僅是一份安卓設計標準,它更是Google的立足之本,用設計和技術向人們傳達自己的價值觀。

MD以及不僅僅是Google的財產,它屬于任何人,以及任何愿意適配MD并讓自己的產品更好的人。

部分出于趕上新的視覺語言,Lollipop搭載重設計的Chrome是在其第40次的更新時。我們更愿意叫他:Chrome Material Design。

內容為先,而非Chrome

回首這數年,從視覺和產品方向說,Chrome與其他Google產品逐漸區別開來,這主要還是因為Chrome定位于做一個承載所有內容的平臺(其實就是Chrome做 web os的野心)。比如說,Chrome的品牌在與Google品牌慢慢平衡或混合。這就會引出一個問題,我們重設計的立足點在哪?

關于UX和UI的問題都可以歸于Chrome的三個原則:速度,簡介,安全。


Chrome三原則:速度、簡潔、安全

瀏覽器永遠應當以隱形、高效地支撐內容為第一要義。

那么問題來了:UI元素要怎么盡可能設計地隱形而又在不打擾內容的前提下彰顯視覺特性?

好吧,其實我并不知道答案,但現階段有幾個選擇。此文就是為此而生,盡力去解釋Chrome安卓版這樣選擇的原因。

平臺

Chrome安卓放出以及8個月了,塵埃已落定,這個時候說說設計思路還是很合適的。此外,緊隨到來的2015年I/O大會,會看到MD逐漸成熟,好設計需要時間豐富,我也希望新版Chrome在放出一年后會變得更加優秀。

在此之前,先來談談安卓平臺

大家都知道,安卓用戶橫跨多個版本,每個版本都是以甜品命名的,現在的版本L代表Lollipop,之前的版本,K就代表Kit Kat,J代表Jelly bean。


上文所說三個版本是最廣泛使用的,我談論這個的原因就是我們開發了兩個版本的Chrome,一個用在在L之前,一個用在L之后。

Chrome這些版本盡管看起來很相似,可用性的角度卻是截然不同的。

1.將web放到第一位

Chrome的任務只有一樣:提供最好的網頁瀏覽體驗,與那些支持新技術或者幫助開發者提高app體驗的工具不同,他的任務只有web體驗。

重設計Chrome中一個最重要的部分并不是給老黃瓜刷嫩漆,而是用戶與web交互方式的深層改良。是關于如何把web體驗放到第一位。

首要就是將Chrome從程序的「盒子」中放出,區分版本并在各種安卓平臺上提供無縫體驗。

TabApp合并

為了將此次更新從初始版本中區分出來,L系統下的Chrome叫做「Merged tabs and app」。名字直觀簡潔。

「Merged tabs and apps」簡單來說就是依賴于平臺而非UI。

step1,拆分

Chrome移動端UI元素有這么幾個:tab page,Toolbar和URL bar,the switcher和the menu。

總的來說,這些元素構成了Chrome,然而一個獨立于系統平臺的應用或多或少像是活在真空里。

step2.移除最大的阻力

The switcher

「app運行在真空中」說的顯然是其與平臺其他產品如何交互,簡而言之,假設你現在在某個app上,當你需要訪問某個網站、拿點信息時,把app關了,然后打開Chrome或者打開多任務,點開Chrome,再點開Chrome的tab switcher仔細找啊找,然后才能開始你的任務。

Chrome內的Switcher

無論從可用性還是設計哲學來說,這種情景都不那么優雅。無論信息位于何處,它都應當是易于獲取的。

解決方案便是將安卓系統的多任務和Chrome的tab switcher合并,即將Chrome的核心功能拆分出來。

Lollipop?中Chrome的tab與多任務tab融合為「recent switcher」

地址欄

現在Switcher整合進安卓系統級多任務中心了,Chrome的地址欄和谷歌搜索欄合并就勢在必行且容易執行多了。

之前,谷歌搜索欄搜索個東西會打開Chrome的tab。現在,?點擊頂部搜索欄,會打開Android「Recent stack」


Android系統級搜索欄


搜索
Chrome中呈現結果

盡管只是表觀上非常簡單地變化,但這一特性卻構筑了MD的設計核心,比之前的優化都要吊。這一次我們在減弱Chrome增強內容上走的比任何一次都要遠。

回頭看看UI,兩個不同的Chrome版本。Merged tab and app版本,支持Lollipop及之后版本。Chrome默認switcher,支持Lollipop之前版本。


(譯者注:P1完結!撒花~撒花~)

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容