后臺系統就像是建筑根基，假如根基打不穩，裝修得再漂亮也都是徒勞。所以，所有的后端開發和優化都應當擺在前端之前，產品經理也應當在產品開發設計之前就完善后端邏輯，為前端產品設計做好“后勤工作”。

上篇文章已經為大家介紹了后臺系統三要素中的兩點，分別是：業務和邏輯。在這里我就不多做回顧了，沒有看過的同學們可以戳此鏈接前往：《從0到1，搭建營銷中心——認識后臺系統（上）》。

今天講的后臺系統模塊化偏實戰，對設計交互原型圖感到煩惱的同學應該會有所幫助；另外，我還會將自己總結的“如何快速制作原型圖PP”T用簡單易懂的圖文展示給大家，之后會單獨寫一篇詳細介紹。

那么開篇絮叨就到這里。

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

何為PRD

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

又或者如下圖：

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

言簡意賅：產品 需求 文檔

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

如下圖：

又或者如下圖：

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

筆者必須鄭重提醒各位新晉產品經理：切忌成為功能經理。

模塊化思維

講完了PRD相關的內容，進入本文的正題，后臺系統設計的第三個要素：模塊化設計。

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

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

異類求同

異類求同的概念是指，將看似不相關的業務或功能通過系統邏輯進行串聯，比如倉庫與收銀臺，看似完全不相干，但是從系統邏輯來分析，收銀臺結賬后倉庫庫存會自動扣減，那么在兩者就可以進行串聯。

知道了兩者的關聯性后，在設計倉庫模塊和收銀模塊時，就可以將兩者的串聯關系體現在頁面設計上了。

同類求和

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

在這里也舉個例子，比如營銷中心會有優惠券、滿減、滿贈等活動形式，那么我們就需要將同類型的活動放在一起設計，方便技術開發，同樣也為后期維護帶來方便。（這里先不劇透營銷中心的內容，具體營銷中心的規劃設計可以看后面的文章）

模塊化設計

以上是對模塊化思維的描述，接下來進入模塊化設計的階段。模塊化設計主要分兩部分來說：開源選型和交互規則。

開源模板選型（Ant Design）

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

那么從產品的角度來看，源代碼帶來了豐富多樣的設計模板，也就是我們這節要講的開源模板選型。我們使用開源模板的好處主要有兩點：

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

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

關于開源模板的話，網上有許多，比如國外的ACE，騰訊的Weui，Frozen UI等，在這里為大家主要推薦由阿里螞蟻金服開源的“Ant Design”。

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

效果預覽：https://pro.ant.design/index-cn

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

交互規則

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

（1）一致性原則

顧名思義，一致性是指頁面的樣式，動效，文案，交互手勢保持一致。

如上圖所示，當鼠標懸浮上輸入框或選擇框時，方框都會變藍，這是一種反饋式交互。

（2）易掃原則

后臺系統的頁面往往會數據量較大，列表頁繁多，詳情頁更是信息堆積如山，如何讓用戶在最短的時間內瀏覽完頁面上的內容，抓取到最重要的信息，這就是易掃原則。

詳情頁通常是后臺系統最難設計的頁面之一，因為任何信息都有可能需要展示詳情，而詳情頁需要展示的內容也是多樣化的。Ant Design通過層級式的設計，將信息流分隔成多個模塊，將不同維度的內容用Tab進行切換，將主次關系通過顏色、字體、大小、高亮等形式凸現出來。讓用戶能夠在較短的時間內瀏覽完信息量巨大的頁面，而毫無疲憊感。

（3）人性化幫助原則

iPhone之所以成為街機，就是因為上到80歲老奶奶，下到3歲小孩，都可以毫不費力的上手。原因就在于iPhone的人性化幫助幾乎都屬于“無需提示”級別的，滑動手勢、底布BUTTON按鈕、3Dtouch、刪除按鈕時的抖動等等，都沒有用任何的提示文本。

后臺系統不像iPhone，無法做到“無需提示”，但是適時的提示和一些防錯提示是很必要的。當鼠標懸浮到icon圖標上后，提示文字適時的出現，告訴用戶該按鈕的用途，這就節省了很大的學習和試錯成本；幽靈按鈕和標簽放在一起，無需提示，用戶就知道該按鈕是用來新增標簽的，完全不需要一行提示文“新增標簽”，頁面更整潔。

本文由 @小雞腿 原創發布于人人都是產品經理，未經許可，禁止轉載

題圖來自 Unsplash，基于 CC0 協議