▲點(diǎn)擊"三分設(shè)"關(guān)注，回復(fù)"社群"加入我們
歡迎來到專業(yè)設(shè)計(jì)師學(xué)習(xí)交流社區(qū)
三分設(shè)｜連接知識(shí)，幫助全球 1 億設(shè)計(jì)師成長
轉(zhuǎn)自：Clip設(shè)計(jì)夾
編輯：張夢(mèng)如
共 1895 字 12 圖 預(yù)計(jì)閱讀 5 分鐘
原子設(shè)計(jì)作為指導(dǎo)設(shè)計(jì)實(shí)踐的理論基礎(chǔ)，是一種分層思考的思維模式。靈活運(yùn)用原子設(shè)計(jì)，能有效提升對(duì)頁面及產(chǎn)品的整體把控能力。
原子設(shè)計(jì)是創(chuàng)建設(shè)計(jì)系統(tǒng)的理論方法，分為原子、分子、組織、模板、頁面五個(gè)層次。從最基礎(chǔ)的原子開始，原子構(gòu)成分子，分子組成組織，相互協(xié)作以創(chuàng)造出更有效的頁面。原子設(shè)計(jì)借鑒了化學(xué)中看待事物的方式，并將其應(yīng)用在數(shù)字產(chǎn)品中。例如我們看的界面是由一些基本的元素組成，文字，顏色和圖標(biāo)等都是一個(gè)個(gè)原子。原子設(shè)計(jì)是一種思維模式，并不特指某一種設(shè)計(jì)風(fēng)格或框架。通過原子設(shè)計(jì)理論，將產(chǎn)品和頁面聯(lián)系為一個(gè)有機(jī)的整體，其中的每個(gè)小元素都發(fā)揮著至關(guān)重要的作用。02. 原子設(shè)計(jì)方法論: 從原子到產(chǎn)品原子設(shè)計(jì)有特定的框架，方便幫助設(shè)計(jì)師組織思路并在設(shè)計(jì)過程中作為指導(dǎo)。原子指化學(xué)反應(yīng)不可再分的基本微粒，雖然基礎(chǔ)但會(huì)對(duì)分子和個(gè)體的形成產(chǎn)生很大的影響。同理在設(shè)計(jì)中，原子是構(gòu)成設(shè)計(jì)的最基礎(chǔ)的元素，可以是一個(gè) icon、一種字體…本身不具備特有的功能但這些基礎(chǔ)元素同樣值得重視。分子由原子構(gòu)成，以一定的次序和排列方式結(jié)合成分子。回到設(shè)計(jì)中，多個(gè)設(shè)計(jì)元素組合在一起，也會(huì)創(chuàng)造出一種新東西——具有明確功能性的組件。原子設(shè)計(jì)強(qiáng)大的地方在于，可以為分子 (組件) 的創(chuàng)造分配時(shí)間，以確保組件具有明確的意義和功能。不同的分子組合形成組織，在設(shè)計(jì)中各種不同的組件組合在一起，形成一個(gè)完整的功能模塊，例如在首頁輪播圖模塊，有圖像、文字等元素，還有按鈕、導(dǎo)航箭頭等組件。利用組織這個(gè)概念能幫助設(shè)計(jì)師建立模塊化意識(shí)，對(duì)頁面結(jié)構(gòu)有更深入的理解。通過元素、組件和功能模塊的相互關(guān)聯(lián)，從而得到產(chǎn)品的模板即產(chǎn)品框架，也可以理解為產(chǎn)品的低保真線框圖。在這個(gè)階段，產(chǎn)品的信息架構(gòu)和可視化的層次結(jié)構(gòu)變得非常重要。產(chǎn)品頁面、搜索結(jié)果頁、主頁等都有各自的模板，會(huì)顯示內(nèi)容的結(jié)構(gòu)和基本的原型，方便后期使用。在模板基礎(chǔ)上，繼續(xù)添加需要的細(xì)節(jié)，最終會(huì)形成完整的頁面，即產(chǎn)品的高保真原型。這個(gè)階段中需要注意的是，頁面中所有的占位符盡可能提供真實(shí)的內(nèi)容——真實(shí)的圖像、真實(shí)的文案。對(duì)于完成的頁面，我們可以利用原子設(shè)計(jì)的靈活性來調(diào)整和優(yōu)化頁面設(shè)計(jì)。比如當(dāng)有某些地方的設(shè)計(jì)沒有達(dá)到預(yù)期，可以靈活調(diào)整頁面中的某個(gè)分子或組織模塊來實(shí)現(xiàn)想要的效果。 03. 原子設(shè)計(jì)的優(yōu)勢
原子設(shè)計(jì)是在設(shè)計(jì)過程中構(gòu)建事物的方式，但它并不限制對(duì)環(huán)境變化做出反應(yīng)的自由。通過為產(chǎn)品中的每種類型的內(nèi)容創(chuàng)建組件和模式，獲得一個(gè)靈活的系統(tǒng)。模板為產(chǎn)品的一致性提供了一定的支撐，后期既可以按這些模板原型快速設(shè)計(jì)，也可以根據(jù)需求靈活調(diào)整。原子設(shè)計(jì)相當(dāng)于將設(shè)計(jì)內(nèi)容納入到一個(gè)模式里，組成的頁面不僅擁有準(zhǔn)確的內(nèi)容，并能以最好的樣式展現(xiàn)出來。原子設(shè)計(jì)鼓勵(lì)設(shè)計(jì)師投入時(shí)間和精力來創(chuàng)建整個(gè)系統(tǒng)，以便在產(chǎn)品設(shè)計(jì)的最后階段，能夠以一種高效的方式靈活地完成設(shè)計(jì)工作。利用原子設(shè)計(jì)可以確保在項(xiàng)目過程中組件的數(shù)量會(huì)受到一定的控制，避免團(tuán)隊(duì)重復(fù)設(shè)計(jì)同一個(gè)組件的多個(gè)版本或提供樣式差不多的副本。控制 UI組件的數(shù)量，帶來的好處之一就是開發(fā)的效率會(huì)變得更高。有了以原子設(shè)計(jì)方法為基礎(chǔ)的理論架構(gòu)，設(shè)計(jì)過程的每個(gè)環(huán)節(jié)會(huì)緊緊串聯(lián)在一起，避免混亂。原子設(shè)計(jì)成為一種用戶體驗(yàn)設(shè)計(jì)方法，以全新的方式帶領(lǐng)大家設(shè)計(jì)每一個(gè)元素、組件以及頁面，通過這樣的方法論有助于設(shè)計(jì)師構(gòu)建一個(gè)完整的設(shè)計(jì)系統(tǒng)。— The end —
?? 原創(chuàng)文章精選??
如何評(píng)估設(shè)計(jì)質(zhì)量，提升設(shè)計(jì)技能
你常常忽略的 7 個(gè)具有破壞性的體驗(yàn)鴻溝
一篇文章告訴你服務(wù)設(shè)計(jì)到底能做什么？
看 Apple CarPlay 如何提升駕駛安全和駕駛體驗(yàn)
游戲新手指導(dǎo)怎么做？一起看看《對(duì)馬島之魂》如何打造初次對(duì)抗體驗(yàn)
制定 “小目標(biāo)”，了解產(chǎn)品管理中的結(jié)構(gòu)化思維
35+ 的 Windows 系統(tǒng)到底有什么了不起？細(xì)數(shù)系統(tǒng)界面設(shè)計(jì)的演變
導(dǎo)師與學(xué)員的高效交流 APP 設(shè)計(jì) —— Lightship
后疫情時(shí)代，如何通過服務(wù)設(shè)計(jì)恢復(fù)真正的人際互動(dòng)？
?? 我們一起聊設(shè)計(jì) ???♂?
高質(zhì)量，學(xué)設(shè)計(jì)行交流微信群
期待與更多優(yōu)秀用戶體驗(yàn)設(shè)計(jì)師一起成長
PS：歡迎大家關(guān)注三分設(shè)，每天早上9點(diǎn)，準(zhǔn)時(shí)充電。分享優(yōu)質(zhì)設(shè)計(jì)、創(chuàng)意靈感、新知新識(shí)，定期大咖老師直播分享，零距離連麥，答疑解惑。 添加小小蟲微信號(hào)【 Lil_Bug 】，備注【 三分設(shè) 】加入！（只面向星標(biāo)了公眾號(hào)三分設(shè)的粉絲）
