如果您想訂閱本博客內(nèi)容,每天自動(dòng)發(fā)到您的郵箱中, 請(qǐng)點(diǎn)這里
Chrome瀏覽器10周年特別版已經(jīng)上線了,有很多重大的更新內(nèi)容。Chrome 有了更加圓潤的外觀,新圖標(biāo)和跨平臺(tái)的新色調(diào)。Google 還對(duì)用戶界面進(jìn)行了更改,以提高您的工作效率。例如,他們已將工具欄移動(dòng)到 iOS 的底部,簡化了地址欄中的提示,菜單和 URL。還有更多更新的內(nèi)容,請(qǐng)自行去官網(wǎng)看看。
是不是很酷,反正我很喜歡這次更新的 UI界面,顏色和圓角都是喜歡的點(diǎn)。那這套設(shè)計(jì)是怎么來的?接下來的文章將帶你走進(jìn) Chrome 設(shè)計(jì)背后的故事。
Chrome Omnibox的版本迭代之路(Unboxing Chrome,Redesigning the omnibox)
譯者注:Omnibox 是位于瀏覽器頂部的一款通用工具條,用戶可以在 Omnibox 中輸入網(wǎng)站地址或搜索關(guān)鍵字,或者同時(shí)輸入這兩者,Chrome 會(huì)自動(dòng)執(zhí)行用戶希望的操作。這個(gè)詞在下文中將不再翻譯,屬于功能性的名詞,用英文更準(zhǔn)確。
為了慶祝 Chrome 在2018年9月的10歲生日,我們對(duì)瀏覽器界面進(jìn)行了徹底的重新設(shè)計(jì),對(duì)設(shè)計(jì)流程也進(jìn)行了徹底的優(yōu)化。盡管 Chrome 一直都是開源的,但我還是想分享更多關(guān)于其中的設(shè)計(jì)故事,以希望其他人能從中學(xué)到東西。
一、認(rèn)識(shí)盒子
我經(jīng)常被問到一些問題,比如「為什么 Chrome 需要設(shè)計(jì)師?」我的同事 Sebastien 在他的 Medium 帖子中優(yōu)雅的描述了這一點(diǎn),他說:
隱藏在問題的背后往往是,瀏覽器應(yīng)該像下面那個(gè)樣子就夠用了:
這張圖可以說已經(jīng)很像在 PC電腦上的瀏覽器效果了,盡管是面對(duì)20億用戶,這樣似乎也能正常工作。那為什么需要重新設(shè)計(jì)呢?
我們希望給它一個(gè)機(jī)會(huì),去改變?nèi)澜鐬g覽器的設(shè)計(jì)。
二、盒子簡史
要了解我們?nèi)绾巫叩浇裉欤赡苄枰覀兓仡^仔細(xì)看看:
△ 第一個(gè)盒子
這個(gè)0.5dp的漸變描邊,22%不透明度投影及1dp圓角半徑的盒子樣式只為說明一件事:用戶能知道自己可以在其中輸入內(nèi)容。
為什么?因?yàn)檫^去電腦只是連接到顯示器和鍵盤,整個(gè)屏幕基本上都是文本。但當(dāng)有了鼠標(biāo)之后,就需要明確哪個(gè)區(qū)域是可點(diǎn)擊的。因?yàn)轱@示器只能繪制方塊像素,所以「文本輸入框」誕生了。
△ 初代盒子
隨著瀏覽器的推出,這個(gè)盒子開始具有顯示位置或「統(tǒng)一資源定位器(URL)」的雙重功能——因此得名「地址欄」。
在2008年,當(dāng) Chrome 首次發(fā)布時(shí),我們的主要設(shè)計(jì)原則是盡可能減少認(rèn)知成本。因此,我們合并了谷歌的搜索框和地址欄,并添加了4dp投影和下拉菜單,使得搜索體驗(yàn)更好——取了個(gè)名字叫「omnibox」。
△ 2008
當(dāng)瀏覽器第一次出現(xiàn)在移動(dòng)設(shè)備上時(shí),界面空間非常有限,所以我們精心設(shè)計(jì)了每個(gè)像素,以便盡可能的占用更少的空間。我們使用了1dp的內(nèi)陰影代替投影,并保證界面在灰色底下保持協(xié)調(diào)。
△ 2012
自那之后,網(wǎng)絡(luò)環(huán)境變得更加復(fù)雜,設(shè)備也更加智能化。我們開始關(guān)心一些更復(fù)雜的情形下會(huì)發(fā)生什么,比如:當(dāng)一個(gè)網(wǎng)站被黑客入侵并清除用戶個(gè)人信息時(shí),當(dāng)突然斷開網(wǎng)絡(luò)時(shí),當(dāng)用戶想回到一周前訪問過的網(wǎng)站但又不記得網(wǎng)站時(shí)。
在過去的10年里,全世界成千上萬的工程師(包括 Google 在內(nèi))都在思考這類問題,并全心全意地尋找解決方案,幫助用戶瀏覽這個(gè)呈指數(shù)級(jí)變化的網(wǎng)絡(luò)。
移動(dòng)網(wǎng)絡(luò)的快速發(fā)展也帶來了大量的新用戶,他們其中很多都是第一次在手機(jī)上上網(wǎng),以前他們從未見過這個(gè)盒子,他們也不知道可以從這個(gè)盒子中找到任意想要找的東西。
我必須承認(rèn),在我開始在這里工作之前,我連 Chrome 一半的功能都不知道。例如,可以左右滑動(dòng)工具欄用來切換選項(xiàng),或者下滑查看所有選項(xiàng)卡。
△ 向下滑動(dòng)工具欄查看選項(xiàng)卡的小技巧
類似這樣的功能特性都是很隱蔽的,因?yàn)槲覀儚膩聿幌肟桃獾慕o用戶去推銷我們的功能。事實(shí)上,我們在瀏覽器中做的設(shè)計(jì)大多是無形的,以確保我們產(chǎn)品的核心價(jià)值「不是 Chrome,而是內(nèi)容本身」。這是一個(gè)我非常喜歡的原則,這也是我加入這個(gè)項(xiàng)目的原因之一。
作為一個(gè)內(nèi)向的人,有一個(gè)優(yōu)勢是會(huì)在設(shè)計(jì)上也試圖盡可能的不張揚(yáng)。產(chǎn)品本身似乎也反映了我對(duì)設(shè)計(jì)的看法:
就像 Beatrice Warde 將排版視為「水晶酒杯」一樣,我將 Chrome 僅視為「水晶顯示器」。
我錯(cuò)了。隨著網(wǎng)絡(luò)環(huán)境的改變,其他第三方軟件開始偽裝成 Chrome 來竊取信息,甚至是詐騙用戶。
因此,我們第一次開始質(zhì)疑需不需要那么隱形。
三、千面盒子
當(dāng)我第一次和工程師們坐在一起,想要更好的了解我們的瀏覽器是如何構(gòu)建時(shí),這是一個(gè)大坑,沒有任何東西能讓我為接下來的事情做好準(zhǔn)備。
我們在超過6個(gè) Android 版本中,支持超過40種語言,甚至連 Roboto Medium 不支持的語言,我們都做了很好的適配。我們還允許開發(fā)人員將工具欄的顏色更改為幾乎任何顏色,同時(shí)還保持可訪問性以支持 web應(yīng)用生態(tài)系統(tǒng)。
我們的 UI 也能適應(yīng)不同像素密度設(shè)備并能保證具有相似的觸摸大小,并且無論設(shè)備的內(nèi)存容量或制造商都能平穩(wěn)運(yùn)行。
在你與它交互之前,這個(gè)盒子有超過2000種不同排列方式。
一旦你輕敲、輸入、滾動(dòng)、滑動(dòng)或者與它語音,瀏覽器的布局排列就會(huì)發(fā)生各種變化。
當(dāng)你打字時(shí),我們確保你看到的鍵盤是你熟悉的那個(gè);當(dāng)你分享一個(gè)網(wǎng)站時(shí),我們也會(huì)顯示你在手機(jī)上的常用選項(xiàng)。
△ 我們設(shè)計(jì)的一些操作模式(黑色水平線表示分屏模式)
我們的靜態(tài)盒子有2000個(gè)排列,然后在包含所有動(dòng)態(tài)交互的情況下能成倍的增加到20000個(gè)以上。
看起來有點(diǎn)多?其實(shí)并不是。
四、95種灰度配色
即使在我們的團(tuán)隊(duì)中,也沒有人知道這個(gè)框中有多少種不同的文本樣式。因?yàn)?Chrome 的迭代過程已經(jīng)超過了10年,我們有一堆零散或過時(shí)的源文件。
因此,盡可能的回溯審查(主要是為了確保不會(huì)破壞數(shù)十億人的 UI界面),我們?yōu)槊糠N文本樣式遍歷每一行代碼,并在字號(hào)、字重、顏色和透明度方面繪制出數(shù)百種變化。
盡管幾年前就已經(jīng)把我們的 UI規(guī)范化了,但是我們沒有關(guān)于如何使用這些規(guī)范的指導(dǎo),比如像14sp Roboto 的字體,我們就有超過14種不同的顏色。
如果不查看上下文,就不可能決定使用哪一個(gè)。即使是最小的更改也可能打破易訪問性的標(biāo)準(zhǔn),但其實(shí)我想知道我們實(shí)際上需要的最小顏色數(shù)。
將近半年后,終于有了答案,結(jié)果是8個(gè)。
然后,我們對(duì) UI中的每個(gè)圖標(biāo)都做了相同的設(shè)計(jì),所有115個(gè)圖標(biāo)——仔細(xì)選擇哪些是 Material(如菜單圖標(biāo)),哪些是 Chrome 特定的(如匿名圖標(biāo)),哪些是特定于平臺(tái)的(如復(fù)制/粘貼),還不包括選定,按下和禁用狀態(tài)。
此外,一些圖標(biāo)被翻轉(zhuǎn)為從右到左的形式,因此總數(shù)實(shí)際上接近400+。
五、設(shè)計(jì)優(yōu)化永遠(yuǎn)止境
在盯著灰色盒子看了幾個(gè)月后,如果我說前面堆積如山的工作其實(shí)并不可怕,那就真的是在吹牛了。
盲目自信,讓我覺得我可以獨(dú)自完成所有的事情。但我越努力,就越明顯地發(fā)現(xiàn)這個(gè)問題并沒有隨著簡單的重新設(shè)計(jì)而消失。
這很難,因?yàn)橐?Chrome 在Google規(guī)范(如賬戶登錄流程),Material規(guī)范(如按鈕和圖標(biāo)),本地UI(如鍵盤)和Chrome品牌元素(如斷網(wǎng)時(shí)的小恐龍)之間保持平衡。
所以,我向我們的工程師們尋求幫助,令人驚訝的是,他們對(duì)規(guī)范問題的放大表示歡迎。這個(gè)問題其實(shí)也讓他們很難審查代碼,因?yàn)槠脚_(tái)約束和特性變化意味著難以回退和各種不一致。事實(shí)上,我們的工程師 Ted Choc 甚至雇了人來支持我們的努力,他們其實(shí)也很想搞定這個(gè)問題。(我的愿望實(shí)現(xiàn)了!)
為了讓你知道我們的 Eng團(tuán)隊(duì)是多么的了不起,Ted 的使命宣言中寫的就是「Chrome移動(dòng)端超級(jí)棒!」
有了新獲得的支持,我們開始構(gòu)建基于代碼庫共享組件的可視化規(guī)范。其他應(yīng)用「免費(fèi)」獲得的 Material 組件必須經(jīng)過定制,以滿足 Chrome 的所有(2000個(gè))排列。幾乎是從零開始,所以我們需要找到一種可擴(kuò)展的方法來劃分所有這些差異。
結(jié)果如下:
我們的第一個(gè)版本(M54)截圖——在我們的界面中會(huì)映射每種顏色、文字、圖標(biāo)和組件。
六、設(shè)計(jì)速度
幾個(gè)月來,我們只是在刪除整理東西,清理多年累積的設(shè)計(jì)和工程債務(wù)?,F(xiàn)在我們有了一個(gè)干凈的界面和一個(gè)組件庫系統(tǒng),我們已經(jīng)準(zhǔn)備好開始設(shè)計(jì)了。
讓我們回到我們在前面第一次遇到的盒子。1號(hào)盒子放在一個(gè)更大的灰色盒子里,我們稱之為「工具欄」。
△ 第二個(gè)盒子
工具欄將瀏覽器UI 從內(nèi)容和系統(tǒng)UI 中分離出來,當(dāng)你點(diǎn)擊白色框時(shí),它將填充灰色框,并顯示下面的另一個(gè)灰色框。
△ 第三個(gè)盒子
在這里,我們可以展示我們在幕后所做的一切,試圖使 Chrome 盡可能地發(fā)揮作用。但是為什么所有這些盒子都要調(diào)整大小并從一種狀態(tài)改變到另一種狀態(tài)呢?
△ 第一個(gè)盒子的不同形式
當(dāng)某些東西在屏幕之間發(fā)生變化時(shí),就很難識(shí)別或記住。
如果 UI 在用戶與它交互時(shí)發(fā)生了變化,他們會(huì)將變化理解為以后可能有用的信息。例如,如果圖像消失在圖標(biāo)中,你可能需要記住該圖標(biāo),以防你想再次打開該圖像。
這增加了理解用戶界面和決定需要保留哪些信息的短暫認(rèn)知負(fù)擔(dān)。
即使每座城市都能節(jié)省1秒鐘的時(shí)間,那也會(huì)有200萬秒或者23.14天。想想看,人們可以在額外的23天內(nèi)做些什么?。ㄗg者注:不大明白作者這里怎么算的,可能意思是說要提升效率。)
為了演示,讓我們看看去掉文字和圖標(biāo)之后的工具欄:
你是否注意到你的眼睛在屏幕上移動(dòng)了多少來處理不同的元素?
現(xiàn)在讓我們來看一下同一個(gè)屏幕,只去掉了顏色和陰影:
從什么都沒有的時(shí)候開始練習(xí),或者我們所說的「白色建筑」,意味著每一個(gè)元素都必須被考慮。包括這個(gè)在我們的 UI 上靜靜地做了這么多年的盒子:
△ 第四種盒子
幸運(yùn)的是,我們認(rèn)識(shí)了第四種盒子的創(chuàng)造者,并且得到了 Android 團(tuán)隊(duì)的大力支持,可以根據(jù)內(nèi)容來改變顏色(又一個(gè)6個(gè)月的旅程,值得一提)。
但是,讓我們繼續(xù)討論第二框的其他內(nèi)容:圖標(biāo),這些圖標(biāo)都帶有另外兩個(gè)隱形框。
描述了圖像資源的「邊界框」
△ 看不見的5號(hào)盒子
「觸摸目標(biāo)」描述了點(diǎn)擊區(qū)域
△ 看不見的6號(hào)盒子
因?yàn)椤?點(diǎn)菜單」圖標(biāo)視覺上更窄,它有一個(gè)更小的點(diǎn)擊區(qū)域。但如果單純讓可點(diǎn)擊區(qū)域保持統(tǒng)一,就會(huì)造成視覺上的不平衡,造成圖標(biāo)之間不均勻的間隙。
所以我們不得不妥協(xié),稍微打破了 Material規(guī)范,讓它更容易點(diǎn)擊和視覺平衡。
七、用一個(gè)盒子來規(guī)范它們
在我通過遍歷 UI 中的所有文本、顏色和圖標(biāo)建立了足夠的信心之后,我準(zhǔn)備處理 omnibox。
我們想找到一種方法來巧妙地強(qiáng)化 Chrome 的品牌——考慮到我們的 logo 很少出現(xiàn)在我們的 UI 中,我猜想這會(huì)是一個(gè)挑戰(zhàn)。我做了幾十個(gè)看起來很有希望的設(shè)計(jì),卻發(fā)現(xiàn)沒有一個(gè)是可行的,因?yàn)樗鼈兌既狈τ辛Φ闹С掷碛伞?
所以,我回到我們的核心品牌,認(rèn)真地看了看我們的標(biāo)識(shí)。我注意到的第一個(gè)視覺特征是小寫的「c」。
這說明了我們品牌的自然隨性,所以找到一個(gè)友好的形狀很重要。我們還使用了與谷歌相同的4種顏色來展示我們的傳承性。事實(shí)上,Android、Google 和 Chrome 的標(biāo)志上都有一個(gè)反復(fù)出現(xiàn)的形狀。
圓形
圓形是自然形成的形狀,不像矩形,所以他們的視覺認(rèn)知負(fù)擔(dān)更小。在倫敦住了兩年之后,我對(duì)這個(gè)形狀仍然記憶猶新。
當(dāng)?shù)罔F的名字第一次以矩形的形式出現(xiàn)時(shí),火車上的乘客很難將其與海報(bào)廣告區(qū)分開來。因此,1912年,他們在地鐵的后面加上了紅色的圓圈,以便更容易找到。 Frank Pick 隨后將圓圈加入了現(xiàn)代著名的標(biāo)志中。
△ 圖片來自倫敦交通博物館
我覺得這是對(duì)我們 omnibox 的一個(gè)很好的隱喻。
深入觀察我們的 logo,我特別注意的形狀是這個(gè):
它表達(dá)了我們的性格,同時(shí)表明這不僅僅是一個(gè)「搜索框」或「地址欄」,而是一個(gè)全新的,友好的東西。
由于鼠標(biāo)的引入促成了文本框形狀,而在移動(dòng)端,又由我們的手指交互進(jìn)化了我們文本框的形狀,更符合人手的交互操作。
一次偶然的機(jī)會(huì),我們還去 de Young 博物館參加 Frank Stella 的展覽,Stella 使用曲線形狀的畫布打破了標(biāo)準(zhǔn)的矩形框架。和我一樣,他也喜歡賽車,在他的作品《Deauville》中,他使用了類似的形狀來暗示速度——Chrome 的核心支柱之一。
我贊同現(xiàn)代主義的觀點(diǎn),認(rèn)為傳統(tǒng)的藝術(shù)形式對(duì)于我們的任務(wù)來說已經(jīng)變得無關(guān)緊要和過時(shí)了,因此我們將新的視覺設(shè)計(jì)方向命名為「Modern」。
然后我們探索了數(shù)千種設(shè)計(jì)。
△ 所有Sketch畫板
起初,我采用了與最初在移動(dòng)端相同的方法,使用1dp描邊似乎是有意義的。但在執(zhí)行過程中,它很容易迷失在一片白色的、頂部有搜索欄的網(wǎng)站中,邊線在隱身模式下也不能很好地工作,很難與粗粗的輪廓圖標(biāo)相平衡。
使用 Material 規(guī)范投影也感覺不太合適,因?yàn)樗]有解決我們最初看起來只是像一個(gè)「搜索框」的問題。底部添加了一個(gè)額外的4dp投影,它視覺上看起來很重而且偏離中心。
我們甚至試著把盒子全部移走,但現(xiàn)在元素似乎是隨機(jī)放置的,一個(gè)像以 URL 為中心的改變會(huì)帶來巨大的工作成本。
結(jié)果是,我們的同事也在努力使我們的 URL 看起來更干凈,而 Material 2剛剛開始推出。它帶來了更豐富的配色,給我們的形狀賦予更多的生命力。
△ 之前
△ 更新后的顏色和url
事實(shí)證明,具有一致的形狀也使得我們的代碼不那么復(fù)雜,過渡動(dòng)畫更少——設(shè)計(jì)和效率的完美平衡。
現(xiàn)在,我們準(zhǔn)備好了進(jìn)行測試:成千上萬的用戶、數(shù)月的實(shí)驗(yàn)和可用性研究,與我們之前的設(shè)計(jì)相比,它被評(píng)為更「友好」、「創(chuàng)新」、「聰明」,而看起來卻毫不「快」或「值得信賴」。
△ M68 to M69
△ 我們?yōu)槠谝荒甑牡?
雖然我只是花了時(shí)間來寫這個(gè)盒子,但是其實(shí)在 UI 的每一處都有十幾個(gè)故事。
△ 我們?nèi)碌摹窶odern」M69 截圖
它是完美的嗎?其實(shí)還沒有,但這不是讓我為我們所做的事感到自豪的原因。事實(shí)上,我們讓 Chrome 變得更小,下載更快——確保我們構(gòu)建的每一個(gè)像素都為下一個(gè)更好的設(shè)計(jì)師鋪平了道路。
就我個(gè)人而言,當(dāng)我們的用戶研究中的一位參與者說,我知道我們做了一些正確的事情,「這給了我一種更好的平靜感,可能會(huì)幫助我一整天。」
不僅是因?yàn)樗麄兿矚g這個(gè)設(shè)計(jì),是因?yàn)檫@也是我看待 Chrome 的方式。
我們花了將近一年的時(shí)間仔細(xì)研究 UI 中的每個(gè)像素,因?yàn)槲覀兿MO(shè)計(jì)包裝與內(nèi)在質(zhì)量能夠相匹配——只是希望這次你可能會(huì)注意到這不是一個(gè)普通的盒子。
藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。