利用原子設(shè)計(jì)體系構(gòu)建自己的組件庫設(shè)計(jì)語言

2021-6-3    資深UI設(shè)計(jì)者

原子設(shè)計(jì)理論并不是什么高大上的規(guī)則。


隨著網(wǎng)頁設(shè)計(jì)的持續(xù)發(fā)展,我們認(rèn)識(shí)到開發(fā)設(shè)計(jì)系統(tǒng)(design system)的重要性,它最早就是為了讓網(wǎng)頁設(shè)計(jì)師更容易理解網(wǎng)頁的構(gòu)成,后來才延伸到UI設(shè)計(jì)當(dāng)中。


簡(jiǎn)單來說,當(dāng)公司的業(yè)務(wù)產(chǎn)品逐漸擴(kuò)大時(shí),我們需要制定一套完整的設(shè)計(jì)系統(tǒng),提升設(shè)計(jì)和開發(fā)的協(xié)作效率,統(tǒng)一所有設(shè)計(jì)師的輸出物。 開始設(shè)計(jì)系統(tǒng)的制定時(shí),大部分設(shè)計(jì)師可能都會(huì)先去網(wǎng)上找到大廠現(xiàn)成的設(shè)計(jì)系統(tǒng),當(dāng)拿到他們的成品的時(shí)候,會(huì)把自己的產(chǎn)品進(jìn)行拆解和借鑒,這的確能快速解決問題,但是如果不理解其中的組織規(guī)則和邏輯,只是借鑒他們現(xiàn)成的設(shè)計(jì)系統(tǒng),只能了解個(gè)大概,知其然而不知其所以然。因此,原子設(shè)計(jì)理論的出現(xiàn)就是為了幫助我們?nèi)ゴ罱ㄔO(shè)計(jì)系統(tǒng),這套理論已經(jīng)逐漸被國(guó)外一些大廠應(yīng)用于創(chuàng)建統(tǒng)一和富有層次的設(shè)計(jì)系統(tǒng)。



  • 原子是所有事物的基本構(gòu)成物質(zhì)。每一個(gè)化學(xué)元素都具有不同的性質(zhì),并且它們一旦被分解就會(huì)失去其意義。




  • 分子是由兩個(gè)或兩個(gè)以上的原子通過化學(xué)鍵結(jié)合在一起的。這些原子的組合具有自己獨(dú)特的性質(zhì),并且相較于原子來說,更具實(shí)際意義和可操作



  • 有機(jī)體是由分子有機(jī)地組合在一起的。這些相對(duì)復(fù)雜的結(jié)構(gòu)可以從單細(xì)胞生物一直到像人類這樣難以置信的復(fù)雜生物體。



原子設(shè)計(jì)使我們可以將我們的界面UI細(xì)分為原子元素,并通過這些元素組合在一起形成最終的界面。

原子作為整個(gè)理論最基礎(chǔ)的元素,當(dāng)我們改變其中的原子時(shí),整個(gè)體系都會(huì)發(fā)生變化。原子的設(shè)計(jì)概念和sketch中的“符號(hào)”有異曲同工之妙,當(dāng)我們改變其中一個(gè)元素時(shí),其他所有包含這個(gè)元素的頁面都會(huì)發(fā)生變化,可以保證整個(gè)系統(tǒng)的一致性和層次感。原子設(shè)計(jì)為界面元素提供了應(yīng)用規(guī)則和組織原理,這套方法論對(duì)于設(shè)計(jì)系統(tǒng)建立、團(tuán)隊(duì)協(xié)作、產(chǎn)品迭代都具有非常重要的指導(dǎo)意義。


藍(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)掃碼藍(lán)小助,報(bào)下信息,藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請(qǐng)與我們聯(lián)系。

截屏2021-05-13 上午11.41.03.png



文章來源:站酷   作者:請(qǐng)叫我海鍋鍋

分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責(zé)聲明:藍(lán)藍(lán)設(shè)計(jì)尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)www.bouu.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 平面設(shè)計(jì)服務(wù)


分享本文至:

日歷

鏈接

個(gè)人資料

存檔