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

設(shè)計目標(biāo)

要理解目標(biāo)導(dǎo)向設(shè)計法，首先要理解最核心的元素——設(shè)計目標(biāo)。這就繞不開設(shè)計的鼻祖——包豪斯。包豪斯是世界上第一所完全為發(fā)展設(shè)計教育而建立的學(xué)院，在設(shè)計史上占據(jù)著非常重要的地位。她從1919年創(chuàng)立開始，一直到今天都對設(shè)計界有著很大的影響?，F(xiàn)在我們看到的很多建筑風(fēng)格，都依然是包豪斯的老師所創(chuàng)立的國際主義風(fēng)格?！?a href="http://pgwc.com.cn" target="_self">重慶網(wǎng)站設(shè)計

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

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

在這之前，設(shè)計都是被劃分在藝術(shù)的門類下面，設(shè)計本身，也被認(rèn)為是靠感性來進(jìn)行創(chuàng)作的一項活動。最后，包豪斯首次提出了“以解決問題為中心”的設(shè)計理念。設(shè)計是為了解決問題，這是設(shè)計的終極目標(biāo)。不論是設(shè)計一個水壺，還是一個視頻列表，我們的設(shè)計方案一定是為了達(dá)到某個目標(biāo)，解決某個問題。設(shè)計是為了解決問題，而藝術(shù)是為了表達(dá)內(nèi)心。這是兩者本質(zhì)上的區(qū)別。從包豪斯開始，設(shè)計開始能夠真正的為生產(chǎn)服務(wù)，發(fā)揮了它的最大價值?！?a href="http://pgwc.com.cn" target="_self">重慶定制網(wǎng)站

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

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

設(shè)計目標(biāo)

設(shè)計的本質(zhì)是解決問題，所以做交互設(shè)計要有設(shè)計目標(biāo)，而設(shè)計目標(biāo)包含產(chǎn)品目標(biāo)和用戶目標(biāo)。現(xiàn)在來說說如何確定設(shè)計目標(biāo)?！?a href="http://pgwc.com.cn" target="_self">小程序

先說產(chǎn)品目標(biāo)。這里分兩種情況：

1. 如果產(chǎn)品需求是由產(chǎn)品經(jīng)理提出的，那么先看產(chǎn)品需求文檔里有沒有寫明產(chǎn)品目標(biāo)。有的文檔會寫的很清楚，比如”提升登錄的轉(zhuǎn)化率”。有的沒有那么清楚，這時候就需要我們充分理解產(chǎn)品需求，提煉出產(chǎn)品目標(biāo)。這個過程往往需要設(shè)計師跟產(chǎn)品經(jīng)理充分的溝通，保證需求理解得清楚、準(zhǔn)確。在溝通的過程中有時會發(fā)現(xiàn)產(chǎn)品自己也沒把這個需求想清楚，這時候一個優(yōu)秀的交互就得幫產(chǎn)品一起理清需求，明確做這個需求的目的。

2. 如果產(chǎn)品需求是由設(shè)計師主動發(fā)起的，那么在發(fā)起需求的時候，我們要明確這個需求要解決什么問題。設(shè)計師發(fā)現(xiàn)一個需求，可以從以下三個方面著手：研究數(shù)據(jù)、進(jìn)行用戶調(diào)研/查看用戶的反饋、進(jìn)行可用性測試。以研究數(shù)據(jù)為例，下面是我在網(wǎng)易的時候，發(fā)現(xiàn)的一組后臺數(shù)據(jù)：

第一個曲線圖，是網(wǎng)易新聞視聽tab的點擊量變化圖，從中可以看出，在把抽屜導(dǎo)航改成了底導(dǎo)航之后（紅線所示），視聽tab獲得了大量新增點擊；第二個圖展示的是視聽tab里視頻的點擊量，改版后點擊量整體上依然在原位擺動。這樣的數(shù)據(jù)很有問題：更多的用戶來到這個tab，但平均看的視頻卻少了。因此我當(dāng)時發(fā)起一個需求：優(yōu)化視聽tab，在設(shè)計上加強(qiáng)優(yōu)質(zhì)視頻的展示，以提升視頻tab的活躍度。此時的產(chǎn)品目標(biāo)很簡單咯，就是提升視聽tab的活躍度?！?a href="http://pgwc.com.cn" target="_self">官網(wǎng)

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

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

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

為了更好地理解如何確定設(shè)計目標(biāo)，我們來再舉個例子 ：——定制網(wǎng)站

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

分析一下，從這段需求描述中，產(chǎn)品目標(biāo)和用戶目標(biāo)是什么？

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

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

對于續(xù)約這類流程性比較強(qiáng)的需求，跟大家分享一個我總結(jié)的“流程四階段”，即“發(fā)現(xiàn)、了解、操作、跟進(jìn)/記憶”。在每一個階段，都有每一個階段需要注意的重點，在設(shè)計的時候要特別注意。比如在續(xù)約這個例子中，發(fā)現(xiàn)階段，重點是“引起注意”；了解階段的重點是“續(xù)約的規(guī)則和好處”；操作階段的重點是符合用戶的心理模型，不能讓用戶覺得不安全；跟進(jìn)/記憶階段，主要是注意結(jié)果的反饋?！?a href="http://pgwc.com.cn" target="_self">網(wǎng)頁設(shè)計

由于發(fā)現(xiàn)部分，我們使用push和理財單中的肩標(biāo)提示，相對來說容易一些。

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

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

“心理模型指相互關(guān)聯(lián)的言語或表象的命題集合，是人們作出推論和預(yù)測的深層知識基礎(chǔ)”?！?a href="http://pgwc.com.cn" target="_self">重慶網(wǎng)頁設(shè)計

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

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

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

空調(diào)的制熱功能，有自己的一套運(yùn)作模型，不論你是設(shè)置的24度，還是30度，空調(diào)把溫度升到24度所花的時間都是一樣的。

回到續(xù)約的例子，人們在花錢購買東西的時候，都希望能有一個類似訂單頁的確認(rèn)頁面，告訴我我買的是什么，花了多少錢，何時生效。因此，在流程中設(shè)計一個這樣的頁面，就是符合用戶心理模型的?！?a href="http://pgwc.com.cn" target="_self">重慶網(wǎng)站設(shè)計

設(shè)計目標(biāo)后

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

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

畫完了流程圖，需要根據(jù)設(shè)計目標(biāo)找出流程中每一步的設(shè)計重點。我們來舉個例子 ：

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

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

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

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

分析一下這個需求的設(shè)計目標(biāo)：產(chǎn)品目標(biāo)是這個功能的完成率盡可能高；用戶目標(biāo)，是快速、準(zhǔn)確完成這個任務(wù)。由于這個需求是為手機(jī)客戶端提出的，而手機(jī)屏幕的尺寸較小，流程的兩步如果放在一個頁面，這個頁面會變得很長。同時因為該需求需要操作的點比較多（輸入名稱、設(shè)置封面、選擇標(biāo)簽、選擇視頻等都需要操作），如果放在同一個頁面，這個頁面會變得比較重。因此這里較好的做法是把選擇視頻這一步挪到第二個頁面，從而使頁面輕盈，減少用戶負(fù)擔(dān)?！?a href="http://pgwc.com.cn" target="_self">定制網(wǎng)站

流程有了，我們來分析每一步的設(shè)計重點。在第一步，涉及輸入操作，聯(lián)系我們的用戶目標(biāo)，因此這里的重點是輸入盡可能方便。而選擇視頻的那一步，迅速找到用戶想找的視頻很關(guā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)容，然后后面有一個“使用”按鈕，用戶點擊“使用”就可以添加上這些內(nèi)容，減少了用戶的輸入。同時，標(biāo)簽部分也會為用戶根據(jù)標(biāo)題進(jìn)行自動匹配。所有這些設(shè)計，都是為了達(dá)到方便用戶輸入的目的。——網(wǎng)頁設(shè)計

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

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

最后提一下，在完成了一個設(shè)計稿，我們可以對照設(shè)計目標(biāo)，然后通過數(shù)據(jù)和反饋來看我們的設(shè)計有沒有達(dá)到設(shè)計目標(biāo)。這對我們的成長有很大的幫助，成功的設(shè)計可以變成我們的經(jīng)驗，沒有達(dá)到設(shè)計目標(biāo)的方案，我們可以從中分析原因，避免以后再犯?！?a href="http://pgwc.com.cn" target="_self">重慶網(wǎng)站設(shè)計