1.瀏覽器Tab欄，在Chrome出來之前絕大部分瀏覽器的Tab欄均放置在地欄下方(IE那會(huì)兒連Tab欄都木有)，初見Chrome時(shí)很詫異它的Tab欄設(shè)計(jì)，位于地址欄上方以梯形的樣式出現(xiàn)，視覺印象很深刻，第一印象(Blink)就與其它瀏覽器形成了區(qū)別。

　　當(dāng)最大化Chrome并進(jìn)行瀏覽操作時(shí)，總算理解了為什么Chrome的設(shè)計(jì)為什么要將Tab欄放置在地址欄的上方了。在Windows下，用戶將Chrome最大化后，它的邊框?qū)⑾?，Tab欄就處于整個(gè)屏幕最上面一行的位置了。為什么這樣Tab欄的設(shè)計(jì)能夠Don't make user think呢?先介紹一個(gè)交互理論的常識(shí)--Fitts定律，該定律指的是：

　　使用指點(diǎn)設(shè)備到達(dá)一個(gè)目標(biāo)的時(shí)間與兩個(gè)因素有關(guān)：

　　1.設(shè)備當(dāng)前位置和目標(biāo)位置的距離;

　　2.目標(biāo)的大小。位于頂部的Tab欄其實(shí)是對(duì)Fitts定律的靈活運(yùn)用，由于光標(biāo)不可能跑出屏幕以外，因此用戶盡可以隨便將光標(biāo)向上移動(dòng)，光標(biāo)肯定位于Tab欄上(Tab欄呈條狀展現(xiàn)更易被選中)，這降低了光標(biāo)指向的難度，節(jié)約了用戶時(shí)間。我們可以看一個(gè)更有名的例子，Apple的應(yīng)用程序menu bar與Windows的應(yīng)用程序menu bar對(duì)比，Windows一直以來的UI設(shè)計(jì)都是把menu bar放在應(yīng)用程序的title bar下面，而OSX採取完全不同的設(shè)計(jì)，把menu bar固定在螢?zāi)蛔铐敹?注意下圖紅色框起來的部分)。一般人對(duì)這兩種設(shè)計(jì)沒有太多觀感，但當(dāng)我們應(yīng)用Fitts定律后，會(huì)發(fā)現(xiàn)OSX把menu bar放在屏幕最頂端，雖然移動(dòng)距離變長了，但目標(biāo)的大小也跟著變成了“無限大”。

　　再來說Tab欄的另一個(gè)設(shè)計(jì)，用戶在瀏覽窗口打開過多，需要關(guān)閉的情況下，Chrome對(duì)Tab進(jìn)行了一個(gè)很人性化的設(shè)計(jì) -- Tab自動(dòng)移動(dòng)至當(dāng)前鼠標(biāo)位置。相信許多Chrome的用戶對(duì)此應(yīng)深有感觸吧，當(dāng)用戶關(guān)閉Tab欄時(shí)，Tab會(huì)從右向左移動(dòng)，用戶從最右側(cè)的Tab欄開始關(guān)閉，Tab會(huì)從左向右關(guān)閉，并且在等待一段時(shí)間用戶沒有進(jìn)行關(guān)閉操作后，Tab才會(huì)調(diào)整寬度(以保證Tab的關(guān)閉icon在用戶操作期間一直在鼠標(biāo)下方)，細(xì)節(jié)啊，這些細(xì)節(jié)都亮瞎了我的雙眼。導(dǎo)致用戶在進(jìn)行連續(xù)多個(gè)Tab的關(guān)閉時(shí)連鼠標(biāo)都不用移動(dòng)，只需要點(diǎn)擊、點(diǎn)擊、點(diǎn)擊......Don't make me think

　　2.ToolBar，簡潔、極端的簡潔，剛安裝好的瀏覽器Toolbar簡潔我只能輸入地址。Toolbar上的列出用戶最需要的功能：后退、前進(jìn)、刷新、輸入框、設(shè)置，只有5項(xiàng)，數(shù)量上屬于短期記憶的能力范圍內(nèi)，減少了用戶的認(rèn)知負(fù)擔(dān)，此時(shí)用戶關(guān)注點(diǎn)只在瀏覽本身上，幾乎不需要對(duì)瀏覽器進(jìn)行額外的學(xué)習(xí)。

　　3.輸入框，將同樣具有輸入屬性的地址欄與搜索框進(jìn)行融合，導(dǎo)致這個(gè)輸入框成為一個(gè)很復(fù)雜的系統(tǒng)，僅在輸入部分這個(gè)框就能夠輸入地址(廢話)、搜索本地歷史、搜索本地收藏、搜索Chrome插件、引用其它搜索引擎......Chrome將這些有機(jī)的融合在一起，用戶需要做的只是輸入，結(jié)果已經(jīng)列好了。Chrome試圖簡化用戶在到達(dá)瀏覽頁面之前的所有操作，舉個(gè)小例子吧，用戶輸入http://zhihu.com進(jìn)入知乎網(wǎng)站，下次用戶再試圖進(jìn)入輸入時(shí)，從用戶輸入第一字母 Z 時(shí)，Chrome已自動(dòng)幫用戶進(jìn)行了補(bǔ)全(目前僅支持網(wǎng)址補(bǔ)全，而且是用戶瀏覽過的網(wǎng)站，這個(gè)設(shè)定很好，細(xì)節(jié)不表述自己思考吧)，接下來就看用戶采取何種動(dòng)作，回車鍵(打開網(wǎng)頁)或Tab鍵。

　　個(gè)人認(rèn)為，Chrome的輸入框還可以針對(duì)中文使用習(xí)慣進(jìn)行再深一層次的設(shè)計(jì)，能夠使輸入框更優(yōu)化。

　　4.后臺(tái)同步，這個(gè)是神一樣的功能，近乎所有信息均可進(jìn)行同步，看下圖設(shè)置當(dāng)中的選項(xiàng)就可了解(當(dāng)然，這些設(shè)置項(xiàng)用戶都不用去管，默認(rèn)同步就好了)，保證多平臺(tái)、多端在某一程度體驗(yàn)上的一致，這功能設(shè)計(jì)之初就是為了減少用戶重復(fù)性的操作及設(shè)置。

　　5.Loading，這個(gè)放在最后吧，很少有人注意到Loading，也就是我們稱之的進(jìn)度條，因?yàn)樵?jīng)有段時(shí)間我希望能夠從非技術(shù)角度解釋Chrome速度為什么快，讓我Chrome的進(jìn)度條有了一定的了解。當(dāng)頁面進(jìn)行l(wèi)oading時(shí)，Tab左側(cè)有個(gè)不斷滾動(dòng)的四分之一圓的小環(huán)，最初是以逆時(shí)針方向緩慢轉(zhuǎn)動(dòng)，這個(gè)時(shí)候的Loading狀態(tài)可能是解析DNS，并嘗試與服務(wù)器進(jìn)行連接，當(dāng)連接成功開始Loading服務(wù)器上的數(shù)據(jù)時(shí)，小圓環(huán)以順時(shí)針快速轉(zhuǎn)動(dòng)(看下圖)。這樣的設(shè)計(jì)有效有讓用戶明確的知道了目前Loading的狀態(tài)，并對(duì)結(jié)果有一個(gè)直觀的預(yù)期(一直逆時(shí)針用戶就可以果斷關(guān)閉網(wǎng)頁了)。同時(shí)，這樣的設(shè)計(jì)讓我感覺在加載服務(wù)器數(shù)據(jù)時(shí)更快(有了逆時(shí)針緩慢的對(duì)比)，并且情感上讓我聯(lián)想起小時(shí)玩過的后拉式小汽車，往后拉動(dòng)汽車集蓄動(dòng)能，放手后車輪就快速的向前奔跑 ^_^，這都是Chrome設(shè)計(jì)者對(duì)細(xì)節(jié)的把握，簡單的旋轉(zhuǎn)被設(shè)計(jì)者賦予了完全不同的含義，就算用戶不明白技術(shù)細(xì)節(jié)，從動(dòng)態(tài)的顯示上也能了解一個(gè)大概。

　　6.ctrl+F搜索的時(shí)候，如果當(dāng)前高亮的文字被搜索bar檔住了，搜索bar會(huì)移開!這個(gè)細(xì)節(jié)太贊了!!

　　最后在網(wǎng)上看到一張有意思的圖片,我想當(dāng)你用了chrome瀏覽器之后,你應(yīng)該不會(huì)在想用其他瀏覽器了。

最新評(píng)論