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

發表於2012-02-11

來源:騰訊CDC

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

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

1.圖形化的導航

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

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

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

2.使用灰色按鈕

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

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

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

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

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

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

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

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

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

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

5.feed實時滾屏更新

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

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

6.即時的系統反饋

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

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

相關文章