設計師！你為什麼要用模塊化設計？

最近在做項目的時候發現一個問題。就是我當前做的APP項目中，部分界面模塊在之前的多個項目中有設計過，比如訂單模塊、購物車模塊、地址模塊等，而我當前項目又需要設計這些。那麼如果是你會怎麼做呢？是重新設計、複製粘貼、還是利用組件庫進行搭建呢。

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

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

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

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牆外乾貨：如何通過風格指南驅動模塊化交互設計

往期文章選讀：

手把手教你製作設計規範

6招教你輕鬆搞定面試題

九個提升作品展示的技巧

5種讓你欲罷不能的產品套路

UI界面中的圖片常見比例

ps : 海鹽社開放招新，後台回數字「2」，查看詳情