編輯導(dǎo)語：B端產(chǎn)品的需求和設(shè)計(jì)是相輔相成的，兩者相互結(jié)合才能設(shè)計(jì)出更好的產(chǎn)品。本篇文章作者分享了B端產(chǎn)品需求轉(zhuǎn)化設(shè)計(jì)的具體過程，從多個方面詳細(xì)地講述了具體的操作步驟等，感興趣的一起來學(xué)習(xí)一下，希望對你有幫助。

需求與設(shè)計(jì)是不可分開的，當(dāng)然指的是用戶需求，產(chǎn)品會將用戶需求轉(zhuǎn)化產(chǎn)品需求，而設(shè)計(jì)需要在用戶需求過程中有更多的參與感，才能為設(shè)計(jì)更加恰當(dāng)?shù)膬?nèi)容，并減少返工。

一、設(shè)計(jì)執(zhí)行過程

工作中設(shè)計(jì)側(cè)理解的需求實(shí)際任務(wù)指標(biāo)，是經(jīng)過加工，呈現(xiàn)出很直觀的任務(wù)要求點(diǎn)，比如這里加一點(diǎn)，那里加這種交互規(guī)則設(shè)計(jì)模式，組件控件什么的。

需求和設(shè)計(jì)實(shí)際上也隔離開的，中間是產(chǎn)品的轉(zhuǎn)述，而常修改的原因大多在此處。設(shè)計(jì)師的目的應(yīng)該是加入產(chǎn)品中間商，做一手的需求參與者。

二、需求轉(zhuǎn)化過程

先來說下，從需求轉(zhuǎn)化設(shè)計(jì)執(zhí)行的一個基本過程，整個過程中，真正獨(dú)立設(shè)計(jì)頁面是很小的部分，大多數(shù)整理【需求】和【開發(fā)】。但也可以說設(shè)計(jì)是穿插在整個過程中的。

三、需求設(shè)計(jì)問題

補(bǔ)充需求，即在現(xiàn)有的的需求基礎(chǔ)上新增額外的需求內(nèi)容，而新需求常出現(xiàn)的階段在【設(shè)計(jì)模塊】及之后，也有在此之前補(bǔ)充，但影響不大，因?yàn)榍斑吜鞒潭荚趯π枨笳黼A段，新增需求沒啥大的影響。

影響比較大的是在【設(shè)計(jì)模塊】之后，后幾個階段穿插進(jìn)來的需求，會遇到幾個問題：

• 是否需要調(diào)整設(shè)計(jì)頁面；
• 前端是否需要返工；
• 前后端接口是否改變。

一直以來的操作就是設(shè)計(jì)重做，前端重做，后端可能改接口，硬需求下，后兩種操作可能無法避免，而設(shè)計(jì)這一側(cè)可以考慮下，能否在當(dāng)前頁面承載新需求，極少的改動，同時(shí)減少前端的返工？

四、需求設(shè)計(jì)要求

接收完整需求

1. 對需求的理解：在溝通的同時(shí)，摸清業(yè)務(wù)的脈絡(luò)，搞清楚基本框架結(jié)構(gòu)和節(jié)點(diǎn)，不僅僅是了解業(yè)務(wù)，而是在聽懂需求的同時(shí)，不斷完善設(shè)計(jì)構(gòu)思框架；
2. 快速反應(yīng)需求與設(shè)計(jì)畫面框架的結(jié)合：在構(gòu)思框架的同時(shí)，同步將理解后的需求在大腦中與組件相匹配，節(jié)點(diǎn)部分記下來；
3. 以過往常規(guī)操作補(bǔ)充需求做法：以經(jīng)驗(yàn)之談，常規(guī)操作方式，最簡單最易被使用者接受，能做簡單筆畫勾勒，可待后續(xù)進(jìn)行完善。

在當(dāng)前需求下預(yù)制可能出現(xiàn)的新需求，不影響現(xiàn)有結(jié)構(gòu)？這個是需要設(shè)計(jì)師思考的一個點(diǎn)。

五、解決方式

前面幾篇文章已有提到，拆解了各個設(shè)計(jì)模塊的設(shè)計(jì)內(nèi)容，介紹了在B端設(shè)計(jì)中的數(shù)據(jù)表格、表單、控件等設(shè)計(jì)思路和樣式。這些思路的來源是：

• 將需求場景分類，劃分到各個設(shè)計(jì)模塊中，這點(diǎn)是基礎(chǔ)步驟；
• 為在可能后加的新需求中，在表格、表單等組件做預(yù)設(shè)擴(kuò)展空間。

六、操作步驟

場景分類：

上邊提的表單、表格，組件都有說到。這里的原始需求放在設(shè)計(jì)上就是將基礎(chǔ)組件擴(kuò)展，留下擴(kuò)展空間（需要和前端提前溝通）。

比如說：

• 多級彈窗；
• 列表嵌套層級表格、表單；
• 樹狀結(jié)構(gòu)嵌套列表、表單、表格；
• 問卷基礎(chǔ)表單、問卷題型（題目條件復(fù)雜性以及題目之間的關(guān)聯(lián)性）。

這幾個場景類型里各自出現(xiàn)的衍生問題如何解決：

1. 多級彈窗

這里要說到對使用彈窗的要求：一種是多級彈窗之間操作功能是相對分割的，一種彈窗之間是相互關(guān)聯(lián)需要對比數(shù)據(jù)的。

前者可以用普通彈窗也就是疊加，類似win系統(tǒng)中病毒一樣的，可以解決無限多級彈窗。亦或是蒙層疊加覆蓋，只顯示當(dāng)前彈窗內(nèi)容。

后者需要對比的，可以采用浮層+抽屜，相互疊加，數(shù)據(jù)比照。右圖：

2. 列表嵌套表格、表單

醫(yī)療數(shù)據(jù)中，基礎(chǔ)的數(shù)據(jù)列表形式，不能實(shí)際業(yè)務(wù)需求，在考慮基礎(chǔ)設(shè)計(jì)模式，后續(xù)新需求的考量也是需要建立在基礎(chǔ)設(shè)計(jì)模式上，因此在設(shè)計(jì)時(shí)需要留下擴(kuò)展空間，而不至于重構(gòu)。

場景：

列表呈現(xiàn)的數(shù)據(jù)，左右上下擴(kuò)展數(shù)據(jù)，可通過滑動模塊完成設(shè)計(jì)。只需查看數(shù)據(jù)部分關(guān)鍵字段還需要重復(fù)點(diǎn)擊進(jìn)入詳情是不可取的。

需要對列表內(nèi)部進(jìn)行擴(kuò)展，擴(kuò)展的選擇一種是表格（表格又可進(jìn)行切換調(diào)整），一種是表單（表單又可進(jìn)行模塊劃分）。因此擴(kuò)展空間增大了。

3. 樹狀結(jié)構(gòu)嵌套列表、表單、表格

同理醫(yī)療數(shù)據(jù)研究的復(fù)雜性，樹結(jié)構(gòu)應(yīng)用在導(dǎo)航，層級關(guān)系的基礎(chǔ)場景內(nèi)。復(fù)雜業(yè)務(wù)要求樹結(jié)構(gòu)承擔(dān)更多的功能。因此面對后續(xù)需求還是需要從內(nèi)部擴(kuò)展（與前端溝通）。

在信息結(jié)構(gòu)的層級關(guān)系下，需要查看每一個層級的具體的詳細(xì)信息，而常規(guī)的樹結(jié)構(gòu)與詳情左右分割，不被允許，關(guān)聯(lián)性不夠。

4. 問卷基礎(chǔ)表單、問卷題型（題目條件復(fù)雜性以及題目之間的關(guān)聯(lián)性）

基礎(chǔ)問卷類型，線上有提供的問卷星、騰訊問卷等都可以滿足的。自己開發(fā)一套，是因?yàn)閿?shù)據(jù)的安全的，因?yàn)樾枨笫亲儎?，所以在基礎(chǔ)上需增加更多的組件類型模塊內(nèi)容。

題型之間有關(guān)聯(lián)性，當(dāng)前題型的設(shè)置的條件才能觸發(fā)鏈接到指定一題，或跳轉(zhuǎn)一題，那原本的題型還需增加設(shè)置項(xiàng)。

七、總結(jié)

對B端設(shè)計(jì)來說，理解需求、溝通需求、轉(zhuǎn)化需求，是項(xiàng)必須具備的增長能力。需求討論的過程中構(gòu)建需求房子框架，基本的心理建設(shè)模型應(yīng)該建立起來了，未知的地方也應(yīng)該打上標(biāo)簽了，后續(xù)的就是一點(diǎn)點(diǎn)將疑點(diǎn)清晰化。

比較合適的方式，手中有紙筆，寫寫畫畫，勾勒圖形，寫寫要點(diǎn)疑點(diǎn)。

完善需求設(shè)計(jì)細(xì)節(jié)。每項(xiàng)任務(wù)都是新的開始，每個經(jīng)驗(yàn)都是在完善設(shè)計(jì)方法。

需求與設(shè)計(jì)與開發(fā)是緊密結(jié)合的群體，保持密切溝通。

作者：Ychen（啊嗚計(jì)）；微信公眾號：啊嗚計(jì)；

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

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