小公司B端產(chǎn)品如何規(guī)范系統(tǒng)設(shè)計(jì)?

4 評(píng)論 10595 瀏覽 76 收藏 10 分鐘

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

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

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

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

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

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

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

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

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

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

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

1. 搜索項(xiàng)

1)搜索項(xiàng)保證整齊,具體排版見需求,搜素項(xiàng)固定于最上面,不允許滾動(dòng);

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

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

2. 操作項(xiàng)

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

2)列表上面的操作若為批量操作的,必須勾選列表數(shù)據(jù),若未勾選數(shù)據(jù),則操作的時(shí)候提示:“請(qǐng)勾選數(shù)據(jù)再進(jìn)行操作!”

3)搜索項(xiàng)全部做成“搜索配置”,每個(gè)頁面都可以根據(jù)用戶配置想要的搜索項(xiàng),但是每個(gè)頁面都會(huì)固定幾個(gè)搜索項(xiàng)是不能取消的,必須顯示的;

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

3. 表單

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

2)表單中單條數(shù)據(jù)的操作項(xiàng)固定,不隨著橫向滾動(dòng)條的移動(dòng)變化;

4. 分頁

1)分頁要固定在最底層,不允許滾動(dòng);

5. 彈框

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

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

6. 導(dǎo)出

1)需要大量處理數(shù)據(jù)生成表格的導(dǎo)出,產(chǎn)品經(jīng)理需要做成進(jìn)入“下載中心”后臺(tái)生成數(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)入下載中心,除了有特殊說明的;

下圖為我畫的一個(gè)初稿,大家不可以參考:

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

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

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

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

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

2. 數(shù)據(jù)中臺(tái)

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

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

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

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

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

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

望與君共勉,歡迎評(píng)論騷擾~

 

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

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

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 三-6.導(dǎo)出章節(jié)里面的圖是用axure畫的嗎?

    來自貴州 回復(fù)
    1. 是的

      來自廣東 回復(fù)
  2. 分享一下axure元件唄?

    來自北京 回復(fù)
    1. 微信z378554555

      來自廣東 回復(fù)