2022-7-28 ui設(shè)計(jì)分享達(dá)人
模塊化設(shè)計(jì)，簡(jiǎn)單地說(shuō)就是將產(chǎn)品的某些要素組合在一起，構(gòu)成一個(gè)具有特定功能的子系統(tǒng)，將這個(gè)子系統(tǒng)作為通用性的模塊與其他產(chǎn)品要素進(jìn)行多種組合，構(gòu)成新的系統(tǒng)，產(chǎn)生多種不同功能或相同功能、不同性能的系列產(chǎn)品（定義內(nèi)容來(lái)自百度百科）。
模塊化設(shè)計(jì)思維最早可以追溯到從工業(yè)革命時(shí)期，工業(yè)革命之后制造業(yè)開(kāi)始飛速發(fā)展，制造業(yè)能夠飛速發(fā)展得益于生產(chǎn)效率的大幅提升。在設(shè)計(jì)產(chǎn)品時(shí)采用“模塊化設(shè)計(jì)思維”，是提升生產(chǎn)效率的一個(gè)很重要的手法。
產(chǎn)品設(shè)計(jì)中對(duì)“模塊化設(shè)計(jì)思維”的應(yīng)用也是制造業(yè)現(xiàn)代化的一個(gè)很重要的標(biāo)志和特點(diǎn)。到了互聯(lián)網(wǎng)時(shí)代，“模塊化設(shè)計(jì)思維”也被應(yīng)用在了操作系統(tǒng)、app的開(kāi)發(fā)過(guò)程中，也大大提升了軟件工程師的開(kāi)發(fā)效率。
“模塊化設(shè)計(jì)思維”是一個(gè)思維方式或者說(shuō)是一個(gè)設(shè)計(jì)手法，這個(gè)“手法”可以應(yīng)用在很多領(lǐng)域。
我們?nèi)粘Ｉ钪兴玫降纳晕?fù)雜一點(diǎn)的產(chǎn)品，如飛機(jī)、汽車、家電、手機(jī)、操作系統(tǒng)等等，都是在以“模塊化設(shè)計(jì)思維”為基礎(chǔ)的設(shè)計(jì)手法中設(shè)計(jì)出來(lái)的。
“模塊化設(shè)計(jì)思維”應(yīng)用最徹底的行業(yè)當(dāng)屬「汽車制造業(yè)」了。從汽車要素的組件化、汽車架構(gòu)的模塊化到生產(chǎn)平臺(tái)的模塊化，可謂是應(yīng)用的非常徹底。
例如：豐田汽車的「M20發(fā)動(dòng)機(jī)」用在了凱美瑞、C-HR、威蘭達(dá)、亞洲龍、RAV4榮放、奕澤這些車型上，在這里「M20發(fā)動(dòng)機(jī)」就是一個(gè)“通用性的模塊”經(jīng)過(guò)與其他汽車要素進(jìn)行不同的設(shè)計(jì)組合，就形成了不同的車型。
豐田汽車的「TNGA架構(gòu)」也是“模塊化設(shè)計(jì)思維”的產(chǎn)物。在TNGA構(gòu)架下，汽車模塊會(huì)達(dá)到高度的通用性，車輛零件的通用率可達(dá)到70%-80%，其中包括底盤懸架、發(fā)動(dòng)機(jī)、變速箱等零件。
采用“模塊化設(shè)計(jì)思維”設(shè)計(jì)出來(lái)的“模塊”有兩個(gè)顯著的特點(diǎn)就是「獨(dú)立」「通用」。
在設(shè)計(jì)時(shí)需要選擇可以獨(dú)立的內(nèi)容來(lái)進(jìn)行“模塊化封裝”。怎么理解「獨(dú)立」呢？判斷模塊是否可以獨(dú)立，可以組成的模塊是否“可以進(jìn)行單獨(dú)設(shè)計(jì)、開(kāi)發(fā)、調(diào)試”不依賴其他要素即可運(yùn)轉(zhuǎn)。
通用這個(gè)特點(diǎn)就比較容易理解了，就是該“模塊”可以與其他要素進(jìn)行多種組合，形成不同類型、不同功能的產(chǎn)品。
采用“模塊化設(shè)計(jì)思維”來(lái)進(jìn)行產(chǎn)品設(shè)計(jì)，有什么優(yōu)勢(shì)呢？
高內(nèi)聚低耦合，是軟件工程中的概念，是判斷軟件設(shè)計(jì)好壞的標(biāo)準(zhǔn)。目的是使程序模塊的可重復(fù)使用性、移植性增強(qiáng)。通常程序結(jié)構(gòu)中各模塊的內(nèi)聚程度越高，模塊間的耦合程度就越低。
內(nèi)聚是從功能角度來(lái)度量模塊內(nèi)的聯(lián)系，表示模塊內(nèi)部間聚集、關(guān)聯(lián)的程度。那么高內(nèi)聚就是指要高度的聚集和關(guān)聯(lián)，元素之間的關(guān)系簡(jiǎn)單、明了，運(yùn)行穩(wěn)定。一個(gè)好的內(nèi)聚模塊應(yīng)當(dāng)恰好只做一件事，高內(nèi)聚具備可靠性、可重用性、可讀性等優(yōu)點(diǎn)。
耦合是對(duì)模塊間關(guān)聯(lián)程度的度量，也就是模塊之間的依賴關(guān)系。低耦合度特性的模塊能減少模塊間的影響，防止對(duì)某一模塊修改所引起的“牽一發(fā)動(dòng)全身”的水波效應(yīng)，保證整個(gè)系統(tǒng)的正常運(yùn)行。
由于模塊具有通用性特點(diǎn)，需要用到此功能模塊時(shí)無(wú)需重復(fù)設(shè)計(jì)，可以直接使用或簡(jiǎn)單微調(diào)即可，減少了“重復(fù)造輪子”現(xiàn)象的發(fā)生。
這樣一來(lái)可以降低生產(chǎn)設(shè)計(jì)的時(shí)間成本和財(cái)力成本，二來(lái)時(shí)可以很大程度的提升產(chǎn)品設(shè)計(jì)、生產(chǎn)制造的效率。
通過(guò)上述內(nèi)容“模塊化設(shè)計(jì)思維”的好處顯而易見(jiàn)，那么作為設(shè)計(jì)師在系統(tǒng)設(shè)計(jì)中應(yīng)該怎么應(yīng)用呢？這里容易陷入一個(gè)誤區(qū)就是為了模塊化而模塊化，模塊化設(shè)計(jì)需要在工作中去積累、抽象出可以進(jìn)行模塊設(shè)計(jì)的內(nèi)容。
首先一定要充分的了解整個(gè)系統(tǒng)，系統(tǒng)的業(yè)務(wù)屬性是什么，系統(tǒng)的功能有哪些（可以使用腦圖梳理出來(lái)），然后站在“上帝視角”去觀察整個(gè)系統(tǒng)，將具有「獨(dú)立」「通用」特點(diǎn)的內(nèi)容抽離出來(lái)進(jìn)行“模塊化”。
下面從「交互」和「UI」的角度來(lái)看兩個(gè)系統(tǒng)中比較常見(jiàn)的例子
下圖為「手機(jī)驗(yàn)證碼驗(yàn)證」交互流程圖，「手機(jī)驗(yàn)證碼校驗(yàn)」流程可以用在登錄、實(shí)名認(rèn)證、修改密碼、查看修改重要信息等功能中，是一個(gè)常見(jiàn)的可“模塊化”的內(nèi)容。
下圖為近期涉及的一個(gè)系統(tǒng)中的「搜索頁(yè)面」，系統(tǒng)中有很多搜索場(chǎng)景，例如：地址搜索、店鋪搜索、品牌搜索、人員搜索等。通過(guò)對(duì)功能和使用場(chǎng)景的分析，將「搜索頁(yè)面」進(jìn)行了模塊化設(shè)計(jì)。
“模塊化設(shè)計(jì)思維”是一種提高工作效率的設(shè)計(jì)方法，需要各位在日常設(shè)計(jì)中嘗試著換一種角度來(lái)觀察系統(tǒng)。也要充分的理解“模塊化設(shè)計(jì)思維”的定義才能夠用好它，它并不是一個(gè)萬(wàn)能的方法，只有用在合適的地方才能體現(xiàn)出其價(jià)值。
作者：群青被注冊(cè) 來(lái)源：站酷
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)加微信ban_lanlan，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.cqzjtgb.com