編輯導(dǎo)語：規(guī)范化設(shè)計系統(tǒng)，不僅能夠減少溝通（撕逼）成本，還能提升產(chǎn)品的用戶使用體驗。本文作者從自身工作實踐出發(fā)，結(jié)合案例對規(guī)范化設(shè)計的工作流程和過程中需要注意的問題進(jìn)行了梳理分析，與大家分享。

一、為什么要規(guī)范設(shè)計

近幾年B端產(chǎn)品異?；鸨荁端和C端相對，設(shè)計規(guī)范沒有一個清晰的定義，尤其很多小公司的產(chǎn)品經(jīng)理身兼數(shù)職，每天忙于各種業(yè)務(wù)的問題，沒有時間來思考系統(tǒng)如何規(guī)范化設(shè)計，經(jīng)常會有以下的困惑：

• 需求文檔被開發(fā)各種吐槽；
• 系統(tǒng)上線后被業(yè)務(wù)方各種吐槽；
• 后續(xù)版本設(shè)計由于前瞻性不足，很難擴(kuò)展；

俗話說：“磨刀不誤砍柴工”，我們抽空復(fù)盤一下歷史的項目，參考一些優(yōu)秀的設(shè)計，規(guī)范需求文檔，會有意想不到的效果。

二、Axure的元件庫規(guī)范

相信很多小伙伴在學(xué)習(xí)Axure的時候，一定積攢了很多高大上的元件庫，最后在工作中卻沒有真正的發(fā)揮作用，每個公司每個人的設(shè)計習(xí)慣都有一定的差異，我們可以借鑒其他優(yōu)秀的設(shè)計，嘗試自己來創(chuàng)建元件庫，形成自己的規(guī)范。

利用一些基本元件，組合創(chuàng)建一些常用的控件，在使用的時候直接拖動即可，具體創(chuàng)建方法大家自己去搜a(bǔ)xure的學(xué)習(xí)課程就可以了。

三、系統(tǒng)全局規(guī)則

對于B端產(chǎn)品，很多業(yè)務(wù)場景不一樣，設(shè)計的方式也有極大的差別，但是我們挑出共性，把系統(tǒng)通用的設(shè)計要求在全局規(guī)則中一起說明，避免不同技術(shù)同事設(shè)計不同頁面的時候會有不一樣的效果。

以下只是我梳理的部分要求，大家作為參考即可，全局規(guī)則是需要在工作中不斷總結(jié)更新的：

1. 搜索項

1）搜索項保證整齊，具體排版見需求，搜素項固定于最上面，不允許滾動；

2）下拉搜索，分為“單個搜索”和“多個搜索”，默認(rèn)都直接支持多個搜索；

3）文本搜索，默認(rèn)為單個搜索，如果是“模糊搜索”或者”多個搜索”，需求會進(jìn)行特殊說明，多個搜索時，全部采用空格隔開的方式，例如“AM123456 EB356323”；

2. 操作項

1）操作功能放在表單上面，操作按鈕使用“icon”+“文字”的形式展示，最大的節(jié)約空間；

2）列表上面的操作若為批量操作的，必須勾選列表數(shù)據(jù)，若未勾選數(shù)據(jù)，則操作的時候提示：“請勾選數(shù)據(jù)再進(jìn)行操作！”

3）搜索項全部做成“搜索配置”，每個頁面都可以根據(jù)用戶配置想要的搜索項，但是每個頁面都會固定幾個搜索項是不能取消的，必須顯示的；

4）公共的搜索項要做成公共的形式，減少對接，例如“供應(yīng)商名稱”，這個是在多個頁面都存在使用的搜索項，前后端對接的時候所有頁面對接方式一樣，避免重復(fù)對接，后續(xù)如果要改，也是改一個地方即可；

3. 表單

1）表單在頁面下半部分展示，表單高度要自適應(yīng)，若無特殊要求，表單不允許整屏滾動，只能表單內(nèi)數(shù)據(jù)進(jìn)行滾動展示；

2）表單中單條數(shù)據(jù)的操作項固定，不隨著橫向滾動條的移動變化；

4. 分頁

1）分頁要固定在最底層，不允許滾動；

5. 彈框

1）彈框頁面固定最上面的標(biāo)題欄和最下面的操作欄，只允許彈框內(nèi)滾動，不允許整屏彈框滾動，如有特殊要求會在頁面注明；

2）彈框根據(jù)內(nèi)容決定彈框的大小，彈框要有背景遮罩，查看信息的彈框點擊遮罩的時候會關(guān)閉彈框，操作數(shù)據(jù)的表單彈框點擊遮罩不關(guān)閉彈框，這個關(guān)閉方式需要在頁面注明，若未注明，默認(rèn)點擊遮罩不關(guān)閉彈框；

6. 導(dǎo)出

1）需要大量處理數(shù)據(jù)生成表格的導(dǎo)出，產(chǎn)品經(jīng)理需要做成進(jìn)入“下載中心”后臺生成數(shù)據(jù)的方式，不在當(dāng)前頁面加載等待，生成完畢之后進(jìn)入下載中心，再進(jìn)行下載到本地；

2）導(dǎo)出數(shù)據(jù)的若未勾選數(shù)據(jù)，則導(dǎo)出搜索條件下面所有的數(shù)據(jù)，若勾選了數(shù)據(jù)則只導(dǎo)出所勾選的數(shù)據(jù)；

3）導(dǎo)出文件之類的功能一般在頁面直接導(dǎo)出了，不需要進(jìn)入下載中心，除了有特殊說明的；

下圖為我畫的一個初稿，大家不可以參考：

四、系統(tǒng)前瞻性設(shè)計

我們B端很多接觸到的是企業(yè)內(nèi)部員工，這些同事做系統(tǒng)最希望的是解決眼下的問題，很多會考慮后續(xù)公司業(yè)務(wù)的發(fā)展，但是我們作為產(chǎn)品經(jīng)理，需要不斷關(guān)注公司的發(fā)展，關(guān)注行業(yè)內(nèi)同等公司的發(fā)展和趨勢，在設(shè)計系統(tǒng)的時候預(yù)留足夠的空間來支持業(yè)務(wù)發(fā)展；

1. 系統(tǒng)配置項

有一些功能是需要經(jīng)常調(diào)整，或者后續(xù)極有可能進(jìn)行擴(kuò)展的，如果我們要求技術(shù)在代碼中直接寫死功能配置，那么在后續(xù)的業(yè)務(wù)的拓展中就很有可能出現(xiàn)經(jīng)常修改需求的情況，我們需要和業(yè)務(wù)進(jìn)行密切溝通，整理出哪些參數(shù)是會發(fā)生變化的，把這些信息做成一些調(diào)整的配置，在業(yè)務(wù)發(fā)生改變的情況下能夠及時改變；

下圖就是系統(tǒng)的判斷規(guī)則作為配置化，如果業(yè)務(wù)在使用過程中有調(diào)整，他們可以在這里及時調(diào)整數(shù)量，觀看不同配置下面數(shù)據(jù)的變化

2. 數(shù)據(jù)中臺

做B端企業(yè)一定要有數(shù)據(jù)中臺的概念，一個相同的數(shù)據(jù)在企業(yè)內(nèi)部多個部門之間進(jìn)行流轉(zhuǎn)，每個部門對于該數(shù)據(jù)的使用都有所不同，如果我們在每個系統(tǒng)都單獨(dú)維護(hù)相關(guān)的數(shù)據(jù)，極有可能出現(xiàn)數(shù)據(jù)不同步的情況，一旦出現(xiàn)就會有不可預(yù)知的風(fēng)險；

例如電商公司有一個最基礎(chǔ)的數(shù)據(jù)“SKU”，在SKU上會有很多的信息：產(chǎn)品信息、產(chǎn)品圖片、采購屬性、訂單屬性、物流屬性、倉庫屬性等，我們之前項目就發(fā)生過一個問題，由于上游產(chǎn)品系統(tǒng)更換了圖片，但是未及時通知到采購系統(tǒng)，導(dǎo)致了采購買貨到倉庫之后才發(fā)現(xiàn)貨不對板，造成了很大的損失；

在這個事情上我們吸取教訓(xùn)，后續(xù)處理這種公用的數(shù)據(jù)時，一律由源頭系統(tǒng)對數(shù)據(jù)進(jìn)行修改處理，處理完成之后，各個系統(tǒng)從源頭數(shù)據(jù)庫進(jìn)行調(diào)取使用，保證了數(shù)據(jù)的唯一性和準(zhǔn)確性；

在這一環(huán)節(jié)，建議大家多和技術(shù)同學(xué)進(jìn)行溝通，保證功能、數(shù)據(jù)準(zhǔn)確的同事還要保證性能，溝通確定一個最優(yōu)的方案。

3. 配合上下游系統(tǒng)

B端系統(tǒng)大多數(shù)是一個鏈條，需要各方系統(tǒng)進(jìn)行配合使用，產(chǎn)品同學(xué)在設(shè)計各自負(fù)責(zé)模塊的需求時，需要多和其他系統(tǒng)的同事進(jìn)行溝通，了解其他系統(tǒng)的規(guī)劃和配合，在必要的時候也要熟悉一下其他系統(tǒng)的流程，與當(dāng)前負(fù)責(zé)系統(tǒng)配合的地方一定要多多熟悉，這樣在設(shè)計自己系統(tǒng)功能的時候，就會有一個全局的意識，從公司層面來看怎么才能讓整個鏈條跑通。

望與君共勉，歡迎評論騷擾~

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

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