前面兩篇文章分別介紹了設(shè)計的本質(zhì)是解決問題以及如何確定設(shè)計目標(biāo)，這篇文章來說說確定設(shè)計目標(biāo)之后的工作。

確定了設(shè)計目標(biāo)之后，可以按照這個通用的流程繼續(xù)進(jìn)行：競品分析→流程圖→原型圖。競品分析是一個較大的話題，以后有機(jī)會另辟一篇文章跟大家分享。本文重點(diǎn)說一下流程圖和原型圖。

把一個流程圖畫出來，需要兩步：第一步將需求涉及的元素列出來，并進(jìn)行歸類；第二步根據(jù)心理模型進(jìn)行排序。畫完流程圖，需要根據(jù)設(shè)計目標(biāo)找出流程中每一步的設(shè)計重點(diǎn)。

我們來舉個：

【需求】新建視頻列表：用戶在手機(jī)客戶端里新建一個視頻列表，加入選定的視頻。這其中涉及的元素有：列表名稱、簡介、封面、選擇視頻（包括上傳新的視頻和選擇已上傳過的視頻）、標(biāo)簽。

分析一下這些元素：名稱、簡介、封面和標(biāo)簽是關(guān)于視頻介紹的，可歸為一類；選擇視頻是為列表添加內(nèi)容，歸為一類。

然后根據(jù)心理模型，也就是人們普遍的認(rèn)知，來為它們排序。人們一般是先為列表取個名字，設(shè)置好封面這些基本信息，再為其選擇內(nèi)容。所以這里的流程設(shè)計為：填寫列表信息→選擇視頻。

請思考一下：由于這個需求涉及的功能點(diǎn)比較簡單，可否把這兩步流程放在同一個頁面呢？這就需要用到我們這次系列文章的核心：設(shè)計目標(biāo)。

分析一下這個需求的設(shè)計目標(biāo)：產(chǎn)品目標(biāo)是這個功能的完成率盡可能高；用戶目標(biāo)，是快速、準(zhǔn)確完成這個任務(wù)。由于這個需求是為手機(jī)客戶端提出的，而手機(jī)屏幕的尺寸較小，流程的兩步如果放在一個頁面，這個頁面會變得很長。同時因?yàn)樵撔枨笮枰僮鞯狞c(diǎn)比較多（輸入名稱、設(shè)置封面、選擇標(biāo)簽、選擇視頻等都需要操作），如果放在同一個頁面，這個頁面會變得比較重。因此這里較好的做法是把選擇視頻這一步挪到第二個頁面，從而使頁面輕盈，減少用戶負(fù)擔(dān)。

流程有了，我們來分析每一步的設(shè)計重點(diǎn)。在第一步，涉及輸入操作，聯(lián)系我們的用戶目標(biāo)，因此這里的重點(diǎn)是輸入盡可能方便。而選擇視頻的那一步，迅速找到用戶想找的視頻很關(guān)鍵，所以這是重點(diǎn)。

帶著這些重點(diǎn)，我們來設(shè)計原型。在設(shè)計填寫列表信息頁的時候，我希望讓這個頁面清晰、簡單——在沒填寫內(nèi)容時，我們使用默認(rèn)文字來告知用戶這里應(yīng)當(dāng)填寫的內(nèi)容，并且把標(biāo)題和簡介只用一條線分開。為了使輸入方便設(shè)計了一個細(xì)節(jié)：在用戶輸入標(biāo)題之后，在下簡介區(qū)域會自動匹配和標(biāo)題相關(guān)的內(nèi)容，然后后面有一個“使用”按鈕，用戶點(diǎn)擊“使用”就可以添加上這些內(nèi)容，減少了用戶的輸入。同時，標(biāo)簽部分也會為用戶根據(jù)標(biāo)題進(jìn)行自動匹配。所有這些設(shè)計，都是為了達(dá)到方便用戶輸入的目的。

在選擇視頻頁面，設(shè)計的重點(diǎn)是迅速找到視頻。因此，方案采用了一行兩個視頻的展現(xiàn)方式，方便用戶通過封面圖迅速辨識視頻；同時一行兩個的排布方式，并按照視頻名稱的字幕順序進(jìn)行排列，用戶瀏覽效率比較高。在選擇了視頻之后，頁面底部會有提示欄提示用戶選擇了幾個視頻，點(diǎn)擊可以查看，方便確認(rèn)。另外，需求里是沒有提搜索功能的。但是考慮到如果用戶有很多視頻，這個列表會很長，不容易找到列表后部的視頻。所以方案里增加了搜索功能，幫助用戶快速找到視頻。

可以看出，一切的設(shè)計，都在圍繞產(chǎn)品目標(biāo)和用戶目標(biāo)來進(jìn)行。

驗(yàn)證設(shè)計目標(biāo)

最后順提一下，在完成了一個設(shè)計稿，我們可以對照設(shè)計目標(biāo)，然后通過數(shù)據(jù)和反饋來看我們的設(shè)計有沒有達(dá)到設(shè)計目標(biāo)。這對我們的成長有很大的幫助：成功的設(shè)計可以變成我們的經(jīng)驗(yàn)，沒有達(dá)到設(shè)計目標(biāo)的方案，我們可以從中分析原因，避免以后再犯。

獲取數(shù)據(jù)方面，我們可以跟數(shù)據(jù)分析師溝通需要的數(shù)據(jù)變化情況，或者自己尋求數(shù)據(jù)權(quán)限來分析結(jié)果。

獲取反饋反面，有兩種方式：一是可以通過用戶的反饋，比如后臺用戶的留言，用戶調(diào)研的結(jié)果獲取方案的反饋；二是可以通過同事和領(lǐng)導(dǎo)的反饋來檢驗(yàn)自己的設(shè)計。

以上是《一招教你讓交互方案更靠譜——目標(biāo)導(dǎo)向設(shè)計法》的第三篇內(nèi)容，也是最后一篇，主要介紹了如何畫流程圖以及原型圖。愿你通過三篇文章掌握設(shè)計目標(biāo)這一利器，新年升職加薪走上人生巔峰。

相關(guān)閱讀

目標(biāo)導(dǎo)向設(shè)計法01：如何才能讓交互方案更靠譜？

目標(biāo)導(dǎo)向設(shè)計法02：如何確定設(shè)計目標(biāo)？

#專欄作家#

沐風(fēng)，微信公眾號：“沐風(fēng)與體驗(yàn)設(shè)計”。人人都是產(chǎn)品經(jīng)理專欄作家，2017年度作家評選最佳人氣獎。愛奇藝Phone和PC端交互團(tuán)隊(duì)負(fù)責(zé)人。留德海龜，曾任職騰訊微生活、網(wǎng)易、宜信。6年交互設(shè)計經(jīng)驗(yàn)，專注設(shè)計領(lǐng)域，歡迎關(guān)注。

本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來自 Unsplash，基于CC0協(xié)議。