文章為作者對一款產(chǎn)品從0到1設(shè)計過程的思考總結(jié)，希望能夠給你帶來幫助。

在上篇文章中《B端產(chǎn)品需求分析的實踐與思考》，筆者分析了B端產(chǎn)品在需求分析的實踐過程中所用到的方法和注意事項。

需求分析的目的是找出用戶本質(zhì)需求，排列出需求優(yōu)先級，確定產(chǎn)品的核心需求和業(yè)務(wù)主要流程圖。需求到開發(fā)階段需要經(jīng)過一個需求評審的階段，為了保證需求評審的質(zhì)量，將需求以產(chǎn)品原型的方式展示出來是必要的，一方面便于更加形象的進行產(chǎn)品描述，另一方面便于及時發(fā)現(xiàn)和調(diào)整產(chǎn)品主要和細節(jié)的地方。本文就是在此基礎(chǔ)上闡述如何從0到1設(shè)計一款產(chǎn)品。

一、總體設(shè)計思路

產(chǎn)品設(shè)計可以說是產(chǎn)品經(jīng)理一項非常重要的技能了，說到設(shè)計，可能馬上會想到各種設(shè)計原型的軟件了，比如說Axure、Mockplus、Sketch等，相信有很多新手朋友剛?cè)胄心玫叫枨蠛?，就開始迫不及待利用各種原型軟件進行設(shè)計，追求于各種酷炫的呈現(xiàn)效果，在未認真理解業(yè)務(wù)流程、用戶及使用場景冒然進行設(shè)計會帶來諸多弊端。

那么一個好的設(shè)計思路是什么呢？這里筆者借用《破繭成蝶：用戶體驗設(shè)計師》這本書的設(shè)計思路：理清業(yè)務(wù)流程->設(shè)計頁面流程->設(shè)計頁面交互，下文筆者就闡述如何利用該思路進行B端產(chǎn)品的設(shè)計。

二、理清業(yè)務(wù)流程

無論是從0到1全新構(gòu)造一款產(chǎn)品，還是在已有的產(chǎn)品上進行規(guī)劃設(shè)計，理清業(yè)務(wù)流程都是非常有必要的，當(dāng)然不能眉毛胡子一把隨便抓，否則會事倍功半，筆者通常采用的思路是先確定主要任務(wù)流程，在確定子任務(wù)流程，然后對子任務(wù)流程需求進行優(yōu)先級排序，為頁面流程圖的數(shù)據(jù)的流轉(zhuǎn)做好準(zhǔn)備，下文將以案例的方式進行描述。

1、確定主要任務(wù)流程

通過需求分析和需求評估，滿足核心需求的業(yè)務(wù)流程可以確定下來。下圖是某醫(yī)院經(jīng)過調(diào)研、需求分析和評估后的患者訂餐管理的業(yè)務(wù)流程圖，其產(chǎn)品定位為：

• 目標(biāo)用戶：醫(yī)院住院患者、訂餐員
• 使用場景：住院病人早、中、晚訂餐；膳食科管理員接單、打單
• 用戶目標(biāo)：住院患者實現(xiàn)移動訂餐、膳食科管理員信息化管理訂餐

2、確定子任務(wù)流程，優(yōu)先級排序

確定了主要任務(wù)流程，再將主任務(wù)流程的每個節(jié)點分解為子任務(wù)流程，如下表：

從上表可以看出任務(wù)流程的主節(jié)點可分解為若干個子任務(wù)，有了多個子任務(wù)，就需要對子任務(wù)的優(yōu)先級進行排序了，這樣做的目的是讓大多數(shù)用戶需要用到的功能和使用頻率高的功能，能夠重點突出，便于用戶高效地完成地任務(wù)，通過對子任務(wù)的重要程度、使用頻率、使用人數(shù)便可將子任務(wù)進行優(yōu)先級的排序：

• 第一優(yōu)先級：選擇病區(qū)、選擇病房、患者訂餐、患者選擇膳食加入購物車、提交訂單、打印訂單；
• 第二優(yōu)先級：患者查看早餐膳食、患者查看普通膳食、患者查看治療膳食、查看訂單信息、查詢訂單信息、取消訂單、刪除訂單；
• 第三優(yōu)先級：查看患者信息；

優(yōu)先級的順序指的是在頁面中的重要程度，并不是體現(xiàn)在出現(xiàn)業(yè)務(wù)流程的順序上，比如：“患者查看早餐膳食“一定是在”患者訂早餐膳食“之前。

三、設(shè)計頁面流程圖

通過以上步驟，我們理清了業(yè)務(wù)主流程、子流程、并且對子流程的優(yōu)先級進行了優(yōu)先級排序，接下來需要在頁面流程圖上如何體現(xiàn)出來，如下圖所示：

如何將子任務(wù)根據(jù)優(yōu)先級設(shè)計到界面中，采用何種導(dǎo)航方式、如何突出重點功能、如何指引用戶高效率完成任務(wù)等等，這個階段就需要對頁面之間和頁面內(nèi)部考慮加入交互設(shè)計了。

四、頁面交互設(shè)計

在這里給大家介紹我常用的交互設(shè)計原則，主要是來源于兩本書：

1.《寫給大家看的設(shè)計書》：提倡親密性、對齊、重復(fù)、對比，四大設(shè)計原則

2.《簡約之上》：提倡刪除、組織、隱藏、轉(zhuǎn)移，四大策略

針對四大設(shè)計原則和四大策略具體的解釋及用法，請大家仔細閱讀這兩本書，這里不做贅述了，這里值得多一句的是導(dǎo)航架構(gòu)，不同的產(chǎn)品其導(dǎo)航架構(gòu)大有不同，Web端和移動端有較大出入，即便是移動端產(chǎn)品，也會因其定位不同，導(dǎo)航架構(gòu)也不同。

本次產(chǎn)品的是放在平板電腦上實現(xiàn)，屬于移動端產(chǎn)品，考慮到產(chǎn)品核心功能及用戶的使用習(xí)慣，本案例產(chǎn)品采用的是常用的標(biāo)簽式導(dǎo)航，就移動端來說還有很多導(dǎo)航方式。

比如說：列表式導(dǎo)航、平鋪式導(dǎo)航、宮格式導(dǎo)航，不同的導(dǎo)航適用不同的產(chǎn)品定位和使用場景，這里需要大家另外找資料多去研究下設(shè)計規(guī)范。

確定了導(dǎo)航信息架構(gòu)，利用四大策略和四大設(shè)計原則便可實現(xiàn)頁面之間、頁面內(nèi)部的交互，加入元素及交互設(shè)計內(nèi)容如下圖所示：

我們常說的用戶體驗的好壞，很大程度上與交互設(shè)計有著重要的關(guān)系，當(dāng)然筆者屬于產(chǎn)品崗，因崗位的偏向，和專業(yè)的交互設(shè)計師在專業(yè)程度上應(yīng)該是存在一定差距的，這里提供的案例屬于本人剛?cè)胄性O(shè)計的原型，很多地方比較粗糙，考慮到該產(chǎn)品邏輯比較簡單，不用太多專業(yè)知識，便才將其選為案例，僅供大家的參考。

關(guān)于如何做好產(chǎn)品的設(shè)計，本人也一直在學(xué)習(xí)，畢竟做一款既符合需求又讓用戶覺得好用的產(chǎn)品，是需要不斷地積累和沉淀的，另外，團隊中若是存在專業(yè)的交互設(shè)計師，產(chǎn)品人員在整理需求和流程后，可做簡單的線框圖來示意即可，而專業(yè)地交互設(shè)計留給專業(yè)的交互設(shè)計師做，相信別人的專業(yè)能力，讓他有更大的發(fā)揮空間，這樣才能建立好關(guān)系，相互信任。

五、注意事項

在這里順便總結(jié)下，本人做在產(chǎn)品設(shè)計實踐過程中覺得需要注意的地方：

1、切記未理解業(yè)務(wù)流程匆忙進行設(shè)計；

2、切記未理清用戶和使用場景進行設(shè)計；

3、不同的用戶看原型的要求不同，內(nèi)部分享或者給開發(fā)看的原型，應(yīng)盡量保證說明清晰、準(zhǔn)確、全面；給客戶的或者測試用戶的產(chǎn)品設(shè)計應(yīng)具備低保真甚至高保真效果，方便演示；

4、培養(yǎng)好的設(shè)計能力需要不斷體驗和總結(jié)，是一個需要持續(xù)不斷學(xué)習(xí)的過程，永遠要保持空杯心態(tài)。

六、總結(jié)

以上就是本人以案例化的方式描述一款產(chǎn)品從0到1的設(shè)計過程，其核心的設(shè)計思路為：理清業(yè)務(wù)流程->設(shè)計頁面流程->設(shè)計頁面交互，以及總結(jié)了本人在產(chǎn)品設(shè)計中碰到的問題及需要注意的地方，僅供大家參考，希望在工作中能夠幫助到大家，也希望大家一起多提意見，指出不足，感謝閱讀！

作者：張磊（個人公眾號：lightinglei）互聯(lián)網(wǎng)醫(yī)療B端產(chǎn)品策劃者，音樂愛好者，籃球愛好者，攝影愛好者

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

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