嗨，你現(xiàn)在還在被別人認為是“作圖仔”么？上一篇文章我們溝通了，如果不想被打上“作圖仔”的標簽，那我們就需要從頭到尾參與并且親手進行需求分析了，只有這樣，我們才能拿回產(chǎn)品的主導權(quán)。

那么，當我們通過需求分析，獲得了“功能”、“內(nèi)容”以及“優(yōu)先級”之后，我們接下來是否就可以設(shè)計原型界面了呢？

答案是“非也”！因為從需求到界面之間仍舊存在著一段距離，這個距離就是我們今天所要探討的“設(shè)計規(guī)劃”！

內(nèi)容回顧

老規(guī)矩，讓我們先來回顧一下上一篇文章的重要內(nèi)容吧：

用戶體驗設(shè)計的概念：首先是要解決用戶的某個實際問題，其次是讓問題變得更容易解決，最后是給用戶留下深刻的印象，讓他在整個過程中產(chǎn)生美好的體驗。

用戶體驗設(shè)計的特征：

1. 嚴謹、理性、創(chuàng)意；
2. 提供特定問題的解決方案；
3. 不讓用戶思考；
4. 趣味橫生。

理想的需求分析過程 vs 現(xiàn)實的需求分析過程：

設(shè)計規(guī)劃

很多產(chǎn)品經(jīng)理在設(shè)計初期，都有一個很不好的習慣，就是拿到需求以后就開始嘗試著用軟件畫界面，甚至在需求還沒想好的時候，就開始構(gòu)思界面細節(jié)了。（哪位同學是這樣的，請舉手~）

但在某種程度上，這種原罪似乎也并不在于產(chǎn)品經(jīng)理。因為目前的互聯(lián)網(wǎng)公司，確實存在很多團隊，都是直接評審原型，甚至有的還他喵的要求高保真原型，至于需求評審，不存在的。尤其是一些小公司，更是如此。

這樣的結(jié)果可想而知，必然會造成多次的返工修改，浪費巨大的人力成本。

古人云：預(yù)則立，不預(yù)則廢。而設(shè)計規(guī)劃，就是這個“預(yù)”的過程！那究竟什么是設(shè)計規(guī)劃呢？

設(shè)計規(guī)劃的內(nèi)容步驟：

• 根據(jù)需求來設(shè)計相關(guān)的信息和任務(wù)，通過組織信息結(jié)構(gòu)、引導用戶完成任務(wù)得到一系列相關(guān)聯(lián)的界面草圖；
• 然后細化草圖為具體界面，在這個過程中考慮如何讓用戶輕松、愉悅、高效地瀏覽和操作；
• 最后，我們要賦予界面一些魔力，讓用戶難以忘記使用產(chǎn)品的體驗。

信息

獲取信息是用戶訪問互聯(lián)網(wǎng)的重要目的之一。在設(shè)計規(guī)劃階段，一個重要的工作就是信息的組織與分類。這里提供兩種方法供參考：

（1）邏輯分類：我們可以使用人們在生活中熟悉的分類邏輯對信息進行組織

例如我們?nèi)ツ硨氋I衣服，首先我們需要根據(jù)“性別分類”，查看是要買“男裝”，還是“女裝”；然后我們再選擇一下究竟是買“上衣”，還是買“褲子”；最后才是看樣式、價格等詳細信息。

“服裝性別—>服裝類型—>服裝樣式—>服裝價格”，這就是人們習慣的信息組織方式，如果我們將其順序調(diào)換，會不會覺得很別扭呢？

如果以上的描述不夠直觀，那我們想象一下實體店的場景就很容易理解了。有的服裝商店會設(shè)置成一樓女裝，二樓男裝，應(yīng)該沒有哪個服裝商店會設(shè)置成一樓專門賣上衣，二樓專門賣褲子的吧……而且是不是當我們看著哪一款衣服比較滿意的時候，我們才接下來去關(guān)心價格呢？

熟悉的內(nèi)容，會給用戶帶來舒適感，也就是我們常說的“舒適圈”的感念；而陌生的內(nèi)容則代表著需要付出學習成本，每一次成本的付出，往往都會伴隨著些許的焦躁。在互聯(lián)網(wǎng)的世界里，用戶判斷是否選擇或者繼續(xù)使用我們的產(chǎn)品，甚至只在于一瞬之間的感覺。

（2）卡片分類：直接去探究用戶的想法，邀請用戶以卡片的方式，“把類似的東西放一起”

此方法簡單有效。準備好裁剪過的卡片或者便簽紙，將需要分類的信息寫在卡片上，然后組織招募到的志愿者對卡片進行自由分類即可。并且志愿者最好是與網(wǎng)站設(shè)計不相關(guān)的人員。

在產(chǎn)品設(shè)計的初級階段，利用卡片分類可以知道用戶對網(wǎng)站內(nèi)容的期望，為信息架構(gòu)的搭建提供依據(jù)；對現(xiàn)有產(chǎn)品進行改版時，卡片分類可以檢驗現(xiàn)有的信息架構(gòu)是否合理，對新版本的改進提供有效幫助。

任務(wù)

在需求調(diào)研以及分析階段，我們一直談?wù)摰亩际恰皹I(yè)務(wù)”，得到的產(chǎn)物為“業(yè)務(wù)流程圖”。但在設(shè)計規(guī)劃階段，我們談?wù)摰母拍?，則需要轉(zhuǎn)變?yōu)椤叭蝿?wù)”，相應(yīng)的產(chǎn)物也變?yōu)榱恕叭蝿?wù)流程圖”。

“業(yè)務(wù)”與“任務(wù)”二者一字之差，體現(xiàn)的是客觀與主觀的區(qū)別，業(yè)務(wù)是客觀存在的，而任務(wù)則是人為設(shè)計的，你品，你細品~

在設(shè)計規(guī)劃的內(nèi)容步驟中，“信息”與“任務(wù)”是一體的。我們就先來說一下二者之間的關(guān)系。

“信息”與“任務(wù)”的關(guān)系：

需求文檔中的功能和內(nèi)容都是比較零散的，通過梳理信息結(jié)構(gòu)，我們可以把主要的功能、內(nèi)容組織起來。而通過任務(wù)流程，我們則可以把剩余的部分給“拼裝”起來。

一個有意思的比喻：

如果把產(chǎn)品比作一座購物商城，那么信息結(jié)構(gòu)就是商城的框架，比如：這個商城有多少層，每層都賣什么東西，都有哪些品牌店。

任務(wù)流程則相當于商場里面的過道，用戶沿著過道完成“逛街”、支付等主要任務(wù)，通過商場中的各種提示完成去衛(wèi)生間、去服務(wù)臺換車票等次要任務(wù)。

用戶在完成任務(wù)的過程中滿足了自己的需求，而產(chǎn)品也從中直接或間接地實現(xiàn)了其商業(yè)價值。

那我們該怎樣設(shè)計“任務(wù)流程”呢？

這方面所涉及的方式方法，其實與之前我們所談?wù)摰摹皹I(yè)務(wù)流程”并無本質(zhì)的區(qū)別，兩者之間的區(qū)別僅在于范圍的大小或者說層級的深淺，僅此而已。

對這一方面還不熟悉的同學，可自行查閱另外一篇文章《如何進行有效需求分析？（3）流程篇》，我也會在文章結(jié)尾處加入跳轉(zhuǎn)鏈接。

草圖

設(shè)計規(guī)劃是一個承前啟后的階段，其目的是將最初的需求一步一步變?yōu)楝F(xiàn)實。

當我們整理好信息分類，設(shè)計好任務(wù)流程，此時仍舊不要著急用軟件畫界面，因為草圖才是這個階段最高效的方式，一張紙，一支筆，足矣！

原因如下，請君查閱：

（1）發(fā)散創(chuàng)意

設(shè)計規(guī)劃是一個需要發(fā)散創(chuàng)意的階段，用軟件畫界面，會讓我們陷入設(shè)計細節(jié)當中，不自覺地就會考慮頁面的尺寸是否符合柵格、每一行展示4個還是5個商品、按鈕是否需要3個狀態(tài)等等。這些會禁錮我們的思想。

（2）快速迭代

紙面原型更具有可塑性，可以快速地修改和重建，幫助我們探索盡可能多的想法并否定掉那些不靠譜的想法。有了草圖，就可以與相關(guān)人員進行溝通，只需要很少的時間就可以收集到反饋，驗證設(shè)計的可行性。

（3）縮短周期

當我們通過紙面原型進行溝通，并且已經(jīng)通過大致的方案時，也就意味著確定了產(chǎn)品的框架、主要的流程、基本的信息和功能等。對于下一個環(huán)節(jié)例如交互設(shè)計、UI設(shè)計或者研發(fā)，就可以預(yù)先進行一部分工作，而不必等到全部內(nèi)容都細化成標準原型并交付后，再進行動工。這必然提高工作效率，縮短項目周期。

界面

草圖是設(shè)計方案的雛形，注重的是隨時隨地記錄表達，無需考慮格式和規(guī)則。

當草圖確定之后，需要我們將其向界面原型進行轉(zhuǎn)換的時候，就需要遵從一些設(shè)計原則了。

既然在設(shè)計規(guī)劃階段，“信息”與“任務(wù)”是兩項重要內(nèi)容，那我們就接著探討一下，這兩項內(nèi)容相關(guān)的設(shè)計原則吧。

信息擺放原則：

1. 信息層次需不言而喻；
2. 讓重點信息“跳”出來；
3. 將次要信息“藏”起來。

說明：

（1）信息層次需不言而喻

信息層次這個無需多言，就像您現(xiàn)在正在閱讀曉莊的文章一樣，開頭、結(jié)尾、標題、內(nèi)容，錯落有致，閱讀起來，自然是賞心悅目~

這里呢，給出三句真言，助我們打造層次感：

• 邏輯相關(guān)的在視覺上分為一組；
• 內(nèi)容或重要程度不同的在視覺上體現(xiàn)出差異；
• 邏輯上有包含關(guān)系的在視覺上進行嵌套。

前兩句話很好理解，第三句話是什么意思呢？我們來給出一張“某寶”的首頁照片，您一看便知：

（你是否看出哪里嵌套了？我們在文章結(jié)尾公布答案）

（2）讓重點信息“跳”出來

我們可以通過視覺設(shè)計的方法，如字體加大加粗、色彩比對、添加背景色、留白等，強調(diào)界面中的重點元素。而其他非重點的元素就可以顯得暗淡些，這樣就可以使得重點信息“跳”出來了。

比如我們?nèi)粘Ｉ钪袝褂玫降拿缊F外賣，當我們在點餐的時候，是不是先關(guān)注一下這家店鋪的評分如何，再決定要不要下單呢？

我們來看一下，美團外賣的界面，是不是讓我們很容易就發(fā)現(xiàn)這個重點信息了呢？

（3）將次要信息“藏”起來

隨著產(chǎn)品不斷地進行迭代升級，功能會越來越多。尤其是互聯(lián)網(wǎng)產(chǎn)品。調(diào)查表明，80%的用戶只會使用20%的功能。因此我們?yōu)榱吮ＷC用戶體驗，可以將那些次要信息“藏起來”，待用戶需要時，再將它們展示出來即可。

就比如支付寶，我們經(jīng)常使用的功能，絕對不會多于首頁中的“九宮格”內(nèi)容，于是呢，我們就可以將那些相對次要的信息給“藏”起來，放到“更多”當中。

任務(wù)引導原則：

1. 相似性引導；
2. 方向性引導；
3. 向?qū)Э丶龑А?/li>

說明：

（1）相似性引導

所謂相似性引導就是說，如果大小、色彩、形態(tài)、視覺元素等因素相似，那么這些相似的因素就可以牽引著用戶的視覺，引導用戶的操作。如下所示：

（2）方向性引導

這種方式也是非常常見的，并且我們大家肯定都見過。不信的話，我舉個例子給你聽。我們在地鐵站利用自動售票機購票時，還記得那些提示你在哪投紙幣，在哪投硬幣，哪里取憑條，哪里取車票以及零錢的箭頭圖標么？（沒有找到合適的高清圖，大家請自行腦補~）

（3）向?qū)Э丶龑?/p>

向?qū)Э丶╓izard）是一種常見的交互方式，用來引導用戶完成多步操作。

Wizard在英文中是巫師的意思。向?qū)Э丶拖裆衿娴奈讕煟梢栽谀吧捻撁姝h(huán)境下，為用戶指引路線。還可以告訴用戶要完成任務(wù)一共需要多少個操作步驟，你現(xiàn)在所處的步驟是哪個，還有多少步可以完成任務(wù)等。讓用戶對整個操作有個預(yù)期，幫助迷失的人們找到前進的方向。

（一個注冊流程的向?qū)Э丶?/p>

捕獲用戶芳心

最后我們來看一下，設(shè)計規(guī)劃的最高境界，我們怎樣才能賦予界面一些魔力，讓用戶難以忘記使用產(chǎn)品的體驗?zāi)兀?/p>

這里有八種方法，值得我們借鑒。其中前三種是我們作為產(chǎn)品經(jīng)理需要考慮的，另外五種，更嚴格地說，應(yīng)該屬于視覺、交互以及UI設(shè)計師的領(lǐng)域范疇。但我們作為產(chǎn)品經(jīng)理，對于這些方面的內(nèi)容，雖無需精通，但必須了解。

捕獲用戶芳心的八種方法：

1. 可控的感受；
2. 積極的反饋；
3. 貼心的提醒；
4. 互動的樂趣；
5. 驚喜的力量；
6. 情景的烘托；
7. 擬物化的視覺；
8. 隱喻化的操作。

我們來一起溝通一下前三種產(chǎn)品經(jīng)理需要考慮的方法，至于后五種，就留給大家自己去體會吧。

說明：

（1）可控的感受

調(diào)查表明，如果界面沒有任何提示，80%的用戶等待超過2秒就會直接關(guān)閉窗口。如果界面有提示或是加載狀態(tài)，用戶的離開率就會極大地降低。加載狀態(tài)提示可以增加用戶對界面的可控感，形成操作預(yù)期，使用戶安心。

這種設(shè)計，還存在于很多的及時通信應(yīng)用中，例如展示對方的狀態(tài)，顯示對方是否正在輸入，或是對方是否已讀消息，讓用戶知道對方的情況，感知到對方的存在。這樣的設(shè)計可以緩解用戶等待的焦慮感，給用戶一種期待，增強用戶的可控感。

（2）積極的反饋

提供積極的反饋，是與用戶互動的一種方式。

當用戶操作有誤時，系統(tǒng)往往會給出錯誤提示，一個紅色的叉叉常會令人產(chǎn)生挫敗感。但當用戶成功完成某項操作的時候，我們是否贊美鼓勵過他們呢？

人們在社會交往時具有的期望，在使用互聯(lián)網(wǎng)產(chǎn)品時也會有。積極的反饋可以增強用戶的信心，提升用戶體驗的愉悅感。

（3）貼心的提醒

在使用產(chǎn)品時，用戶難免會有遺忘或是疏忽的時候。此時給予用戶一些貼心的提醒，可以提升用戶對產(chǎn)品的好感。

例如，很多新聞閱讀類客戶端會改變已讀文章的顏色，降低其飽和度，減少用戶重復打開已經(jīng)閱讀過內(nèi)容的概率。這些小小的狀態(tài)改變，可以降低用戶的認知負擔，提醒用戶哪些是可以快速略過的內(nèi)容，哪些是需要關(guān)注的重要信息。

結(jié)語

以上就是我們今天的所有內(nèi)容了。穿越了需求到界面的距離，接下來就是我們最熟悉的原型設(shè)計了。至于原型到底該怎么畫，讓我們下期不見不散。

答案：淘寶網(wǎng)首頁，“主題市場”與下方的分類具有邏輯關(guān)系，利用色彩、線條等元素，在視覺上進行了嵌套。

#專欄作家#

曉莊同學；公眾號：曉莊同學產(chǎn)品筆記，人人都是產(chǎn)品經(jīng)理專欄作家。智慧校園領(lǐng)域的B端產(chǎn)品經(jīng)理。

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

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