從需求到產品,如何做一份無懈可擊的產品設計
本篇文章會給大家介紹完整的產品設計過程,重點闡述產品設計思路及期間會用到的方法論,并結合例子讓大家深刻地理解邏輯嚴密的產品設計。
導語:很多同學看過很多文章讀過很多書,知道很多產品設計的知識,但一到自己上手設計產品,總是思緒萬千,卻不知道從何下手。有一種知道很多道理,卻依然過不好這一生的趕腳。這是因為知識還沒串聯成體系,OK,閑言少敘,現在就把產品設計體系告訴大家。
目錄:
- 一、綜述
- 二、結構設計
- 三、界面草圖
- 四、讓界面草圖進化為頁面原型
- 五、再加點調料
- 六、總結
一、綜述
開篇前先給大家介紹下《用戶體驗要素》中的5層模型:戰略層、范圍層、結構層、框架層、表現層。
這是綱領性的模型,是產品0-1設計的5個階段。
- 戰略層:產品目標及其目標用戶(做什么、為誰而做?)
- 范圍層:功能及其內容需求整合(需要做哪些?)
- 結構層:交互設計及其信息架構(怎樣做?)
- 框架層:界面設計、導航設計和信息設計(怎樣做?)
- 表現層:視覺設計(要做成什么樣子?)
戰略層和范圍層涉及產品目標、目標用戶及產品定位,這些公司一般都已經定義好了。當我們接到任務的時候,往往就直接到達結構層和框架層的設計了。所以本篇文章實際上是在結構層和框架層上展開闡述如何進行產品設計。
結構層和框架層特別像建房子,結構層是設計房屋的立體結構,框架層是設計每一層怎么布局。
OK,接下來先整體介紹下產品設計的過程,讓大家在宏觀上有個把握。
如下是產品設計過程,本篇文章也是按照這個思路進行闡述:
- 將需求歸納整理成用戶任務;
- 多個用戶任務交織成信息架構;
- 將信息架構具象化為頁面流程圖,并通過界面草圖的形式表達出來;
- 接著根據設計原理,讓界面草圖進化為頁面原型;
- 最后加點調料,通過情感化設計和游戲化設計,賦予產品魔力。
無論是全新的產品設計還是一個小功能點的設計,都需要經歷上面的5個步驟。不同的是,小功能點可能沒信息架構這一環。
如下是設計流程示意圖:
產品設計過程
二、結構設計
很多同學在經過了需求分析和需求評審后,正式接到了需求任務,猶如接到了圣旨一樣,迅速打開設計軟件,摩拳擦掌就準備開干了。
先別急,沒經過系統分析過的設計方案,很容易因為某些因素沒考慮周全,而漏洞百出,最后到了需求評審階段還是要被打回來。
需求到界面設計還有一扇窗,這扇窗就是用戶任務/信息架構。信息架構猶如骨架一般,支撐著整個產品。
我們需要將需求歸納整理為用戶任務,多條用戶任務交織為信息架構,最后通過頁面原型表達出來。
其中核心關鍵點是怎么設計用戶任務。
比如:你現在是知乎產品經理,需求是怎么提升報名知乎live的用戶數。你會怎么做?建議先思考一下,再繼續往下看。
首先,需求是提升報名知乎live的用戶數。那么用戶任務就是報名參加知乎live。
接下來就是將用戶任務進行拆解,拆解為N個步驟,然后提升每個步驟的轉化率,從而提升報名用戶數。怎么拆解用戶任務呢?
其實就是根據用戶決策路徑進行拆解。決策路徑有好幾條,所以,一個用戶任務,可以拆解為多條分支。
這里選取一條可能最多數用戶的決策路徑作為舉例:看到知乎live->了解了知乎live->產生興趣->報名
產品設計的依據就是這條決策路徑,知道了這條決策路徑,我們就可以在每個步驟上面做文章:
大體功能結構出來了,但太干了對不對?有沒有辦法提高live的置信度,并降低用戶心理門檻,讓產品更性感一點呢?
如上圖加黑部分就是可拓展的點。當然,方法是非常非常多了,也沒有標準答案。這里重點在講思路,不代表對錯。
這里值得一提的是,在“看到”這個環節,知乎還采用了一種很輕巧的方式。知乎上線了一個live主講者可以給他人免費贈票的功能。當對方報名參加后,live活動信息就會出現在其feed流里。
這樣不僅可以讓更多人看到,也可以借助主講者的力量來推動live的熱度,也有利于提升大咖的活躍度。讓更多大咖能參加到知乎live的分享中來,產生更多優質內容。
上面用知乎live的例子做了簡要介紹。
下面以點外賣為例,詳細介紹產品設計流程。同樣重點在闡述思路,設計千萬條,思路第一條。
1. 理清用戶決策路徑
點外賣的主流決策路徑大致是這樣:挑選商家->瀏覽并挑選商品->下單->填寫收貨地址->查看訂單詳情->結算->等待發貨。
這里插播介紹下“用戶決策路徑”我們知道,設計產品前需要知道目標用戶是哪些,并給這群用戶做畫像,研究他們的心智模型。心智模型研究的是“用戶如何通過過往的知識沉淀來理解新事物的”。那么決策路徑就是其心智模型的外化表現。
那很明顯,不同的目標用戶群體,其心智模型是不一樣的,比如老人和年輕人,對新事物的理解肯定就存在很大的差異。心智模型不一樣,決策路徑就不一樣。所以,針對不同的目標用戶群體,即使是同一個需求,做出來的產品設計方案也是不一樣的。當我們提供的操作步驟跟用戶的決策路徑相符時,就會比較符合用戶預期,學習成本大大降低。
2. 分解用戶任務
理清用戶的決策路徑后,我們可以繼續將大任務分解為眾多子任務。
點外賣任務分解
可以看出,每一項子任務,實際上就是一個功能塊了。接下來組織合并相關任務,得到頁面流程圖,為設計界面草圖做準備。
3. 組織合并相關任務
設計的最終目的是把功能點以可視化的界面展示在用戶面前,點外賣這個任務,經過簡單的劃分,就已經分解出了26項功能點。如果將這些功能點直接展示在用戶面前,無疑難以操作且難以理解。所以需要組織合并相關任務,經過整理后的信息更易于用戶理解。
我們可以將操作連續、操作相似、信息相近的任務,歸類到同一模塊,幾個模塊再歸類到一個頁面。
組織合并相關任務
可以看出,26項子任務被整理到了9個功能模塊(子任務不同底色代表不同模塊),9個功能模塊又分別被歸類到了5個頁面中來。實際上一張信息結構圖就自然而然的呈現出來了。
我們可以將這個信息結構圖,再具象化為頁面流程圖:
頁面流程圖
4. 排列子任務優先級
排列子任務優先級的目的是分清主要任務和次要任務。主要任務重點突出,次要任務刪除、組織、隱藏或轉移,就可以在界面設計的時候做到結構嚴謹、條理清晰。
我們可以根據需求的廣度、頻率和強度這三個維度來決定任務的優先級,即根據使用人數、使用頻率、需求是否強烈(重要性)三個維度來共同判斷優先級。
子任務優先級
用不同底色做了區分,分別對應5個頁面。
通過綜合評分可以很直觀的看出同個頁面中不同子任務的主次之分。
具體頁面設計的時候,可以把主要任務放到頁面的重點區域、也可以在視覺上做突出、也可以加大展示面積等等,次要任務可以弱化為一個功能按鈕或者弱化視覺表現等等。通過靈活的交互方式,讓重點任務重點突出,方便用戶決策。
三、界面草圖
界面草圖跟結構設計是緊密聯系在一起的,前文得出了頁面流程圖和任務優先級,現在就可以針對每個頁面進行設計。
現在原型設計軟件總算可以派上用場了吧?
還沒呢,別著急。
因為在界面設計的過程中,考慮的點會越來越多,自己的思路也會不停的調整,有時候還會不斷的迸發出靈感和創意。用草圖的形式,可以極大的提高效率。
設計草圖的時候,依舊需要經歷幾個階段。思路依舊是先大局再細節。先確定頁面結構、導航、功能塊擺放位置、次序,再具體去探尋每個功能塊的展示內容、展示結構等等。
每一千個產品經理,就有一千種界面設計。這就看個人自己平時的積累、思考和領悟了。當然,第一版的產品設計都是不完美的,這就需要不斷的進行用戶研究、數據驅動的方式去迭代優化它。我將來還會專門寫一篇文章去介紹如果通過數據驅動、增長黑客的方式去優化產品功能??梢韵汝P注我的專欄哈。
下面是我隨便手繪了一張草圖,大概表達一下這個意思就行哈哈哈,大家別介意。
界面草圖
當設計功能塊的時候,再將子任務進行分解細化。不停地重復這個步驟,把細節補充完整。
四、讓界面草圖進化為頁面原型
現在終于可以讓界面草圖搬上原型設計軟件了。
進化為頁面原型的過程中,并不是簡單的搬運,而往往會有思想上的再一次升華。因為之前沒考慮到的事情,現在會被考慮到了。比如:文案顯示的字符數,顯示兩行還是一行,顯示多少個字后就要用省略號表示,還是需要提供一個“展開”按鈕。
圖標顯示4個還是5個,顯示5個有點小,小屏幕上不友好,是否要做分辨率的判斷。
具體交互細節上是否還有簡化的空間,交互細節上就需要具體問題具體分析了。
五、再加點調料
前面通過理性的分析得出信息架構,進而得到了界面設計。但畢竟人是有情感的動物,情緒也會極大的左右人的判斷,所以產品設計不得不考慮情感設計。
我們可以通過情感化設計和游戲化設計讓產品更有魔力,從而贏得用戶的芳心。
情感化設計和游戲化設計包含大量的設計技巧,也是個大篇幅,所以我就將其放在下一篇文章來專門講述了。
六、總結
邏輯嚴密的產品設計有點像推理過程,層層遞進。
總的來說,無論是全新產品的設計還是功能點的設計,都必須先把握大局,再逐漸深化細節。
總的設計步驟如下:
- 理清用戶決策路徑
- 分解用戶任務
- 組織合并相關任務
- 排列子任務優先級
- 設計界面草圖
- 讓界面草圖進化為頁面原型
- 再加點調料
這,就是產品設計的秘密。
參考資料:《用戶體驗要素》、《破繭成蝶》、《簡約至上:交互設計四策略》
本文由 @湯涌 原創發布于人人都是產品經理。未經許可,禁止轉載
題圖來自Unsplash,基于CC0協議
想問一下子任務優先級那里,三個維度:使用人數、使用頻率、重要性,是怎么得到的,要做用戶調研嗎,綜合評分就是算平均嗎
感覺某些動作超出了結構設計和框架設計的范疇~
不如改名叫“從需求到原型交互,如何做一份無懈可擊的原型設計”
思路很棒
老哥,穩!
厲害