起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識用戶體驗設計之路（二）：需求到界面的距離
嗨，你現在還在被別人認為是“作圖仔”么？上一篇文章我們溝通了，如果不想被打上“作圖仔”的標簽，那我們就需要從頭到尾參與并且親手進行需求分析了，只有這樣，我們才能拿回產品的主導權。
那么，當我們通過需求分析，獲得了“功能”、“內容”以及“優先級”之后，我們接下來是否就可以設計原型界面了呢？
答案是“非也”！因為從需求到界面之間仍舊存在著一段距離，這個距離就是我們今天所要探討的“設計規劃”！
內容回顧
老規矩，讓我們先來回顧一下上一篇文章的重要內容吧：
用戶體驗設計的概念：首先是要解決用戶的某個實際問題，其次是讓問題變得更容易解決，最后是給用戶留下深刻的印象，讓他在整個過程中產生美好的體驗。
用戶體驗設計的特征：
- 嚴謹、理性、創意；
- 提供特定問題的解決方案；
- 不讓用戶思考；
- 趣味橫生。
理想的需求分析過程 vs 現實的需求分析過程：
設計規劃
很多產品經理在設計初期，都有一個很不好的習慣，就是拿到需求以后就開始嘗試著用軟件畫界面，甚至在需求還沒想好的時候，就開始構思界面細節了。（哪位同學是這樣的，請舉手~）
但在某種程度上，這種原罪似乎也并不在于產品經理。因為目前的互聯網公司，確實存在很多團隊，都是直接評審原型，甚至有的還他喵的要求高保真原型，至于需求評審，不存在的。尤其是一些小公司，更是如此。
這樣的結果可想而知，必然會造成多次的返工修改，浪費巨大的人力成本。
古人云：預則立，不預則廢。而設計規劃，就是這個“預”的過程！那究竟什么是設計規劃呢？
設計規劃的內容步驟：
- 根據需求來設計相關的信息和任務，通過組織信息結構、引導用戶完成任務得到一系列相關聯的界面草圖；
- 然后細化草圖為具體界面，在這個過程中考慮如何讓用戶輕松、愉悅、高效地瀏覽和操作；
- 最后，我們要賦予界面一些魔力，讓用戶難以忘記使用產品的體驗。
信息
獲取信息是用戶訪問互聯網的重要目的之一。在設計規劃階段，一個重要的工作就是信息的組織與分類。這里提供兩種方法供參考：
（1）邏輯分類：我們可以使用人們在生活中熟悉的分類邏輯對信息進行組織
例如我們去某寶買衣服，首先我們需要根據“性別分類”，查看是要買“男裝”，還是“女裝”；然后我們再選擇一下究竟是買“上衣”，還是買“褲子”；最后才是看樣式、價格等詳細信息。
“服裝性別—>服裝類型—>服裝樣式—>服裝價格”，這就是人們習慣的信息組織方式，如果我們將其順序調換，會不會覺得很別扭呢？
如果以上的描述不夠直觀，那我們想象一下實體店的場景就很容易理解了。有的服裝商店會設置成一樓女裝，二樓男裝，應該沒有哪個服裝商店會設置成一樓專門賣上衣，二樓專門賣褲子的吧……而且是不是當我們看著哪一款衣服比較滿意的時候，我們才接下來去關心價格呢？
熟悉的內容，會給用戶帶來舒適感，也就是我們常說的“舒適圈”的感念；而陌生的內容則代表著需要付出學習成本，每一次成本的付出，往往都會伴隨著些許的焦躁。在互聯網的世界里，用戶判斷是否選擇或者繼續使用我們的產品，甚至只在于一瞬之間的感覺。
（2）卡片分類：直接去探究用戶的想法，邀請用戶以卡片的方式，“把類似的東西放一起”
此方法簡單有效。準備好裁剪過的卡片或者便簽紙，將需要分類的信息寫在卡片上，然后組織招募到的志愿者對卡片進行自由分類即可。并且志愿者最好是與網站設計不相關的人員。
在產品設計的初級階段，利用卡片分類可以知道用戶對網站內容的期望，為信息架構的搭建提供依據；對現有產品進行改版時，卡片分類可以檢驗現有的信息架構是否合理，對新版本的改進提供有效幫助。
任務
在需求調研以及分析階段，我們一直談論的都是“業務”，得到的產物為“業務流程圖”。但在設計規劃階段，我們談論的概念，則需要轉變為“任務”，相應的產物也變為了“任務流程圖”。
“業務”與“任務”二者一字之差，體現的是客觀與主觀的區別，業務是客觀存在的，而任務則是人為設計的，你品，你細品~
在設計規劃的內容步驟中，“信息”與“任務”是一體的。我們就先來說一下二者之間的關系。
“信息”與“任務”的關系：
需求文檔中的功能和內容都是比較零散的，通過梳理信息結構，我們可以把主要的功能、內容組織起來。而通過任務流程，我們則可以把剩余的部分給“拼裝”起來。
一個有意思的比喻：
如果把產品比作一座購物商城，那么信息結構就是商城的框架，比如：這個商城有多少層，每層都賣什么東西，都有哪些品牌店。
任務流程則相當于商場里面的過道，用戶沿著過道完成“逛街”、支付等主要任務，通過商場中的各種提示完成去衛生間、去服務臺換車票等次要任務。
用戶在完成任務的過程中滿足了自己的需求，而產品也從中直接或間接地實現了其商業價值。
那我們該怎樣設計“任務流程”呢？
這方面所涉及的方式方法，其實與之前我們所談論的“業務流程”并無本質的區別，兩者之間的區別僅在于范圍的大小或者說層級的深淺，僅此而已。
對這一方面還不熟悉的同學，可自行查閱另外一篇文章《如何進行有效需求分析？（3）流程篇》，我也會在文章結尾處加入跳轉鏈接。
草圖
設計規劃是一個承前啟后的階段，其目的是將最初的需求一步一步變為現實。
當我們整理好信息分類，設計好任務流程，此時仍舊不要著急用軟件畫界面，因為草圖才是這個階段最高效的方式，一張紙，一支筆，足矣！
原因如下，請君查閱：
（1）發散創意
設計規劃是一個需要發散創意的階段，用軟件畫界面，會讓我們陷入設計細節當中，不自覺地就會考慮頁面的尺寸是否符合柵格、每一行展示4個還是5個商品、按鈕是否需要3個狀態等等。這些會禁錮我們的思想。
（2）快速迭代
紙面原型更具有可塑性，可以快速地修改和重建，幫助我們探索盡可能多的想法并否定掉那些不靠譜的想法。有了草圖，就可以與相關人員進行溝通，只需要很少的時間就可以收集到反饋，驗證設計的可行性。
（3）縮短周期
當我們通過紙面原型進行溝通，并且已經通過大致的方案時，也就意味著確定了產品的框架、主要的流程、基本的信息和功能等。對于下一個環節例如交互設計、UI設計或者研發，就可以預先進行一部分工作，而不必等到全部內容都細化成標準原型并交付后，再進行動工。這必然提高工作效率，縮短項目周期。
界面
草圖是設計方案的雛形，注重的是隨時隨地記錄表達，無需考慮格式和規則。
當草圖確定之后，需要我們將其向界面原型進行轉換的時候，就需要遵從一些設計原則了。
既然在設計規劃階段，“信息”與“任務”是兩項重要內容，那我們就接著探討一下，這兩項內容相關的設計原則吧。
信息擺放原則：
- 信息層次需不言而喻；
- 讓重點信息“跳”出來；
- 將次要信息“藏”起來。
說明：
（1）信息層次需不言而喻
信息層次這個無需多言，就像您現在正在閱讀曉莊的文章一樣，開頭、結尾、標題、內容，錯落有致，閱讀起來，自然是賞心悅目~
這里呢，給出三句真言，助我們打造層次感：
- 邏輯相關的在視覺上分為一組；
- 內容或重要程度不同的在視覺上體現出差異；
- 邏輯上有包含關系的在視覺上進行嵌套。
前兩句話很好理解，第三句話是什么意思呢？我們來給出一張“某寶”的首頁照片，您一看便知：
（你是否看出哪里嵌套了？我們在文章結尾公布答案）
（2）讓重點信息“跳”出來
我們可以通過視覺設計的方法，如字體加大加粗、色彩比對、添加背景色、留白等，強調界面中的重點元素。而其他非重點的元素就可以顯得暗淡些，這樣就可以使得重點信息“跳”出來了。
比如我們日常生活中會使用到的美團外賣，當我們在點餐的時候，是不是先關注一下這家店鋪的評分如何，再決定要不要下單呢？
我們來看一下，美團外賣的界面，是不是讓我們很容易就發現這個重點信息了呢？
（3）將次要信息“藏”起來
隨著產品不斷地進行迭代升級，功能會越來越多。尤其是互聯網產品。調查表明，80%的用戶只會使用20%的功能。因此我們為了保證用戶體驗，可以將那些次要信息“藏起來”，待用戶需要時，再將它們展示出來即可。
就比如支付寶，我們經常使用的功能，絕對不會多于首頁中的“九宮格”內容，于是呢，我們就可以將那些相對次要的信息給“藏”起來，放到“更多”當中。
任務引導原則：
- 相似性引導；
- 方向性引導；
- 向導控件引導。
說明：
（1）相似性引導
所謂相似性引導就是說，如果大小、色彩、形態、視覺元素等因素相似，那么這些相似的因素就可以牽引著用戶的視覺，引導用戶的操作。如下所示：
（2）方向性引導
這種方式也是非常常見的，并且我們大家肯定都見過。不信的話，我舉個例子給你聽。我們在地鐵站利用自動售票機購票時，還記得那些提示你在哪投紙幣，在哪投硬幣，哪里取憑條，哪里取車票以及零錢的箭頭圖標么？（沒有找到合適的高清圖，大家請自行腦補~）
（3）向導控件引導
向導控件（Wizard）是一種常見的交互方式，用來引導用戶完成多步操作。
Wizard在英文中是巫師的意思。向導控件就像神奇的巫師，可以在陌生的頁面環境下，為用戶指引路線。還可以告訴用戶要完成任務一共需要多少個操作步驟，你現在所處的步驟是哪個，還有多少步可以完成任務等。讓用戶對整個操作有個預期，幫助迷失的人們找到前進的方向。
（一個注冊流程的向導控件）
捕獲用戶芳心
最后我們來看一下，設計規劃的最高境界，我們怎樣才能賦予界面一些魔力，讓用戶難以忘記使用產品的體驗呢？
這里有八種方法，值得我們借鑒。其中前三種是我們作為產品經理需要考慮的，另外五種，更嚴格地說，應該屬于視覺、交互以及UI設計師的領域范疇。但我們作為產品經理，對于這些方面的內容，雖無需精通，但必須了解。
捕獲用戶芳心的八種方法：
- 可控的感受；
- 積極的反饋；
- 貼心的提醒；
- 互動的樂趣；
- 驚喜的力量；
- 情景的烘托；
- 擬物化的視覺；
- 隱喻化的操作。
我們來一起溝通一下前三種產品經理需要考慮的方法，至于后五種，就留給大家自己去體會吧。
說明：
（1）可控的感受
調查表明，如果界面沒有任何提示，80%的用戶等待超過2秒就會直接關閉窗口。如果界面有提示或是加載狀態，用戶的離開率就會極大地降低。加載狀態提示可以增加用戶對界面的可控感，形成操作預期，使用戶安心。
這種設計，還存在于很多的及時通信應用中，例如展示對方的狀態，顯示對方是否正在輸入，或是對方是否已讀消息，讓用戶知道對方的情況，感知到對方的存在。這樣的設計可以緩解用戶等待的焦慮感，給用戶一種期待，增強用戶的可控感。
（2）積極的反饋
提供積極的反饋，是與用戶互動的一種方式。
當用戶操作有誤時，系統往往會給出錯誤提示，一個紅色的叉叉常會令人產生挫敗感。但當用戶成功完成某項操作的時候，我們是否贊美鼓勵過他們呢？
人們在社會交往時具有的期望，在使用互聯網產品時也會有。積極的反饋可以增強用戶的信心，提升用戶體驗的愉悅感。
（3）貼心的提醒
在使用產品時，用戶難免會有遺忘或是疏忽的時候。此時給予用戶一些貼心的提醒，可以提升用戶對產品的好感。
例如，很多新聞閱讀類客戶端會改變已讀文章的顏色，降低其飽和度，減少用戶重復打開已經閱讀過內容的概率。這些小小的狀態改變，可以降低用戶的認知負擔，提醒用戶哪些是可以快速略過的內容，哪些是需要關注的重要信息。
結語
以上就是我們今天的所有內容了。穿越了需求到界面的距離，接下來就是我們最熟悉的原型設計了。至于原型到底該怎么畫，讓我們下期不見不散。
答案：淘寶網首頁，“主題市場”與下方的分類具有邏輯關系，利用色彩、線條等元素，在視覺上進行了嵌套。
#專欄作家#
曉莊同學；公眾號：曉莊同學產品筆記，人人都是產品經理專欄作家。智慧校園領域的B端產品經理。
本文原創發布于人人都是產品經理。未經許可，禁止轉載
題圖來自Unsplash，基于CC0協議
哇，原來可以如此簡單~ 謝謝分享！期待下期的畫原型 ?? 原型工具我覺得axure強大，但是上手好難，其他的邏輯也比較復雜，用著墨刀還挺順手，之前想找人做，結果要價太高，就自己自學墨刀，一個星期順利畫出
哈哈哈，可以一起學習進步呀 ??
可以關注我的文章首發平臺，里面有更多精彩內容 ??
好滴！ ??
首發平在是在我的公眾號“曉莊同學產品筆記”，里面有更加豐富的內容，歡迎關注。 ??