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

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

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

我們來(lái)舉個(gè)：

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

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

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

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

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

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

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

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

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

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

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

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

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

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

相關(guān)閱讀

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

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

#專欄作家#

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

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

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