從0到1,搭建營銷中心——認識后臺系統(下)

30 評論 17845 瀏覽 221 收藏 10 分鐘

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

上篇文章已經為大家介紹了后臺系統三要素中的兩點,分別是:業務和邏輯。在這里我就不多做回顧了,沒有看過的同學們可以戳此鏈接前往:《從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 協議

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 大神,QQ群已經搜不到了,現在還有原型資料,prd文檔嗎

    來自山東 回復
  2. 你好,加了QQ群,可以通過下嗎?

    回復
  3. 由于求資料的同學很多,筆者就不一一加微信發了,大家可以加QQ群731794187,筆者剛剛創建的群,會把資料分享給大家。同時,大家也可以交流、分享自己的資料和觀點想法。

    回復
  4. 求一份完整的需求文檔

    回復
    1. 可以加QQ群731794187,里面有原型資料

      來自上海 回復
  5. 學習了,很有幫助。想要一份prd文檔學習,非常感謝

    來自廣東 回復
    1. 可以加QQ群731794187,里面有原型資料

      來自上海 回復
  6. 筆者,想要一份需求文檔,沒辦法私信

    回復
    1. 可以加QQ群731794187,里面有原型資料

      來自上海 回復
  7. 學習到了。想要一份PRD文檔學習下可以嘛

    來自北京 回復
  8. 非常感謝您的分享!想要一份PRD文檔學習下可以嘛

    回復
  9. 求需求文檔地址

    回復
  10. 想要一份prd文件學習下,求私信謝謝

    回復
  11. 我也想要一份word版的prd文檔學習一下,請私信我謝謝噢

    回復
  12. 學習學習

    回復
  13. 想要一份prd文件學習下,求私信,謝謝

    回復
  14. 求prd文件學習下,沒辦法私信

    來自新疆 回復
  15. 我覺得現如今prd文檔不需要太拘泥于形式了,因為prd文檔的閱讀對象主要是開發人員,需要更加需要站在他們的角度去考慮,跟開發溝通什么樣的形式才是最適合的,只要把需求背景、業務邏輯、系統邏輯、需要實現的效果描述清楚即可。這是我的拙見。

    來自廣東 回復
    1. 你說的很對,其實給開發看,不需要弄一份非常正式的文檔,又臭又長,沒人愿意看。但是正規的文檔,最主要的目的在于留檔追溯和產品迭代

      來自上海 回復
  16. 易懂易理解,非常棒!還請多分享。

    回復
  17. 同感,螞蟻金服的開源控件,我也認為算是目前用起來最順手的,當然,有時間的話,自己也可以設計一套,但實際都沒什么時間。

    來自四川 回復
    1. 有資源的情況下,沒太大必要再“造個輪子”。我自己會整理一套icon庫,比較實用方便。

      回復
  18. 后臺的交互設計確實挺講究,關鍵這時候沒設計師幫你,全得靠自己 ??

    來自北京 回復
    1. 是的,通常來說,小公司的后臺基本上都是低保真裸奔的,那么和開發互懟就不會少,這時候如果有現成的模板會好很多

      回復
  19. 厲害??

    回復
  20. 求需求文檔地址~~~

    來自北京 回復
  21. 清晰明了,學習了。

    來自廣東 回復
  22. 順便私信大佬,求文檔地址~~

    來自浙江 回復
  23. PRD文檔我想要,想看看哦,可以嗎

    來自廣東 回復
  24. 學習,純正的干貨!

    來自浙江 回復