本文是我對(duì)“設(shè)計(jì)體系”思考的一部分
?在開(kāi)始之前皆辽，先聊聊什么是組件？
組件是為了解決某個(gè)場(chǎng)景問(wèn)題弊琴，選擇設(shè)計(jì)元素兆龙，按照設(shè)計(jì)規(guī)范進(jìn)行組合，然后通過(guò)開(kāi)發(fā)將設(shè)計(jì)工程化访雪，最終達(dá)到標(biāo)準(zhǔn)規(guī)范和可復(fù)用場(chǎng)景的基本模塊详瑞。
組件可以解決什么問(wèn)題？
了解組件能解決什么問(wèn)題之前臣缀，我們先了解一下一個(gè)頁(yè)面是如何被制作出來(lái)：傳統(tǒng)的頁(yè)面設(shè)計(jì)流程是瀑布式的坝橡，從需求到設(shè)計(jì)，設(shè)計(jì)到開(kāi)發(fā)精置，它是以接力賽的形式在工作计寇。
因此，它會(huì)存在很多問(wèn)題脂倦，如在設(shè)計(jì)稿出來(lái)之前番宁，沒(méi)有人知道頁(yè)面長(zhǎng)什么樣子，另外赖阻，在缺乏約束的情況下蝶押，同樣的需求和場(chǎng)景，不同的設(shè)計(jì)師會(huì)有不同的解決方案火欧，也導(dǎo)致棋电，無(wú)法應(yīng)對(duì)頻繁的更新需求、多組合方式等實(shí)際場(chǎng)景苇侵。
你可以想象一下赶盔，在網(wǎng)頁(yè)上銷售一款產(chǎn)品，今天提供“滿減”榆浓，明天提供贈(zèng)品于未，后天提供綁定套餐，信息呈現(xiàn)上必定是不同的，而這個(gè)問(wèn)題需求方和工程師都無(wú)法解決烘浦，必須要設(shè)計(jì)師的參與抖坪，效率是非常低下。然而谎倔，即使設(shè)計(jì)師參與柳击，不同的設(shè)計(jì)師和產(chǎn)品組合，也會(huì)導(dǎo)致最終呈現(xiàn)有不可估量的設(shè)計(jì)展現(xiàn)形式片习。而這些都會(huì)為企業(yè)增加大量的成本和對(duì)品牌造成傷害捌肴。
接下來(lái)，我來(lái)講下組件設(shè)計(jì)能如何解決這些問(wèn)題藕咏。首先状知，一個(gè)頁(yè)面是由多個(gè)滿足不同場(chǎng)景的組件組合而成。而一個(gè)組件從設(shè)計(jì)到使用孽查，會(huì)有四類角色參與饥悴，組件設(shè)計(jì)師接收需求進(jìn)行設(shè)計(jì)，組件工程師將其開(kāi)發(fā)成組件給到我們的業(yè)務(wù)設(shè)計(jì)師和工程師來(lái)使用盲再。而業(yè)務(wù)設(shè)計(jì)師和工程在使用過(guò)程中發(fā)現(xiàn)問(wèn)題西设，然后反饋給到組件設(shè)計(jì)的設(shè)計(jì)師和工程師這邊的生產(chǎn)端，來(lái)形成閉環(huán)答朋。
這樣設(shè)計(jì)有兩大好處贷揽，分別是提升效率，降低成本和提高設(shè)計(jì)品質(zhì)梦碗。
01.
提升效率禽绪，降低成本
首先，場(chǎng)景去重洪规。由于所有的場(chǎng)景和需求印屁，都統(tǒng)一收集到生產(chǎn)端進(jìn)行處理，重復(fù)和相似的場(chǎng)景將被合并斩例。
二雄人，頁(yè)面生產(chǎn)周期變短。拋棄傳統(tǒng)接力棒的工作模式念赶，組件設(shè)計(jì)的頁(yè)面更像是拼樂(lè)高础钠，有非常強(qiáng)的復(fù)用性和穩(wěn)定性。另外晶乔，在沒(méi)有新增場(chǎng)景的情況下珍坊，業(yè)務(wù)設(shè)計(jì)師和工程師可以不通過(guò)生產(chǎn)端牺勾，直接用組件創(chuàng)建頁(yè)面正罢，形成小閉環(huán)，快速且靈活驻民。
三翻具，彌合合作差距履怯。設(shè)計(jì)語(yǔ)言和我們使用的其他語(yǔ)言一樣，每個(gè)人都有自己的表達(dá)方式裆泳，隨著產(chǎn)品和團(tuán)隊(duì)的發(fā)展叹洲，表達(dá)方式的差異會(huì)使其變得越來(lái)越復(fù)雜，創(chuàng)造一致體驗(yàn)難度成倍增加工禾。而組件設(shè)計(jì)將從源頭运提，生產(chǎn)端，生產(chǎn)組件并提供指導(dǎo)闻葵，即將大量的元素選擇民泵、狀態(tài)變化、響應(yīng)式變化等設(shè)計(jì)決策從源頭基于場(chǎng)景槽畔、需求進(jìn)行規(guī)范栈妆，并將封裝成組件，提供給業(yè)務(wù)端厢钧，讓設(shè)計(jì)規(guī)則在組件中“隱形”鳞尔，可用，而不可見(jiàn)早直。這樣寥假，業(yè)務(wù)端的設(shè)計(jì)師以及工程師，在開(kāi)發(fā)新的頁(yè)面時(shí)莽鸿，對(duì)面已有的場(chǎng)景昧旨、需求解決方案，可用直接使用組件搭建祥得，減少重新設(shè)計(jì)開(kāi)發(fā)的時(shí)間和人力成本兔沃。
以首屏 Banner 組件為例，組件設(shè)計(jì)師收集業(yè)務(wù)需求级及，開(kāi)始設(shè)計(jì)組件乒疏，根據(jù)設(shè)計(jì)規(guī)范挑選滿足需求的標(biāo)題、產(chǎn)品名饮焦、賣點(diǎn)展示怕吴、按鈕、圖片等設(shè)計(jì)元素县踢，然后進(jìn)行排版組合转绷，在組合過(guò)程中，需要充分考慮組件在不同分辨率和狀態(tài)的變化硼啤，最終輸出設(shè)計(jì)說(shuō)明文檔給到工程師將設(shè)計(jì)規(guī)則封裝成組件议经，以及提供設(shè)計(jì)指導(dǎo)，給業(yè)務(wù)設(shè)計(jì)師提供設(shè)計(jì)指導(dǎo)和建議。
這樣煞肾，當(dāng)業(yè)務(wù)產(chǎn)生需求時(shí)咧织，業(yè)務(wù)設(shè)計(jì)師只需要根據(jù)設(shè)計(jì)指導(dǎo)提供設(shè)計(jì)方案，然后籍救，業(yè)務(wù)工程師將其輸入進(jìn)機(jī)器习绢。機(jī)器就會(huì)按照我們定好的規(guī)則，輸出對(duì)應(yīng)的設(shè)計(jì)內(nèi)容給到我們蝙昙。
02.
產(chǎn)品運(yùn)作闪萄，提高品質(zhì)
與時(shí)俱進(jìn)的產(chǎn)品化運(yùn)作。組件設(shè)計(jì)本身很好繼承了互聯(lián)化產(chǎn)品化運(yùn)作奇颠，敏捷開(kāi)發(fā)桃煎、快速迭代的優(yōu)點(diǎn)。隨著業(yè)務(wù)的擴(kuò)張大刊，以及產(chǎn)品國(guó)際化的趨勢(shì)为迈，一次性解決方案將難以滿足復(fù)雜多變的市場(chǎng)環(huán)境。這個(gè)過(guò)程中缺菌，設(shè)計(jì)師以組件為產(chǎn)品進(jìn)行設(shè)計(jì)葫辐，可以更好的為用戶和企業(yè)提供持續(xù)性的、創(chuàng)新的改善方案伴郁。
設(shè)計(jì)一致性耿战。就像前面說(shuō)的，設(shè)計(jì)語(yǔ)言焊傅，一千個(gè)人就有一千個(gè)哈姆雷特剂陡。組件化設(shè)計(jì)可用減少設(shè)計(jì)過(guò)程中的不確定性，因?yàn)橐徊糠值脑O(shè)計(jì)規(guī)則被“隱藏”在機(jī)器中狐胎，而給到設(shè)計(jì)師們的設(shè)計(jì)指導(dǎo)鸭栖，因?yàn)椤半[藏”的規(guī)則，將變得更簡(jiǎn)單和具體握巢，降低規(guī)范傳播中的信息的分散和損耗晕鹊，避免了多角色參與導(dǎo)致的信息不對(duì)等。所以設(shè)計(jì)師在面對(duì)同一場(chǎng)景和需求時(shí)暴浦，將會(huì)得到統(tǒng)一的解決方案溅话。
“A corporation should be like a painting; everything visible should contribute to the correct total statement.”?
— Eliot Noyes
設(shè)計(jì)的一致性，將有效降低用戶的學(xué)習(xí)成本歌焦，因?yàn)槲覀兯缘漠a(chǎn)品都遵循一致的規(guī)則飞几，減少用戶出錯(cuò)，提升產(chǎn)品體驗(yàn)的愉悅感独撇。幫助設(shè)計(jì)師更好的控制產(chǎn)品的信息框架屑墨、視覺(jué)風(fēng)格窟社，以及品牌風(fēng)格，幫助業(yè)務(wù)團(tuán)隊(duì)更好的控制產(chǎn)品品質(zhì)绪钥，達(dá)到商業(yè)模式的一致性推動(dòng)。
總結(jié)
組件設(shè)計(jì)讓企業(yè)和用戶變得更好关炼。
用戶程腹，由于優(yōu)秀的設(shè)計(jì)品控，一致性的體驗(yàn)儒拂，使企業(yè)生態(tài)內(nèi)的產(chǎn)品使用門檻進(jìn)一步降低寸潦，且有專屬的設(shè)計(jì)團(tuán)隊(duì)為此不斷的打磨細(xì)節(jié)，升級(jí)體驗(yàn)社痛。
而企業(yè)通過(guò)組件設(shè)計(jì)见转，以生產(chǎn)端為戰(zhàn)略基地，為不同的業(yè)務(wù)提供指導(dǎo)和“彈藥”（組件）蒜哀。前線業(yè)務(wù)端可根據(jù)組件靈活組裝以應(yīng)對(duì)多變的市場(chǎng)環(huán)境斩箫。同時(shí)，作為組件的設(shè)計(jì)者撵儿，組件設(shè)計(jì)讓設(shè)計(jì)師跨越了專業(yè)領(lǐng)域與工程師進(jìn)行更具密切的溝通乘客，并一起創(chuàng)建統(tǒng)一的組件設(shè)計(jì)體系，讓邏輯與設(shè)計(jì)共存淀歇。減少了大家無(wú)意義的工作易核，產(chǎn)生更多的價(jià)值和成就感。
感謝你的時(shí)間浪默。
歡迎關(guān)注公眾號(hào)：設(shè)計(jì)系求生指南
