×
打開(kāi)微信“掃一掃”，打開(kāi)網(wǎng)頁(yè)后點(diǎn)擊屏幕右上角分享按鈕
首頁(yè)>
新聞> SEO內容優(yōu)化>
關(guān)于原子設計（看這一篇就夠了）
現在上車(chē)“原子設計”還來(lái)得及嗎？關(guān)于本文對原子設計的概念，好處進(jìn)行分析解讀，原設并總結了原子設計對設計系統和團隊的篇夠影響，與大家分享。關(guān)于
01 為什么要有設計系統？關(guān)于
如果產(chǎn)品規模小(?_?;)只需要1，2個(gè)設計(◎_◎;)師，原設大概率是篇夠前期ヾ(′?｀)?不需要大費周章搞一個(gè)需要( ?ヮ?)開(kāi)發(fā)配合的設計??系統?？梢灾焕肧ketch或者Figma做一個(gè)像貼紙一樣的關(guān)于設計組件庫。但是原設功能多了怎么辦，要招人，篇夠當新設計師產(chǎn)出后就會(huì )發(fā)現與原設計師設計的風(fēng)格不(bu)一樣，慢慢發(fā)現整體設計風(fēng)格不統一，只靠一個(gè)??貼紙組件庫很難能滿(mǎn)足新功能需求，新功能貼紙上沒(méi)有設計或者設計需要變通，又或者是新設計師忙著(zhù)交工忘記檢查自己新組件和已有組件的?異同。
這時(shí)候就(jiu)會(huì )需要一個(gè)設計師領(lǐng)頭去重新整理設計系(′?_?`)統，挑出來(lái)發(fā)現同一個(gè)正文所用十幾個(gè)不同字號，又或者是十幾個(gè)透明度不同的灰黑色字體，(⊙_⊙)所有組件跟現有上線(xiàn)產(chǎn)品對比整理好后一并交給開(kāi)發(fā)，開(kāi)發(fā)再一一整理代碼庫。
02 原子設計好在哪里？
從(cong)上面這個(gè)例子我們就可以看出首先貼紙組件庫需要經(jīng)常維護，同時(shí)也需要和(′?｀*)開(kāi)發(fā)人員及時(shí)溝通同步更新代碼庫，同時(shí)貼紙組件庫也無(wú)法有效約束新(xin)設計師保證設計風(fēng)格一致性。(′?｀*)原子設計的原理可以最大程度保證任何一個(gè)設計組件的構成與開(kāi)發(fā)構建組件一一對應。同時(shí)應用原子設計的設計軟件（??e.g., Sketch, Figma)可以給新設計師足夠的自由滿(mǎn)足需求變通，并(bing)且可以保證同一個(gè)ヾ(?■_■)ノ設計組件的更新會(huì )覆蓋到任何一個(gè)使用這個(gè)組件的(╯°□°）╯設計中。
但需要注意(yi)的是至少目前為止??，還沒(méi)有哪一個(gè)設計軟件可以把設計系統的組件更新直接同步到開(kāi)發(fā)端。大部分(?_?;)時(shí)候設計系統的組件迭代需要一個(gè)設計師和開(kāi)發(fā)工程師同時(shí)分頭協(xié)作。針對某一個(gè)組件的更新效果達成共識后(′?_?`)，設計師和開(kāi)發(fā)工程師分頭對自己負責的設計系統和開(kāi)發(fā)組件庫進(jìn)行更新。
03 原子設計(′▽?zhuān)?的“始作俑者”
根據領(lǐng)英的資料顯示，原子設計的創(chuàng )始人Brad Frost在2016年提出這個(gè)概念時(shí)大概剛30歲出ヽ(′▽?zhuān)?ノ頭，擁有Interactive Multimedia（交互多媒體）本科學(xué)歷，雖非大牛校，但┐(′?｀)┌是此類(lèi)型學(xué)歷常見(jiàn)于數字媒體（視頻，網(wǎng)站，移動(dòng)端等等）的開(kāi)發(fā)設計，也有博物館和大型藝術(shù)展的交互裝置藝術(shù)，設計師可利用多種前端語(yǔ)言進(jìn)行可視化創(chuàng )意編程讓光影聲音形成各種電子藝術(shù)。言歸正傳，Brad就是因(yin)為有了設計和編程的加持讓他??可以(yi)提出并驗證原子設計理念及可實(shí)施性。
04 原子設計(╯‵□′)╯的概念
基于Brad在其Atomic(???) Desi??gn一書(shū)中詳細的描述和很多其他設計師的轉述，我再把其中精髓給大家復述一遍，盡量做??到不贅述。（感覺(jué)好押韻啊 ?）首先Brad列出了5層級的作為Atomic Design的核心概念支架。
Atoms 原子層Molecules 分子層Organisms 有機體Templates 模版Pages 頁(yè)面(mian)原子形成分子，分子形成有機物??。而原子其實(shí)還可以拆分為由(you)電子，質(zhì)子和中子??組成，為什么Brad不把其剝離為更小的子集呢？其實(shí)也是可以剝離的但只不過(guò)沒(méi)(mei)有必要是因為原子作為這個(gè)概念最(zui)小集是需要可獨立運作的。
Brad提出的原子設計理論的靈感來(lái)源于元素周期的化學(xué)概念。即每個(gè)化學(xué)元素都是一種原子，同時(shí)我們所見(jiàn)到的網(wǎng)站，手機app界面，其框架和內容(′▽?zhuān)?)都是可以經(jīng)過(guò)原子分子有機物這種(zhong)模式嵌套而成。
Image source from Picserio.com
Image source from Smashing Magzine Cas( ?ω?)tus
05 原子設計對應組件
那么如何通過(guò)Atomic Design整(′ω｀*)理設計系統呢？Ed Orozco在他的Grouping components in atomic design systems一文(wen)中，把原有Brad的5層級的前三級（原子，分子，??有機物）根據對應??概念把設計組件進(jìn)行一對一分類(lèi)歸納，有些存在歧義的，小編也根據自己經(jīng)驗進(jìn)行了梳理，可酌情參考：
Atoms原子層：?jiǎn)我豢晒ぷ鞯脑咏M件
Typographic styles 字體樣式Color swatches 顏色色??板Icons 圖標Radio buttons 單選按鈕Checkboxes 多選框Sliders 滑桿Toggles 切(qie)換按鈕Profile pictures placeholders個(gè)人資料圖片占位符Product pictures placeholders 產(chǎn)品資料圖片占位符Buttons 按鈕Links 鏈接Input fields (without labels) 無(wú)標識輸入??欄Tabs 標簽文字型按鈕（常見(jiàn)導航）P(╬?益?)ills 藥丸型按鈕（常見(jiàn)熱門(mén)，歷??史搜索關(guān)鍵字）Badges 提醒小紅點(diǎn)或數字（常見(jiàn)微信未讀提??示）Tags(?_?;) 標簽Tooltips 信息提示框Loading Bar/Circl??e 加載條/加載圈Moヾ(′ω｀)?lecules 分子層：1-3個(gè)不同的原子組成的簡(jiǎn)單UIヾ(′ω｀)?功能組件
Dropdown menus 下拉菜單Radio buttons inside regular buttons 普通按鈕里嵌套單選按鈕Dropdown buttons(′?｀) 下拉按鈕Date pic(╯°□°）╯kers 日期選擇器Search components 搜索組件Blockquotes 引用組件Breadcrumbs 面包屑導航欄C??ard/Ti???le components 卡片/(╯°□°）╯︵ ┻━┻長(cháng)條卡片組件Collapsible group items 可收縮群組Input fields (with labels) 帶標識輸入欄M(╬?益?)edia uploaders 上傳組件（選文件按鈕+標題）Loading components 加載模塊（進(jìn)度條+X+名稱(chēng)）Interactive Notifications/Pop-u??ps/Modal 1-2個(gè)ヾ(′?｀)?按鈕的簡(jiǎn)單提示框/彈窗/??狀態(tài)窗 (cookie提示接受/拒絕）Pagination 頁(yè)面頁(yè)數選擇欄Media objects 媒體組件（產(chǎn)品小圖+標題+內容簡(jiǎn)介）Organisms 有機體：由多個(gè)分子組件組成
Navigation/Tab bars 導航欄Video(′ω｀)/Music players 視頻/音樂(lè )播放器Media grids 媒體表單（卡片組成的媒體庫表單）Tables 信息??表格（常見(jiàn)小長(cháng)條卡片組成）Carousels 輪播形式（常見(jiàn)卡片+選擇箭頭/…)Forms 信息表單06 利用原子設計提升設計團隊
啥，原子設計不是只針對設計系統么，為啥還會(huì )牽扯到設計團隊？是??的，沒(méi)錯。除了原子設計的5層級概念，Brad還提出了一個(gè)叫Single Responsibility Principle （單一職責原則）的概念，如果是學(xué)編程的小伙伴就會(huì )了解這個(gè)概念是說(shuō)一個(gè)系統有不同的模塊，每個(gè)模塊只負責一個(gè)功能，模塊和模塊之間的連帶性較小，所以這樣的系統魯棒性更強。
基于??這個(gè)理念，如果設計系(xi)統的分子組件結構相對簡(jiǎn)單，這(╬?益?)樣組件可復用性和連接整個(gè)系統時(shí)就更加容易?；谶@個(gè)理念，Peter Merholz在他的一書(shū)Org Design for Design Orgs中提到了一種全新的設計團隊管理方式。大意是現在設計，產(chǎn)品，開(kāi)發(fā)團隊的組合大部分是基于最有效的開(kāi)(??-)?發(fā)流程，根據單??一職責原則，讓整個(gè)產(chǎn)品的每一環(huán)可以單獨開(kāi)發(fā)運作。
舉個(gè)例子，假設產(chǎn)(O_O)品是一個(gè)線(xiàn)上購物網(wǎng)站，如果將購物系統分解為瀏覽商品，添加到購物車(chē)以及付款完成購物這3個(gè)簡(jiǎn)單環(huán)節，則團隊會(huì )安排每一環(huán)節一個(gè)設??ヽ(′ー｀)ノ計師，一個(gè)產(chǎn)品經(jīng)理和幾個(gè)開(kāi)發(fā)人員，因為這樣產(chǎn)品和工程方面的管理會(huì )相對容易，但是對于設(′▽?zhuān)?計師來(lái)講，因為單個(gè)人僅負責設計中的一環(huán)，個(gè)人產(chǎn)出也是受制于局部有限的設計功能，這與設計一直強調的完整的用戶(hù)體驗流程或用戶(hù)旅程圖相左因為你不可能去設計別的設計師負責的模塊。這也就是為啥大家有時(shí)喜歡去創(chuàng )業(yè)(?⊿?)公司因為你有(you)更多機會(huì )負責整個(gè)產(chǎn)品閉環(huán)的設計。
基于Peter的理論，那么如果設計師都是一個(gè)個(gè)原??子，其實(shí)可以把多個(gè)原子更松散的安插在多個(gè)流程環(huán)節中而不??僅僅是只局限于其(??ヮ?)?*:???中一環(huán)。
結尾
在下篇文章里(li)，小編會(huì )用真實(shí)案例講述如何用Sketch等軟件進(jìn)行原子設計系統構建且如何與(yu)開(kāi)發(fā)同步周旋。
網(wǎng)站建站哪家公司好_綏德網(wǎng)站建設有哪些公司_1
網(wǎng)站建站哪家公司好_焦作知名網(wǎng)站建設推薦_1網(wǎng)站建站哪家公司好_湘西小型網(wǎng)站建設哪家好網(wǎng)站建站哪家公司好_知乎自己建網(wǎng)站_3
手機：
13910811300
電話(huà)：
010-52661970
傳真：
010-82694569
網(wǎng)址：www.javn.cn
郵箱：[email protected]
朝陽(yáng)一部：朝陽(yáng)區紫芳路九號院廣順園2號樓2605A
海淀二部：回龍觀(guān)黃平路19號院泰華龍旗廣場(chǎng)E座1212室(距西三旗橋2公里，8號線(xiàn)育新站海淀昌平交界）
© 2025.Company name All rights reserved.網(wǎng)站地圖
天津九安特機電工程有限公司-More Templates
粵ICP備888888號
