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

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

那么如果是你會怎么做呢？是重新設(shè)計、復(fù)制粘貼、還是利用組件庫進(jìn)行搭建呢？

我之前采用的方式就比較笨，首先打開之前的項(xiàng)目，找到對應(yīng)的界面進(jìn)行復(fù)制，然后在進(jìn)行風(fēng)格和數(shù)據(jù)調(diào)整等。這種設(shè)計方式?jīng)]有問題，但這是一種浪費(fèi)時間的重復(fù)操作，同時如果你復(fù)制的模塊如果來自幾個APP這很容易導(dǎo)致不統(tǒng)一。

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

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

1. 什么是模塊化設(shè)計？
2. 模塊化設(shè)計的好處？

一、什么是模塊化設(shè)計

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

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

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

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

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

二、模塊化設(shè)計的好處

上面大概介紹了模塊化設(shè)計，那么采用模塊化設(shè)計有什么好處呢？模塊化的核心意義在于分離職責(zé)，它的關(guān)注點(diǎn)在于功能劃分。

這里我總結(jié)了它的四大好處：保持輸出一致性、提高設(shè)計效率、適用性強(qiáng)便于維護(hù)、便于協(xié)作。

1. 保持輸出一致性

在設(shè)計中，如果一個項(xiàng)目同時由多個設(shè)計師負(fù)責(zé)，比如列表在訂單模塊會出現(xiàn)，在個人中心中也會出現(xiàn)，如果兩個設(shè)計師都設(shè)計了，那么同樣的模塊就會出現(xiàn)兩個樣式，這顯然不合理。

因此建立相應(yīng)的視覺和交互規(guī)范是必不可少的工作環(huán)節(jié)，同時對于一些復(fù)用性較高的組件，我們就可以將其模塊化。

這樣不管哪個設(shè)計師去設(shè)計，都調(diào)用這個模塊，從而保證交互和設(shè)計風(fēng)格的一致性。

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

上圖是我在花瓣找的兩張圖，如果是同一個產(chǎn)品的話肯定是不可以的，那么模塊化就可以避免這種問題。視覺風(fēng)格的一致性，更多的是一些細(xì)節(jié)上的考慮，比如按鈕我們可以根據(jù)按鈕的屬性來構(gòu)建組件庫：

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

2. 提高設(shè)計效率

模塊化設(shè)計的效率比較大的就是在同一模塊，不同狀態(tài)之間的設(shè)計了。這也是我在設(shè)計時經(jīng)常遇到的問題。

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

這時候在設(shè)計時你該如何去設(shè)計才能保證這些狀態(tài)的完整性，同時在遇到類似項(xiàng)目時如何快速復(fù)用？

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

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

視覺層面：

首先定義它的基礎(chǔ)樣式如第1張卡片；然后我們可以根據(jù)需求進(jìn)行梳理標(biāo)簽狀態(tài)如第2張卡片，有京東精選、京東超市、促銷小便簽、生鮮等，在設(shè)計時我們都需要考慮標(biāo)簽出現(xiàn)的各種情況。

交互層面：

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

促銷信息層面：

如第5和6張卡片下方的贈品即促銷信息，在設(shè)計時也需要進(jìn)行規(guī)范。

通過模塊化的設(shè)計，不但在當(dāng)前項(xiàng)目可以更理智的分析各種狀態(tài)，避免遺漏，同時在使用時，我們直接將這些卡片進(jìn)行組合即可。另外，在下一個類似項(xiàng)目時，可以直接復(fù)用，界面根據(jù)產(chǎn)品實(shí)際需要重新進(jìn)行組合和對模塊的調(diào)整即可。

3. 查錯便于維護(hù)

設(shè)計總是會出現(xiàn)問題的，需要我們不斷修改和優(yōu)化，采用模塊化設(shè)計如果頁面上出現(xiàn)問題，就可以找出相關(guān)模塊進(jìn)行檢查并拔除，直到恢復(fù)正常。

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

4. 便于協(xié)助

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

總結(jié)

采用模塊化設(shè)計就像搭建積木一樣，可以保持輸出一致性、提高設(shè)計效率、適用性強(qiáng)便于維護(hù)、便于協(xié)作等優(yōu)勢。

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

參考鏈接：

https://www.uisdc.com/summary-of-modular-design 電商實(shí)戰(zhàn)！從京東分會場學(xué)到的模塊化設(shè)計方法總結(jié)

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

http://www.ui.cn/detail/177276.html 墻外干貨：如何通過風(fēng)格指南驅(qū)動模塊化交互設(shè)計

作者：風(fēng)箏KK，公眾號：海鹽社本文由 @ 風(fēng)箏KK 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

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