向GOOGLE學習如何創造優秀的用戶體驗

                      meng發表于 2014/07/17
                      作為網站中的領頭人,谷歌是第一個被公認為全球最大的搜索引擎,在全球范圍內擁有無數的用戶,是什么讓谷歌擁有如此眾多忠實的粉絲?小編個人認為,谷歌的簡單大氣的設計一定出力不少。簡單清晰的頁面不但減少了載入時間,而且減少了用戶再瀏覽頁面的分心。然而,表面看似簡單的設計卻蘊含了更加敏捷,迅速的交互設計。
                      一、圖形化的導航
                       
                      社交網的信息十分繁雜,因此導航的引導就顯得至關重要。沒有公司比Google更大膽了,將導航的tab全部簡化成icon,只有鼠標hover上去的時候才會顯示這個tab的注釋。顯然,這對新手用戶而言,有一定的學習門檻的,但是我們從中無不從中感受到了簡潔的力量,圖形化導航讓整欄顯得干凈整潔,功能集中,切換方便。
                      飄柔般順滑!向Google學習打造靈動的web體驗
                      二、使用灰色按鈕
                      經常做設計的人都知道,灰色按鈕代表著是被禁用的功能,是不可點擊的。然而Google+卻大膽的使用了灰色按鈕,通過鼠標hover告訴用戶這是可點的。仔細想來,這用做以下兩個原因:一、平衡了頁面的配色。由于Google的logo主題色有四種,如果讓按鈕們默認展示原有的顏色,頁面會看起來很花,沒有重點。像這樣灰掉的處理,使選中的tab更加突出,也不會帶來干擾。二、按鈕由灰點變彩色的方式給人一種點亮圖標的暗示,增強了用戶點擊按鈕的欲望。
                      飄柔般順滑!向Google學習打造靈動的web體驗
                      從圖標的發展趨勢來看,無論顏色還是形態都是朝著簡潔方向走的,過去花花綠綠的圖標已經失去了它原有的標識感,純色的圖標應用起來會顯得更上流,更高端。
                      三、鼠標所到之處均有反饋
                      網頁上的大多數元素,在鼠標滑過的時候,都應該有其相應的反饋。無論是僅僅發生鼠標指針變化,還是出現下劃線,或是結合一些簡單功能的操作和注釋來顯示。設計師在做靜態設計稿時,很容易忽略這些設計細節,但這正是一個產品體現良好交互性能的關鍵時刻。就好比和人交談,如果他對我的話語沒有任何反映,我也會減少對他訴說的興趣,如果他時而點頭,時而微笑,時而贊許,那么我可能會有更多更有意思的事情告訴他。因此,哪怕僅僅是邊框的顏色變深了一些,也能表達這個頁面對用戶是友好的,而不是不理不睬的。
                      Hover態是展示用戶在當前頁想知道的相關內容的最佳時機。例如鼠標劃到頭像時,會出現那個人的相關信息等。Hover態還可以對某一模塊有強引導的作用,例如Google會強調它的搜索功能。另外,還可以用于隱藏一些不常用的操作,例如刪除等。
                      飄柔般順滑!向Google學習打造靈動的web體驗
                      四、簡單任務在當前頁完成
                      這里最值得一提的是Google+加好友和分組的流程優化。原本加好友和分組是兩個獨立的任務,分組是在對方同意加好友時才能進行,由于Google+推出的是單向關系鏈,因此將分組可以提前到添加好友這一步做。原本加好友是需要點擊按鈕,如今只用hover上去就會出現分組框,大大降低了加好友和分組的操作門檻。用戶最少只要點擊一下即可完成兩步步驟。如今Face book等一些雙向關系鏈的社交網也開始學習這種快速加好???和分組的方式。
                      飄柔般順滑!向Google學習打造靈動的web體驗
                      五、Feed實時滾屏更新
                      Feed就是我們的每天訂閱的新消息。相信大家對下面的小黃條都不陌生吧,國內大部分網站都是采用點擊小黃條來查看新的消息,而Google+是自動滾屏的方式展示最新消息,并在左側出現一條藍豎線,表示是最新更新。Google的設計之所以顯得靈動,還有一個重要的原因,在于它的這些狀態的改變都伴隨著優雅的動畫,而不是赤裸裸的出現、消失。包括feed的評論和贊,都是實時更新,配上簡單華麗的動畫,簡直就像在看現場直播。
                      飄柔般順滑!向Google學習打造靈動的web體驗
                      六、即時的系統反饋
                      飄柔般順滑!向Google學習打造靈動的web體驗
                      類似上圖中的提示條在整個網站都是統一一致的,它們都是自動出現,自動消失,有的還肩負著簡單的操作,例如圖中的撤消等。有了這樣輕便的系統反饋,就不會再出現彈窗等很重的反饋方式,頁面的交互就顯得輕便流暢許多,無時無刻不在安撫著用戶焦躁的情緒。
                      綜上所述,本文從靈敏輕便的角度,對Google+的體驗進行分析,總結出以上六點讓web更輕便靈敏的設計方法,希望能給大家帶來一些參考。
                      ©2010-2014 秦皇島易博網絡科技有限公司 我們專注于微信開發 | 網站建設 冀ICP備12004938號-3
                      国产自产区44页