標題:字體:微軟雅黑粗體字號:32-36pt顏色:主題藍色副標題:字體:微軟雅黑字號:24pt顏色:主題灰色網頁設計：從界面布局到視覺表現(xiàn)基礎篇界面交互篇視覺表現(xiàn)篇綜合案例篇余蘭亭標題:網頁設計：從界面布局到視覺表現(xiàn)基礎篇界面交互篇視覺表現(xiàn)界面交互篇用戶體驗研究信息架構設計界面與布局界面交互篇用戶體驗研究信息架構設計界面與布局3.用戶體驗研究

3.1以用戶為中心的設計

3.2用戶與網站3.3案例——從用戶身上尋找需求【登錄界面】3.3案例——從用戶身上尋找需3.1.1以用戶為中心的設計JesseJamesGarrett在《用戶體驗要素：以用戶為中心的產品設計》中將用戶體驗由抽象到具體分為五個層次（見圖3.1）：戰(zhàn)略層（產品的目標）、范圍層（功能組合、信息內容的詳細描述）、結構層（信息空間中內容元素的分布）、框架層（用戶如何與產品功能進行交互）、表現(xiàn)層（產品的外觀設計）。

圖3.1JesseJamesGarrett將用戶體驗分成的五個層次3.1以用戶為中心的設計圖3.1JesseJamesGarrett3.1.2以用戶為中心的研究方法

以用戶為中心的設計就強調用戶體驗在整個產品設計與開發(fā)中的必要性。以用戶為中心的方法適用于網頁設計生命周期的各個階段，不管是需求挖掘還是設計評估，都需要與用戶打交道。在此，網頁設計的流程概括起來可以分為四個階段:圖3.2網頁設計的流程的四個階段3.1.2以用戶為中心的研究方法以用戶為中心的

是以書面形式向特定人群提出問題，并要求被訪者以書面或口頭形式回答來進行資料搜集的一種方法。在新媒體時代下，問卷調查的傳播方式也更豐富化，如電子郵件、微信傳播等。用戶研究1）問卷調查。2）訪談調研。3）數(shù)據分析。4）人物角色。5）故事板。6）卡片分類。7）眼動測試。8）焦點小組。9）可用性測試。圖3.3問卷調查是以書面形式向特定人群提出問題，并要求被訪者以書面或口用戶研究1）問卷調查2）訪談調研3）數(shù)據分析。4）人物角色。5）故事板。6）卡片分類。7）眼動測試。8）焦點小組。9）可用性測試。在訪談中可以與用戶有更長時間、更深入的交流，通過面對面溝通、電話等方式都可以與用戶直接進行交流。訪談調研法一般在調查對象較少的情況下采用，因此常與問卷調查法、可用性測試法等其他方法結合使用。用戶研究1）問卷調查在訪談中可以與用戶有更長時間、更深入的交用戶研究1）問卷調查2）訪談調研3）數(shù)據分析4）人物角色。5）故事板。6）卡片分類。7）眼動測試。8）焦點小組。9）可用性測試。數(shù)據分析是用適當?shù)慕y(tǒng)計分析方法對收集來的大量數(shù)據進行分析，將它們加以匯總、理解并消化，以求最大化地開發(fā)數(shù)據的功能，發(fā)揮數(shù)據的作用，是為了提取有用信息和形成結論而對數(shù)據加以詳細研究和概括總結的過程。在數(shù)據分析中了解用戶的心智模型（mentalmodel）、使用工具、語言描述、使用方法、目標、價值觀從而徹底滿足用戶需要。用戶研究1）問卷調查數(shù)據分析是用適當?shù)慕y(tǒng)計分析方法對收集來的用戶研究1）問卷調查2）訪談調研3）數(shù)據分析4）人物角色5）故事板。6）卡片分類。7）眼動測試。8）焦點小組。9）可用性測試。物角色并不是一個平均的用戶，也不是一個真正存在的用戶，而是來源于我們觀察到的真實的用戶資料（特征、行為、需求）的一個真實用戶的綜合原型。觀察方式為數(shù)據分析、問卷調查、訪談調研等。為了人物角色更為生動，它常常結合卡片分類法結合起來確定用戶群的主次（見圖3.4）。圖3.4人物角色結合卡片分類的應用用戶研究1）問卷調查物角色并不是一個平均的用戶，也不是一個真用戶研究1）問卷調查2）訪談調研3）數(shù)據分析4）人物角色5）故事板6）卡片分類。7）眼動測試。8）焦點小組。9）可用性測試。

故事板是運用圖片和文字的視覺形式將人物角色放置到某個場景中，在網頁設計中，通過講故事的方法讓設計師在特定產品使用情境下全面理解用戶和網站之間的交互關系。

故事板需要使用簡單的語言描述人物角色、情境及用戶使用情景，盡量避免不要給出具體的用戶行為和交互動作。用戶研究1）問卷調查故事板是運用圖片和文字的視覺形式將用戶研究1）問卷調查2）訪談調研3）數(shù)據分析4）人物角色5）故事板6）卡片分類7）眼動測試。8）焦點小組。9）可用性測試。

卡片分類是一種揭示用戶如何組合信息、如何分類和如何關聯(lián)概念的方法。通過將功能寫在一張張的卡片上讓用戶進行分類，從而了解參與者的心理模型。常常用于設計一個新網站或重新設計網站，也可能是一個已有網站的新功能的信息架構上。用戶研究1）問卷調查卡片分類是一種揭示用戶如何組合信息用戶研究1）問卷調查2）訪談調研3）數(shù)據分析4）人物角色5）故事板6）卡片分類7）眼動測試8）焦點小組。9）可用性測試。

眼動儀（見圖3.6，圖3.7）通過記錄角膜對紅外線反射路徑的變化，計算眼睛的運動過程，并推算眼睛的注視位置。通過將定量指標與圖表相結合，可以有效分析用戶眼球運動的規(guī)律，尤其適用于評估設計效果。

眼動測試就是通過眼動儀記錄用戶瀏覽頁面時視線的移動過程及對不同板塊的關注度。通過眼動測試可以了解用戶的瀏覽行為，評估設計效果。

圖3.6眼動儀圖3.7眼動熱力圖與視線軌跡圖用戶研究1）問卷調查眼動儀（見圖3.6，圖3.7）通過用戶研究1）問卷調查2）訪談調研3）數(shù)據分析4）人物角色5）故事板6）卡片分類7）眼動測試8）焦點小組9）可用性測試

焦點小組比較適合非敏感或參與者關系較弱、不以獲取偏個人化信息為目的地調研，否則仍然建議通過深度訪談了解用戶。執(zhí)行時，要有一個討論主題，對主持人和用戶的選擇都需謹慎。主持人不僅需要把控討論的方向，也需要妥善照顧到每一位參與者。用戶研究1）問卷調查焦點小組比較適合非敏感或參與者關系用戶研究1）問卷調查2）訪談調研3）數(shù)據分析4）人物角色5）故事板6）卡片分類7）眼動測試8）焦點小組9）可用性測試

可用性測試是針對界面原型的具體性進行結構化訪談。在發(fā)布網站之前，我們可以根據測試目標設計一系列操作任務，通過測試5～10名用戶完成這些任務的過程來觀察用戶實際如何使用產品。用戶研究1）問卷調查可用性測試是針對界面原型的具體性進行3.2用戶需求研究3.2.1了解你的網站用戶在網站使用的情境中遇到的問題是我們要關注的重點。3.2用戶需求研究3.2.2關注你的用戶用戶的分類方式：一是是基于運營的分類方式，根據使用該網站的人口學信息，如用戶的年齡、性別、愛好、學歷、收入水平、計算機水平、職業(yè)、地域、網齡等，其中的每一條都可以成為一個網站用戶分類的方式。如知乎網就以用戶的興趣來分類，通過用戶關注的話題來定制化推送信息。

圖3.8知乎網3.2.2關注你的用戶用戶的分類方式：

二是基于產品的分類一般是根據用戶的需求與行為進行，如重慶大學學位與研究生教育管理信息系統(tǒng)將用戶分為研究生導師、學生、工作人員、學院用戶、任課教師、答辯秘書、分委會秘書及導師秘書八類用戶，圖3.9重慶大學學位與研究生教育管理信息系統(tǒng)

再或是有些電子商務類網站就將用戶分為買家用戶、賣家用戶等，螞蟻短租網就是將用戶分成租戶用戶、房東用戶及后臺管理員這三種。

圖3.10螞蟻短租網再或是有些電子商務類網站就將用戶分為買家用戶、賣家用戶等，螞3.3案例——從用戶身上尋找需求【登錄界面】詳情請參考微課視頻。3.3案例——從用戶身上尋找需求【登錄界面】詳情請參考微課視網頁設計【交互篇】-1課件標題:字體:微軟雅黑粗體字號:32-36pt顏色:主題藍色副標題:字體:微軟雅黑字號:24pt顏色:主題灰色網頁設計：從界面布局到視覺表現(xiàn)基礎篇界面交互篇視覺表現(xiàn)篇綜合案例篇余蘭亭標題:網頁設計：從界面布局到視覺表現(xiàn)基礎篇界面交互篇視覺表現(xiàn)界面交互篇用戶體驗研究信息架構設計界面與布局界面交互篇用戶體驗研究信息架構設計界面與布局3.用戶體驗研究

3.1以用戶為中心的設計

3.2用戶與網站3.3案例——從用戶身上尋找需求【登錄界面】3.3案例——從用戶身上尋找需3.1.1以用戶為中心的設計JesseJamesGarrett在《用戶體驗要素：以用戶為中心的產品設計》中將用戶體驗由抽象到具體分為五個層次（見圖3.1）：戰(zhàn)略層（產品的目標）、范圍層（功能組合、信息內容的詳細描述）、結構層（信息空間中內容元素的分布）、框架層（用戶如何與產品功能進行交互）、表現(xiàn)層（產品的外觀設計）。

圖3.1JesseJamesGarrett將用戶體驗分成的五個層次3.1以用戶為中心的設計圖3.1JesseJamesGarrett3.1.2以用戶為中心的研究方法

以用戶為中心的設計就強調用戶體驗在整個產品設計與開發(fā)中的必要性。以用戶為中心的方法適用于網頁設計生命周期的各個階段，不管是需求挖掘還是設計評估，都需要與用戶打交道。在此，網頁設計的流程概括起來可以分為四個階段:圖3.2網頁設計的流程的四個階段3.1.2以用戶為中心的研究方法以用戶為中心的

是以書面形式向特定人群提出問題，并要求被訪者以書面或口頭形式回答來進行資料搜集的一種方法。在新媒體時代下，問卷調查的傳播方式也更豐富化，如電子郵件、微信傳播等。用戶研究1）問卷調查。2）訪談調研。3）數(shù)據分析。4）人物角色。5）故事板。6）卡片分類。7）眼動測試。8）焦點小組。9）可用性測試。圖3.3問卷調查是以書面形式向特定人群提出問題，并要求被訪者以書面或口用戶研究1）問卷調查2）訪談調研3）數(shù)據分析。4）人物角色。5）故事板。6）卡片分類。7）眼動測試。8）焦點小組。9）可用性測試。在訪談中可以與用戶有更長時間、更深入的交流，通過面對面溝通、電話等方式都可以與用戶直接進行交流。訪談調研法一般在調查對象較少的情況下采用，因此常與問卷調查法、可用性測試法等其他方法結合使用。用戶研究1）問卷調查在訪談中可以與用戶有更長時間、更深入的交用戶研究1）問卷調查2）訪談調研3）數(shù)據分析4）人物角色。5）故事板。6）卡片分類。7）眼動測試。8）焦點小組。9）可用性測試。數(shù)據分析是用適當?shù)慕y(tǒng)計分析方法對收集來的大量數(shù)據進行分析，將它們加以匯總、理解并消化，以求最大化地開發(fā)數(shù)據的功能，發(fā)揮數(shù)據的作用，是為了提取有用信息和形成結論而對數(shù)據加以詳細研究和概括總結的過程。在數(shù)據分析中了解用戶的心智模型（mentalmodel）、使用工具、語言描述、使用方法、目標、價值觀從而徹底滿足用戶需要。用戶研究1）問卷調查數(shù)據分析是用適當?shù)慕y(tǒng)計分析方法對收集來的用戶研究1）問卷調查2）訪談調研3）數(shù)據分析4）人物角色5）故事板。6）卡片分類。7）眼動測試。8）焦點小組。9）可用性測試。物角色并不是一個平均的用戶，也不是一個真正存在的用戶，而是來源于我們觀察到的真實的用戶資料（特征、行為、需求）的一個真實用戶的綜合原型。觀察方式為數(shù)據分析、問卷調查、訪談調研等。為了人物角色更為生動，它常常結合卡片分類法結合起來確定用戶群的主次（見圖3.4）。圖3.4人物角色結合卡片分類的應用用戶研究1）問卷調查物角色并不是一個平均的用戶，也不是一個真用戶研究1）問卷調查2）訪談調研3）數(shù)據分析4）人物角色5）故事板6）卡片分類。7）眼動測試。8）焦點小組。9）可用性測試。

故事板是運用圖片和文字的視覺形式將人物角色放置到某個場景中，在網頁設計中，通過講故事的方法讓設計師在特定產品使用情境下全面理解用戶和網站之間的交互關系。

故事板需要使用簡單的語言描述人物角色、情境及用戶使用情景，盡量避免不要給出具體的用戶行為和交互動作。用戶研究1）問卷調查故事板是運用圖片和文字的視覺形式將用戶研究1）問卷調查2）訪談調研3）數(shù)據分析4）人物角色5）故事板6）卡片分類7）眼動測試。8）焦點小組。9）可用性測試。

卡片分類是一種揭示用戶如何組合信息、如何分類和如何關聯(lián)概念的方法。通過將功能寫在一張張的卡片上讓用戶進行分類，從而了解參與者的心理模型。常常用于設計一個新網站或重新設計網站，也可能是一個已有網站的新功能的信息架構上。用戶研究1）問卷調查卡片分類是一種揭示用戶如何組合信息用戶研究1）問卷調查2）訪談調研3）數(shù)據分析4）人物角色5）故事板6）卡片分類7）眼動測試8）焦點小組。9）可用性測試。

眼動儀（見圖3.6，圖3.7）通過記錄角膜對紅外線反射路徑的變化，計算眼睛的運動過程，并推算眼睛的注視位置。通過將定量指標與圖表相結合，可以有效分析用戶眼球運動的規(guī)律，尤其適用于評估設計效果。

眼動測試就是通過眼動儀記錄用戶瀏覽頁面時視線的移動過程及對不同板塊的關注度。通過眼動測試可以了解用戶的瀏覽行為，評估設計效果。

圖3.6眼動儀圖3.7眼動熱力圖與視線軌跡圖用戶研究1）問卷調查眼動儀（見圖3.6，圖3.7）通過用戶研究1）問卷調查2）訪談調研3）數(shù)據分析4）人物角色5）故事板6）卡片分類7）眼動測試8）焦點小組9）可用性測試

焦點小組比較適合非敏感或參與者關系較弱、不以獲取偏個人化信息為目的地調研，否則仍然建議通過深度訪談了解用戶。執(zhí)行時，要有一個討論主題，對主持人和用戶的選擇都需謹慎。主持人不僅需要把控討論的方向，也需要妥善照顧到每一位參與者。用戶研究1）問卷調查焦點小組比較適合非敏感或參與者關系用戶研究1）問卷調查2）訪談調研3）數(shù)據分析4）人物角色5）故事板6）卡片分類7）眼動測試8）焦點小組9）可用性測試

可用性測試是針對界面原型的具體性進行結構化訪談。在發(fā)布網站之前，我們可以根據測試目標設計一系列操作任務，通過測試5～10名用戶完成這些任務的過程來觀察用戶實際如何使用產品。用戶研究1）問卷調查可用性測試是針對界面原型的具體性進行3.2用戶需求研究3.2.1了解你的網站用戶在網站使用的情境中遇到的問題是我們要關注的重點。3.2用戶需求研究3.2.2關注你的用戶用戶的分類方式：一是是基于運營的