作為用戶體驗(yàn)的實(shí)踐者，我們經(jīng)常被潛在客戶和其他設(shè)計(jì)師問到類似的問題:

“在設(shè)計(jì)項(xiàng)目結(jié)束時(shí)，你會(huì)提供什么可交付成果？”

“這對(duì)我們的開發(fā)團(tuán)隊(duì)來說是否足夠執(zhí)行？”

“我們的設(shè)計(jì)團(tuán)隊(duì)是否能夠維護(hù)你的設(shè)計(jì)？”

“在未來添加新功能有多難?"

等等...

為了解決所有這些問題，并為設(shè)計(jì)過程提供一些線索，這里簡要描述每個(gè)交付品及其目的。

什么是 UX 可交付？

讓我們從最基本的開始ーー什么是可交付的？ 簡單地說，用戶體驗(yàn)可交付物是一個(gè)包含設(shè)計(jì)思維以及研究結(jié)果的設(shè)計(jì)文檔，并為設(shè)計(jì)和開發(fā)團(tuán)隊(duì)提供指導(dǎo)。 不管是哪個(gè)行業(yè)或平臺(tái)，不管是小型初創(chuàng)企業(yè)還是全球性企業(yè)，一個(gè)標(biāo)準(zhǔn)的用戶體驗(yàn)設(shè)計(jì)項(xiàng)目的可交付成果清單或多或少是相同的，主要取決于產(chǎn)品需求、預(yù)算和時(shí)間表。

這份清單通常包括以下文件:

研究階段

* 用戶調(diào)研文檔

* 用戶界面/用戶體驗(yàn)研究文檔

用戶體驗(yàn)設(shè)計(jì)階段

* 信息架構(gòu)思維導(dǎo)圖

* 用戶流程文件

* 線框圖

* 交互式原型

* 用戶測試報(bào)告

界面設(shè)計(jì)階段

* 視覺設(shè)計(jì)原型

* 用戶界面動(dòng)畫

* 設(shè)計(jì)系統(tǒng)

* 設(shè)計(jì)規(guī)范

下面我們來詳細(xì)來看一下每一個(gè)問題：

用戶調(diào)研文檔

用戶研究是任何項(xiàng)目不可分割的一部分。 通過利用各種方法，例如個(gè)人訪談、實(shí)地研究和在線調(diào)查，我們獲得了關(guān)于客戶需求、情感、行為和動(dòng)機(jī)的額外洞察力。 除了采訪用戶，我們也進(jìn)行其他方法分析，如卡片分類，思維導(dǎo)圖，協(xié)作線框，等等。 這些訪談和方法的結(jié)果被整合在一份研究文件中，其中包括主要的發(fā)現(xiàn)、人物角色和高層次的建議。 本文檔幫助我們獲得關(guān)鍵利益相關(guān)者對(duì)用戶目標(biāo)和期望特性的認(rèn)可。?

除了最后的調(diào)研文檔，我們還提供了所有的原始材料，包括用戶研究計(jì)劃、帶有結(jié)果矩陣的電子表格、音頻或視頻記錄、訪談中的筆記等等。

用戶界面 / 用戶體驗(yàn)研究文檔

競品分析是一個(gè)很有價(jià)值的研究方法，它可以幫助我們找出競爭對(duì)手的優(yōu)勢(shì)和劣勢(shì)。 通常，我們挑選5-7個(gè)最具吸引力的直接競爭對(duì)手，并評(píng)估他們的解決方案，以解決我們?cè)谟脩粞芯亢晚?xiàng)目發(fā)現(xiàn)過程中發(fā)現(xiàn)的問題。 我們還注意到它們使用的術(shù)語，以確保我們的解決方案利用了行業(yè)標(biāo)準(zhǔn)語言和命名約定。

?

但是我們并沒有止步于此，也沒有將我們的研究擴(kuò)展到與項(xiàng)目沒有直接關(guān)系的產(chǎn)品上。 畢竟，最終用戶體驗(yàn)更加多樣化，而不僅僅局限于單一產(chǎn)品。 在研究階段，我們可能會(huì)關(guān)注諸如導(dǎo)航、使用體驗(yàn)、最常見的工作流和設(shè)計(jì)模式、使用的可視化類型等等。 因此，我們創(chuàng)建了一個(gè)最終的研究文檔，其中包含了主要的調(diào)查結(jié)果，并作為指導(dǎo)和支持我們的設(shè)計(jì)決策的手冊(cè)在整個(gè)項(xiàng)目中使用。

信息架構(gòu)思維導(dǎo)圖

一旦主要的研究階段完成，我們使用所有收集到的數(shù)據(jù)為未來的產(chǎn)品建立一個(gè)信息架構(gòu)，或者修改現(xiàn)有的架構(gòu)以更好地適應(yīng)用戶的需求和工作流程。 它通常是以一種思維導(dǎo)圖的形式創(chuàng)建的，這種思維導(dǎo)圖可以鳥瞰整個(gè)系統(tǒng)，并顯示各個(gè)部分之間的關(guān)系。 事實(shí)證明，當(dāng)與利益相關(guān)者合作時(shí)，這種思維導(dǎo)圖練習(xí)是非常有效的。 通過可視化整個(gè)項(xiàng)目結(jié)構(gòu)，可以更容易地理解范圍和定義特性優(yōu)先級(jí)。

思維導(dǎo)圖幫助我們更準(zhǔn)確地規(guī)劃設(shè)計(jì)工作，以有效和可持續(xù)的方式組織內(nèi)容，并創(chuàng)建一個(gè)更深思熟慮的導(dǎo)航。 多年來，我們嘗試了很多在線和離線工具來創(chuàng)建思維導(dǎo)圖，最終以 MindNode 作為我們的首選工具而告終。

用戶流程文件

用戶流程是一系列用戶操作或系統(tǒng)狀態(tài)，用戶需要通過這些操作或系統(tǒng)狀態(tài)來實(shí)現(xiàn)一個(gè)有意義的目標(biāo)。 我們創(chuàng)建了一個(gè)設(shè)計(jì)規(guī)范格式，它將屏幕布局設(shè)計(jì)與用戶和系統(tǒng)交互的流程圖樣的表示分解為簡單的場景。 本文檔的主要目標(biāo)是為開發(fā)人員提供所有可能的用戶流的詳細(xì)描述，包括邊緣案例、錯(cuò)誤和各種狀態(tài)。

它是一個(gè)迭代的文檔---- 在項(xiàng)目的整個(gè)生命周期中，我們不斷地更新它。 這一切都是從空白的模版和箭頭開始的，它們勾勒出核心工作流。

一旦我們有了初始的線框圖，我們就把它們添加到文檔中，一旦視覺設(shè)計(jì)生產(chǎn)階段開始，我們就用最終的視覺效果替換它們。

這個(gè)過程使我們能夠更有效地迭代用戶流程，根據(jù)文檔的完整性不斷監(jiān)控項(xiàng)目的進(jìn)度，并在早期識(shí)別任何令人沮喪或混亂的點(diǎn)。

線框圖

線框圖本質(zhì)上是一個(gè)網(wǎng)站或應(yīng)用程序的框架。 它們被設(shè)計(jì)用于固化項(xiàng)目需求并定義主要的布局、用戶體驗(yàn)工作流和內(nèi)容。 它們很容易創(chuàng)建和維護(hù)，允許我們快速迭代各種想法，獲取利益相關(guān)者和最終用戶的反饋。

在設(shè)計(jì)界有一個(gè)永無止境的爭論，是否應(yīng)該創(chuàng)建低保真度或高保真度的線框圖。 雙方都有自己的論點(diǎn)，但我們更傾向于后者。 根據(jù)我們的經(jīng)驗(yàn)，利益相關(guān)者和用戶傾向于更好地理解他們。 我們不需要解釋"這個(gè)灰色模塊以后會(huì)被復(fù)制取代"，當(dāng)線框圖更加詳細(xì)，看起來更像是一個(gè)成品而不是一個(gè)草圖時(shí)，許多問題就自己解決了。

然而，在用戶體驗(yàn)階段的開始，當(dāng)我們剛剛開始整體布局和導(dǎo)航時(shí)，低保真度的線框圖被證明是更有效的。 我們可以快速生成一組選項(xiàng)來與客戶討論，一旦我們同意某個(gè)解決方案，我們就轉(zhuǎn)向高保真的線框圖，這需要更多的時(shí)間來創(chuàng)建，但從長遠(yuǎn)來看對(duì)項(xiàng)目更有利。

交互式原型

一張照片勝過千言萬語。 一個(gè)交互式原型的價(jià)值是它的10倍。 我們創(chuàng)建交互式原型作為線框圖和視覺設(shè)計(jì)過程的一部分。 它們幫助我們識(shí)別設(shè)計(jì)中的弱點(diǎn)，在內(nèi)部迭代設(shè)計(jì)，驗(yàn)證假設(shè)，測試假設(shè)。 通常情況下，我們會(huì)使用像 InVision 這樣的簡單工具。 它提供了全方位的功能來進(jìn)行用戶測試，向客戶展示我們的工作，或者收集涉眾的反饋。 當(dāng)我們想要測試一個(gè)更復(fù)雜的交互或者工作流時(shí)，我們可以使用類似于 Framer 的東西或者直接用 html / css 創(chuàng)建原型。

使用 InVision 制作的交互式原型。 參見完整版本的 https://invis.io/j7s72jy8z4e

用戶測試報(bào)告

在進(jìn)行設(shè)計(jì)項(xiàng)目時(shí)，在設(shè)計(jì)過程中停下來驗(yàn)證假設(shè)和設(shè)計(jì)決策總是很有用的。 其中一站是可用性測試。 在交互式原型的幫助下(使用線框圖或最終視圖創(chuàng)建) ，我們進(jìn)行了一系列的用戶測試會(huì)話。 作為這個(gè)練習(xí)的結(jié)果，我們創(chuàng)建了一個(gè)用戶測試報(bào)告，其中包含對(duì)我們的發(fā)現(xiàn)的總結(jié)和對(duì)下一步的建議。 它還通過概述總體測試目標(biāo)、設(shè)置和參與者人口統(tǒng)計(jì)特征為測試提供背景。 我們還分享音頻和視頻錄音以及其他輔助材料。

視覺設(shè)計(jì)原型

隨著我們最終確定核心特性的線框圖和工作流程，我們開始在項(xiàng)目的視覺方面工作。 無論是使用品牌指南(如果提供的話) ，還是從頭開始設(shè)計(jì)風(fēng)格，我們總是從視覺探索開始。 我們創(chuàng)造了一套視覺設(shè)計(jì)理念伴隨著情緒板，以說明我們的愿景，未來的風(fēng)格的產(chǎn)品。

一旦我們同意了進(jìn)入開發(fā)階段的方向ーー對(duì)所有需要的頁面應(yīng)用樣式，并創(chuàng)建所有必要的規(guī)范，這樣開發(fā)人員就可以開始從事他們這一邊的項(xiàng)目。

用戶界面動(dòng)畫

作為生產(chǎn)階段的一部分，我們還提供了短視頻剪輯，展示了主要的用戶界面交互和動(dòng)畫，為用戶體驗(yàn)增加了愉快的時(shí)刻，并引導(dǎo)用戶沿著這條路走下去。 然后，開發(fā)人員將視頻和動(dòng)畫規(guī)范用作將這些交互實(shí)現(xiàn)到最終產(chǎn)品的指南。

設(shè)計(jì)系統(tǒng)

設(shè)計(jì)系統(tǒng)是一套設(shè)計(jì)說明文件，為客戶的內(nèi)部設(shè)計(jì)團(tuán)隊(duì)或第三方機(jī)構(gòu)提供強(qiáng)大的工具包。

風(fēng)格指南形式化的關(guān)鍵設(shè)計(jì)原則，描述視覺識(shí)別，并設(shè)置排版，顏色，響應(yīng)行為，產(chǎn)品照片和可視化風(fēng)格的基本規(guī)則。

組件庫是不同狀態(tài)的 UI 元素的集合。 它以草圖文件或任何其他由項(xiàng)目需求設(shè)置的軟件的形式出現(xiàn)。

用戶體驗(yàn)指南文檔提供了關(guān)于導(dǎo)航的建議，描述了使用的用戶體驗(yàn)設(shè)計(jì)模式，以及如何使用組件庫應(yīng)用它們。

設(shè)計(jì)系統(tǒng)幫助維護(hù)產(chǎn)品的設(shè)計(jì)和體驗(yàn)的一致性，并被用作創(chuàng)建新頁面和添加新功能的構(gòu)建塊。

設(shè)計(jì)規(guī)范

當(dāng)涉及到開發(fā)時(shí)，確保設(shè)計(jì)按預(yù)期的方式實(shí)現(xiàn)總是很重要的。 通常情況下，開發(fā)者自愿或不情愿地忽略一些看起來不是很重要的小事情，但是設(shè)計(jì)和實(shí)現(xiàn)之間的這些小差異會(huì)產(chǎn)生滾雪球效應(yīng)，最終可能會(huì)極大地影響最終的用戶體驗(yàn)。

在過去，我們的團(tuán)隊(duì)會(huì)提供一個(gè)詳細(xì)的、靜態(tài)的 PDF 文檔，其中描述了所有 UI 元素的度量、邊距、填充等。 由于在整個(gè)項(xiàng)目中不斷進(jìn)行設(shè)計(jì)更新，這個(gè)文檔的制作非常耗時(shí)，而且很難維護(hù)。 開發(fā)人員經(jīng)常抱怨很難快速找到所需的信息并在文檔中進(jìn)行導(dǎo)航。

為了解決這些問題，我們決定轉(zhuǎn)向在線解決方案ーー zeblin.io。 我們現(xiàn)在有了一個(gè)多功能的交互式工具，為開發(fā)人員提供了一種方便的方式，在他們需要的時(shí)候得到他們需要的東西。 除了大小和頁邊距，Zeplin 還提供代碼片段，允許快速將資產(chǎn)導(dǎo)出到 PNG 或 SVG 格式，擁有評(píng)論系統(tǒng)來支持開發(fā)和設(shè)計(jì)團(tuán)隊(duì)之間的交流，并且在整個(gè)項(xiàng)目中易于維護(hù)。

總結(jié)

創(chuàng)建這些資產(chǎn)的過程并不總是線性的，并且取決于項(xiàng)目的優(yōu)先級(jí)和進(jìn)度。 文檔的某些部分可以并行完成，某些部分可以比其他部分更早開始。 在項(xiàng)目結(jié)束時(shí)，我們通過共享 Google Drive 或 Dropbox 文件夾提供所有最終可交付成果。 我們還將所有在 Zeplin 和 InVision 創(chuàng)建的項(xiàng)目的所有權(quán)轉(zhuǎn)讓給客戶。

一切完成后，我們可以通過提供設(shè)計(jì)支持來繼續(xù)我們的合作伙伴關(guān)系。 這可能類似于監(jiān)控開發(fā)以確保一切都得到正確實(shí)施，充當(dāng)內(nèi)部設(shè)計(jì)團(tuán)隊(duì)并提供不斷的設(shè)計(jì)更新，或者組織與客戶團(tuán)隊(duì)的研討會(huì)以教育他們關(guān)于新的設(shè)計(jì)系統(tǒng)。

作者：Alex Khmelevsky

原文鏈接： https://clay.global/news/ux-design-agency-deliverables/?ref=heydesigner