国外亚洲成av人片在线观看,热99re久久精品这里都是精品,天堂网在线最新版www,国产成人av区一区二区三,51久久成人国产精品麻豆

現(xiàn)在上車“原子設(shè)計”還來得及嗎？本文對原子設(shè)計的概念，好處進行分析解讀，并總結(jié)了原子設(shè)計對設(shè)計系統(tǒng)和團隊的影響，與大家分享。

原子設(shè)計的概念在2016年最先被Brad Frost提出來，之后慢慢由其概念引發(fā)出來的各種設(shè)計系統(tǒng)也日益成熟?；仡櫘?dāng)初做設(shè)計系統(tǒng)都是整理貼紙一樣的組件庫，今天想和大家細(xì)聊一下原子設(shè)計到底好在哪里，為什么要有設(shè)計系統(tǒng)和由原子設(shè)計引發(fā)的設(shè)計組織架構(gòu)變革。

01 為什么要有設(shè)計系統(tǒng)？

如果產(chǎn)品規(guī)模小只需要1，2個設(shè)計師，大概率是前期不需要大費周章搞一個需要開發(fā)配合的設(shè)計系統(tǒng)?？梢灾焕肧ketch或者Figma做一個像貼紙一樣的設(shè)計組件庫。但是功能多了怎么辦，要招人，當(dāng)新設(shè)計師產(chǎn)出后就會發(fā)現(xiàn)與原設(shè)計師設(shè)計的風(fēng)格不一樣，慢慢發(fā)現(xiàn)整體設(shè)計風(fēng)格不統(tǒng)一，只靠一個貼紙組件庫很難能滿足新功能需求，新功能貼紙上沒有設(shè)計或者設(shè)計需要變通，又或者是新設(shè)計師忙著交工忘記檢查自己新組件和已有組件的異同。

這時候就會需要一個設(shè)計師領(lǐng)頭去重新整理設(shè)計系統(tǒng)，挑出來發(fā)現(xiàn)同一個正文所用十幾個不同字號，又或者是十幾個透明度不同的灰黑色字體，所有組件跟現(xiàn)有上線產(chǎn)品對比整理好后一并交給開發(fā)，開發(fā)再一一整理代碼庫。

02 原子設(shè)計好在哪里？

從上面這個例子我們就可以看出首先貼紙組件庫需要經(jīng)常維護，同時也需要和開發(fā)人員及時溝通同步更新代碼庫，同時貼紙組件庫也無法有效約束新設(shè)計師保證設(shè)計風(fēng)格一致性。原子設(shè)計的原理可以最大程度保證任何一個設(shè)計組件的構(gòu)成與開發(fā)構(gòu)建組件一一對應(yīng)。同時應(yīng)用原子設(shè)計的設(shè)計軟件（e.g., Sketch, Figma)可以給新設(shè)計師足夠的自由滿足需求變通，并且可以保證同一個設(shè)計組件的更新會覆蓋到任何一個使用這個組件的設(shè)計中。

但需要注意的是至少目前為止，還沒有哪一個設(shè)計軟件可以把設(shè)計系統(tǒng)的組件更新直接同步到開發(fā)端。大部分時候設(shè)計系統(tǒng)的組件迭代需要一個設(shè)計師和開發(fā)工程師同時分頭協(xié)作。針對某一個組件的更新效果達成共識后，設(shè)計師和開發(fā)工程師分頭對自己負(fù)責(zé)的設(shè)計系統(tǒng)和開發(fā)組件庫進行更新。

03 原子設(shè)計的“始作俑者”

根據(jù)領(lǐng)英的資料顯示，原子設(shè)計的創(chuàng)始人Brad Frost在2016年提出這個概念時大概剛30歲出頭，擁有Interactive Multimedia（交互多媒體）本科學(xué)歷，雖非大牛校，但是此類型學(xué)歷常見于數(shù)字媒體（視頻，網(wǎng)站，移動端等等）的開發(fā)設(shè)計，也有博物館和大型藝術(shù)展的交互裝置藝術(shù)，設(shè)計師可利用多種前端語言進行可視化創(chuàng)意編程讓光影聲音形成各種電子藝術(shù)。言歸正傳，Brad就是因為有了設(shè)計和編程的加持讓他可以提出并驗證原子設(shè)計理念及可實施性。

04 原子設(shè)計的概念

基于Brad在其Atomic Design一書中詳細(xì)的描述和很多其他設(shè)計師的轉(zhuǎn)述，我再把其中精髓給大家復(fù)述一遍，盡量做到不贅述。（感覺好押韻啊 ?）首先Brad列出了5層級的作為Atomic Design的核心概念支架。

1. Atoms 原子層
2. Molecules 分子層
3. Organisms 有機體
4. Templates 模版
5. Pages 頁面

前三層是化學(xué)抽象出來的概念（原子，分子，有機體）后兩層（模版和頁面）感覺更像是基于前三層的累計結(jié)果形成的wireframe（框架圖）和high-fidelity mock（高保真原型圖）。

原子形成分子，分子形成有機物。而原子其實還可以拆分為由電子，質(zhì)子和中子組成，為什么Brad不把其剝離為更小的子集呢？其實也是可以剝離的但只不過沒有必要是因為原子作為這個概念最小集是需要可獨立運作的。

Brad提出的原子設(shè)計理論的靈感來源于元素周期的化學(xué)概念。即每個化學(xué)元素都是一種原子，同時我們所見到的網(wǎng)站，手機app界面，其框架和內(nèi)容都是可以經(jīng)過原子分子有機物這種模式嵌套而成。

Image source from Picserio.com

Image source from Smashing Magzine Castus

05 原子設(shè)計對應(yīng)組件

那么如何通過Atomic Design整理設(shè)計系統(tǒng)呢？Ed Orozco在他的Grouping components in atomic design systems一文中，把原有Brad的5層級的前三級（原子，分子，有機物）根據(jù)對應(yīng)概念把設(shè)計組件進行一對一分類歸納，有些存在歧義的，小編也根據(jù)自己經(jīng)驗進行了梳理，可酌情參考：

Atoms 原子層：單一可工作的原子組件

• Typographic styles 字體樣式
• Color swatches 顏色色板
• Icons 圖標(biāo)
• Radio buttons 單選按鈕
• Checkboxes 多選框
• Sliders 滑桿
• Toggles 切換按鈕
• Profile pictures placeholders個人資料圖片占位符
• Product pictures placeholders 產(chǎn)品資料圖片占位符
• Buttons 按鈕
• Links 鏈接
• Input fields (without labels) 無標(biāo)識輸入欄
• Tabs 標(biāo)簽文字型按鈕（常見導(dǎo)航）
• Pills 藥丸型按鈕（常見熱門，歷史搜索關(guān)鍵字）
• Badges 提醒小紅點或數(shù)字（常見微信未讀提示）
• Tags 標(biāo)簽
• Tooltips 信息提示框
• Loading Bar/Circle 加載條/加載圈

Molecules 分子層：1-3個不同的原子組成的簡單UI功能組件

• Dropdown menus 下拉菜單
• Radio buttons inside regular buttons 普通按鈕里嵌套單選按鈕
• Dropdown buttons 下拉按鈕
• Date pickers 日期選擇器
• Search components 搜索組件
• Blockquotes 引用組件
• Breadcrumbs 面包屑導(dǎo)航欄
• Card/Tile components 卡片/長條卡片組件
• Collapsible group items 可收縮群組
• Input fields (with labels) 帶標(biāo)識輸入欄
• Media uploaders 上傳組件（選文件按鈕+標(biāo)題）
• Loading components 加載模塊（進度條+X+名稱）
• Interactive Notifications/Pop-ups/Modal 1-2個按鈕的簡單提示框/彈窗/狀態(tài)窗 (cookie提示接受/拒絕）
• Pagination 頁面頁數(shù)選擇欄
• Media objects 媒體組件（產(chǎn)品小圖+標(biāo)題+內(nèi)容簡介）

Organisms 有機體：由多個分子組件組成

• Navigation/Tab bars 導(dǎo)航欄
• Video/Music players 視頻/音樂播放器
• Media grids 媒體表單（卡片組成的媒體庫表單）
• Tables 信息表格（常見小長條卡片組成）
• Carousels 輪播形式（常見卡片+選擇箭頭/…)
• Forms 信息表單

06 利用原子設(shè)計提升設(shè)計團隊

啥，原子設(shè)計不是只針對設(shè)計系統(tǒng)么，為啥還會牽扯到設(shè)計團隊？是的，沒錯。除了原子設(shè)計的5層級概念，Brad還提出了一個叫Single Responsibility Principle （單一職責(zé)原則）的概念，如果是學(xué)編程的小伙伴就會了解這個概念是說一個系統(tǒng)有不同的模塊，每個模塊只負(fù)責(zé)一個功能，模塊和模塊之間的連帶性較小，所以這樣的系統(tǒng)魯棒性更強。

基于這個理念，如果設(shè)計系統(tǒng)的分子組件結(jié)構(gòu)相對簡單，這樣組件可復(fù)用性和連接整個系統(tǒng)時就更加容易。基于這個理念，Peter Merholz在他的一書Org Design for Design Orgs中提到了一種全新的設(shè)計團隊管理方式。大意是現(xiàn)在設(shè)計，產(chǎn)品，開發(fā)團隊的組合大部分是基于最有效的開發(fā)流程，根據(jù)單一職責(zé)原則，讓整個產(chǎn)品的每一環(huán)可以單獨開發(fā)運作。

舉個例子，假設(shè)產(chǎn)品是一個線上購物網(wǎng)站，如果將購物系統(tǒng)分解為瀏覽商品，添加到購物車以及付款完成購物這3個簡單環(huán)節(jié)，則團隊會安排每一環(huán)節(jié)一個設(shè)計師，一個產(chǎn)品經(jīng)理和幾個開發(fā)人員，因為這樣產(chǎn)品和工程方面的管理會相對容易，但是對于設(shè)計師來講，因為單個人僅負(fù)責(zé)設(shè)計中的一環(huán)，個人產(chǎn)出也是受制于局部有限的設(shè)計功能，這與設(shè)計一直強調(diào)的完整的用戶體驗流程或用戶旅程圖相左因為你不可能去設(shè)計別的設(shè)計師負(fù)責(zé)的模塊。這也就是為啥大家有時喜歡去創(chuàng)業(yè)公司因為你有更多機會負(fù)責(zé)整個產(chǎn)品閉環(huán)的設(shè)計。

基于Peter的理論，那么如果設(shè)計師都是一個個原子，其實可以把多個原子更松散的安插在多個流程環(huán)節(jié)中而不僅僅是只局限于其中一環(huán)。

結(jié)尾

在下篇文章里，小編會用真實案例講述如何用Sketch等軟件進行原子設(shè)計系統(tǒng)構(gòu)建且如何與開發(fā)同步周旋。

#參考資料#

https://atomicdesign.bradfrost.com/chapter-2/

https://uxdesign.cc/grouping-components-in-atomic-design-systems-4d6e2095ea45

作者：XF；公眾號：FXUX設(shè)計

本文由 @XF 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。

題圖來自Unsplash，基于CC0協(xié)議。