UX常用文檔和交付物示例(多圖)

譯者心得:

本文作者列出了20多種用戶體驗領(lǐng)域常用的文檔,并對每種都給出了大量示例和參考資料,內(nèi)容非常豐富。有一些文檔是比較類似的,比如體驗地圖、任務(wù)網(wǎng)格、用戶旅程圖和場景地圖,它們之間的細微差別很難直觀地分辨出來,但我認為區(qū)分這些概念并不那么重要,重要的是分析的過程。
文字不只是文字,圖表也不只是圖表。當你在考慮一句話怎么寫的時候,你在考慮的是事情的本質(zhì),是現(xiàn)象背后的原因。當你在考慮一個圖表怎么呈現(xiàn)的時候,你在考慮的是信息的相互關(guān)系,是其中蘊含的知識和啟發(fā)。

在寫了如何創(chuàng)建優(yōu)秀的UX文檔之后,我想到如果把一些UX文檔和交付物的樣例匯集起來應(yīng)該會很有用。希望這能在你選擇要產(chǎn)出哪種文檔的時候提供一些靈感和幫助。對每種文檔和交付物,我都提供了例子,以及一個簡短的概述和可以讓你了解更多信息的鏈接。本文將會包含下面這些UX文檔和交付物:

內(nèi)容模型圖 | 移情地圖 | 體驗地圖 | 心智模型圖 | 人物角色 | 流程圖 | 原型 |
場景地圖 | 場景介紹 | 站點地圖 | 草圖 | 故事板 | 設(shè)計規(guī)范 | 風格瓷磚 | 系統(tǒng)地圖 | 任務(wù)網(wǎng)格 | 可用性報告 | 用戶旅程圖 | 用戶故事地圖 | 視覺稿 | 線框圖 | 文字云

請注意下面大多數(shù)的示例文檔都不是我自己寫的。你可以點擊文檔查看來源。

內(nèi)容模型圖(Content models)

內(nèi)容模型圖展示了你在一個設(shè)計中可能需要的所有類型的內(nèi)容,不管你設(shè)計的是網(wǎng)站,應(yīng)用,甚至宣傳冊。所有內(nèi)容項根據(jù)它們的領(lǐng)域、類型以及與內(nèi)容之間的不同關(guān)系(比如包含關(guān)系)顯示在一起。內(nèi)容模型圖與領(lǐng)域模型圖非常像。

雖然創(chuàng)建內(nèi)容模型對于系統(tǒng)架構(gòu)師、開發(fā)或者內(nèi)容專家來說更為典型,但是這也是UX設(shè)計師應(yīng)該知道(并且可能需要創(chuàng)建)的。將內(nèi)容與設(shè)計解耦在響應(yīng)式和移動端設(shè)計中也變得越來越重要了。你可以在內(nèi)容模型:一種大師級技巧(分隔列表)中了解更多關(guān)于內(nèi)容模型的信息。

內(nèi)容模型圖1

內(nèi)容模型圖2
內(nèi)容模型圖3
內(nèi)容模型圖4

移情地圖(Empathy maps)

移情地圖一般會(但不全是)伴隨著人物角色。移情地圖提供關(guān)于用戶的信息,比如他們可能的想法、感受、行為、所見和所聞, 以及他們可能體驗到的痛苦和收獲。

移情地圖是讓人物角色更加生動的好方法,可以激發(fā)對用戶的共情并且收買更大的項目團隊。協(xié)作創(chuàng)造移情地圖,或者至少與大團隊一起檢查地圖,通常是一種有用的方式。關(guān)于移情地圖的信息有很多,甚至在innovation games網(wǎng)站上有一個在線移情地圖游戲。

移情地圖1

移情地圖2

移情地圖3

移情地圖4

體驗地圖(Experience maps)

體驗地圖(又叫做用戶體驗地圖)展現(xiàn)了用戶在特定目標下的點到點的旅程和體驗。比如說,一個關(guān)于“去度假”的體驗地圖會包含從研究假期、實際度假過程到寫度假回顧的所有事情。

在旅程的每個階段,體驗地圖都會展示一些信息,比如客戶使用的觸點,客戶的所做、所想、所感,以及為提升體驗而產(chǎn)生的任何挫折和想法。在對客戶的體驗進行討論和設(shè)計多通道的用戶體驗時,體驗地圖是很有用的文檔。Adaptive Path提供了一個可以免費下載的體驗地圖指南。你也可以看看我的報告從基于任務(wù)的設(shè)計到基于體驗的設(shè)計,以及來自UX Lady的一些案例。

體驗地圖1

體驗地圖2

體驗地圖3

體驗地圖4

體驗地圖5

體驗地圖6

體驗地圖7

心智模型圖(Mental models)

與任務(wù)網(wǎng)格一樣,心智模型圖描繪了用戶在完成一個特定任務(wù)時采取的思維過程(即用戶的心智模型)。比如說,在計劃晚上與朋友的一次活動,或者考慮假期去哪里時。心智模型圖將每個步驟拆解為具體任務(wù)以及用戶在每個步驟中會考慮的問題和情況。

心智模型圖對于討論和捕捉用戶行為以及發(fā)現(xiàn)設(shè)計機會很有幫助。在Indi Young的心智模型書中有關(guān)于心智模型圖的更多信息,書的第一章可以免費閱讀。

心智模型圖1

心智模型圖2

心智模型圖3

心智模型圖4

人物角色(Personas)

人物角色是用戶的虛擬代表(有點像替身)。它們是虛構(gòu)的,但是應(yīng)該基于事實。它們代表著真實用戶群的目標、動機、性格和行為。

人物角色可以讓用戶更加生動。它可以幫助項目團隊對“用戶”是誰達成共識(這并不總是一件容易的事情),幫助我們討論用戶的重要信息??梢钥纯次业奈恼?a target="_blank" rel="nofollow">最大程度地利用人物角色獲取更多關(guān)于人物角色以及如何使用它的信息。

人物角色1

人物角色2

人物角色3

人物角色4

人物角色5

人物角色6

人物角色7

流程圖(Process diagrams)

流程圖將一個流程視覺化地展示出來,包括了不同的決策點和過程流。流程圖在商業(yè)分析中更加常用,但是UX設(shè)計師也同樣可以用它來描述一系列的用戶旅程,或者在一個網(wǎng)站或者應(yīng)用的某個部分的邏輯。


流程圖1g

流程圖2

流程圖3

流程圖4

流程圖5

原型(Prototypes)

原型大概已經(jīng)接替線框圖成為UX設(shè)計師的最重要的UX文檔/交付物了。原型本質(zhì)上是設(shè)計的一個半功能性的模型。在討論設(shè)計,評估設(shè)計(比如通過可用性測試)以及廣泛地展示應(yīng)該發(fā)生什么時,原型是非常好的工具。

我之前曾經(jīng)描述過為什么我認為原型完全優(yōu)于線框圖,并且隨著市面上越來越多的原型制作工具,確實沒有理由不去創(chuàng)建可交互原型??梢栽贏daptive Path的原型工具列表中看到全面的原型創(chuàng)建工具。

場景地圖(Scenario maps)

場景地圖展示了用戶在給定場景下會經(jīng)歷的步驟(所以叫做場景地圖)。場景地圖不止記錄步驟,也會記錄好的想法、問題以及其他在考慮一個設(shè)計時可能有用的信息。

場景地圖可以為當前的場景或者未來的場景創(chuàng)建。它通常關(guān)注用戶會做什么,而未必關(guān)注用戶會怎么做。你可以在我的文章手把手教你如何創(chuàng)建場景地圖中找到更多關(guān)于場景地圖的信息。場景地圖在John Pruitt和Tamara Adlin的優(yōu)秀書籍人物角色的生命周期——在產(chǎn)品設(shè)計過程中牢記用戶中有詳細的描述(雖然在書中場景地圖被稱為現(xiàn)實地圖與設(shè)計地圖)。

場景地圖1

場景地圖2

場景介紹(Scenarios)

場景介紹或視覺化或敘事化(即用文字)地描述用戶(通常以人物角色的形式)在一個給定場景中會執(zhí)行的步驟。與場景地圖一樣,場景介紹可以用于現(xiàn)實的場景或者假想的場景。

場景介紹可以用于識別為支持目標場景而需要提供的特性和功能,以及通過講述用戶故事創(chuàng)造一種未來的產(chǎn)品或服務(wù)。


場景介紹1

場景介紹2

場景介紹3

場景介紹4

站點地圖(Sitemaps)

站點地圖展示了組成網(wǎng)站或者應(yīng)用,或者其中的某些部分的頁面和屏幕。站點地圖通常揭示分組,比如網(wǎng)站剖面以及不同頁面和屏幕之間的鏈接。


站點地圖1

站點地圖2

站點地圖3

站點地圖4

站點地圖5

站點地圖6

草圖(Sketches)

草圖往往更像是一個設(shè)計工藝品而不是產(chǎn)出物。也就是說,它們通常用來幫助討論一個設(shè)計或者概念,而其本身不適合作為一個比較正式的文檔。但是它們依然是用來展示概念和早期設(shè)計的一種有用的UX文檔??梢栽谖业奈恼?a target="_blank" rel="nofollow">繪制草圖的樂趣中看到更多關(guān)于草圖的信息。

草圖1

草圖2

草圖3

草圖4

故事板(Storyboards)

故事板是從卡通和電影領(lǐng)域借來的概念(如果看到了好的想法,不要害怕捉住它)。它們以漫畫書的形式生動地展現(xiàn)一個場景,可以讓事物變得生動有趣。如果想要了解更多,Johnny Holland有一系列非常值得閱讀的關(guān)于故事板制作與UX的文章。

故事板1

故事板2

故事板3

故事板4

設(shè)計規(guī)范(Style guides)

正如Susan Roberson在她的文章創(chuàng)建設(shè)計規(guī)范中指出的,“設(shè)計規(guī)范是一份關(guān)于代碼的動態(tài)文件,詳細地記錄了在你的網(wǎng)站或應(yīng)用中的所有不同的元素和編碼模塊”。它通常不只包括元素(比如文字,按鈕,UI控件等)的視覺外觀和感覺,以及HTML和CSS代碼,也詳細描述了設(shè)計模式和正確的用法。

有很多設(shè)計規(guī)范示例。其中比較好的包括:

風格瓷磚(Style tiles)

正如在有著機智名稱的Styletil.es網(wǎng)站上提到的,風格瓷磚是“一種設(shè)計交付物,包括字體,顏色和傳達出網(wǎng)站的視覺品牌本質(zhì)的界面元素。風格瓷磚類似于一個室內(nèi)設(shè)計師在設(shè)計一個房間之前獲得認可的油漆芯片和織物樣品。它們有助于在設(shè)計師和關(guān)鍵決策人之間建立通用的設(shè)計語言,并且可以促進對客戶的偏好和目標的討論。”

風格瓷磚更多地是一種生動的設(shè)計交付物而非UX文檔。然而,UX設(shè)計師一定會投入到一組風格瓷磚中,并且如果他們有平面設(shè)計技能,可能會自己創(chuàng)建一套風格瓷磚。


風格瓷磚1

風格瓷磚2

風格瓷磚3

風格瓷磚4

系統(tǒng)地圖(System maps)

系統(tǒng)地圖圖形化地展示了在一個特定的產(chǎn)品或服務(wù)中的不同角色和人工制品,以及它們之間的關(guān)系(把它當做一個生態(tài)系統(tǒng)地圖)。角色可能是服務(wù)的用戶或者實際上傳遞著服務(wù)的員工。人工制品可能是任何東西,從網(wǎng)站到實體對象如宣傳冊或印刷品。

系統(tǒng)地圖可以描繪與產(chǎn)品或服務(wù)(不管是已有的還是未來的)相關(guān)的各種元素,并且?guī)椭覀儗X設(shè)計有一個更加全局的視角。


系統(tǒng)地圖1

系統(tǒng)地圖2

系統(tǒng)地圖3

系統(tǒng)地圖4

系統(tǒng)地圖5

系統(tǒng)地圖6

任務(wù)網(wǎng)格(Task grids)

任務(wù)網(wǎng)格通常是任務(wù)分析的主要產(chǎn)出物。任務(wù)分析包括將一個大任務(wù),比如發(fā)送一封郵件,拆解成它的具體步驟和階段。任務(wù)網(wǎng)格跟體驗地圖很像,但是一般展示的是一個已有的任務(wù),而不是一種未來的、期望的體驗。

對任務(wù)的每個步驟,列出用戶可能會問的一系列問題,以及潛在的痛點和關(guān)于功能特性的想法。


任務(wù)網(wǎng)格1

任務(wù)網(wǎng)格2

任務(wù)網(wǎng)格3

可用性報告(Usability reports)

可用性報告常常被用來詳細描述專家評估結(jié)果,比如啟發(fā)式評估或者認知走查,或者用來呈現(xiàn)可用性測試的結(jié)果??捎眯詧蟾娴年P(guān)鍵是盡可能保持簡短(沒有什么事情像閱讀一篇一百多頁的報告一樣了)以及盡可能使用視覺化表達。在我的文章可用性檢查實施指南中可以看到關(guān)于專家評估的更多信息。

可用性報告1

可用性報告2

可用性報告3

可用性報告4

用戶旅程圖(User journeys)

體驗地圖一般用來展示點到點的客戶旅程,而用戶旅程文檔一般只用來展示用戶旅程的一部分。比如說,它可能是用戶訪問網(wǎng)站的旅程,或者完成一個特定任務(wù)的旅程。

旅程通常被拆分為用戶采取的步驟,通常會伴隨著視覺化傳達以幫助講述故事。


用戶旅程圖1

用戶旅程圖2

用戶旅程圖3

用戶旅程圖4

用戶旅程圖5

用戶旅程圖6

用戶故事地圖(User story maps)

我們創(chuàng)建用戶故事地圖常常是作為敏捷軟件開發(fā)項目的一部分。用戶故事地圖制定了組成各種產(chǎn)品特性和后續(xù)版本的用戶故事。

用戶故事用于在敏捷開發(fā)中定義用戶需求。它們通常采取這樣的形式:“作為一個<角色>,我想要<目標/渴望>以便<獲得好處>”。比如說,“作為一個<幫助臺操作員>,我想要<檢索之前的幫助臺詢問>以便<發(fā)現(xiàn)到目前為止發(fā)生了什么>”。

你可以在我的文章把UX帶入敏捷盛會中的技巧中了解更多關(guān)于敏捷開發(fā)的UX的信息。Jeff Patton在這個網(wǎng)站中也有很多關(guān)于繪制故事地圖的信息。他也順手寫了《用戶故事地圖》一書。

用戶故事地圖1

用戶故事地圖2

用戶故事地圖3

用戶故事地圖4

視覺稿(Visuals)

視覺稿,實物模型,復(fù)合體,叫什么都可以(我認為叫做視覺稿是最清楚的),圖形化設(shè)計視覺稿是重要的UX文檔。它們展現(xiàn)了完成的設(shè)計最終應(yīng)該長什么樣子。隨著響應(yīng)式設(shè)計的流行,更加組件化的視覺稿(比如風格瓷磚)也越來越流行了。

線框圖(Wireframes)

在很多年的時間里線框圖是UX設(shè)計師的關(guān)鍵UX文檔。但是,隨著市面上出現(xiàn)的原型制作工具越來越強大和方便(更別說有那么多線框圖的局限性),原型已經(jīng)開始強勢擠入了線框圖的UX文檔榜首位置。

線框圖用來展示組成屏幕,頁面或者UI組件的UI元素(文字,圖片,按鈕,鏈接等)。線框圖有點像UI的藍圖,展示了由什么元素組成UI以及它們應(yīng)該如何運作,但不一定會展示UI的外觀。


線框圖1

線框圖2

線框圖3

線框圖4

文字云(Word clouds)

文字云(有時候會令人困惑地被稱為標簽云)是一種視覺化地以某種形狀展現(xiàn)一組詞語的方式。通常是以云的形狀(所以叫做文字云),詞語的大小跟詞語的重要性或頻率正相關(guān)。

文字云本身不是一種常見的UX文檔,但是可以用來傳達UX相關(guān)的信息,比如入站搜索詞,用戶反饋和站內(nèi)搜索詞。你可以在我的文章使用文字云表達中讀到更多關(guān)于文字云的信息。也可以看看文章使用文字云提升你的設(shè)計研究的三種方式。

文字云1

文字云2

翻譯自:http://www.uxforthemasses.com/resources/example-ux-docs/

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容