榨干Chrome UI:Chrome才是瀏覽器,其他的只是軟件

1 評論 11190 瀏覽 5 收藏 16 分鐘

目前的我,已經(jīng)成為Chrome的嚴(yán)重依賴用戶,甚至U盤內(nèi)也隨身裝著Chrome便攜版。對我而言,它有著其他瀏覽器無法代替的殺手級優(yōu)勢:快速,穩(wěn)定,完美支持Google所有在線服務(wù);簡潔到一塌糊涂的界面。

而其他瀏覽器,他們只在一些特殊需求中才會使用,如Firefox的AutoProxy翻墻,IE插件下的網(wǎng)銀支付,Opera的turbo加速等。

用過Chrome的的人都有個習(xí)慣:就是都不好意思說Chrome不好用。當(dāng)然這是玩笑話,Chrome 3.0版本之前功能也一直較為簡單,但并不妨礙它的用戶對其贊不絕口。究其根本,還是出在其獨具一格的UI體驗上。

只用一句話來評價:Chrome 才是瀏覽器,其他的只是軟件。

戈達(dá)爾曾經(jīng)為證明斯皮爾伯格是一個平庸的導(dǎo)演而憤怒地說過:“如果你真想知道他為什么(平庸),我會在放映室里一個鏡頭一個鏡頭地講給你聽!”

現(xiàn)在我要做一件類似的事情,不過目的是為了證明Chrome是一款多么優(yōu)秀的瀏覽器。

目標(biāo)導(dǎo)向設(shè)計

Chrome剛推出的時候,所有人都大吃一驚:界面簡單得以至于菜單欄都砍掉了。這么多的菜單欄命令去哪里了呢?被重新組合了。

示例問題:猜猜,“清除歷史瀏覽記錄”的功能分別在哪個菜單項里面?

當(dāng)你還在思考此命令在Firefox中的“History”還是“Tools”時;我想你應(yīng)該早已確定這個功能位于chrome的“控制谷歌瀏覽器”的菜單內(nèi)。

看,這是多大的差別!什么叫做符合用戶第一直覺,這就是。

作為一個M粉,我個人的臆想是,Chrome是向Ribbon的致敬與學(xué)習(xí):

1.基于用戶的目標(biāo),對瀏覽器的命令進(jìn)行再分類。

這使得Chrome只有兩個菜單項:控制當(dāng)前頁控制谷歌瀏覽器。這有效的降低用戶對命令的記憶要求。(可用性原則之一:依賴識別而不是記憶。)

M粉牢騷:這與Ribbon的的分類有異曲同工之妙。

Ribbon UI中的命令精簡與分類對比

2.先將命令砍掉一半,剩下的再砍掉一半。

Chrome對于命令的精簡可謂大刀闊斧,把一些用戶目標(biāo)之外的功能都通通剔除,避免陷入了功能主義,打造一個純粹的、100%的瀏覽器。(當(dāng)然,這其中也有Google的產(chǎn)品戰(zhàn)略原因)

很明顯吧,左邊三個家伙都沒Chrome純

看上圖你就能看到Chrome是如何砍命令項的,命令雖然精簡了,但實際使用上,Chrome的右鍵菜單并不會讓我有功能缺失感。Chrome并不是為了精簡而精簡,他們的精簡是有理有據(jù)的,由用戶的目標(biāo)而來。

而對比菜單項命令,以及對話框的命令。Chrome將“歷史記錄”“下載記錄”“擴展記錄”這些功能都采用獨立標(biāo)簽頁呈現(xiàn)。一些常用對話框呈現(xiàn)的命令修改為浮層呈現(xiàn)。如“設(shè)為默認(rèn)瀏覽器”,“保存密碼”,”添加至收藏夾“。

這些做法的好處就是:讓Chrome的命令項始終保持在“淺并且窄”的結(jié)構(gòu)內(nèi)(可參閱《設(shè)計心理學(xué)》),遵循用戶從外到內(nèi)的認(rèn)知規(guī)則,確保用戶有較好的控制感(Sense of Control):

  • 大部分右鍵菜單項在10個以內(nèi)。
  • 沒有三層或更深的菜單項或者窗口疊加。
  • 少用模態(tài)的控件打斷用戶焦點,讓其保持在標(biāo)簽頁內(nèi)。

M粉的我再次牢騷:Ribbon的設(shè)計的目的之一就是提高用戶的控制感。BTW,如果數(shù)一下每個瀏覽器的工具欄命令數(shù),Chrome再次證明它是最“”的。

最佳響應(yīng)性與操控感

相對于其他瀏覽器,Chrome做了以下的變化:

  • 砍掉了菜單欄以及窗口標(biāo)題欄。
  • 將地址欄與搜索欄整合。
  • 動態(tài)的狀態(tài)欄。

界面簡單了,命令也少了。給Chrome的帶來的第一優(yōu)勢就是:同等屏幕尺寸下,Chrome擁有最佳的最大的的顯示區(qū)域。但在響應(yīng)性上,Chrome卻反而領(lǐng)先其他瀏覽器。Chrome的優(yōu)秀反饋,讓用戶只需較少的注意力就能了解系統(tǒng)的狀態(tài),從而專注于自己的本身的任務(wù)與信息。

讓我們從標(biāo)簽欄說起。這是Chrome最具魅力的地方。

1.向左轉(zhuǎn),向右轉(zhuǎn)

tab-bar-at-Chrome

注意到加載網(wǎng)頁時,標(biāo)簽欄左側(cè)的進(jìn)度圖標(biāo)反饋嗎?

Chrome精細(xì)的用三種相對的信息(方向,顏色,速度)來向用戶傳達(dá)瀏覽器的狀態(tài):正在連接服務(wù)器;已連接服務(wù)器,正在加載網(wǎng)站。

大部分情況他們只是一閃而過,但出現(xiàn)問題時,他有助與你了解情況:假如您訪問一個不存在的網(wǎng)站,如twitter.com,那么你就只能看到逆時針的進(jìn)度圖標(biāo)了。

2.向左走,向右走

Chrome的標(biāo)簽欄操作上始終保持著緩沖式的過渡動畫,對于反饋而言,他提供了隱喻,符合用戶的操作期望。

于是乎,當(dāng)一個新標(biāo)簽打開時,看起來就像一個新的標(biāo)簽從左側(cè)向右滑出(這里順帶說一下,Mac下是從下自上滑出,有點意思吧。)。當(dāng)關(guān)閉一個標(biāo)簽時,看起來就像標(biāo)簽向左邊縮進(jìn)去一樣。Chrome始終用一種與現(xiàn)實生活相符合的預(yù)期動畫,去呈現(xiàn)用戶的操作,而這種動畫,是最高效最生動而又最小化的反饋。

3.最小的操作需求

無論什么樣的用戶,大都想不勞而獲,都不喜歡軟件向他索取過多的東西。用戶不僅僅是討厭輸入,討厭按鍵盤,用戶甚至討厭去過多的移動他的鼠標(biāo)。尤其是面對多次的重復(fù)操作時,想想當(dāng)你需求遍歷多頁網(wǎng)頁時,網(wǎng)頁那糟糕的,到處跳動的翻頁導(dǎo)航是多么的讓你憤怒,你就大概能了解為什么了。

Chrome的最小操作需求,是關(guān)閉標(biāo)簽欄,當(dāng)你存在多個標(biāo)簽時,你可以不移動鼠標(biāo)就能關(guān)閉多個,這種設(shè)計操控感非常的強烈。谷奧上已經(jīng)有詳細(xì)的分析了。在此就不多說。

4.一個頂倆

我說的一個頂倆指的是Chrome的地址欄。網(wǎng)上有云:真正好的用戶界面都只有一個按鈕,比如iPhone,比如抽水馬桶。說起來還真有那么一點道理。

地址欄的作用就是帶我們?nèi)サ较肴サ牡胤健_@么說,一定需要把地址欄與搜索欄區(qū)分嗎?

難道的士司機會和你說:hey,你說的這個地方我無法識別,你問問我旁邊的這個家伙,他能搜索?

Chrome的一條地址欄減少了用戶的思考。但地址欄的自動完成反饋反而讓用戶更直白了解瀏覽器接下來將帶領(lǐng)去去到何處。可以看到,Chrome在這里進(jìn)行了有效分類,不至于讓用戶迷失和困惑。

onebox

另外其的可學(xué)性也不差,你無需幫助即可了解Ctrl+Enter的快捷操作。onebox2

Chrome的地址欄設(shè)計方法,我個人的看法而言,有點像我之前所討論過的低度認(rèn)知設(shè)計:將任務(wù)的開始點壓迫得極度精簡(只保留一條地址欄),提高任務(wù)的深度(輸入后的可選路徑浮層),反而能幫助用戶做更多的工作。漸進(jìn)式的操作結(jié)構(gòu),在滿足低級用戶的默認(rèn)需求時,能夠給高級用戶帶來更高的滿意度。

但是,一條地址欄的缺陷在于:如果用戶的第一目的是搜索,怎么解決?

在Windows的體驗規(guī)范中,就有這么一條:在任何界面內(nèi)ctrl+E,將使焦點定位在搜索框內(nèi)??纯碈hrome是怎么解決的?你可自行嘗試。嘗試之后記得說“Chrome牛X”。

這里還有一個視頻,15秒Chrome能完成四次搜索。這才叫一個頂倆。

4.最“有用”

Windows用戶體驗規(guī)范中談及狀態(tài)欄時是這么說的:

狀態(tài)欄通常使用文本和圖標(biāo)來描述狀態(tài),但它也可以包含進(jìn)度指示器,以及包含與狀態(tài)相關(guān)的命令菜單與選項。確保狀態(tài)欄中的信息對用戶來說有用且有實際意義,但也并非至關(guān)重要?!獊碓?/p>

statusbar

那我們來仔細(xì)對比一下,狀態(tài)欄中的進(jìn)度條到底對用戶有用嗎?沒用,因為大部分網(wǎng)站在完全載入之前都無法正常使用。而且一個網(wǎng)頁的載入如果還需要進(jìn)度條來反饋,那么這個網(wǎng)頁本來就存在問題。用戶也不會對載入超過10秒并且還需瀏覽器來提供進(jìn)度反饋的網(wǎng)站有任何的耐心。

OK,進(jìn)度條是沒用的,應(yīng)該去掉,那么類似IE右側(cè)的狀態(tài)信息有用嗎?對于一個沒有過多附屬功能的Chrome來說,他確實沒用。(但我個人認(rèn)為,Chrome擴展開放之后,應(yīng)該在此開拓擴展欄,與狀態(tài)欄整合。)

什么是有用的且有實際意義的信息?看圖:

upload-status

在一個較為古老的上傳交互模型上,系統(tǒng)本身沒有提供任何有效的反饋,Chrome通過狀態(tài)欄秒殺了其他一切瀏覽器:他提供了進(jìn)度的反饋。同時,他的標(biāo)簽欄采用逆時針方向,表示正在和服務(wù)器進(jìn)行數(shù)據(jù)交換。

讓我們回到標(biāo)題的最開始,叫做最佳響應(yīng)性:Chrome不是功能最多的瀏覽器,但響應(yīng)性是最佳的。這也就不難理解同樣功能簡單,而且還是MAC系統(tǒng)默認(rèn)瀏覽器的safari,占有率轉(zhuǎn)眼就被超越。

響應(yīng)性給用戶帶來何種好處:無語倫比的操控感;那種感覺,就像在極品飛車內(nèi)遇到一款傻瓜式的操控豪華跑車一樣,爽。

暗藏的OS野心

最后說一點題外話,對于Chrome OS,我們在Chrome內(nèi)多少能看到其一點雛形,如Chrome的菜單內(nèi)已經(jīng)沒有打開本地文件的命令,但其最重要的創(chuàng)意在于“創(chuàng)建應(yīng)用程序快捷方式…”

chrome mail163

在上圖中,這個界面已經(jīng)具有很強的軟件外觀了,并且其在于本地的東西,只是一個只有1K大小的快捷方式。

因此看來,我們還需要安裝一大堆的東西在本地的硬盤,然后去啟動嗎?不用,一切可變得簡單,也許有天你點擊桌面的某個快捷方式,你就可以直接使用使用Photoshop,真正的免安裝,且不限平臺。

當(dāng)然,目前而言,Chrome OS還有一大推的問題需要解決,比如如何定義模態(tài)對話框與非模態(tài)對話框的實現(xiàn),網(wǎng)絡(luò)應(yīng)用如何避免過渡的單頁呈現(xiàn)。但從長遠(yuǎn)來看,這種趨勢是不可逆轉(zhuǎn)的。

其實一開始聽到Chrome OS我是拒絕的,因為你不能說這是OS,我就認(rèn)為這是OS,第一我要試一下,因為我不愿意試了之后用一些蠱惑人心的話去贊美它,很好很強大很快。這樣其他M粉一定會鄙視我,根本沒有這么方便的OS,就證明上面那個是假的。后來我也證實Chrome 確實有OS雛形,我使用了它“創(chuàng)建應(yīng)用程序…”大概一個月左右,感覺就像使用本地軟件一樣,后來我介紹給同事的時候,也沒有吹牛,因為我讓他們知道,我是這么使用的,很爽,你們用得時候很會這么爽。

最后的話

Chrome是我最愛的一個瀏覽器,同時它也是優(yōu)秀的。Chrome的優(yōu)秀在于它樹立了瀏覽器新的未來方向,瀏覽器的任務(wù)不僅僅是網(wǎng)頁的呈現(xiàn),瀏覽器也不應(yīng)該是傳統(tǒng)意義上的軟件,它應(yīng)該是一個徹底脫離用戶本地電腦的東西,它應(yīng)該被賦予更多的用戶目標(biāo)與期望,利用云端的海量信息和即時技術(shù)讓用戶的目標(biāo)更快更容易實現(xiàn)。

本文標(biāo)題雖為榨干Chrome UI,其實只是力求榨干。我相信,每多使用一次Chrome,你就會多一次驚喜,多一份滿意。最后附送幾段關(guān)于Chrome的視頻:

  • 非常有創(chuàng)意的 Chrome 新廣告
  • 19個有趣的Google Chrome廣告影片(需翻墻)
  • 15秒種時間,Chrome 可以完成什么工作?

最后,假設(shè)您能堅持看到這個,提前祝您虎年快樂,哥讓我和你說:“愛老虎郵?!?、

來源:http://www.userkon.com/tolyer/analizing_chrome_ui.html

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 感謝博主分享,寫的真不錯

    來自北京 回復(fù)