網站用戶體驗設計：將信息有效傳達給用戶

作者：織晶客服部發布于：2015/1/14 8:45:26 點擊量：來源：aliued

作為視覺設計師，我們的作用除了最基本的滿足用戶審美需求，還會有品牌傳達，信息傳達，功能傳達等，其中想要信息有效的傳達給用戶，需要我們建立信息層級，而不是一股腦的丟給用戶自己理解，要做到這點有哪些視覺方法，這些方法的背后是否有理論依據，是本文的主題。

　　首先看下面兩張圖，左圖為相機拍攝的效果，右圖為人眼不移動時看到的效果，可以發現人眼對信息的獲取并不是一次性完成的，它不能同時產生多個焦點從而把視線停留在更多的地方，設計師需要考慮的是讓用戶通過眼球移動，按照一定的順序獲取信息，幫助獲取和理解的過程高效自然。

　　這個設計方法希望解決的主要是兩個問題：

　　1、用戶獲取和理解信息的效率

　　建立良好的信息層級，能讓用戶在有限的時間里，快速獲取和理解有用、感興趣的信息，并產生下一步行為;

　　2、設計師的專業性

　　設計師有意識的分析信息優先級，了解哪些視覺表現手法可以建立信息層級及每一種方法背后的理論依據，不僅僅憑感覺做設計。

　　一、前期了解&分析

　　在開始設計前，除了對項目本身的背景目標有所了解外，視覺設計師針對具體的頁面也需要了解一些內容以幫助后面的設計有指導方向，包括頁面定位、氛圍營造、信息優先級和用戶核心行為。

　　2.1、位置

　　位置是在設計開始就會考慮的元素，人眼觀看事物時，總會遵循一些特定的規律，設計上遵循這些規律，能幫助用戶更容易、更快捷地看到或理解眼前的事物。其中有兩條規律和位置設計元素有關：

　　1)當眼睛偏離視中心時，在偏離距離相等的情況下，人眼對左上的觀察最優，依次為右上，左下，而右下最差。因此，左上部和上中部被稱為“最佳視域”。例如，網站logo、商品名、主題等重要信息，一般放在最佳視域內。當然，這種劃分也受文化因素的影響，比如阿拉伯文字是從右向左書寫的，這時最佳視域就是右上部。下圖是摘自摘自張帆羅琦宮曉東的《網頁界面設計藝術教程》對一個屏幕劃分后，用戶對不同位置不同的關注度差別：

　　2)第二條規律是眼睛沿水平方向運動比沿垂直方向運動快而且不易疲勞，一般先看到水平方向的物體，后看到垂直方向的物體。如下圖所示，左右的關注度差別要小于上下關注度差別，如想要體現并列的關系，左右排列會更合適;而如果要拉開差距，僅通過位置來實現，上下排列更容易達到目標。

　　舉個例子：如下圖時代周刊網站首頁，左側大圖是當天的焦點新聞，在信息層級上為一級信息，視覺表現上不僅面積大、內容形式用大圖，位置也放在優勢區域，可能98%的用戶會先關注到這個區域;

　　2.2、內容形式

　　確定了模塊的位置、大小和距離關系后，我們會繼續考慮內容的形式包括視頻、圖片、文字等，這里主要講我們經常使用的圖形和文字;相比起文字，圖片在抓住用戶眼球這一點上是功不可沒的，同時還能使用戶在短時間內形成形象記憶，從視覺層級上，人眼一般會先關注圖后關注文字。但僅僅這點還不夠，通過圖片抓取用戶眼球后引導視線到下一個關注點，是設計上更多會考慮的點，概括有以下表現手法：

　　1)方向性引導

　　圖片中的形象有些具有明顯的方向性，如人眼注視的方向、手勢所指的方向、物體運動方向、光照方向等，這些特征會引導人眼視線朝著設定的方向運動，從而達到視覺層級有主有次。

　　下圖假設中間的人物首先吸引了人的視線，為第一層級的信息，由于人眼注視方向為右側，使得用戶關注的下一個目標會轉向“coder”文字，為第二層級的信息。