用戶體驗設(shè)計過程

本文格式為Word版，下載可任意編輯——用戶體驗設(shè)計過程互聯(lián)網(wǎng)的用戶體驗設(shè)計過程rexsong更多互聯(lián)網(wǎng)產(chǎn)品文檔請訪問閱微網(wǎng)開放式PM產(chǎn)品社區(qū)閱微網(wǎng)新浪微群閱微網(wǎng)官方微博閱微PM超級群全國22383617上海1187369372目次怎么做交付物靈巧設(shè)計產(chǎn)品評估問題3怎么做4實施過程概念證明構(gòu)思根據(jù)市場研究和設(shè)想目標論證為可行的商業(yè)模式設(shè)計探索規(guī)劃把抽象的商業(yè)需求量化為可視可操作產(chǎn)品原型的過程技術(shù)編碼落實互聯(lián)網(wǎng)產(chǎn)品與傳統(tǒng)UI做用戶體驗最大的識別便在于此5概念證明內(nèi)容需求用戶需要的內(nèi)容功能規(guī)格需要什么樣的功能用戶簡介角色說明6設(shè)計探索信息架構(gòu)功能布局界面線框交互設(shè)計任務(wù)分解工作流程視覺設(shè)計風格模范7技術(shù)編碼布局HTML表現(xiàn)CSS行為DOMScript8交付物9類型設(shè)計圖概念圖架構(gòu)圖流程圖原型紙質(zhì)原型圖形原型頁面原型文檔過程文檔交付文檔10設(shè)計圖用戶模型功能模型交互流程認知布局規(guī)律布局架構(gòu)圖概念圖流程圖11概念圖功能模型能得志什么如何得志用戶模型需要做什么理應(yīng)如何做PaperVisioMindManagerIllustratorPhotoshopPowerpoint12概念圖功能類似產(chǎn)品藍圖的遠景規(guī)劃使用抽象圖形呈現(xiàn)Photoshop制作13概念圖用戶定義產(chǎn)品用戶應(yīng)有的功能列舉可能沒有規(guī)律關(guān)系MindManager制作14架構(gòu)圖規(guī)律布局建立層級規(guī)律關(guān)系認知布局建立認知規(guī)律關(guān)系PaperMindManagerFreeMindCmapToolsOmnigrafflePowerPoint15架構(gòu)圖規(guī)律介紹Flickr功能以及它們之間的相互關(guān)系CmapTools制作16架構(gòu)圖認知介紹用戶可以在Flickr平臺上獲取哪些服務(wù)Illustrator制作17流程圖任務(wù)流程功能點之間的交互界面流程操作點之間的交互PaperVisioOmnigrafflePhotoshopPowerPointSmartDrawAxure18流程圖任務(wù)某用戶在雅虎郵件系統(tǒng)里登錄后查看消息的過程處理片段Visio制作19流程圖界面小杰在后臺創(chuàng)造調(diào)查添加問題選項獲得JS調(diào)用代碼的過程Visio制作20原型頁面原型低保真高保真線框圖任務(wù)分解網(wǎng)站地圖紙質(zhì)原型迭代圖形原型工作流程21紙質(zhì)原型優(yōu)點制作快速無技術(shù)壁壘消散更少的議論時間傳達產(chǎn)品感覺不錯缺點存在屏幕真實狀態(tài)問題不能評估視覺不能在實際系統(tǒng)中制造假數(shù)據(jù)不能評價的響應(yīng)時間不適合超過3人的演示22紙質(zhì)原型制作23紙質(zhì)原型卡片24紙質(zhì)原型手繪25圖形原型優(yōu)點效果美觀適合打印或者歸檔無需紙張缺點存在客戶端真實狀態(tài)問題制作需更多時間制作需要相關(guān)專業(yè)學(xué)識不便當現(xiàn)場測試新想法輕易延誤提升執(zhí)行26圖形原型Visio27圖形原型Photoshop28圖形原型Illustrator29頁面原型優(yōu)點真實的交互有益于評價屏幕變化有時間作出提升缺點制作需更多時間制作需要編程學(xué)識不便當現(xiàn)場測試新想法輕易延誤提升執(zhí)行30頁面原型低保真區(qū)分鏈接不區(qū)分顏色固化布局固化模塊固化信息條目固化信息內(nèi)容規(guī)格31頁面原型高保真保證與設(shè)計圖一致按風格指南完成布局表現(xiàn)制作區(qū)分信息顏色32過程文檔角色定義有目標用戶群之后分別對典型角色舉行定義讓他們看起來更真實頁面列表適合管理原型頁面并編號存檔和組織33角色定義Grow根本屬性關(guān)鍵差異簡樸描述用戶目標商業(yè)目標相關(guān)屬性34頁面列表Dpdp名稱編號35交付文檔風格指南指導(dǎo)低保原型舉行美化及維護準那么包括HTMLCSS腳本說明指導(dǎo)頁面前端行為開發(fā)的扶助包括ScriptDOM接口說明便當?shù)谌介_發(fā)獲取數(shù)據(jù)使用功能36風格指南CAPT布局配色排版樣式表混合37腳本說明YUI框架模塊調(diào)用38接口說明豆瓣通用參數(shù)說明通用元素說明返回狀態(tài)說明細致說明39靈巧設(shè)計40流程與交付保證關(guān)鍵設(shè)計圖圖形只是輔佐說明根據(jù)產(chǎn)品需求適量裁減合并設(shè)計圖多用Web頁面原型直接完成為帶交互的HTML頁面裁減實施過程從低保原型開頭越保真的原型需要的技巧越多或耗時越多41思維導(dǎo)圖MindMap42任務(wù)分解TaskAnalysis43快速引導(dǎo)Dashboard44工作流程WorkFlow45網(wǎng)站地圖SiteMap46職能與職責產(chǎn)品經(jīng)理PM提需求和構(gòu)思并且全面統(tǒng)籌和協(xié)調(diào)產(chǎn)品原型設(shè)計師IAIDVD反復(fù)迭代規(guī)劃最終完成為低保原型并且出具風格指南掌管兩種以上的設(shè)計工具產(chǎn)品頁面工程師DEV通過風格指南和低保原型完善為高保原型輔助完成質(zhì)量評估掌管兩種以上的編碼工具47才能要求打分5業(yè)務(wù)才能互聯(lián)網(wǎng)熟悉信息架構(gòu)交互設(shè)計溝通才能工作協(xié)調(diào)文檔制作視覺設(shè)計編程才能PM552355321IA345444532ID234544533VD2324445DEV322443548產(chǎn)品評估49啟發(fā)式評估需要留神的原那么1可視性原那么2不要脫離現(xiàn)實3用戶有自由操縱權(quán)4一致性原那么5有預(yù)防用戶出錯的措施6要在第一時間讓用戶看到7使用起來生動且高效8易讀性9給用戶明確的錯誤信息并輔助便當恢復(fù)工作10必要的扶助提示與說明文檔50啟發(fā)式評估導(dǎo)航1明顯指示了當前的位置2明顯定義了首頁的鏈接3網(wǎng)站的全體主要片面都能通過首頁訪問4假設(shè)需要的話理應(yīng)有個站點地圖5網(wǎng)站布局明顯沒有不必要的層級6假設(shè)需要的話要有個易用的探尋功能51啟發(fā)式評估功能1全體功能都被明顯地表示出來2全體重要功能在不離開網(wǎng)站前提下都可以使用3沒有不必要的插件52啟發(fā)式評估操縱1用戶可以取消全體操作2在每頁用戶都可以找到明顯的離開本頁標識3全體圖片鏈接都和文字鏈接一樣明顯可用4網(wǎng)站的流程符合用戶的操作流程5支持全體主流欣賞器53啟發(fā)式評估語言1文案干脆2沒有術(shù)語54啟發(fā)式評估反應(yīng)1現(xiàn)在發(fā)生了什么理應(yīng)一向明顯標示出來2如必要用戶理應(yīng)能收到郵件反應(yīng)3全體反應(yīng)都要實時切實4如需要安裝插件或特定欣賞器務(wù)必告知用戶5用戶可以通過郵件或提交表單來提交反應(yīng)觀法6如必要的話供給在線扶助55啟發(fā)式評估一致性1對任何元素都只有固定的一種叫法2鏈接與其指向頁面的標題要匹配3對鏈接和已訪問鏈接使用模范的色調(diào)4一致使用術(shù)語的普遍叫法56啟發(fā)式評估防止出錯1使用簡樸的語言來表述錯誤信息2錯誤信息需要給出下一步操作提示3錯誤信息供給明顯的