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

確定了設計目標之后，可以按照這個通用的流程繼續進行：競品分析→流程圖→原型圖。競品分析是一個較大的話題，以后有機會另辟一篇文章跟大家分享。本文重點說一下流程圖和原型圖。

把一個流程圖畫出來，需要兩步：第一步將需求涉及的元素列出來，并進行歸類；第二步根據心理模型進行排序。畫完流程圖，需要根據設計目標找出流程中每一步的設計重點。

我們來舉個：

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

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

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

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

分析一下這個需求的設計目標：產品目標是這個功能的完成率盡可能高；用戶目標，是快速、準確完成這個任務。由于這個需求是為手機客戶端提出的，而手機屏幕的尺寸較小，流程的兩步如果放在一個頁面，這個頁面會變得很長。同時因為該需求需要操作的點比較多（輸入名稱、設置封面、選擇標簽、選擇視頻等都需要操作），如果放在同一個頁面，這個頁面會變得比較重。因此這里較好的做法是把選擇視頻這一步挪到第二個頁面，從而使頁面輕盈，減少用戶負擔。

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

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

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

可以看出，一切的設計，都在圍繞產品目標和用戶目標來進行。

驗證設計目標

最后順提一下，在完成了一個設計稿，我們可以對照設計目標，然后通過數據和反饋來看我們的設計有沒有達到設計目標。這對我們的成長有很大的幫助：成功的設計可以變成我們的經驗，沒有達到設計目標的方案，我們可以從中分析原因，避免以后再犯。

獲取數據方面，我們可以跟數據分析師溝通需要的數據變化情況，或者自己尋求數據權限來分析結果。

獲取反饋反面，有兩種方式：一是可以通過用戶的反饋，比如后臺用戶的留言，用戶調研的結果獲取方案的反饋；二是可以通過同事和領導的反饋來檢驗自己的設計。

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

相關閱讀

目標導向設計法01：如何才能讓交互方案更靠譜？

目標導向設計法02：如何確定設計目標？

#專欄作家#

沐風，微信公眾號：“沐風與體驗設計”。人人都是產品經理專欄作家，2017年度作家評選最佳人氣獎。愛奇藝Phone和PC端交互團隊負責人。留德海龜，曾任職騰訊微生活、網易、宜信。6年交互設計經驗，專注設計領域，歡迎關注。

本文原創發布于人人都是產品經理。未經許可，禁止轉載。

題圖來自 Unsplash，基于CC0協議。