后臺(tái)系統(tǒng)就像是建筑根基，假如根基打不穩(wěn)，裝修得再漂亮也都是徒勞。所以，所有的后端開發(fā)和優(yōu)化都應(yīng)當(dāng)擺在前端之前，產(chǎn)品經(jīng)理也應(yīng)當(dāng)在產(chǎn)品開發(fā)設(shè)計(jì)之前就完善后端邏輯，為前端產(chǎn)品設(shè)計(jì)做好“后勤工作”。

上篇文章已經(jīng)為大家介紹了后臺(tái)系統(tǒng)三要素中的兩點(diǎn)，分別是：業(yè)務(wù)和邏輯。在這里我就不多做回顧了，沒有看過的同學(xué)們可以戳此鏈接前往：《從0到1，搭建營(yíng)銷中心——認(rèn)識(shí)后臺(tái)系統(tǒng)（上）》。

今天講的后臺(tái)系統(tǒng)模塊化偏實(shí)戰(zhàn)，對(duì)設(shè)計(jì)交互原型圖感到煩惱的同學(xué)應(yīng)該會(huì)有所幫助；另外，我還會(huì)將自己總結(jié)的“如何快速制作原型圖PP”T用簡(jiǎn)單易懂的圖文展示給大家，之后會(huì)單獨(dú)寫一篇詳細(xì)介紹。

那么開篇絮叨就到這里。

本文關(guān)鍵詞：PRD，交互原型圖，模塊化，抄襲or借鑒。

何為PRD

在開始進(jìn)入的文章前，我們先問一下自己，我們現(xiàn)在做的PRD文檔，到底是在畫畫呢？還是真的在寫文檔？筆者很坦白的說，在公司里和內(nèi)部人員交流、評(píng)審的都只是畫的原型圖，如下圖：

又或者如下圖：

筆者認(rèn)為，以上這些都不能算作PRD，那么完整的PRD到底是怎么樣的？

言簡(jiǎn)意賅：產(chǎn)品 需求 文檔

• 產(chǎn)品：是圍繞著一個(gè)完整的產(chǎn)品，而非零碎的功能點(diǎn)；
• 需求：能夠講述清楚產(chǎn)品背景、目的，用戶價(jià)值和需求；
• 文檔：能夠作為資料被長(zhǎng)期存檔和更新迭代，且任何人都可以隨時(shí)翻閱并且能夠清晰了解整個(gè)產(chǎn)品；

如下圖：

又或者如下圖：

以上的兩份案例，是較為完整的PRD產(chǎn)品需求文檔。（兩份分別是用Word和Axure編寫，只展示了部分，如有需要源文件資源的，可以私信筆者）

筆者必須鄭重提醒各位新晉產(chǎn)品經(jīng)理：切忌成為功能經(jīng)理。

模塊化思維

講完了PRD相關(guān)的內(nèi)容，進(jìn)入本文的正題，后臺(tái)系統(tǒng)設(shè)計(jì)的第三個(gè)要素：模塊化設(shè)計(jì)。

模塊化設(shè)計(jì)是指：利用模塊化思維，異類求同、同類求和的方式，組成產(chǎn)品模塊，再將大模塊打散拆分成小模塊進(jìn)行設(shè)計(jì)的一種方式。

在這里，有必要解釋一下，何為“異類求同、同類求和”——

異類求同

異類求同的概念是指，將看似不相關(guān)的業(yè)務(wù)或功能通過系統(tǒng)邏輯進(jìn)行串聯(lián)，比如倉庫與收銀臺(tái)，看似完全不相干，但是從系統(tǒng)邏輯來分析，收銀臺(tái)結(jié)賬后倉庫庫存會(huì)自動(dòng)扣減，那么在兩者就可以進(jìn)行串聯(lián)。

知道了兩者的關(guān)聯(lián)性后，在設(shè)計(jì)倉庫模塊和收銀模塊時(shí)，就可以將兩者的串聯(lián)關(guān)系體現(xiàn)在頁面設(shè)計(jì)上了。

同類求和

同類求和的概念比較好理解，就是將相同或相似業(yè)務(wù)或功能嘗試放在一起分析，有必要的話可以進(jìn)行模塊合并。

在這里也舉個(gè)例子，比如營(yíng)銷中心會(huì)有優(yōu)惠券、滿減、滿贈(zèng)等活動(dòng)形式，那么我們就需要將同類型的活動(dòng)放在一起設(shè)計(jì)，方便技術(shù)開發(fā)，同樣也為后期維護(hù)帶來方便。（這里先不劇透營(yíng)銷中心的內(nèi)容，具體營(yíng)銷中心的規(guī)劃設(shè)計(jì)可以看后面的文章）

模塊化設(shè)計(jì)

以上是對(duì)模塊化思維的描述，接下來進(jìn)入模塊化設(shè)計(jì)的階段。模塊化設(shè)計(jì)主要分兩部分來說：開源選型和交互規(guī)則。

開源模板選型（Ant Design）

所謂的開源就是開放源代碼的意思，簡(jiǎn)而言之就是由一群思想境界極高的開發(fā)人員，將源代碼公開讓他人獲取并使用。

那么從產(chǎn)品的角度來看，源代碼帶來了豐富多樣的設(shè)計(jì)模板，也就是我們這節(jié)要講的開源模板選型。我們使用開源模板的好處主要有兩點(diǎn)：

1. 交互原型圖設(shè)計(jì)起來比較方便，不需要自己從0開始畫，一些列表、按鈕、input框、下拉框等組件都是現(xiàn)成的。

2. 對(duì)于開發(fā)而言，設(shè)計(jì)的模板和代碼是共通的，我們通過模板上復(fù)制一個(gè)按鈕到原型圖上，開發(fā)也同樣會(huì)找該樣式的源代碼進(jìn)行編寫，省去了很多開發(fā)工作量。

關(guān)于開源模板的話，網(wǎng)上有許多，比如國(guó)外的ACE，騰訊的Weui，F(xiàn)rozen UI等，在這里為大家主要推薦由阿里螞蟻金服開源的“Ant Design”。

事先申明，筆者并不是阿里的托，阿里也不需要我在這里托。具體資源看下面：

效果預(yù)覽：https://pro.ant.design/index-cn

資源下載：http://design.alipay.com/resource

交互規(guī)則

Ant Design的交互原型我就不展開細(xì)說了，筆者會(huì)借著尼爾森交互原則中的部分和Ant Design的設(shè)計(jì)規(guī)范來為大家共同展示，完整的尼爾森十大交互原則，筆者會(huì)和另外一本書“Don’t Make Me Think”作為一篇來寫。

（1）一致性原則

顧名思義，一致性是指頁面的樣式，動(dòng)效，文案，交互手勢(shì)保持一致。

如上圖所示，當(dāng)鼠標(biāo)懸浮上輸入框或選擇框時(shí)，方框都會(huì)變藍(lán)，這是一種反饋式交互。

（2）易掃原則

后臺(tái)系統(tǒng)的頁面往往會(huì)數(shù)據(jù)量較大，列表頁繁多，詳情頁更是信息堆積如山，如何讓用戶在最短的時(shí)間內(nèi)瀏覽完頁面上的內(nèi)容，抓取到最重要的信息，這就是易掃原則。

詳情頁通常是后臺(tái)系統(tǒng)最難設(shè)計(jì)的頁面之一，因?yàn)槿魏涡畔⒍加锌赡苄枰故驹斍椋斍轫撔枰故镜膬?nèi)容也是多樣化的。Ant Design通過層級(jí)式的設(shè)計(jì)，將信息流分隔成多個(gè)模塊，將不同維度的內(nèi)容用Tab進(jìn)行切換，將主次關(guān)系通過顏色、字體、大小、高亮等形式凸現(xiàn)出來。讓用戶能夠在較短的時(shí)間內(nèi)瀏覽完信息量巨大的頁面，而毫無疲憊感。

（3）人性化幫助原則

iPhone之所以成為街機(jī)，就是因?yàn)樯系?0歲老奶奶，下到3歲小孩，都可以毫不費(fèi)力的上手。原因就在于iPhone的人性化幫助幾乎都屬于“無需提示”級(jí)別的，滑動(dòng)手勢(shì)、底布BUTTON按鈕、3Dtouch、刪除按鈕時(shí)的抖動(dòng)等等，都沒有用任何的提示文本。

后臺(tái)系統(tǒng)不像iPhone，無法做到“無需提示”，但是適時(shí)的提示和一些防錯(cuò)提示是很必要的。當(dāng)鼠標(biāo)懸浮到icon圖標(biāo)上后，提示文字適時(shí)的出現(xiàn)，告訴用戶該按鈕的用途，這就節(jié)省了很大的學(xué)習(xí)和試錯(cuò)成本；幽靈按鈕和標(biāo)簽放在一起，無需提示，用戶就知道該按鈕是用來新增標(biāo)簽的，完全不需要一行提示文“新增標(biāo)簽”，頁面更整潔。

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

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