向Google學習打造靈動的web體驗

　　Google的設計一向以簡單著稱，讓頁面清爽優雅地呈現，一方面節省了頁面載入的時間，減少用戶的等待，另一方面也減少了用戶在浏覽頁面時的分心。然而，在這簡單的設計背後，並不是設計師偷懶，而是更加靈敏、細致、輕便的交互體驗設計。Google+作為社交網絡的又一力作， 在繼承了公司著名的十大設計准則下，在如何更輕、更快速、更人性化方面有了很大的突破。本文主要以社交網絡為例，分析總結出了六條讓web體驗更靈動的設計方法，供大家參考。

　　1.圖形化的導航

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

　　縱觀國內外幾大主流社交網的導航，導航大多采用的是文字，雖然從功能上看一目了然，但是由於文字本身不夠簡潔，排布起來有局限，那麼只好在設計的時候，更要考慮功能的歸納分布以及優先級展示，隱藏不常用的功能。

　　2.使用灰色按鈕

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

　　從圖標的發展趨勢來看，無論顏色還是形態都是朝著簡潔方向走的，過去花花綠綠的圖標已經失去了它原有的標識感，純色的圖標應用起來會顯得更上流，更高端。更優雅，更親切的科技感。

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

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

　　hover態是展示用戶在當前頁想知道的相關內容的最佳時機。例如鼠標劃到頭像時，會出現那個人的相關信息等。Hover態還可以對某一模塊有強引導的作用，例如Google會強調它的搜索功能。另外，還可以用於隱藏一些不常用的操作，例如刪除等。

　　4.簡單任務在當前頁完成

　　這裡最值得一提的是Google+加好友和分組的流程優化。原本加好友和分組是兩個獨立的任務，分組是在對方同意加好友時才能進行，由於 Google+推出的是單向關系鏈，因此將分組可以提前到添加好友這一步做。原本加好友是需要點擊按鈕，如今只用hover上去就會出現分組框，大大降低了加好友和分組的操作門檻。用戶最少只要點擊一下即可完成兩步步驟。如今Face book等一些雙向關系鏈的社交網也開始學習這種快速加好友和分組的方式。

　　5.feed實時滾屏更新

　　Feed就是我們的每天訂閱的新消息。相信大家對下面的小黃條都不陌生吧，國內大部分網站都是采用點擊小黃條來查看新的消息，而Google+是自動滾屏的方式展示最新消息，並在左側出現一條藍豎線，表示是最新更新。Google的設計之所以顯得靈動，還有一個重要的原因，在於它的這些狀態的改變都伴隨著優雅的動畫，而不是赤裸裸的出現、消失。包括feed的評論和贊，都是實時更新，配上簡單華麗的動畫，簡直就像在看現場直播。

　　6.即時的系統反饋

　　類似上圖中的提示條在整個網站都是統一一致的，它們都是自動出現，自動消失，有的還肩負著簡單的操作，例如圖中的撤消等。有了這樣輕便的系統反饋，就不會再出現彈窗等很重的反饋方式，頁面的交互就顯得輕便流暢許多，無時無刻不在安撫著用戶焦躁的情緒。

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

　　作者：sharon

　　文章來源：騰訊CDC