本篇文章從“什么是模塊化設計”和“模塊化設計的好處”兩方面出發，教大家如何通過模塊化設計減少無用功，從而提高工作效率。

最近在做項目的時候發現一個問題：在我當前做的APP項目中，部分界面模塊在之前的多個項目中有設計過，比如訂單模塊、購物車模塊、地址模塊等，而我當前項目又需要設計這些。

那么如果是你會怎么做呢？是重新設計、復制粘貼、還是利用組件庫進行搭建呢？

我之前采用的方式就比較笨，首先打開之前的項目，找到對應的界面進行復制，然后在進行風格和數據調整等。這種設計方式沒有問題，但這是一種浪費時間的重復操作，同時如果你復制的模塊如果來自幾個APP這很容易導致不統一。

另外對于一些常見模塊，比如商品列表，幾乎每個項目都有，但是其展示的參數和風格都有所差異，比如一些有標簽，促銷信息，介紹等而一些又沒有，即使拷貝以前的，修改起來也需要時間。

那么怎么才能解決這些問題呢？后來通過大量的收集和學習別人的文章發現，采用模塊化設計的方式可以降低這種無用功操作。模塊化有部分同學可能不太理解，下面我們從2個方面來了解：

1. 什么是模塊化設計？
2. 模塊化設計的好處？

一、什么是模塊化設計

模塊化設計是將設計分解成小的模塊，然后獨立設計它，最后在將它們組合成更大的系統，就像小朋友玩的積木一樣，由一些簡單的零件組成小的模塊，然后在組合成各種模型樣式。

在我們生活中到處都可以看到模塊化設計的例子，比如汽車、電腦、家具都是由一些零件組合成小部件，然后在由這些小部件組合成模塊，再由模塊組合成成品。這些部件可以更換、添加、移除而不影響整體設計。

同理在UI設計中，我們同樣可以將文字、顏色、圖標、圖片等看成一個元素，那么由這些元素組合可以成為一個小的模塊，最后將這些模塊組合在一起就形成了各種界面樣式。比如個人中心一般有頭像區、功能區，那么根據常見樣式可以拆分為4個基礎組件：

那么我們由個人中心的這幾個組件就可以組合成一個具有不同展現效果的模塊：

因此，從上圖可以看出：當我們做好了基礎的組件并定義它的規范后，在以后的項目遇到這種情況，界面就會做得很輕松，像搭建積木一樣就可以搭出不同樣式

二、模塊化設計的好處

上面大概介紹了模塊化設計，那么采用模塊化設計有什么好處呢？模塊化的核心意義在于分離職責，它的關注點在于功能劃分。

這里我總結了它的四大好處：保持輸出一致性、提高設計效率、適用性強便于維護、便于協作。

1. 保持輸出一致性

在設計中，如果一個項目同時由多個設計師負責，比如列表在訂單模塊會出現，在個人中心中也會出現，如果兩個設計師都設計了，那么同樣的模塊就會出現兩個樣式，這顯然不合理。

因此建立相應的視覺和交互規范是必不可少的工作環節，同時對于一些復用性較高的組件，我們就可以將其模塊化。

這樣不管哪個設計師去設計，都調用這個模塊，從而保證交互和設計風格的一致性。

交互的一致性，或者說可預測性，是用戶體驗的根本。比如日期選擇組件，在整個產品中就應該只有一種存在形式。如果一會頁面，一會彈層就讓用戶操作很摸不著頭腦。

上圖是我在花瓣找的兩張圖，如果是同一個產品的話肯定是不可以的，那么模塊化就可以避免這種問題。視覺風格的一致性，更多的是一些細節上的考慮，比如按鈕我們可以根據按鈕的屬性來構建組件庫：

以上圖為例：如果我們的產品比較中性、嚴謹那么我們就采用左側的直角按鈕；如果是活潑類型的產品，我們就采用右側圓角按鈕。切記不要將圓角和直角混在一起用。

2. 提高設計效率

模塊化設計的效率比較大的就是在同一模塊，不同狀態之間的設計了。這也是我在設計時經常遇到的問題。

比如京東購物車，你會看到一個購物車要分店鋪、自營、滿減、商品卡片，其中商品卡片還有各種標簽和狀態。

這時候在設計時你該如何去設計才能保證這些狀態的完整性，同時在遇到類似項目時如何快速復用？

這時候采用模塊化的設計是最好的方法，我們可以將界面進行拆分：滿減區、店鋪區、京東自營區、卡片區，那么在設計時我們就將界面分解成了不同的小模塊，從而對其設計，是不是就簡單多了。

下面以卡片區為例：當采用模塊化設計時，對于購物車卡片區的設計，我們就可單拿出來設計。在設計時可以分為視覺展示層面、交互層面、促銷信息層面等。

視覺層面：

首先定義它的基礎樣式如第1張卡片；然后我們可以根據需求進行梳理標簽狀態如第2張卡片，有京東精選、京東超市、促銷小便簽、生鮮等，在設計時我們都需要考慮標簽出現的各種情況。

交互層面：

比如第3和4張卡片，我們需要設計無貨狀態、商品過期、商品下架、不支持銷售等狀態。

促銷信息層面：

如第5和6張卡片下方的贈品即促銷信息，在設計時也需要進行規范。

通過模塊化的設計，不但在當前項目可以更理智的分析各種狀態，避免遺漏，同時在使用時，我們直接將這些卡片進行組合即可。另外，在下一個類似項目時，可以直接復用，界面根據產品實際需要重新進行組合和對模塊的調整即可。

3. 查錯便于維護

設計總是會出現問題的，需要我們不斷修改和優化，采用模塊化設計如果頁面上出現問題，就可以找出相關模塊進行檢查并拔除，直到恢復正常。

比如導航欄：當你將頁面做完后，領導說白色的導航太平了，給他加個藍色底色；如果你沒有進行組件化設計，那么你就需要一個個的頁面去修改了，采用模塊化設計，我們直接打開對應的組件庫就可以2分鐘進行換膚。

4. 便于協助

這和設計師協作的道理相同。如果兩個開發同學都在制作帶有彈層的頁面，這部分工作只要交給其中一人就行了。他做好之后封裝成模塊，另一位開發在自己的頁面中加載就行了。

總結

采用模塊化設計就像搭建積木一樣，可以保持輸出一致性、提高設計效率、適用性強便于維護、便于協作等優勢。

1. 保持輸出一致性：采用模塊化設計，可能將人進行良好的分工，同一模塊由一個人來設計，同時建立相對于的規范，便于其他伙伴的復用；
2. 提高設計效率：當你的界面中狀態較多或者復用率比較高時，采用模塊化設計不僅可讓界面狀態更完善，不容易遺漏，同時也比較好利于快速應用；
3. 適用性強便于維護：設計總是會出現問題的，需要我們不斷修改和優化，采用模塊化設計如果頁面上出現問題，就可以找出相關模塊進行檢查并拔除，直到恢復正常；
4. 便于協助：這和設計師協作的道理相同。如果兩個開發同學都在制作帶有彈層的頁面，這部分工作只要交給其中一人就行了。他做好之后封裝成模塊，另一位開發在自己的頁面中加載就行了。

參考鏈接：

https://www.uisdc.com/summary-of-modular-design 電商實戰！從京東分會場學到的模塊化設計方法總結

https://www.uisdc.com/event-venue-modularity 電商活動會場想做得更快更好？你需要模塊化思路

http://www.ui.cn/detail/177276.html 墻外干貨：如何通過風格指南驅動模塊化交互設計

作者：風箏KK，公眾號：海鹽社本文由 @ 風箏KK 原創發布于人人都是產品經理。未經許可，禁止轉載

題圖來自Unsplash，基于CC0協議