編輯導(dǎo)語(yǔ)：B端產(chǎn)品與C端產(chǎn)品的設(shè)計(jì)有所不同，在初始階段，B端產(chǎn)品的設(shè)計(jì)便需要考慮到整體模塊的設(shè)計(jì)，避免因后續(xù)過(guò)大幅度改動(dòng)導(dǎo)致的用戶操作不便或用戶流失。本篇文章里，作者結(jié)合終端維修系統(tǒng)搭建案例，總結(jié)了B端產(chǎn)品的設(shè)計(jì)策略，一起來(lái)看一下。

近兩年B端產(chǎn)品得到關(guān)注度越來(lái)越高，相關(guān)的比如?ERP、CRM、后臺(tái)、中臺(tái)等設(shè)計(jì)也出現(xiàn)在UI設(shè)計(jì)師的工作中，那么如何去設(shè)計(jì)B端產(chǎn)品，以及它與C端產(chǎn)品的設(shè)計(jì)有什么不同。結(jié)合我最近完成的一個(gè)終端維修系統(tǒng)來(lái)和大家做一個(gè)簡(jiǎn)單的分享，希望能夠幫助到你。

首先我們要確認(rèn)一點(diǎn)，相較于C端產(chǎn)品，B端在拿到PRD文檔開(kāi)始，就要從整體宏觀的角度去考慮每一個(gè)模塊，以及各個(gè)模塊間的銜接。所以就要求我們對(duì)所要執(zhí)行的項(xiàng)目做到了如指掌的地步，記住“你”是除了產(chǎn)品經(jīng)理外最熟悉各個(gè)功能的人。

一、項(xiàng)目背景

我司作為非洲第三大視頻運(yùn)營(yíng)商，海外產(chǎn)品主要以機(jī)頂盒、智能電視、數(shù)字電視一體機(jī)為主。每年銷(xiāo)售量達(dá)百萬(wàn)級(jí)別，后期的維修數(shù)量也相對(duì)巨大。海外落后的管理導(dǎo)致維修數(shù)據(jù)仍以Excel形式按季度上傳，為了能對(duì)問(wèn)題設(shè)備的總結(jié)歸納預(yù)判有相對(duì)應(yīng)的數(shù)據(jù)支撐是該項(xiàng)目的研發(fā)原因。

二、設(shè)計(jì)前期準(zhǔn)備

1）根據(jù)海外反饋以及產(chǎn)品溝通，本產(chǎn)品的主要解決：

• 維修數(shù)據(jù)回饋慢；
• 從不同的維度（大區(qū)、國(guó)家、員工、設(shè)備）查看維修數(shù)據(jù)；
• 規(guī)范化業(yè)務(wù)流程。

2）用戶維度確認(rèn)：

• 海外事業(yè)部經(jīng)理；
• 大區(qū)經(jīng)理；
• 門(mén)店經(jīng)理；
• 維修人員。

3）業(yè)務(wù)需求，根據(jù)問(wèn)題提出對(duì)應(yīng)的解決方案，再根據(jù)不同的角色維度，定義對(duì)應(yīng)的使用權(quán)限：

• 海外事業(yè)部總經(jīng)理：泛非所有數(shù)據(jù)、大區(qū)維修數(shù)據(jù)（可切換篩選）、維修率、修復(fù)率、單一設(shè)備的維修情況（可篩選）；
• 大區(qū)經(jīng)理：大區(qū)維修數(shù)據(jù)、門(mén)店維修數(shù)據(jù)、維修率、修復(fù)率、單一設(shè)備的維修情況（可篩選）；
• 門(mén)店經(jīng)理：自家門(mén)店維修數(shù)據(jù)、維修率、修復(fù)率、單一設(shè)備的維修情況（可篩選）、設(shè)備入庫(kù)、設(shè)備出庫(kù)；
• 維修人員：自家門(mén)店維修數(shù)據(jù)、維修率、修復(fù)率、單一設(shè)備的維修情況（可篩選）、維修數(shù)據(jù)錄入。

4）使用場(chǎng)景：

• 位置：辦公室工位；
• 設(shè)備：PC；
• 瀏覽器：Chrome；
• 語(yǔ)言：中文、英語(yǔ)、葡語(yǔ)（前期適配中英兩種語(yǔ)言）。

三、從產(chǎn)品目標(biāo)出發(fā)，提出解決方案

B端產(chǎn)品著重解決問(wèn)題，問(wèn)題清晰明了，根據(jù)問(wèn)題提出解決方案。

1. 數(shù)據(jù)回饋慢（主要針對(duì)維修人員）

采用線上辦公，維修人員通過(guò)設(shè)計(jì)的維修系統(tǒng)辦公，維修完成一例上傳一例。

2. 從不同的維度（大區(qū)、國(guó)家、員工、設(shè)備）查看維修數(shù)據(jù)

定義不同的權(quán)重，通過(guò)登錄名稱區(qū)分，后臺(tái)給與授權(quán)。

3. 規(guī)范化業(yè)務(wù)流程（門(mén)店經(jīng)理 and 維修人員）

門(mén)店經(jīng)理負(fù)責(zé)每日需要維修設(shè)備的入庫(kù)，維修人員根據(jù)入庫(kù)的設(shè)備逐一維修，維修完成提交維修結(jié)果，門(mén)店經(jīng)理每日結(jié)束后從修好的數(shù)據(jù)庫(kù)內(nèi)批量出庫(kù)。完成一整套維修流程。

四、需求分析

1. 基本頁(yè)面流程梳理

根據(jù)PRD文檔，列出功能架構(gòu)，個(gè)人建議架構(gòu)采用橫向樹(shù)形圖；這里面提到一個(gè)名詞“節(jié)點(diǎn)”。

節(jié)點(diǎn)：是樹(shù)狀結(jié)構(gòu)當(dāng)中的基本單位，使用節(jié)點(diǎn)可以表示不同數(shù)據(jù)間的組成關(guān)系（從屬關(guān)系與并列關(guān)系）通常節(jié)點(diǎn)會(huì)分為幾類(lèi)特殊情況。

• 根節(jié)點(diǎn)：整個(gè)樹(shù)狀結(jié)構(gòu)的開(kāi)端被稱為根節(jié)點(diǎn)。一個(gè)樹(shù)狀結(jié)構(gòu)一定只有一個(gè)根，在思維導(dǎo)圖中，根節(jié)點(diǎn)就代表著它的開(kāi)端，用于延展出更多的樹(shù)狀結(jié)構(gòu)，可以理解為產(chǎn)品總和。
• 子節(jié)點(diǎn)：根節(jié)點(diǎn)之外的節(jié)點(diǎn)被稱為子節(jié)點(diǎn)。一個(gè)樹(shù)狀結(jié)構(gòu)子節(jié)點(diǎn)數(shù)量是沒(méi)有具體限制，在樹(shù)形選擇當(dāng)中是直接展示出來(lái)的部分。可以理解為一級(jí)導(dǎo)航。
• 葉節(jié)點(diǎn)：沒(méi)有連接到其他子節(jié)點(diǎn)的節(jié)點(diǎn)。葉節(jié)點(diǎn)屬于一類(lèi)特殊的子節(jié)點(diǎn)，它是整個(gè)樹(shù)狀結(jié)構(gòu)的最末端節(jié)點(diǎn)，在樹(shù)形選擇當(dāng)中是一個(gè)重要的概念，可以理解為二級(jí)導(dǎo)航或一級(jí)導(dǎo)航下的功能模塊。

當(dāng)然，現(xiàn)實(shí)中的功能架構(gòu)要比上面的圖例中復(fù)雜得多，但只要你理清楚樹(shù)狀架構(gòu)，基本上我們的頁(yè)面基本模塊間關(guān)系就梳理好了。

2. 針對(duì)問(wèn)題，出解決方案

這一步是項(xiàng)目中最關(guān)鍵的，我的工作步驟是：

1. 深入確認(rèn)問(wèn)題，詳細(xì)了解該功能；
2. 根據(jù)自己以往的經(jīng)驗(yàn)繪制出方案原型；
3. 與用戶（使用者）溝通該方案的可行性，聽(tīng)取對(duì)方意見(jiàn)（也可以是產(chǎn)品經(jīng)理）；
4. 縫縫補(bǔ)補(bǔ)最終確認(rèn)。

給新手一個(gè)建議：多去大廠的開(kāi)源B端組件庫(kù)尋求解決方案。例如：AntDesign、DevUI、Portal、LEGAODesign等。

關(guān)于需求這部分，不是本期重點(diǎn)，我之后會(huì)專門(mén)寫(xiě)一篇文章講述需求分析。

五、合理的設(shè)計(jì)系統(tǒng)，適應(yīng)多角色、多維度用戶

B端產(chǎn)品相較于C端產(chǎn)品，在設(shè)計(jì)理念、交互方式、視覺(jué)表現(xiàn)上面有很大的不同，B端產(chǎn)品組件化、柵格化的需求相較于C端產(chǎn)品更為重要。

1. 導(dǎo)航樣式

網(wǎng)格系統(tǒng)確定前，首先要確定導(dǎo)航樣式；常見(jiàn)的B端導(dǎo)航樣式有3種：橫向式、縱向式、橫縱式。

考慮維修系統(tǒng)的使用場(chǎng)景（辦公室對(duì)操作效率、專注度有要求）、未來(lái)的內(nèi)容承載力（不會(huì)很復(fù)雜，但也會(huì)增加導(dǎo)航）、復(fù)雜程度選擇縱向式導(dǎo)航，進(jìn)而去確定網(wǎng)格系統(tǒng)。

2. 網(wǎng)格系統(tǒng)

建立網(wǎng)格系統(tǒng)之前，我們首先要了解市面上的主流瀏覽器的尺寸：1440*900、1366*768、1920*1080；1920*1080多為24寸以上顯示器，海外本土條件不允許，刪除；最終選擇占比較高的1440*900。

瀏覽器無(wú)高度限制，但我們?cè)谠O(shè)計(jì)的時(shí)候盡量考慮在一屏內(nèi)展示完全，去掉瀏覽器頂部導(dǎo)航占據(jù)的位置，剩余高度在700~760之間，間距（水槽）按8X像素、列數(shù)為網(wǎng)頁(yè)版常用的12C；依此來(lái)建立網(wǎng)格系統(tǒng)。

注：具體采用多少列網(wǎng)格，可根據(jù)原型圖來(lái)確定?；窘Y(jié)構(gòu)在交互原型階段可以大致出來(lái)，所以在繪制原型圖的過(guò)程中也要認(rèn)真對(duì)待。

3. 色彩系統(tǒng)

B端設(shè)計(jì)非常依賴于設(shè)計(jì)系統(tǒng)，好的顏色定義，能幫我們?cè)O(shè)計(jì)出一些更加統(tǒng)一、舒適、層級(jí)分明、可讀性強(qiáng)的界面。

主色：是我們系統(tǒng)的代表顏色，一般與品牌色相關(guān)聯(lián)（藍(lán)色#0A5CFF）。

• 主色的選擇需要盡量選擇冷色系，這是為了避免用戶長(zhǎng)時(shí)間使用帶來(lái)視覺(jué)疲勞；
• 避免與錯(cuò)誤、警告顏色沖突；
• 在亮色模式下，飽和度和亮度不低于70。

根據(jù)主色制作出24色帶，進(jìn)而提煉出12色帶作為標(biāo)準(zhǔn)色，12色帶的提煉原則：將顏色相近的刪掉，不符合品牌調(diào)性的刪除，不符合產(chǎn)品性質(zhì)的刪除。

網(wǎng)上有很多生成色板的網(wǎng)站，工作中為了方便可以直接在網(wǎng)站上生成。但小編希望大家能夠理解色板的制作原理。

色板包含120個(gè)有彩色+12個(gè)中性色，作用不同，使用情境不同。

中性色主要被大量的應(yīng)用在界面的文字部分，此外背景、邊框、分割線等場(chǎng)景中。

4. 文字

我們的用戶通過(guò)文本來(lái)理解內(nèi)容和完成工作，科學(xué)的字體系統(tǒng)將大大提升用戶的閱讀體驗(yàn)及工作效率。

關(guān)于字體默認(rèn)使用系統(tǒng)字體，在設(shè)計(jì)時(shí)也可以提供一套我們的品牌字體，但字體要始終保持良好的易讀性和可讀性，體現(xiàn)了友好、穩(wěn)定和專業(yè)的特性。個(gè)人建議瀏覽器默認(rèn)字體就可以，無(wú)需費(fèi)力去挑選合適的字體。

字體的字號(hào)、字重、行高直接參照AntDesign的設(shè)計(jì)規(guī)范就可以。

關(guān)于字重方面，以regular 和 medium 的兩種字體重量為主。

關(guān)于文字顏色與背景色搭配時(shí)，要做到清晰可讀，可在：https://color.review 測(cè)試，至少要達(dá)到AA的標(biāo)準(zhǔn)。

5. Icon

圖標(biāo)是將某個(gè)概念轉(zhuǎn)換成清晰易讀的圖形，以降低用戶的理解成本，提升界面的美觀度為目的。由于B端在設(shè)計(jì)中圖標(biāo)往往只占了很小的比重，在調(diào)用時(shí)也會(huì)被縮到比設(shè)計(jì)稿小很多倍的尺寸，設(shè)計(jì)時(shí)要注意簡(jiǎn)單、清晰、準(zhǔn)確。

因?yàn)槠聊环直媛实牟煌?，沒(méi)有規(guī)定最小操作熱區(qū)。但受到文字（Chrome瀏覽器中限制最小的字體為12px）的限制，12px漸漸成為大家公認(rèn)圖標(biāo)操作熱區(qū)的最小值。16px、24px、32px都是PC端常見(jiàn)的圖標(biāo)尺寸。

這里我們采用48*48作為圖標(biāo)的設(shè)計(jì)尺寸。由此可制作出Keyline。

Icon的制作需保證icon的初始結(jié)構(gòu)，采用點(diǎn)線面（圓、方、三角形）構(gòu)成。不做夸張?zhí)幚?，在一致性方面：圖標(biāo)的一致性體現(xiàn)在對(duì)重復(fù)性元素的的管理、元素間的比例上面。

6. 容器

容器為全局樣式中的一種類(lèi)別，用于盛放不同組件（文字、icon等）的載體，我們可以理解為“盒子”。常見(jiàn)的容器有：組件的背景、按鈕的各種狀態(tài)、消息反饋的提示等。

注意其中的顏色運(yùn)用要選取色板中的顏色，不能違背用戶認(rèn)知。

• 紅色：失敗提示、警示按鈕；
• 橙色：異常操作；
• 綠色：成功、完成；
• 藍(lán)色（主色）：提示、可執(zhí)行操作。

注：在前景色與容器搭配時(shí)，注意前景色的清晰度問(wèn)題，可在https://color.review上面測(cè)試。

7. 陰影

陰影來(lái)源于現(xiàn)實(shí)生活的反映物體與物體之間距離。在UI界面中，我們往往通過(guò)模擬元素的投影來(lái)表示元素之間的高度距離與層次關(guān)系。有上、下、左、右四個(gè)方向，依靠XY的數(shù)值調(diào)整。

陰影可根據(jù)不同的應(yīng)用場(chǎng)景分為四種：默認(rèn)投影、懸停投影、彈框投影、文字投影；根據(jù)不同場(chǎng)景設(shè)置不同的投影參數(shù)。

Y軸距離：文字 < 默認(rèn) < 懸停 < 彈框。

下圖為：AntDesign的向下投影參數(shù)，可供參考。

隨著近年來(lái)彌散投影的廣泛喜愛(ài)，這里是否適合，設(shè)計(jì)師可自己嘗試。

為了更為連貫的講解，也為了能讓大家慢慢消化，以上為B端設(shè)計(jì)界面前的準(zhǔn)備內(nèi)容，下一篇《從“海外維修系統(tǒng)”項(xiàng)目，解析B端產(chǎn)品設(shè)計(jì)（下）》將為大家詳細(xì)講解組件搭建、控件設(shè)計(jì)的問(wèn)題。謝謝！

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

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