設(shè)計師!你為什么要用模塊化設(shè)計?

3 評論 15900 瀏覽 35 收藏 12 分鐘

本篇文章從“什么是模塊化設(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ǔ)組件:

設(shè)計師!你為什么要用模塊化設(shè)計?

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

設(shè)計師!你為什么要用模塊化設(shè)計?

因此,從上圖可以看出:當(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)該只有一種存在形式。如果一會頁面,一會彈層就讓用戶操作很摸不著頭腦。

設(shè)計師!你為什么要用模塊化設(shè)計?

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

設(shè)計師!你為什么要用模塊化設(shè)計?

以上圖為例:如果我們的產(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è)計師!你為什么要用模塊化設(shè)計?

這時候采用模塊化的設(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)的各種情況。

設(shè)計師!你為什么要用模塊化設(shè)計?

交互層面:

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

設(shè)計師!你為什么要用模塊化設(shè)計?

促銷信息層面:

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

設(shè)計師!你為什么要用模塊化設(shè)計?

通過模塊化的設(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ù)正常。

設(shè)計師!你為什么要用模塊化設(shè)計?

比如導(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ā)在自己的頁面中加載就行了。

設(shè)計師!你為什么要用模塊化設(shè)計?

總結(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é)議

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 看了標(biāo)題,我還以為有人和我這一樣的文章。看了內(nèi)容才發(fā)現(xiàn)你恐怕是對模塊化設(shè)計有什么誤解。建議先百度一下“模塊化設(shè)計”。你這文章里面講的更接近“組件化”的意思,而不是模塊化。。。模塊化設(shè)計是計算機(jī)程序設(shè)計的專有名詞,是指的一種拆分描述的思想。比如當(dāng)我要編寫一大段代碼復(fù)雜時,我不要在一個段落里全部鋪出來,而且拆成幾段,每段講一個獨(dú)立的事情。

    回復(fù)
    1. 你的文章也講的不錯。只不過確實(shí)應(yīng)該叫“組件化”。你講的相當(dāng)于把一些常用的設(shè)計元素的組合做成組件直接使用。在Axure軟件中,也叫使用模板。。。只不過“模塊化設(shè)計”這個詞已經(jīng)有其他通用含義了,不能搞亂了概念。

      來自江蘇 回復(fù)