模塊化設(shè)計(jì)是將設(shè)計(jì)分解成小的模塊,然后獨(dú)立設(shè)計(jì)它,最后在將它們組合成更大的系統(tǒng),就像小朋友玩的積木一樣,由一些簡(jiǎn)單的零件組成小的模塊,然后在組合成各種模型樣式。
最近在做項(xiàng)目的時(shí)候發(fā)現(xiàn)一個(gè)問題。就是我當(dāng)前做的APP項(xiàng)目中,部分界面模塊在之前的多個(gè)項(xiàng)目中有設(shè)計(jì)過,比如訂單模塊、購(gòu)物車模塊、地址模塊等,而我當(dāng)前項(xiàng)目又需要設(shè)計(jì)這些。那么如果是你會(huì)怎么做呢?是重新設(shè)計(jì)、復(fù)制粘貼、還是利用組件庫(kù)進(jìn)行搭建呢。
我之前采用的方式就比較笨,首先打開之前的項(xiàng)目,找到對(duì)應(yīng)的界面進(jìn)行復(fù)制,然后在進(jìn)行風(fēng)格和數(shù)據(jù)調(diào)整等。這種設(shè)計(jì)方式?jīng)]有問題,但這是一種浪費(fèi)時(shí)間的重復(fù)操作,同時(shí)如果你復(fù)制的模塊如果來自幾個(gè)APP這很容易導(dǎo)致不統(tǒng)一。
另外對(duì)于一些常見模塊,比如商品列表,幾乎每個(gè)項(xiàng)目都有,但是其展示的參數(shù)和風(fēng)格都有所差異,比如一些有標(biāo)簽,促銷信息,介紹等而一些又沒有,即使拷貝以前的,修改起來也需要時(shí)間。
那么怎么才能解決這些問題呢?后來通過大量的收集和學(xué)習(xí)別人的文章發(fā)現(xiàn),采用模塊化設(shè)計(jì)的方式可以降低這種無(wú)用功操作。模塊化有部分同學(xué)可能不太理解,下面我們從2個(gè)方面來了解:
1、什么是模塊化設(shè)計(jì)?
2、模塊化設(shè)計(jì)的好處?
什么是模塊化設(shè)計(jì)
模塊化設(shè)計(jì)是將設(shè)計(jì)分解成小的模塊,然后獨(dú)立設(shè)計(jì)它,最后在將它們組合成更大的系統(tǒng),就像小朋友玩的積木一樣,由一些簡(jiǎn)單的零件組成小的模塊,然后在組合成各種模型樣式。
在我們生活中到處都可以看到模塊化設(shè)計(jì)的例子,比如汽車、電腦、家具都是由一些零件組合成小部件,然后在由這些小部件組合成模塊,再由模塊組合成成品。這些部件可以更換、添加、移除而不影響整體設(shè)計(jì)。
同理在UI設(shè)計(jì)中,我們同樣可以將文字、顏色、圖標(biāo)、圖片等看成一個(gè)元素,那么由這些元素組合可以成為一個(gè)小的模塊,最后將這些模塊組合在一起就形成了各種界面樣式。
比如個(gè)人中心一般有頭像區(qū)、功能區(qū),那么根據(jù)常見樣式可以拆分為4個(gè)基礎(chǔ)組件。
那么我們由個(gè)人中心的這幾個(gè)組件就可以組合成一個(gè)具有不同展現(xiàn)效果的模塊。
因此,從上圖可以看出,當(dāng)我們做好了基礎(chǔ)的組件并定義它的規(guī)范后,在以后的項(xiàng)目遇到這種情況,界面就會(huì)做得很輕松,像搭建積木一樣就可以搭出不同樣式。
模塊化設(shè)計(jì)的好處
上面大概介紹了模塊化設(shè)計(jì),那么采用模塊化設(shè)計(jì)有什么好處呢?模塊化的核心意義在于分離職責(zé)。它的關(guān)注點(diǎn)在于功能劃分。這里我總結(jié)了它的四大好處:保持輸出一致性、提高設(shè)計(jì)效率、適用性強(qiáng)便于維護(hù)、便于協(xié)作。
1. 保持輸出一致性
在設(shè)計(jì)中,如果一個(gè)項(xiàng)目同時(shí)由多個(gè)設(shè)計(jì)師負(fù)責(zé),比如列表在訂單模塊會(huì)出現(xiàn),在個(gè)人中心中也會(huì)出現(xiàn),如果兩個(gè)設(shè)計(jì)師都設(shè)計(jì)了,那么同樣的模塊就會(huì)出現(xiàn)兩個(gè)樣式,這顯然不合理。
因此建立相應(yīng)的視覺和交互規(guī)范是必不可少的工作環(huán)節(jié),同時(shí)對(duì)于一些復(fù)用性較高的組件,我們就可以將其模塊化。這樣不管哪個(gè)設(shè)計(jì)師去設(shè)計(jì),都調(diào)用這個(gè)模塊,從而保證交互和設(shè)計(jì)風(fēng)格的一致性。
交互的一致性,或者說可預(yù)測(cè)性,是用戶體驗(yàn)的根本。比如日期選擇組件,在整個(gè)產(chǎn)品中就應(yīng)該只有一種存在形式。如果一會(huì)頁(yè)面,一會(huì)彈層就讓用戶操作很摸不著頭腦。
上圖是我在花瓣找的兩張圖,如果是同一個(gè)產(chǎn)品的話肯定是不可以的,那么模塊化就可以避免這種問題。
視覺風(fēng)格的一致性,更多的是一些細(xì)節(jié)上的考慮,比如按鈕我們可以根據(jù)按鈕的屬性來構(gòu)建組件庫(kù)。
以上圖為例,如果我們的產(chǎn)品比較中性、嚴(yán)謹(jǐn)那么我們就采用左側(cè)的直角按鈕,如果是活潑類型的產(chǎn)品,我們就采用右側(cè)圓角按鈕。切記不要將圓角和直角混在一起用。
2、提高設(shè)計(jì)效率
模塊化設(shè)計(jì)的效率比較大的就是在同一模塊,不同狀態(tài)之間的設(shè)計(jì)了。這也是我在設(shè)計(jì)時(shí)經(jīng)常遇到的問題。
比如京東購(gòu)物車,你會(huì)看到一個(gè)購(gòu)物車要分店鋪、自營(yíng)、滿減、商品卡片,其中商品卡片還有各種標(biāo)簽和狀態(tài)。這時(shí)候在設(shè)計(jì)時(shí)你該如何去設(shè)計(jì)才能保證這些狀態(tài)的完整性,同時(shí)在遇到類似項(xiàng)目時(shí)如何快速?gòu)?fù)用?
這時(shí)候采用模塊化的設(shè)計(jì)是最好的方法,我們可以將界面進(jìn)行拆分:滿減區(qū)、店鋪區(qū)、京東自營(yíng)區(qū)、卡片區(qū),那么在設(shè)計(jì)時(shí)我們就將界面分解成了不同的小模塊,從而對(duì)其設(shè)計(jì),是不是就簡(jiǎn)單多了。下面以卡片區(qū)為例:
當(dāng)采用模塊化設(shè)計(jì)時(shí),對(duì)于購(gòu)物車卡片區(qū)的設(shè)計(jì),我們就可單拿出來設(shè)計(jì)。在設(shè)計(jì)時(shí)可以分為視覺展示層面、交互層面、促銷信息層面等。
視覺層面:首先定義它的基礎(chǔ)樣式如第1張卡片;然后我們可以根據(jù)需求進(jìn)行梳理標(biāo)簽狀態(tài)如第2張卡片,有京東精選、京東超市、促銷小便簽、生鮮等,在設(shè)計(jì)時(shí)我們都需要考慮標(biāo)簽出現(xiàn)的各種情況。
交互層面:比如第3和4張卡片,我們需要設(shè)計(jì)無(wú)貨狀態(tài)、商品過期、商品下架、不支持銷售等狀態(tài)。
促銷信息層面:如第5和6張卡片下方的贈(zèng)品即促銷信息,在設(shè)計(jì)時(shí)也需要進(jìn)行規(guī)范。
通過模塊化的設(shè)計(jì),不但在當(dāng)前項(xiàng)目可以更理智的分析各種狀態(tài),避免遺漏,同時(shí)在使用時(shí),我們直接將這些卡片進(jìn)行組合即可。另外,在下一個(gè)類似項(xiàng)目時(shí),可以直接復(fù)用,界面根據(jù)產(chǎn)品實(shí)際需要重新進(jìn)行組合和對(duì)模塊的調(diào)整即可。
3、便于查錯(cuò) 便于維護(hù)
設(shè)計(jì)總是會(huì)出現(xiàn)問題的,需要我們不斷修改和優(yōu)化,采用模塊化設(shè)計(jì)如果頁(yè)面上出現(xiàn)問題,就可以找出相關(guān)模塊進(jìn)行檢查并拔除,直到恢復(fù)正常。
比如導(dǎo)航欄,當(dāng)你將頁(yè)面做完后,領(lǐng)導(dǎo)說白色的導(dǎo)航太平了,給他加個(gè)藍(lán)色底色,如果你沒有進(jìn)行組件化設(shè)計(jì),那么你就需要一個(gè)個(gè)的頁(yè)面去修改了,采用模塊化設(shè)計(jì),我們直接打開對(duì)應(yīng)的組件庫(kù)就可以2分鐘進(jìn)行換膚。
4、便于協(xié)助
這和設(shè)計(jì)師協(xié)作的道理相同。如果兩個(gè)開發(fā)同學(xué)都在制作帶有彈層的頁(yè)面,這部分工作只要交給其中一人就行了。他做好之后封裝成模塊,另一位開發(fā)在自己的頁(yè)面中加載就行了。
總結(jié)
采用模塊化設(shè)計(jì)就像搭建積木一樣,可以保持輸出一致性、提高設(shè)計(jì)效率、適用性強(qiáng)便于維護(hù)、便于協(xié)作等優(yōu)勢(shì)。
1、保持輸出一致性:采用模塊化設(shè)計(jì),可能將人進(jìn)行良好的分工,同一模塊由一個(gè)人來設(shè)計(jì),同時(shí)建立相對(duì)于的規(guī)范,便于其他伙伴的復(fù)用。
2、提高設(shè)計(jì)效率:當(dāng)你的界面中狀態(tài)較多或者復(fù)用率比較高時(shí),采用模塊化設(shè)計(jì)不僅可讓界面狀態(tài)更完善,不容易遺漏,同時(shí)也比較好利于快速應(yīng)用。
3、適用性強(qiáng)便于維護(hù):設(shè)計(jì)總是會(huì)出現(xiàn)問題的,需要我們不斷修改和優(yōu)化,采用模塊化設(shè)計(jì)如果頁(yè)面上出現(xiàn)問題,就可以找出相關(guān)模塊進(jìn)行檢查并拔除,直到恢復(fù)正常。
4、便于協(xié)助:這和設(shè)計(jì)師協(xié)作的道理相同。如果兩個(gè)開發(fā)同學(xué)都在制作帶有彈層的頁(yè)面,這部分工作只要交給其中一人就行了。他做好之后封裝成模塊,另一位開發(fā)在自己的頁(yè)面中加載就行了。
相關(guān)素材:功能強(qiáng)大的簡(jiǎn)潔多用途APP UI設(shè)計(jì)系統(tǒng)模板
作者:風(fēng)箏KK 海鹽社
全站高品質(zhì)素材免費(fèi)下載!