用戶體驗設(shè)計的范圍很廣，因工作所需要，涉及的互聯(lián)網(wǎng)產(chǎn)品設(shè)計比較多，區(qū)別于傳統(tǒng)軟件產(chǎn)品而言，互聯(lián)網(wǎng)產(chǎn)品用戶體驗設(shè)計有自己的一套設(shè)計規(guī)范及設(shè)計過程。本篇對此問題做一個閱讀小結(jié)，有些內(nèi)容比較晦澀，可以飄過：）但對初識用戶體驗設(shè)計的朋友，認真看完本文，對你一定會有幫助的。

一、用戶體驗設(shè)計怎么做？ 

1、概念證明（設(shè)計的構(gòu)思過程）
根據(jù)市場調(diào)研和研究設(shè)想目標，論證可行的商業(yè)模式。需確定三項內(nèi)容：用戶需要的內(nèi)容、用戶需要的功能、用戶角色的分類 

2、設(shè)計探索（設(shè)計的規(guī)劃過程）
把抽象的商業(yè)需求，轉(zhuǎn)化為可視化的可操作性的產(chǎn)品原型。需進行功能結(jié)構(gòu)、界面線框等信息架構(gòu)的設(shè)計，其次進行任務(wù)分解、工作流程等的交互類設(shè)計，最近進行視覺化的風(fēng)格設(shè)計及視覺規(guī)范設(shè)計。 

3、技術(shù)編碼（設(shè)計的具體落實過程）
區(qū)別于傳統(tǒng)UI用戶體驗設(shè)計，互聯(lián)網(wǎng)用戶體驗設(shè)計需進行編碼的設(shè)計。編碼設(shè)計需進行結(jié)構(gòu)層的XHTML代碼設(shè)計、表現(xiàn)控制層的CSS代碼設(shè)計、行為類代碼設(shè)計（前端代碼設(shè)計）。 

二、用戶體驗設(shè)計的交付物？ 

1、交付物一：設(shè)計圖
把用戶體驗設(shè)計交付物中的設(shè)計圖分為三類，概念圖、架構(gòu)圖還有流程圖。

其中概念圖內(nèi)容包括用戶模型和功能模型：
用戶模型需要解決用戶做什么？該怎么做的問題？
用戶模型定義產(chǎn)品產(chǎn)品用戶應(yīng)該有的功能，列舉可能沒有的邏輯關(guān)系。用戶模型圖用MindManage制作。如下圖所示：
 

功能模型需要表達功能能滿足什么？該怎么滿足的問題?功能模型圖類似產(chǎn)品的遠景規(guī)劃，使用抽象圖形來呈現(xiàn)，可以用Photoshop來制作功能模型。如下圖所示：

概念圖交付物的制作工具有：Paper、Viso、Illustrator、MindManaer、Photoshop、Powerpoint。個人喜歡并常用的工具是后面三個。 

用戶體驗設(shè)計中的概念圖內(nèi)容包括邏輯結(jié)構(gòu)和認知結(jié)構(gòu)：
邏輯結(jié)構(gòu)需要建立層級邏輯關(guān)系，用以介紹某產(chǎn)品的功能及他們之間的相互關(guān)系。邏輯架構(gòu)圖用的比較多的工具是用CmapTools來制作。
認知結(jié)構(gòu)需要建立認知邏輯關(guān)系。用以介紹用戶通過某產(chǎn)品或者平臺上可以獲取哪些服務(wù)，認知邏輯關(guān)系圖用的比較多的工具是用Illustrator來制作。 

用戶體驗設(shè)計中的流程圖內(nèi)容包括任務(wù)流程和界面流程：
任務(wù)流程需要解決功能點之間的交互，用以介紹用戶使用某產(chǎn)品的功能時的處理片段。任務(wù)流程圖用的比較多的工具是用Viso來制作。
如下圖所示：
界面流程需要解決操作點之間的交互。用以介紹用戶使用某產(chǎn)品進行操作完成一些列功能的過程。界面流程圖用的比較多的工具是用Viso來制作。如下圖所示：

 

2、交付物二：原型
把用戶體驗設(shè)計交付物中的原型分為三類，紙質(zhì)原型、圖形原型還有頁面原型。

         紙質(zhì)原型的優(yōu)點是制作速度快，沒有技術(shù)壁壘，討論時間少以及傳達產(chǎn)品感覺不錯。缺點是屏幕的真是感覺比較差，不能評估視覺效果，不能在實際系統(tǒng)中制造模擬數(shù)據(jù)，不適合用于超過3人以上的原型演示。
紙質(zhì)原型的制作過程:
 

卡片紙質(zhì)原型：

卡片紙質(zhì)原型：
 

         圖形原型的優(yōu)點是效果美觀，適合打印和歸檔，不需要紙張。缺點是存在客戶端真實狀態(tài)問題，制作圖形原型所花的時間更多，制作需要相關(guān)的專業(yè)知識，不方便現(xiàn)場測試新想法，改進執(zhí)行容易被延誤，版本不好控制。
Viso制作的圖形原型：
 

Photoshop制作的圖形原型：(Axure也可以制作類似高保真的頁面原型效果)
 

Illustrator制作的圖形原型：
 
Axure制作的圖形原型：
 
         頁面原型的優(yōu)點是真實的交互狀態(tài)，有利于評價屏幕變化，有時間作出改進。缺點是制作頁面原型需要更多時間，制作有時候用到前端代碼編程知識，不方便現(xiàn)場測試新想法，改進執(zhí)行容易被延誤，版本不好控制。
低保真的頁面原型：（區(qū)分鏈接，但不區(qū)分顏色，固化布局，固化模塊，固化信息條目，固化信息內(nèi)容規(guī)格）如下圖所示：
 

高保真的頁面原型：（保證與設(shè)計圖一致，按照風(fēng)格指南完成結(jié)構(gòu)表現(xiàn)制作，區(qū)分信息顏色）如下圖所示：

頁面原型的制作工具個人認為Axure是比較不錯的，它既可以完成頁面信息架構(gòu)、頁面布局的表現(xiàn)，還可以完成交互細節(jié)的體現(xiàn)，不需要你特別懂前端的代碼即可完成，當然你需要有相關(guān)的代碼思維，否則用著個做交互也不容易上手。

3、交付物三：文檔
把用戶體驗設(shè)計交付物中的文檔分為兩類，過程文檔還有交付文檔。
過程文檔內(nèi)容包括角色定義和頁面列表：
角色定義需要解決的問題是：有目標用戶之后，分別對典型角色進行定義，讓他們看起來更真實。角色定義的描述參數(shù)有：基本屬性、關(guān)鍵差異、簡單描述、用戶目標、商業(yè)目標、相關(guān)屬性。如下圖所示：

頁面列表需要解決的問題是：適合管理原型頁面，并編號存檔。描述參數(shù)有：名稱、編號。如下圖所示：

交付文檔內(nèi)容包括風(fēng)格指南(CAPT)、腳本說明(YUI)、接口說明：
風(fēng)格指南需要解決的問題是：指導(dǎo)低保真原型進行美化、還有維護原則，包括Xhtml和CSS。如下圖所示：
包含結(jié)構(gòu)、配色、排版、樣式表
腳本說明需要解決的問題是：指導(dǎo)頁面前端行為開發(fā)的幫助，包括Script&DOM。如下圖所示：包含：框架、模塊、調(diào)用

接口需要解決的問題是：方便第三方進行開發(fā)、數(shù)據(jù)獲取和使用功能。包含：通用參數(shù)說明、通用元素說明、返回狀態(tài)說明、詳細說明等 
三、用戶體驗敏捷設(shè)計？  
敏捷設(shè)計包含：流程與交互、思維導(dǎo)圖Mind Map、 任務(wù)分解Task analysis、快速引導(dǎo)DashBoard、工作流程Work Flow、網(wǎng)站地圖SiteMap、職能與職責(zé)、能力要求打分。 

流程與交互:
保證關(guān)鍵設(shè)計圖（圖形只是輔助說明，根據(jù)產(chǎn)品需求適量減少、合并設(shè)計圖）。
多用WEB頁面原型（直接完成帶交互的HTML頁面，減少實施過程）
從低保真原型開始（越保真的原型需要的技巧越多，或耗費時間越多）

思維導(dǎo)圖Mind Map:
 

任務(wù)分解Task analysis：
 

快速引導(dǎo)DashBoard：
 

工作流程Work Flow：
 
網(wǎng)站地圖SiteMap：
 

職能與職責(zé)：
產(chǎn)品經(jīng)理(PM)：提需求和構(gòu)思，并且全面統(tǒng)籌和協(xié)調(diào)。
產(chǎn)品原型設(shè)計師(IA、ID、VD) ：反復(fù)迭代規(guī)劃、最終完成低保真原型、并且出具風(fēng)格指南。需掌握兩種以上的設(shè)計工具。個人推薦photoshop、axure\MindManage
產(chǎn)品頁面工程師(DEV)：通過風(fēng)格指南和低保原型，完善為高保真原型，協(xié)助完成質(zhì)量評估。掌握兩種以上編碼工具。html\css\javascript、PHP\JAVA\.NET等 

能力要求打分：
 

四、用戶體驗設(shè)計的產(chǎn)品評估？
用戶體驗設(shè)計的產(chǎn)品評估主要指啟發(fā)式的評估。 需要注意的原則是：
1、可視性原則
2、不要脫離現(xiàn)實
3、用戶有自由控制權(quán)
4、一致性原則
5、有預(yù)防用戶出錯的措施（即容錯性）
6、要在第一時間讓用戶看到
7、使用起來靈活且高效
8、易讀性
9、給用戶明確的錯誤信息，并協(xié)助方便恢復(fù)工作
10、必要的幫助與提示文檔
 

啟發(fā)式評估–導(dǎo)航部分：
1、清晰指示當前位置
2、清晰定義首頁鏈接
3、網(wǎng)站的所有主要部分都能通過首頁訪問到
4、如需要的話，應(yīng)該有一個站點地圖
5、網(wǎng)站結(jié)構(gòu)清晰，沒有不必要的層級
6、如需要的話，應(yīng)該有一個易用的搜索功能

啟發(fā)式評估–功能部分：
1、所有功能都被清晰的表示出來
2、所有重要功能在不離開網(wǎng)站的前提下都能夠使用
3、沒有不必要的插件

啟發(fā)式評估–控制部分：
1、用戶可以取消所有操作
2、在每頁，用戶都可以清晰找到離開本頁標識
3、所有圖片鏈接和文字連接一樣清晰可用
4、網(wǎng)站的流程符合用戶操作流程
5、支持所有主流瀏覽器

啟發(fā)式評估–語言部分：
1、文案簡潔
2、沒有術(shù)語

啟發(fā)式評估–反饋部分：
1、現(xiàn)在發(fā)生了什么，應(yīng)該一直清晰標示出來
2、如有有必要，用戶反饋能收到反饋郵件
3、如需要安裝插件或特定瀏覽器，必須告知用戶
4、網(wǎng)站用戶可以通過郵件或者提交表單來提交反饋意見
5、如有有必要，需要提供一個在線幫助

啟發(fā)式評估–一致性部分：
1、對任何元素都只有一種固定的叫法
2、鏈接與其指向頁面的標題要匹配
3、對鏈接和已訪問鏈接使用規(guī)范色彩
4、一致使用術(shù)語的普遍叫法

啟發(fā)式評估–防止出錯部分：
1、使用樸素的語言來表達錯誤信息
2、錯誤信息需要給出下一步操作提示
3、錯誤信息提供清晰的離開標志
4、錯誤信息提供詳細的幫助信息

啟發(fā)式評估–視覺部分：
1、布局清晰
2、足夠的留白
3、所有圖片都有ALT標記
4、使用標準的模板