前往
大廳
主題

轉貼:淺談Firefox與Chrome的設計理念(上)

—— | 2011-01-08 20:22:21 | 巴幣 0 | 人氣 1473

最近這幾天來,瀏覽器市場可謂是硝煙瀰漫。先是網民集體為IE6舉行了葬禮;接著是微軟官方宣佈IE9將完美支持HTML5;號稱地球上最快的 Opera10.5如期發佈;在這一切塵埃尚未落定的時候,Firefox又因為難以踰越25%的市場佔有率而被人抨擊;隨即Mozila也迅速反擊,稱 Firefox之所以在JS上效率不如其他瀏覽器並不是因為技術差,而是因為其他瀏覽器支持的JS遠沒有Firefox完善。你來我往,真是好不熱鬧。

作為我自己來說,目前這些主流的瀏覽器裡,最令我感興趣的瀏覽器主要有兩個,那就是Mozilla的Firefox和Google的Chrome。這兩款瀏覽器我基本上都在同步更新著最新的nightly/dev版本,對他們也都有所瞭解。至於Opera,這確實是一款很強大的瀏覽器,也有諸多創新,但很可惜的是,他並不適合我,而我顯然也不能夠對自己所不瞭解的東西加以評論。

無論是Firefox和Chrome,現在他們都已經有了相當數量的擴展程序,而合理的使用這些擴展幾乎可以實現一切你所需要的功能。如果只是大概的從功能的角度上出發,輕易的下結論對於任何一個沒有安裝擴展的瀏覽器都是不公平的。因此,我將會儘量客觀的,從這兩款瀏覽器的設計理念的角度出發,對其進行評論。


一、界面

界面是軟件帶給用戶的第一感覺,界面的好壞也在很大程度上決定了一個第一次接觸該軟件的用戶是否還有興趣繼續使用下去。一個軟件的默認界面是最能代表其設計理念的。我的這一觀點從未發生過改變,因為對此界面的評論當然放在第一位。

Firefox和Chrome的節目有許多的不同,具體如上面的那張截圖。圖中我使用的是Firefox(Nightly的測試版被稱作 Minefield) 3.7a3pre 和 Chrome 5.335.1 dev,都已經設置回了他們的默認界面。他們現在的版本可能與最初的版本在界面上有了一定的變化,但是其核心的設計理念是沒有改變的。

我實在沒有興趣在諸如後退按鈕的大小不同等等細枝末節的事情上下功夫,這是需求分析和交互設計該研究的事情,所帶來的可能僅僅是用戶體驗的改變,而非用戶行為習慣的改變。這些細節與其最核心的設計理念往往並沒有最直接的聯繫。所以讓我們直接從重點開始。

1.1 標籤

如圖,上面是Chrome,下面是Firefox。除去Chrome在打開空白頁面時默認顯示的內容,標籤欄的位置想必是讓人感覺最為明顯的一個區別了。

    * Firefox的標籤欄較為傳統;他被放置在地址欄和書籤欄的下方;標籤欄之後直接就是網頁的內容;每個標籤欄都分割了一個不同的網頁。
    * Chrome的標籤欄是一種大膽的創新,他甚至取代了原有的標題欄;標籤欄被放置在瀏覽器的最上方,再往下依次是地址欄和書籤欄;因為標籤欄就是標題欄的緣故,每個標籤頁都分割了一個不同的瀏覽器。

Firefox的設計十分的傳統。早在Firefox出現之前,許多的標籤式瀏覽器就已經在使用這樣的設計了。默認將書籤欄放在標籤欄的上方,點擊之後,瀏覽器會開始在不同的標籤中展示出網頁內容。所以說,Firefox的每一個標籤分割的都是不同的網頁。

Chrome的標籤欄設計的確令人感到驚嘆,但熟悉了之後確又感覺非常舒服。他大膽的將標籤欄和常見的標題欄融合到了一起;點開一個新標籤之後,首先看到的是常規的工具欄,再往下是書籤欄;點擊書籤欄,網頁的內容便會直接在當前標籤頁中展示。因此我前面說,Chrome每個標籤頁風格的都是一個不同的瀏覽器。

Chrome的這種設計或許和他每個標籤頁均有獨立進程的安全設定有關,但更重要的原因是,這種設計凸顯出了Chrome獨特的設計理念:瀏覽器的一切功能均是為了更好的展示網頁的內容。

顯然,Firefox並沒有能夠通過其自身的界面,向我們展示出什麼特別的東西來。

1.2 搜索

老樣子,仍然上半部分是Chrome,下半部分是Firefox。

網絡一個很重要的組成部分,就是搜索,而搜索正是Google的長處。於是我們再次看到Chrome對於地址欄搜索大刀闊斧的改進。

地址欄的瀏覽記錄搜索,這是兩款瀏覽器都有的功能。直接在地址欄中輸入,瀏覽器就會從你的瀏覽歷史和書籤中搜索結果並展示。這是一種非常方便的管理模式,畢竟隨著上網時間的累積,書籤也會越來越多。

他們的不同之處也是非常明顯——

    * Firefox的設定仍舊傳統,地址欄搜索本地的瀏覽資料,對於網頁內容則在獨立的搜索框中進行搜索。如果在地址欄直接輸入文字會默認調用Google的手氣不錯直接打開結果網站。
    * Chrome將常規的地址欄和搜索欄整合到了一起,無論你想搜索在本機的瀏覽資料還是網絡上的資訊,全部都可以在唯一的地址欄中完成。地址欄直接輸入文字調用Google搜索該內容並展示搜索結果。

Chrome的這個設計很有意思,也很大膽。對於那些已經習慣了獨立搜索框設計的用戶而言,這種整合或許會給初次使用帶來一定的迷惑,不過好在Chrome已經準備了足夠的提示來告訴用戶,這就是你想要的搜索內容。

我認為,Chrome的整合的遠不止是傳統意義上的地址欄與搜索框,還有就是本機的瀏覽資料與網絡的搜索結果,無論用戶需要哪個,都只需在同樣的一個地址欄內完成搜索即可。也可以說,這是Chrome在有意的淡化本地資料與網絡搜索之間的界限。另外,這個設計對於小屏幕的用戶也是很有意義的。

在這個方面,Chrome大幅簡化用戶的搜索動作的目的,想必就是為了讓用戶感覺到:搜索並不是孤立的,而是網絡的一部分。無論是過去訪問過的網頁、收藏起來的書籤、還是只是有一點點印象的內容、或者是想要知道的問題答案、最新的諮詢,全都可以在一個搜索框中完成。從Google.com首頁那唯一的一個搜索框就能看出來,這與Google的簡單哲學是完全相符合的。

1.3 狀態欄

依然是上半部分為Chrome,下面為Firefox。

狀態欄是瀏覽器一個很重要的組成部分,用戶可以在這裡看到網頁的載入進度以及預覽連接位置。當然,或許也可以看到瀏覽器某些功能的使用狀態。

Chrome和Firefox的狀態欄可以說完全不同。

    * Firefox的狀態欄是常規的狀態欄,可以顯示網頁載入狀況並預覽連接,右邊則會顯示部分已安裝擴展的圖標方便切換其運行狀態。新版本在狀態欄增加了載入進度條。
    * Chrome並沒有真正意義上的狀態欄,他只在需要的時候顯示,而其他時間都是隱藏的。不過你仍然可以看到狀態欄最基本的兩個功能:網頁載入狀況和連接預覽。

我不能確定Chrome的這種隱藏式狀態欄是不是首創,因為Opera上卻有類似的功能。不可否認的是,這樣的設計確實使得瀏覽器可以顯示更多的網頁內容,而用戶也不需要花時間去研究那個長長的狀態欄上掛滿的圖標都是干什麼用的。

很顯然,這次我們很容易就能想出Chrome的設計理念:瀏覽器只是為了展示網頁內容的一個輔助工具。隱藏式的狀態欄可以讓用戶更容易的將注意力集中在網頁中,只有在需要的時候才會來關注,而不需要付出額外的精力。

Firefox的狀態欄設計幾乎與其他大部分的瀏覽器如出一轍,該有的功能也一個不少。只不過他允許擴展程序自行添加圖標到狀態欄以方便用戶的使用,所以你可以看到上圖中火狐的狀態欄裡雖然有了一排的按鈕,但他們全部是由我所安裝的擴展添加上去的,沒有一個是瀏覽器自身的圖標。

直到此時,Firefox終於開始展示出了自身一些獨特的東西:瀏覽器的界面是可以按照用戶的需求自定義的。

1.4 界面總結

不知道各位有沒有聽說過奧卡姆剃刀原理呢?如果沒有的話,在互動百科上有相當詳細的解釋。奧卡姆剃刀原理事實上很容易理解,他歸根結底只有一句話:」萬事萬物應該儘量簡單,而不是更簡單。」

Chrome的界面設計,正是將奧卡姆剃刀原理髮揮到了極致,而這也與Google自身的企業哲學是密不可分的。

儘可能的簡化一切麻煩的要素,節省用戶選擇的成本。這就是Chrome在界面設計上的信仰。而正是這種簡潔,給Chrome帶來了驚人的用戶,幾乎每個人都為他的這些獨特的設計而折服。這所有的設計看似大膽,而實際上確是真正的在從用戶角度出發,將一切儘可能簡單到了極致之後所帶來的結果。



Firefox的一切設計都符合人們對於瀏覽器的傳統認知,他並沒有試圖從本質上改變什麼。但是我們仍然可以從中看出些什麼,那就是剛才提到過的,界面的按需定製。幾乎每個稍有經驗的火狐用戶,他的瀏覽器界面都是與眾不同的。如果你願意,完全可以把Firefox定製的和Chrome一摸一樣。

而這,就是Firefox為我們帶來的東西。



現在,結果已經很明顯了。

    * Chrome認為:瀏覽器的界面應當儘可能簡單,一切都應該針對用戶行為來進行最大幅度的簡化。
    * Firefox認為:瀏覽器的界面應當儘可能靈活,一切都可以按照用戶的需求進行最大幅度的自定義。



究竟你喜歡的是簡單,還是按需定製呢?







再怎樣華麗的界面,最終也是依託在瀏覽器自身的功能上的。只有分析了核心的功能,才能夠更加深入的瞭解他們使用現在這樣的界面設計的真正目的。

所以在下篇中,我將會從核心的功能上去分析Chrome與Firefox的更多不同,敬請期待。

轉自wettuy's blog

創作回應

OLD 腐
完全看不懂 [e6]
2011-01-09 00:01:41

更多創作