用戶體驗(yàn)設(shè)計(jì)的范圍很廣，因工作所需要，涉及的互聯(lián)網(wǎng)產(chǎn)品設(shè)計(jì)比較多，區(qū)別于傳統(tǒng)軟件產(chǎn)品而言，互聯(lián)網(wǎng)產(chǎn)品用戶體驗(yàn)設(shè)計(jì)有自己的一套設(shè)計(jì)規(guī)范及設(shè)計(jì)過(guò)程。本篇對(duì)此問(wèn)題做一個(gè)閱讀小結(jié)，有些內(nèi)容比較晦澀，可以飄過(guò)：）但對(duì)初識(shí)用戶體驗(yàn)設(shè)計(jì)的朋友，認(rèn)真看完本文，對(duì)你一定會(huì)有幫助的。
一、用戶體驗(yàn)設(shè)計(jì)怎么做？
1、概念證明（設(shè)計(jì)的構(gòu)思過(guò)程）
根據(jù)市場(chǎng)調(diào)研和研究設(shè)想目標(biāo)，論證可行的商業(yè)模式。需確定三項(xiàng)內(nèi)容：用戶需要的內(nèi)容、用戶需要的功能、用戶角色的分類
2、設(shè)計(jì)探索（設(shè)計(jì)的規(guī)劃過(guò)程）
把抽象的商業(yè)需求，轉(zhuǎn)化為可視化的可操作性的產(chǎn)品原型。需進(jìn)行功能結(jié)構(gòu)、界面線框等信息架構(gòu)的設(shè)計(jì)，其次進(jìn)行任務(wù)分解、工作流程等的交互類設(shè)計(jì)，最近進(jìn)行視覺(jué)化的風(fēng)格設(shè)計(jì)及視覺(jué)規(guī)范設(shè)計(jì)。
3、技術(shù)編碼（設(shè)計(jì)的具體落實(shí)過(guò)程）
區(qū)別于傳統(tǒng)UI用戶體驗(yàn)設(shè)計(jì)，互聯(lián)網(wǎng)用戶體驗(yàn)設(shè)計(jì)需進(jìn)行編碼的設(shè)計(jì)。編碼設(shè)計(jì)需進(jìn)行結(jié)構(gòu)層的XHTML代碼設(shè)計(jì)、表現(xiàn)控制層的CSS代碼設(shè)計(jì)、行為類代碼設(shè)計(jì)（前端代碼設(shè)計(jì)）。
二、用戶體驗(yàn)設(shè)計(jì)的交付物？
1、交付物一：設(shè)計(jì)圖
把用戶體驗(yàn)設(shè)計(jì)交付物中的設(shè)計(jì)圖分為三類，概念圖、架構(gòu)圖還有流程圖。
其中概念圖內(nèi)容包括用戶模型和功能模型：
用戶模型需要解決用戶做什么？該怎么做的問(wèn)題？
用戶模型定義產(chǎn)品產(chǎn)品用戶應(yīng)該有的功能，列舉可能沒(méi)有的邏輯關(guān)系。用戶模型圖用MindManage制作。如下圖所示：
功能模型需要表達(dá)功能能滿足什么？該怎么滿足的問(wèn)題?功能模型圖類似產(chǎn)品的遠(yuǎn)景規(guī)劃，使用抽象圖形來(lái)呈現(xiàn)，可以用Photoshop來(lái)制作功能模型。如下圖所示：
概念圖交付物的制作工具有：Paper、Viso、Illustrator、MindManaer、Photoshop、Powerpoint。個(gè)人喜歡并常用的工具是后面三個(gè)。
用戶體驗(yàn)設(shè)計(jì)中的概念圖內(nèi)容包括邏輯結(jié)構(gòu)和認(rèn)知結(jié)構(gòu)：
邏輯結(jié)構(gòu)需要建立層級(jí)邏輯關(guān)系，用以介紹某產(chǎn)品的功能及他們之間的相互關(guān)系。邏輯架構(gòu)圖用的比較多的工具是用CmapTools來(lái)制作。
認(rèn)知結(jié)構(gòu)需要建立認(rèn)知邏輯關(guān)系。用以介紹用戶通過(guò)某產(chǎn)品或者平臺(tái)上可以獲取哪些服務(wù)，認(rèn)知邏輯關(guān)系圖用的比較多的工具是用Illustrator來(lái)制作。
用戶體驗(yàn)設(shè)計(jì)中的流程圖內(nèi)容包括任務(wù)流程和界面流程：
任務(wù)流程需要解決功能點(diǎn)之間的交互，用以介紹用戶使用某產(chǎn)品的功能時(shí)的處理片段。任務(wù)流程圖用的比較多的工具是用Viso來(lái)制作。
如下圖所示：
界面流程需要解決操作點(diǎn)之間的交互。用以介紹用戶使用某產(chǎn)品進(jìn)行操作完成一些列功能的過(guò)程。界面流程圖用的比較多的工具是用Viso來(lái)制作。如下圖所示：
2、交付物二：原型
把用戶體驗(yàn)設(shè)計(jì)交付物中的原型分為三類，紙質(zhì)原型、圖形原型還有頁(yè)面原型。
紙質(zhì)原型的優(yōu)點(diǎn)是制作速度快，沒(méi)有技術(shù)壁壘，討論時(shí)間少以及傳達(dá)產(chǎn)品感覺(jué)不錯(cuò)。缺點(diǎn)是屏幕的真是感覺(jué)比較差，不能評(píng)估視覺(jué)效果，不能在實(shí)際系統(tǒng)中制造模擬數(shù)據(jù)，不適合用于超過(guò)3人以上的原型演示。
紙質(zhì)原型的制作過(guò)程:
卡片紙質(zhì)原型：
卡片紙質(zhì)原型：
圖形原型的優(yōu)點(diǎn)是效果美觀，適合打印和歸檔，不需要紙張。缺點(diǎn)是存在客戶端真實(shí)狀態(tài)問(wèn)題，制作圖形原型所花的時(shí)間更多，制作需要相關(guān)的專業(yè)知識(shí)，不方便現(xiàn)場(chǎng)測(cè)試新想法，改進(jìn)執(zhí)行容易被延誤，版本不好控制。
Viso制作的圖形原型：
Photoshop制作的圖形原型：(Axure也可以制作類似高保真的頁(yè)面原型效果)
Illustrator制作的圖形原型：
Axure制作的圖形原型：
頁(yè)面原型的優(yōu)點(diǎn)是真實(shí)的交互狀態(tài)，有利于評(píng)價(jià)屏幕變化，有時(shí)間作出改進(jìn)。缺點(diǎn)是制作頁(yè)面原型需要更多時(shí)間，制作有時(shí)候用到前端代碼編程知識(shí)，不方便現(xiàn)場(chǎng)測(cè)試新想法，改進(jìn)執(zhí)行容易被延誤，版本不好控制。
低保真的頁(yè)面原型：（區(qū)分鏈接，但不區(qū)分顏色，固化布局，固化模塊，固化信息條目，固化信息內(nèi)容規(guī)格）如下圖所示：
高保真的頁(yè)面原型：（保證與設(shè)計(jì)圖一致，按照風(fēng)格指南完成結(jié)構(gòu)表現(xiàn)制作，區(qū)分信息顏色）如下圖所示：
頁(yè)面原型的制作工具個(gè)人認(rèn)為Axure是比較不錯(cuò)的，它既可以完成頁(yè)面信息架構(gòu)、頁(yè)面布局的表現(xiàn)，還可以完成交互細(xì)節(jié)的體現(xiàn)，不需要你特別懂前端的代碼即可完成，當(dāng)然你需要有相關(guān)的代碼思維，否則用著個(gè)做交互也不容易上手。
3、交付物三：文檔
把用戶體驗(yàn)設(shè)計(jì)交付物中的文檔分為兩類，過(guò)程文檔還有交付文檔。
過(guò)程文檔內(nèi)容包括角色定義和頁(yè)面列表：
角色定義需要解決的問(wèn)題是：有目標(biāo)用戶之后，分別對(duì)典型角色進(jìn)行定義，讓他們看起來(lái)更真實(shí)。角色定義的描述參數(shù)有：基本屬性、關(guān)鍵差異、簡(jiǎn)單描述、用戶目標(biāo)、商業(yè)目標(biāo)、相關(guān)屬性。如下圖所示：
頁(yè)面列表需要解決的問(wèn)題是：適合管理原型頁(yè)面，并編號(hào)存檔。描述參數(shù)有：名稱、編號(hào)。如下圖所示：
交付文檔內(nèi)容包括風(fēng)格指南(CAPT)、腳本說(shuō)明(YUI)、接口說(shuō)明：
風(fēng)格指南需要解決的問(wèn)題是：指導(dǎo)低保真原型進(jìn)行美化、還有維護(hù)原則，包括Xhtml和CSS。如下圖所示：
包含結(jié)構(gòu)、配色、排版、樣式表
腳本說(shuō)明需要解決的問(wèn)題是：指導(dǎo)頁(yè)面前端行為開(kāi)發(fā)的幫助，包括Script&DOM。如下圖所示：包含：框架、模塊、調(diào)用
接口需要解決的問(wèn)題是：方便第三方進(jìn)行開(kāi)發(fā)、數(shù)據(jù)獲取和使用功能。包含：通用參數(shù)說(shuō)明、通用元素說(shuō)明、返回狀態(tài)說(shuō)明、詳細(xì)說(shuō)明等
三、用戶體驗(yàn)敏捷設(shè)計(jì)？
敏捷設(shè)計(jì)包含：流程與交互、思維導(dǎo)圖Mind Map、 任務(wù)分解Task analysis、快速引導(dǎo)DashBoard、工作流程Work Flow、網(wǎng)站地圖SiteMap、職能與職責(zé)、能力要求打分。
流程與交互:
保證關(guān)鍵設(shè)計(jì)圖（圖形只是輔助說(shuō)明，根據(jù)產(chǎn)品需求適量減少、合并設(shè)計(jì)圖）。
多用WEB頁(yè)面原型（直接完成帶交互的HTML頁(yè)面，減少實(shí)施過(guò)程）
從低保真原型開(kāi)始（越保真的原型需要的技巧越多，或耗費(fèi)時(shí)間越多）
思維導(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è)計(jì)師(IA、ID、VD) ：反復(fù)迭代規(guī)劃、最終完成低保真原型、并且出具風(fēng)格指南。需掌握兩種以上的設(shè)計(jì)工具。個(gè)人推薦photoshop、axure\MindManage
產(chǎn)品頁(yè)面工程師(DEV)：通過(guò)風(fēng)格指南和低保原型，完善為高保真原型，協(xié)助完成質(zhì)量評(píng)估。掌握兩種以上編碼工具。html\css\javascript、PHP\JAVA\.NET等
能力要求打分：
四、用戶體驗(yàn)設(shè)計(jì)的產(chǎn)品評(píng)估？
用戶體驗(yàn)設(shè)計(jì)的產(chǎn)品評(píng)估主要指啟發(fā)式的評(píng)估。 需要注意的原則是：
1、可視性原則
2、不要脫離現(xiàn)實(shí)
3、用戶有自由控制權(quán)
4、一致性原則
5、有預(yù)防用戶出錯(cuò)的措施（即容錯(cuò)性）
6、要在第一時(shí)間讓用戶看到
7、使用起來(lái)靈活且高效
8、易讀性
9、給用戶明確的錯(cuò)誤信息，并協(xié)助方便恢復(fù)工作
10、必要的幫助與提示文檔
啟發(fā)式評(píng)估–導(dǎo)航部分：
1、清晰指示當(dāng)前位置
2、清晰定義首頁(yè)鏈接
3、網(wǎng)站的所有主要部分都能通過(guò)首頁(yè)訪問(wèn)到
4、如需要的話，應(yīng)該有一個(gè)站點(diǎn)地圖
5、網(wǎng)站結(jié)構(gòu)清晰，沒(méi)有不必要的層級(jí)
6、如需要的話，應(yīng)該有一個(gè)易用的搜索功能
啟發(fā)式評(píng)估–功能部分：
1、所有功能都被清晰的表示出來(lái)
2、所有重要功能在不離開(kāi)網(wǎng)站的前提下都能夠使用
3、沒(méi)有不必要的插件
啟發(fā)式評(píng)估–控制部分：
1、用戶可以取消所有操作
2、在每頁(yè)，用戶都可以清晰找到離開(kāi)本頁(yè)標(biāo)識(shí)
3、所有圖片鏈接和文字連接一樣清晰可用
4、網(wǎng)站的流程符合用戶操作流程
5、支持所有主流瀏覽器
啟發(fā)式評(píng)估–語(yǔ)言部分：
1、文案簡(jiǎn)潔
2、沒(méi)有術(shù)語(yǔ)
啟發(fā)式評(píng)估–反饋部分：
1、現(xiàn)在發(fā)生了什么，應(yīng)該一直清晰標(biāo)示出來(lái)
2、如有有必要，用戶反饋能收到反饋郵件
3、如需要安裝插件或特定瀏覽器，必須告知用戶
4、網(wǎng)站用戶可以通過(guò)郵件或者提交表單來(lái)提交反饋意見(jiàn)
5、如有有必要，需要提供一個(gè)在線幫助
啟發(fā)式評(píng)估–一致性部分：
1、對(duì)任何元素都只有一種固定的叫法
2、鏈接與其指向頁(yè)面的標(biāo)題要匹配
3、對(duì)鏈接和已訪問(wèn)鏈接使用規(guī)范色彩
4、一致使用術(shù)語(yǔ)的普遍叫法
啟發(fā)式評(píng)估–防止出錯(cuò)部分：
1、使用樸素的語(yǔ)言來(lái)表達(dá)錯(cuò)誤信息
2、錯(cuò)誤信息需要給出下一步操作提示
3、錯(cuò)誤信息提供清晰的離開(kāi)標(biāo)志
4、錯(cuò)誤信息提供詳細(xì)的幫助信息
啟發(fā)式評(píng)估–視覺(jué)部分：
1、布局清晰
2、足夠的留白
3、所有圖片都有ALT標(biāo)記
4、使用標(biāo)準(zhǔn)的模板
聯(lián)系客服
