Google的設計一向以簡(jiǎn)單著(zhù)稱(chēng)，讓頁(yè)面清爽優(yōu)雅地呈現，一方面節省了頁(yè)面載入的時(shí)間，減少用戶(hù)的等待，另一方面也減少了用戶(hù)在瀏覽頁(yè)面時(shí)的分心。然而，在這簡(jiǎn)單的設計背后，并不是設計師偷懶，而是更加靈敏、細致、輕便的交互體驗設計。Google+作為社交網(wǎng)絡(luò )的又一力作， 在繼承了公司著(zhù)名的十大設計準則下，在如何更輕、更快速、更人性化方面有了很大的突破。本文主要以社交網(wǎng)絡(luò )為例，分析總結出了六條讓web體驗更靈動(dòng)的設計方法，供大家參考。

1.圖形化的導航

社交網(wǎng)的信息十分繁雜，因此導航的引導就顯得至關(guān)重要。沒(méi)有公司比Google更大膽了，將導航的tab全部簡(jiǎn)化成icon，只有鼠標hover上去的時(shí)候才會(huì )顯示這個(gè)tab的注釋。顯然，這對新手用戶(hù)而言，有一定的學(xué)習門(mén)檻的，但是我們從中無(wú)不從中感受到了簡(jiǎn)潔的力量，圖形化導航讓整欄顯得干凈整潔，功能集中，切換方便。

縱觀(guān)國內外幾大主流社交網(wǎng)的導航，導航大多采用的是文字，雖然從功能上看一目了然，但是由于文字本身不夠簡(jiǎn)潔，排布起來(lái)有局限，那么只好在設計的時(shí)候，更要考慮功能的歸納分布以及優(yōu)先級展示，隱藏不常用的功能。

2.使用灰色按鈕

經(jīng)常做設計的人都知道，灰色按鈕代表著(zhù)是被禁用的功能，是不可點(diǎn)擊的。然而Google+卻大膽的使用了灰色按鈕，通過(guò)鼠標hover告訴用戶(hù)這是可點(diǎn)的。仔細想來(lái)，這用做以下兩個(gè)原因：一、平衡了頁(yè)面的配色。由于Google的logo主題色有四種，如果讓按鈕們默認展示原有的顏色，頁(yè)面會(huì )看起來(lái)很花，沒(méi)有重點(diǎn)。像這樣灰掉的處理，使選中的tab更加突出，也不會(huì )帶來(lái)干擾。二、按鈕由灰點(diǎn)變彩色的方式給人一種點(diǎn)亮圖標的暗示，增強了用戶(hù)點(diǎn)擊按鈕的欲望。

從圖標的發(fā)展趨勢來(lái)看，無(wú)論顏色還是形態(tài)都是朝著(zhù)簡(jiǎn)潔方向走的，過(guò)去花花綠綠的圖標已經(jīng)失去了它原有的標識感，純色的圖標應用起來(lái)會(huì )顯得更上流，更高端。更優(yōu)雅，更親切的科技感。

3.鼠標所到之處均有反饋

網(wǎng)頁(yè)上的大多數元素，在鼠標滑過(guò)的時(shí)候，都應該有其相應的反饋。無(wú)論是僅僅發(fā)生鼠標指針變化，還是出現下劃線(xiàn)，或是結合一些簡(jiǎn)單功能的操作和注釋來(lái)顯示。設計師在做靜態(tài)設計稿時(shí)，很容易忽略這些設計細節，但這正是一個(gè)產(chǎn)品體現良好交互性能的關(guān)鍵時(shí)刻。就好比和人交談，如果他對我的話(huà)語(yǔ)沒(méi)有任何反映，我也會(huì )減少對他訴說(shuō)的興趣，如果他時(shí)而點(diǎn)頭，時(shí)而微笑，時(shí)而贊許，那么我可能會(huì )有更多更有意思的事情告訴他。因此，哪怕僅僅是邊框的顏色變深了一些，也能表達這個(gè)頁(yè)面對用戶(hù)是友好的，而不是不理不睬的。

hover態(tài)是展示用戶(hù)在當前頁(yè)想知道的相關(guān)內容的最佳時(shí)機。例如鼠標劃到頭像時(shí)，會(huì )出現那個(gè)人的相關(guān)信息等。Hover態(tài)還可以對某一模塊有強引導的作用，例如Google會(huì )強調它的搜索功能。另外，還可以用于隱藏一些不常用的操作，例如刪除等。

4.簡(jiǎn)單任務(wù)在當前頁(yè)完成

這里最值得一提的是Google+加好友和分組的流程優(yōu)化。原本加好友和分組是兩個(gè)獨立的任務(wù)，分組是在對方同意加好友時(shí)才能進(jìn)行，由于Google+推出的是單向關(guān)系鏈，因此將分組可以提前到添加好友這一步做。原本加好友是需要點(diǎn)擊按鈕，如今只用hover上去就會(huì )出現分組框，大大降低了加好友和分組的操作門(mén)檻。用戶(hù)最少只要點(diǎn)擊一下即可完成兩步步驟。如今Face book等一些雙向關(guān)系鏈的社交網(wǎng)也開(kāi)始學(xué)習這種快速加好友和分組的方式。

5.feed實(shí)時(shí)滾屏更新

Feed就是我們的每天訂閱的新消息。相信大家對下面的小黃條都不陌生吧，國內大部分網(wǎng)站都是采用點(diǎn)擊小黃條來(lái)查看新的消息，而Google+是自動(dòng)滾屏的方式展示最新消息，并在左側出現一條藍豎線(xiàn)，表示是最新更新。Google的設計之所以顯得靈動(dòng)，還有一個(gè)重要的原因，在于它的這些狀態(tài)的改變都伴隨著(zhù)優(yōu)雅的動(dòng)畫(huà)，而不是赤裸裸的出現、消失。包括feed的評論和贊，都是實(shí)時(shí)更新，配上簡(jiǎn)單華麗的動(dòng)畫(huà)，簡(jiǎn)直就像在看現場(chǎng)直播。

6.即時(shí)的系統反饋

類(lèi)似上圖中的提示條在整個(gè)網(wǎng)站都是統一一致的，它們都是自動(dòng)出現，自動(dòng)消失，有的還肩負著(zhù)簡(jiǎn)單的操作，例如圖中的撤消等。有了這樣輕便的系統反饋，就不會(huì )再出現彈窗等很重的反饋方式，頁(yè)面的交互就顯得輕便流暢許多，無(wú)時(shí)無(wú)刻不在安撫著(zhù)用戶(hù)焦躁的情緒。

綜上所述，本文從靈敏輕便的角度，對Google+的體驗進(jìn)行分析，總結出以上六點(diǎn)讓web更輕便靈敏的設計方法，希望能給大家帶來(lái)一些參考。

作者：sharon

文章來(lái)源：騰訊CDC