一招教你讓交互方案更靠譜！超好用的目標導向設計法

對于一枚交互設計師，設計水平的重要判斷標準之一，是看設計師能否產出足夠靠譜的方案。對內，方案要能幫助產品不斷向前發展，提升產品的數據，為公司帶來收益；對外，方案要能滿足用戶的使用需要，方便用戶的操作，提供良好的用戶體驗。對于交互的同學來說，這些是我們的天職，要想盡一切辦法去做好。那么問題來了，如何才能做好這些天職呢？下面我將分三個階段介紹一個很好用的設計方法：目標導向設計法。掌握了這個設計方法，可以幫你設計出團隊內部認可、用戶也喜歡的方案。

設計目標

要理解目標導向設計法，首先要理解最核心的元素——設計目標。這就繞不開設計的鼻祖——包豪斯。包豪斯是世界上第一所完全為發展設計教育而建立的學院，在設計史上占據著非常重要的地位。她從1919年創立開始，一直到今天都對設計界有著很大的影響。現在我們看到的很多建筑風格，都依然是包豪斯的老師所創立的國際主義風格。

△ ?包豪斯第三任校長米斯先生于1958年設計完成的西格拉姆大廈，典型的國際主義風格

現在整個世界范圍內的建筑，大面積都是這種極簡風，包豪斯的影響可謂波及全球。包豪斯學校之所以偉大，是因為包豪斯首次將理性思維的光輝注入了設計活動中。她首次提出要為大工業生產而設計。包豪斯主動將學校和企業界、工業界聯系起來，使學生能夠體驗工業生產與設計的關聯。這樣的做法，讓學生能夠設計出真正符合生產標準的作品，而避免了產出只是看起來美好、卻無法量產的作品。其次，包豪斯奠定了現代設計教育的結構基礎。包豪斯把課程分為“對平面和立體結構的研究”、“對材料的研究”、“色彩研究” 三個方面，使視覺教育第一次比較牢固的建立在科學的基礎上。

在這之前，設計都是被劃分在藝術的門類下面，設計本身，也被認為是靠感性來進行創作的一項活動。最后，包豪斯首次提出了“以解決問題為中心”的設計理念。設計是為了解決問題，這是設計的終極目標。不論是設計一個水壺，還是一個視頻列表，我們的設計方案一定是為了達到某個目標，解決某個問題。設計是為了解決問題，而藝術是為了表達內心。這是兩者本質上的區別。從包豪斯開始，設計開始能夠真正的為生產服務，發揮了它的最大價值。

以上幫我們明確了設計的本質是解決問題。具體到交互設計領域，我們是靠“設計目標”幫我們理清項目需要解決的問題。交互設計的設計目標由兩部分構成：產品目標和用戶目標。產品目標一般由產品經理提出（通常包含在需求文檔里），也可以由設計師提出（通過分析得出）。常見的產品目標如“提升XX功能的轉化率”、“提高XX頁面的使用時長”等等。而用戶目標，可以概括為“用戶通過做XXX的操作，可以滿足XXX的需要”，一般需要設計師來分析總結。為了更好的理解設計目標，我們來舉個例子。例如現在有一個需求是優化app的登錄頁面：數據顯示很多用戶沒有完成操作就離開了頁面，因此需要立項優化。我們來分析一下這個項目的設計目標。從需求中得知，很多用戶沒有完成操作就離開了，頁面的轉化率低，因此這里的產品目標就是“提升登錄頁面的轉化率”。下面來分析用戶目標，用戶其實是不愿意登錄的，因為登錄操作麻煩，用戶也沒有這個習慣。那么，當用戶來到這個頁面，他的需要是什么呢？答案是快速登錄。用戶希望登錄越簡單越好，越快越好。這里需要注意的是，在確定用戶目標時，應從用戶的角度出發，發現他們的需要。千萬不能把用戶目標變成了給用戶的任務。比如下面這個注冊頁，就是布置給了用戶一堆輸入任務。

△ ?讓用戶在注冊時提供如此多的信息，真不知道是注冊還是查戶口。

設計目標

設計的本質是解決問題，所以做交互設計要有設計目標，而設計目標包含產品目標和用戶目標。現在來說說如何確定設計目標。

先說產品目標。這里分兩種情況：

1. 如果產品需求是由產品經理提出的，那么先看產品需求文檔里有沒有寫明產品目標。有的文檔會寫的很清楚，比如"提升登錄的轉化率"。有的沒有那么清楚，這時候就需要我們充分理解產品需求，提煉出產品目標。這個過程往往需要設計師跟產品經理充分的溝通，保證需求理解得清楚、準確。在溝通的過程中有時會發現產品自己也沒把這個需求想清楚，這時候一個優秀的交互就得幫產品一起理清需求，明確做這個需求的目的。

2.?如果產品需求是由設計師主動發起的，那么在發起需求的時候，我們要明確這個需求要解決什么問題。設計師發現一個需求，可以從以下三個方面著手：研究數據、進行用戶調研/查看用戶的反饋、進行可用性測試。以研究數據為例，下面是我在網易的時候，發現的一組后臺數據：

第一個曲線圖，是網易新聞視聽tab的點擊量變化圖，從中可以看出，在把抽屜導航改成了底導航之后（紅線所示），視聽tab獲得了大量新增點擊；第二個圖展示的是視聽tab里視頻的點擊量，改版后點擊量整體上依然在原位擺動。這樣的數據很有問題：更多的用戶來到這個tab，但平均看的視頻卻少了。因此我當時發起一個需求：優化視聽tab，在設計上加強優質視頻的展示，以提升視頻tab的活躍度。此時的產品目標很簡單咯，就是提升視聽tab的活躍度。

下面說說確定用戶目標的方法：主要是從這個功能的場景出發，來明確用戶的需要。如何確定場景？這里提供一個模板：

用戶場景：在某時間（when），某某地點（where），周圍出現了某些事物時（with what），特定類型的用戶（who）萌發了某種欲望（desire），會想到通過某種手段（method）來滿足欲望。

假設我們在新聞列表里，要插入登錄領紅包的卡片。這時候，用戶的場景可以描述為：在用戶瀏覽新聞列表（地點）的時候（時間），看到了“登錄領5元紅包”的卡片（出現某物），未登錄的用戶（特定類型用戶）萌發了登錄的欲望（欲望），會點擊卡片的登錄按鈕（手段）來登錄。通過描述場景，這里的用戶目標就可以總結為“登錄領紅包”。

為了更好地理解如何確定設計目標，我們來再舉個例子 ：

某理財應用要做一個續約的功能，主要針對購買的理財產品將要到期的用戶，提醒他們可以續約。提供的續約信息包括用做續約的本金、續約方式（本息續約）、預期增加收益、續約期限、續約后的到期日、續約說明。續約操作后需要審核，審核一般需要1~2小時，通過后會有短信通知。由于續約能夠給公司帶來不少收益，因此希望用戶在操作上比較流暢，保證不會因為操作而流失用戶。

分析一下，從這段需求描述中，產品目標和用戶目標是什么？

需求里提到“針對理財產品將要到期的用戶，提醒他們可以續約”，所以提醒用戶續約是一個目標。需求里還提到好多概念詞：“預期增加收益”、“續約期限”等等，這些概念詞會增加用戶的理解成本，如果用戶不能很好的理解，完成續約操作的概率就會降低；而像需求中“希望用戶在操作上比較流暢”也是為保證用戶不會半路流失。所以第二個產品目標，是保證流程的轉化率。

那么，用戶目標呢？套用剛剛的模板，這里的場景是：在收到續約推送或者看到理財單里的理財產品可以續約時，購買的理財產品將要到期的用戶萌發了想要續約賺取更多收益的欲望，通過續約操作來滿足。分析一下這個場景，我們可以得到用戶目標是了解續約信息，完成續約操作。

對于續約這類流程性比較強的需求，跟大家分享一個我總結的“流程四階段”，即“發現、了解、操作、跟進/記憶”。在每一個階段，都有每一個階段需要注意的重點，在設計的時候要特別注意。比如在續約這個例子中，發現階段，重點是“引起注意”；了解階段的重點是“續約的規則和好處”；操作階段的重點是符合用戶的心理模型，不能讓用戶覺得不安全；跟進/記憶階段，主要是注意結果的反饋。

由于發現部分，我們使用push和理財單中的肩標提示，相對來說容易一些。

主要的心思，要花在了解和操作部分上。而這里面的重點，是心理模型。

啥是心理模型？這是我在百度百科上找到的答案：

“心理模型指相互關聯的言語或表象的命題集合，是人們作出推論和預測的深層知識基礎”。

這是一個比較書面語的定義。通俗一點講，心理模型就是大家對于事物普遍的認知。

再來一個例子：假設我們來到一個會議室，室內溫度13度。我們想通過空調把溫度升到24度。在調空調溫度的時候，很多人會下意識地把溫度調到26，甚至28度，因為人有一種“溫度越高，空調會更努力地工作”的認知。

這種認知，就是人的心理模型。而實際上，即使你把溫度調得再高，空調也沒有為你加速一點點。

空調的制熱功能，有自己的一套運作模型，不論你是設置的24度，還是30度，空調把溫度升到24度所花的時間都是一樣的。

回到續約的例子，人們在花錢購買東西的時候，都希望能有一個類似訂單頁的確認頁面，告訴我我買的是什么，花了多少錢，何時生效。因此，在流程中設計一個這樣的頁面，就是符合用戶心理模型的。

設計目標后

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

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

畫完了流程圖，需要根據設計目標找出流程中每一步的設計重點。我們來舉個例子 ：

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

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

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

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

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

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

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

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

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

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

獲取數據方面，我們可以跟數據分析師溝通需要的數據變化情況，或者自己尋求數據權限來分析結果。獲取反饋反面，有兩種方式：一是可以通過用戶的反饋，比如后臺用戶的留言，用戶調研的結果獲取方案的反饋；二是可以通過同事和領導的反饋來檢驗自己的設計。

歡迎關注作者微信公眾號：新設計青年

「設計師思維好文」

1. 讓你腦洞大開的創新思維方法系列：水平思維
2. 讓你腦洞大開的創新思維方法系列：奔馳法
3. 為什么設計師需要理解產品業務？聊聊結構化思維的應用