Google的設計一向以簡單著稱，讓頁面清爽優雅地呈現，一方面節省了頁面載入的時間，減少用(yòng)戶的等待，另一方面也減少了用(yòng)戶在浏覽頁面時的分(fēn)心。然 而，在這簡單的設計背後，並不是設計師偷懶，而是更加靈敏、細緻、輕便的交互體驗設計。Google+作(zuò)爲社交網絡的又(yòu)一力作(zuò)， 在繼承了公(gōng)司著名(míng)的十大設計準則下，在如何更輕、更快速、更人性化方面有(yǒu)了很(hěn)大的突破。本文(wén)主要以社交網絡爲例，分(fēn)析總結出了六條讓web體驗更靈動的設 計方法，供大家參考。1.圖形化的導航
社交網的信息十分(fēn)繁雜，因此導航的引導就顯得至關重要。沒有(yǒu)公(gōng)司比Google更大膽了，將導航的tab全部簡化成icon，隻有(yǒu)鼠標hover上去的時 候才會顯示這個tab的注釋。顯然，這對新(xīn)手用(yòng)戶而言，有(yǒu)一定的學習門檻的，但是我們從中(zhōng)無不從中(zhōng)感受到了簡潔的力量，圖形化導航讓整欄顯得幹淨整潔，功 能(néng)集中(zhōng)，切換方便。
縱觀國內外幾大主流社交網的導航，導航大多(duō)采用(yòng)的是文(wén)字，雖然從功能(néng)上看一目了然，但是由于文(wén)字本身不夠簡潔，排布起來有(yǒu)局限，那麽隻好在設計的時候，更要考慮功能(néng)的歸納分(fēn)布以及優先級展示，隱藏不常用(yòng)的功能(néng)。
2.使用(yòng)灰色按鈕
經常做設計的人都知道，灰色按鈕代表著是被禁用(yòng)的功能(néng)，是不可(kě)點擊的。然而Google+卻大膽的使用(yòng)了灰色按鈕，通過鼠標hover告訴用(yòng)戶這是可(kě)點 的。仔細想來，這用(yòng)做以下兩個原因：一、平衡了頁面的配色。由于Google的logo主題色有(yǒu)四種，如果讓按鈕們默認展示原有(yǒu)的顔色，頁面會看起來很(hěn) 花(huā)，沒有(yǒu)重點。像這樣灰掉的處理(lǐ)，使選中(zhōng)的tab更加突出，也不會帶來幹擾。二、按鈕由灰點變彩色的方式給人一種點亮圖標的暗示，增強了用(yòng)戶點擊按鈕的欲 望。
從圖標的發展趨勢來看，無論顔色還是形態都是朝著簡潔方向走的，過去花(huā)花(huā)綠綠的圖標已經失去了它原有(yǒu)的標識感，純色的圖標應用(yòng)起來會顯得更上流，更高端。更優雅，更親切的科(kē)技(jì )感。
3.鼠標所到之處均有(yǒu)反饋
網頁上的大多(duō)數元素，在鼠標滑過的時候，都應該有(yǒu)其相應的反饋。無論是僅僅發生鼠標指針變化，還是出現下劃線，或是結合一些簡單功能(néng)的操作(zuò)和注釋來顯示。 設計師在做靜態設計稿時，很(hěn)容易忽略這些設計細節，但這正是一個産品體現良好交互性能(néng)的關鍵時刻。就好比和人交談，如果他(tā)對我的話語沒有(yǒu)任何反映，我也會 減少對他(tā)訴說的興趣，如果他(tā)時而點頭，時而微笑，時而贊許，那麽我可(kě)能(néng)會有(yǒu)更多(duō)更有(yǒu)意思的事情告訴他(tā)。因此，哪怕僅僅是邊框的顔色變深了一些，也能(néng)表達這 個頁面對用(yòng)戶是友好的，而不是不理(lǐ)不睬的。
hover態是展示用(yòng)戶在當前頁想知道的相關內容的最佳時機。例如鼠標劃到頭像時，會出現那個人的相關信息等。Hover態還可(kě)以對某一模塊有(yǒu)強引導的作(zuò)用(yòng)，例如Google會強調它的搜索功能(néng)。另外，還可(kě)以用(yòng)于隱藏一些不常用(yòng)的操作(zuò)，例如刪除等。
4.簡單任務在當前頁完成
這裏最值得一提的是Google+加好友和分(fēn)組的流程優化。原本加好友和分(fēn)組是兩個獨立的任務，分(fēn)組是在對方同意加好友時才能(néng)進行，由于Google+推 出的是單向關系鏈，因此將分(fēn)組可(kě)以提前到添加好友這一步做。原本加好友是需要點擊按鈕，如今隻用(yòng)hover上去就會出現分(fēn)組框，大大降低了加好友和分(fēn)組的 操作(zuò)門檻。用(yòng)戶最少隻要點擊一下即可(kě)完成兩步步驟。如今Face book等一些雙向關系鏈的社交網也開始學習這種快速加好友和分(fēn)組的方式。
5.feed實時滾屏更新(xīn)
Feed就是我們的每天訂閱的新(xīn)消息。相信大家對下面的小(xiǎo)黃條都不陌生吧，國內大部分(fēn)網站都是采用(yòng)點擊小(xiǎo)黃條來查看新(xīn)的消息，而Google+是自動滾屏 的方式展示最新(xīn)消息，並在左側出現一條藍豎線，表示是最新(xīn)更新(xīn)。Google的設計之所以顯得靈動，還有(yǒu)一個重要的原因，在于它的這些狀態的改變都伴隨著 優雅的動畫，而不是赤裸裸的出現、消失。包括feed的評論和贊，都是實時更新(xīn)，配上簡單華麗的動畫，簡直就像在看現場直播。
類似上圖中(zhōng)的提示條在整個網站都是統一一緻的，它們都是自動出現，自動消失，有(yǒu)的還肩負著簡單的操作(zuò)，例如圖中(zhōng)的撤消等。有(yǒu)了這樣輕便的系統反饋，就不會再出現彈窗等很(hěn)重的反饋方式，頁面的交互就顯得輕便流暢許多(duō)，無時無刻不在安(ān)撫著用(yòng)戶焦躁的情緒。
綜上所述，本文(wén)從靈敏輕便的角度，對Google+的體驗進行分(fēn)析，總結出以上六點讓web更輕便靈敏的設計方法，希望能(néng)給大家帶來一些參考。
