小紐扣

原子設計理論與視頻講解,把原子設計理論帶入到用戶界面中,原子設計就會產生五個不同層面的組成方法,這些層面相互影響,以疊加組成的方式來創建界面的系統

原子設計理論:

 

分形理論:

 

前言

原子設計理論并不是什么高大上的規則,它最早就是為了讓網頁設計師更容易理解網頁的構成,后來慢慢延伸到UI設計當中,它的基礎原理套用了宇宙中所蘊涵的元素的概念,即宇宙中已知的物體分解后都可以分解為一組有限的原子。

這里的宇宙中的“物質的最小單位是原子”,這一理論是由英國化學家/物理學家約翰·道爾頓提出的,繼承古希臘原子論和牛頓微粒說,提出的原子論。化學元素由不可分的微粒(原子)構成的,它在一切化學變化中是不可再分的最小單位。這應該也是我們教科書中寫到的。

最小的單位用物理術語是“基本粒子”,指人們認知的構成物質的最小/最基本的單位,是組成各種各樣物體的基礎。而最新研究表明,比原子還小的還有夸克和希格斯玻色子(上帝粒子),自從夸克理論被提出后,人們意識到基本粒子也有比較復雜的結構,而不是以前認知中的只有原子。從此大家開始對基本粒子避而不談了。

我說這些基礎概念的目的是為了給分形理論做鋪墊,這會對“分形理論”的概念產生一定的影響。分形理論目前在UI設計圈還沒有被提及,我覺得它的構成要比原子設計理論更契合UI設計的構成,所以我才想通過自己的理解把這些知識傳遞給大家。

 

什么是原子設計理論?

我本人探究問題喜歡尋找本源,因此我就去查了一下原子設計理論提出者?Brad Frost 寫的書,書名是《Atomic Design》,書中第二章有提到原子設計理論的由來,但我英文不好,只能通過自己的理解去做解釋。下面會提供原文,給大家一定的參考。

undefined

我的理解:我試圖尋找一種使用戶界面系統化的方法,并在各行各業和其他領域中尋找靈感。相對于我們所處的這個復雜的世界,如自然構成的復雜、人體結構的復雜、社會結構的復雜等等,某個領域制定系統化的方法就顯得容易了很多,因此我們可以從這些世界構成中學習、剖析、研究并把這些知識轉化并加以利用。

許多領域,如工業設計和建筑設計,已經開發出智能系統,用于制造極其復雜的物體,如汽車、飛機、輪船和大廈。這些智能系統的形成也參考了自然結構等類似的結構。因此我們可以在自然結構等類似結構中探尋,或許就能找到我們想要的答案。

Brad Frost 原話:My search for a methodology to craft interface design systems led me to look for inspiration in other fields and industries. Given this amazingly complex world we’ve created, it seemed only natural that other fields would have tackled similar problems we could learn from and appropriate. As it turns out, loads of other fields?such as industrial design and architecture?have developed smart modular systems for manufacturing immensely complex objects like airplanes, ships, and skyscrapers.
書籍下面 Brad Frost 就開始扯他的高中化學課,和高中化學老師了,這里就沒有什么參考價值了。

 

從化學中尋找線索?

化學反應由化學方程式表示,化學方程式通常顯示原子元素如何結合在一起形成分子。在下面的示例中,我們看到氫和氧如何結合在一起形成水分子。

undefined

在自然界中,原子元素結合在一起形成分子。這些分子可以進一步結合并形成相對復雜的生物。進一步說明:原子?是所有物質的基本組成部分。每個化學元素都有其獨特的特性,在不失去其含義的情況下無法對其進行進一步分解。(原子由更小的位組成,例如質子,電子和中子,但原子是最小的功能單元)分子?是兩個或兩個以上通過化學鍵結合在一起的原子的組。分子的這些組合具有其自身的獨特的屬性,并且比原子更有可操作。生物體是由分子共同協作組成的一個整體,這些相對復雜的結構可以從單細胞生物一直到像人類這樣極其復雜的生物的這樣的一個范圍。這樣理解會簡化宇宙中令人難以置信的組成部分,但基本原理仍然存在:原子結合在一起形成分子,然后進一步結合形成生物體。這種原子理論意味著,已知宇宙中的所有物質都可以分解為有限的原子元素集:
undefined

 

原子設計的方法?

前面我講了如何將宇宙中的所有物質分解為一組有限的原子元素。這樣的規則與我們的代碼結構不謀而合,我們的代碼可以分解為一組相似的有限元素。Josh Duck的HTML元素周期表很好地闡明了我們所有的網站頁面,HTML5頁面,以及其他所有內容都是如何由相同的HTML元素組成的。
undefined

Josh Duck是個程序員,他利用HTML代碼與元素周期表的共性,做出了一個以元素周期表為形式的HTML標識。網站是:joshduck.com?大家有興趣可以看一下。

因為我們是從一組相似并有限的模塊和元素進行構建的,所以我們可以應用自然界中發生的相同過程來設計和開發我們的用戶界面。

undefined

 

原子設計理論五個層面

把原子設計理論帶入到用戶界面中,原子設計就會產生五個不同層面的組成方法,這些層面相互影響,以疊加組成的方式來創建界面的系統。原子設計理論會把這五個層面進行劃分,分別是:

原子(元素、要素)

分子(組件)

組織(模塊)

模板(原型)

頁面(填充內容)

接下來一個個解釋它們的含義。

 

原子

原子是物質的基本組成部分。應用于用戶界面的原子是我們的HTML標簽,例如表單標簽,輸入框、按鈕、圖標等。原子還可以包括更多的抽象元素,例如色板,字體,以及界面中不可見的部分。

undefined

這些用戶界面中的“原子”就像自然界中的原子一樣,它們都是相對抽象的,通常它們本身的意義并不大,例如在用戶界面中改變一個按鈕的尺寸,或改變一小塊的顏色,對整體而言影響并不大。但是,它們非常適合作為“樣式”的形式被存放在庫中,也就是我們常說的“組件化”,這樣就可以一目了然地看到和改變所有全局的樣式了。

 

分子

分子是獨立存在而保持物質化學性質的最小粒子,由組成的原子按照一定的鍵合順序和空間排列而結合在一起的整體。用戶界面中的“分子”是由線段、按鈕、圖標和輸入框等等這些原子元素構成的。

undefined

一個按鈕和輸入框本身起不到任何作用,但它們組合在一起就會變成“搜索框”,就會被賦予新的功能和含義。分子在界面中以組件化的形式而存在的,像下拉菜單、導航欄、表單、手風琴等。

 

組織

在《Atomic Design》的書中把這部分的知識定義為“生物體”,由于生物體的概念相對比較難理解,這里只簡要概述一下它。分子為我們提供了一些基礎的物質構成,如蛋白質、核酸?(DNA、RNA等)、糖類,這些常見的生物大分子構成了生物體。

undefined

生物體的概念影射到用戶界面的構成中,元素和要素(原子)結合起來構成組件(分子),組件組合起來構成組織(生物體)。組織在用戶界面中以模塊的形式存在,例如網頁的導航欄、產品信息、焦點圖、關于我們模塊;App的卡片、列表、瀑布流等。

 

模板

到了模板的層面,我們就應該和化學說再見了。原子、分子和組織這樣一種有層次的結構,可以幫助我們去構件設計系統中的組件,并實現組件化。但最終我們還要根據用戶需求、客戶需求和場景的變化,來幫助它們解決設計上的問題,并使原子設計更具有意義。

undefined

模板可以使“組織”組合在一起形成產品頁面的原型,產品原型可以概括的說是整個產品面市之前的一個框架設計。在這里我們可以看到設計整合在一起,并呈現出實際頁面架構和布局。模板的特征就是專注于頁面的基礎內容結構,而不是頁面的最終內容。

 

頁面

頁面層面是原子設計最具體的一個層面。所有模板整合在一起并形成頁面,為用戶提供具有代表性的內容,并準確描述用戶最終看到的內容。頁面也是高保真圖,它能達到和實際頁面類似的效果,正因為它更接近于實際頁面,團隊中大部分的人所耗的時間和精力,就是不斷地去修正它并完善它。

undefined

當模板填充上了實際用戶需要的內容,如圖片、圖標、文字后,就會逐漸形成頁面,當內容全部填充完后就會形成高保真圖。這里的高保真圖可不是視覺稿,視覺稿只是基于UI設計層面,而高保真圖是在產品和業務層面綜合考慮的,包含完整的產品交互邏輯、頁面流轉、實際內容和界面設計等。比視覺稿更有邏輯,更準確,更接近于實際業務層面。

 

為什么要進行原子設計

原子設計為制作設計系統提供了清晰的方法。客戶和團隊成員通過實際的設計流程與步驟,能更好的去理解設計系統的概念。原子設計使我們能夠從抽象的設計中過渡到具體的設計中來,因此我們可以對一個設計系統進行一致性和可伸縮性等類似特性的控制。

通過模塊化的設計系統調動組件,可以使我們開發新的產品時,從開始就可以對產品進行嚴格的把控與一定程度上的控制,進而規避了事后風險。開發之前什么都不確定好,毫無邏輯的去開發,開發到一半發現功能與需求對不上等問題逐漸產生,會導致產品的延期、人員成本的浪費、人員能動性降低、資金成本的增加,產品的迭代率的下降、進而影響市場先機與市場占有率。

在開發新的產品或項目之前就應該確定好目標和方向,這很像德國人的思維,在軟件開發之前把一切都策劃好,之后根據之前策劃的步驟一步步去實施,如果中途發現哪里有弊端不會進行修改,要嚴格按照之前定制好的標準一步步執行,前期的項目規劃尤為的重要。用中國人的設計思維去理解德國人這樣的設計思維會覺得非常的愚蠢,但實際這樣做效率更高,溝通成本低、產出率高,質量控制更好,品質也更高。

 

原子設計理論 – 總結

下面顯示了逐步完成設計原子設計的過程,對于每一個層面都有相應的介紹。這五個不同的層面同時工作,以產生有效的用戶界面設計系統。概括總結原子設計理論:

原子:無法進一步細分的UI元素,是界面的基本構成要素;

分子:形成相對簡單的UI組件的原子的集合;

組織:形成界面離散部分的相對復雜的組件;

模板:組件放置在布局中,并演示設計的基礎內容結構;

頁面:將真實的內容應用于模板,并闡明變化形式以演示最終的UI并測試設計系統的彈性。

 

原文地址:站酷

作者:羅耀_UI

 

轉載請注明:學UI網 » 概念 – 原子設計理論

登錄收藏
 
你可能喜歡的:
四步教你提升表單設計的用戶體驗四步教你提升表單設計的用戶體驗
確定會使用視覺分隔符嗎?干貨在此!確定會使用視覺分隔符嗎?干貨在此!
獨家 | 2020年交互設計趨勢獨家 | 2020年交互設計趨勢
關于空狀態你了解多少?關于空狀態你了解多少?
交互設計中讓人困惑的三大組件你會用了嗎交互設計中讓人困惑的三大組件你會用了嗎
互聯網設計師應知的專業術語合集-2互聯網設計師應知的專業術語合集-2
交互設計師常用的設計理論與心理學交互設計師常用的設計理論與心理學
規范流程下的原型設計——你的原型真的有價值嗎?規范流程下的原型設計——你的原型真的有價值嗎?
邂逅二次元愛豆 — 波洞星戰 設定邂逅二次元愛豆 — 波洞星戰 設定
保持好奇心,產品體驗小觀察-01保持好奇心,產品體驗小觀察-01
?
陕西快乐10分 刀剑英雄刀币怎么赚钱 自己有个小货车怎么赚钱 休闲山西麻将作弊器 好好上班赚钱 千炮彩金捕鱼下载 办什么样的辅导班最赚钱 哈尔滨宾馆带麻将房 地下城勇士刷金币 赚钱了音乐 宁夏麻将规则捉鸟 微信朋友圈免费发广告赚钱 农村赚钱生意 得意哈尔滨麻将外挂 王者捕鱼官方下载 培训机构助教赚钱么 神秘庄园怎么赚钱h