網(wǎng)頁UI - 原子設(shè)計(jì)理論(上)
前言
原子設(shè)計(jì)理論并不是什么高大上的規(guī)則,它最早就是為了讓網(wǎng)頁設(shè)計(jì)師更容易理解網(wǎng)頁的構(gòu)成,后來慢慢延伸到UI設(shè)計(jì)當(dāng)中,它的基礎(chǔ)原理套用了宇宙中所蘊(yùn)涵的元素的概念,即宇宙中已知的物體分解后都可以分解為一組有限的原子。
這里的宇宙中的“物質(zhì)的最小單位是原子”,這一理論是由英國化學(xué)家/物理學(xué)家約翰·道爾頓提出的,繼承古希臘原子論和牛頓微粒說,提出的原子論?;瘜W(xué)元素由不可分的微粒(原子)構(gòu)成的,它在一切化學(xué)變化中是不可再分的最小單位。這應(yīng)該也是我們教科書中寫到的。
最小的單位用物理術(shù)語是“基本粒子”,指人們認(rèn)知的構(gòu)成物質(zhì)的最小/最基本的單位,是組成各種各樣物體的基礎(chǔ)。而最新研究表明,比原子還小的還有夸克和希格斯玻色子(上帝粒子),自從夸克理論被提出后,人們意識(shí)到基本粒子也有比較復(fù)雜的結(jié)構(gòu),而不是以前認(rèn)知中的只有原子。從此大家開始對(duì)基本粒子避而不談了。
我說這些基礎(chǔ)概念的目的是為了給分形理論做鋪墊,這會(huì)對(duì)“分形理論”的概念產(chǎn)生一定的影響。分形理論目前在UI設(shè)計(jì)圈還沒有被提及,我覺得它的構(gòu)成要比原子設(shè)計(jì)理論更契合UI設(shè)計(jì)的構(gòu)成,所以我才想通過自己的理解把這些知識(shí)傳遞給大家。
什么是原子設(shè)計(jì)理論
我本人探究問題喜歡尋找本源,因此我就去查了一下原子設(shè)計(jì)理論提出者 Brad Frost 寫的書,書名是《Atomic Design》,書中第二章有提到原子設(shè)計(jì)理論的由來,但我英文不好,只能通過自己的理解去做解釋。下面會(huì)提供原文,給大家一定的參考。
我的理解:我試圖尋找一種使用戶界面系統(tǒng)化的方法,并在各行各業(yè)和其他領(lǐng)域中尋找靈感。相對(duì)于我們所處的這個(gè)復(fù)雜的世界,如自然構(gòu)成的復(fù)雜、人體結(jié)構(gòu)的復(fù)雜、社會(huì)結(jié)構(gòu)的復(fù)雜等等,某個(gè)領(lǐng)域制定系統(tǒng)化的方法就顯得容易了很多,因此我們可以從這些世界構(gòu)成中學(xué)習(xí)、剖析、研究并把這些知識(shí)轉(zhuǎn)化并加以利用。
許多領(lǐng)域,如工業(yè)設(shè)計(jì)和建筑設(shè)計(jì),已經(jīng)開發(fā)出智能系統(tǒng),用于制造極其復(fù)雜的物體,如汽車、飛機(jī)、輪船和大廈。這些智能系統(tǒng)的形成也參考了自然結(jié)構(gòu)等類似的結(jié)構(gòu)。因此我們可以在自然結(jié)構(gòu)等類似結(jié)構(gòu)中探尋,或許就能找到我們想要的答案。
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 就開始扯他的高中化學(xué)課,和高中化學(xué)老師了,這里就沒有什么參考價(jià)值了。
化學(xué)反應(yīng)由化學(xué)方程式表示,化學(xué)方程式通常顯示原子元素如何結(jié)合在一起形成分子。在下面的示例中,我們看到氫和氧如何結(jié)合在一起形成水分子。
在自然界中,原子元素結(jié)合在一起形成分子。這些分子可以進(jìn)一步結(jié)合并形成相對(duì)復(fù)雜的生物。進(jìn)一步說明:原子 是所有物質(zhì)的基本組成部分。每個(gè)化學(xué)元素都有其獨(dú)特的特性,在不失去其含義的情況下無法對(duì)其進(jìn)行進(jìn)一步分解。(原子由更小的位組成,例如質(zhì)子,電子和中子,但原子是最小的功能單元)
分子 是兩個(gè)或兩個(gè)以上通過化學(xué)鍵結(jié)合在一起的原子的組。分子的這些組合具有其自身的獨(dú)特的屬性,并且比原子更有可操作。
生物體是由分子共同協(xié)作組成的一個(gè)整體,這些相對(duì)復(fù)雜的結(jié)構(gòu)可以從單細(xì)胞生物一直到像人類這樣極其復(fù)雜的生物的這樣的一個(gè)范圍。
這樣理解會(huì)簡化宇宙中令人難以置信的組成部分,但基本原理仍然存在:原子結(jié)合在一起形成分子,然后進(jìn)一步結(jié)合形成生物體。這種原子理論意味著,已知宇宙中的所有物質(zhì)都可以分解為有限的原子元素集:
前面我講了如何將宇宙中的所有物質(zhì)分解為一組有限的原子元素。這樣的規(guī)則與我們的代碼結(jié)構(gòu)不謀而合,我們的代碼可以分解為一組相似的有限元素。Josh Duck的HTML元素周期表很好地闡明了我們所有的網(wǎng)站頁面,HTML5頁面,以及其他所有內(nèi)容都是如何由相同的HTML元素組成的。
Josh Duck是個(gè)程序員,他利用HTML代碼與元素周期表的共性,做出了一個(gè)以元素周期表為形式的HTML標(biāo)識(shí)。網(wǎng)站是:joshduck.com 大家有興趣可以看一下。
因?yàn)槲覀兪菑囊唤M相似并有限的模塊和元素進(jìn)行構(gòu)建的,所以我們可以應(yīng)用自然界中發(fā)生的相同過程來設(shè)計(jì)和開發(fā)我們的用戶界面。
原子設(shè)計(jì)理論五個(gè)層面
把原子設(shè)計(jì)理論帶入到用戶界面中,原子設(shè)計(jì)就會(huì)產(chǎn)生五個(gè)不同層面的組成方法,這些層面相互影響,以疊加組成的方式來創(chuàng)建界面的系統(tǒng)。原子設(shè)計(jì)理論會(huì)把這五個(gè)層面進(jìn)行劃分,分別是:
原子(元素、要素)
分子(組件)
組織(模塊)
模板(原型)
頁面(填充內(nèi)容)
接下來一個(gè)個(gè)解釋它們的含義。
原子
原子是物質(zhì)的基本組成部分。應(yīng)用于用戶界面的原子是我們的HTML標(biāo)簽,例如表單標(biāo)簽,輸入框、按鈕、圖標(biāo)等。原子還可以包括更多的抽象元素,例如色板,字體,以及界面中不可見的部分。
這些用戶界面中的“原子”就像自然界中的原子一樣,它們都是相對(duì)抽象的,通常它們本身的意義并不大,例如在用戶界面中改變一個(gè)按鈕的尺寸,或改變一小塊的顏色,對(duì)整體而言影響并不大。但是,它們非常適合作為“樣式”的形式被存放在庫中,也就是我們常說的“組件化”,這樣就可以一目了然地看到和改變所有全局的樣式了。
分子
分子是獨(dú)立存在而保持物質(zhì)化學(xué)性質(zhì)的最小粒子,由組成的原子按照一定的鍵合順序和空間排列而結(jié)合在一起的整體。用戶界面中的“分子”是由線段、按鈕、圖標(biāo)和輸入框等等這些原子元素構(gòu)成的。
一個(gè)按鈕和輸入框本身起不到任何作用,但它們組合在一起就會(huì)變成“搜索框”,就會(huì)被賦予新的功能和含義。分子在界面中以組件化的形式而存在的,像下拉菜單、導(dǎo)航欄、表單、手風(fēng)琴等。
組織
在《Atomic Design》的書中把這部分的知識(shí)定義為“生物體”,由于生物體的概念相對(duì)比較難理解,這里只簡要概述一下它。分子為我們提供了一些基礎(chǔ)的物質(zhì)構(gòu)成,如蛋白質(zhì)、核酸 (DNA、RNA等)、糖類,這些常見的生物大分子構(gòu)成了生物體。
生物體的概念影射到用戶界面的構(gòu)成中,元素和要素(原子)結(jié)合起來構(gòu)成組件(分子),組件組合起來構(gòu)成組織(生物體)。組織在用戶界面中以模塊的形式存在,例如網(wǎng)頁的導(dǎo)航欄、產(chǎn)品信息、焦點(diǎn)圖、關(guān)于我們模塊;App的卡片、列表、瀑布流等。
模板
到了模板的層面,我們就應(yīng)該和化學(xué)說再見了。原子、分子和組織這樣一種有層次的結(jié)構(gòu),可以幫助我們?nèi)?gòu)件設(shè)計(jì)系統(tǒng)中的組件,并實(shí)現(xiàn)組件化。但最終我們還要根據(jù)用戶需求、客戶需求和場(chǎng)景的變化,來幫助它們解決設(shè)計(jì)上的問題,并使原子設(shè)計(jì)更具有意義。
模板可以使“組織”組合在一起形成產(chǎn)品頁面的原型,產(chǎn)品原型可以概括的說是整個(gè)產(chǎn)品面市之前的一個(gè)框架設(shè)計(jì)。在這里我們可以看到設(shè)計(jì)整合在一起,并呈現(xiàn)出實(shí)際頁面架構(gòu)和布局。模板的特征就是專注于頁面的基礎(chǔ)內(nèi)容結(jié)構(gòu),而不是頁面的最終內(nèi)容。
頁面
頁面層面是原子設(shè)計(jì)最具體的一個(gè)層面。所有模板整合在一起并形成頁面,為用戶提供具有代表性的內(nèi)容,并準(zhǔn)確描述用戶最終看到的內(nèi)容。頁面也是高保真圖,它能達(dá)到和實(shí)際頁面類似的效果,正因?yàn)樗咏趯?shí)際頁面,團(tuán)隊(duì)中大部分的人所耗的時(shí)間和精力,就是不斷地去修正它并完善它。
當(dāng)模板填充上了實(shí)際用戶需要的內(nèi)容,如圖片、圖標(biāo)、文字后,就會(huì)逐漸形成頁面,當(dāng)內(nèi)容全部填充完后就會(huì)形成高保真圖。這里的高保真圖可不是視覺稿,視覺稿只是基于UI設(shè)計(jì)層面,而高保真圖是在產(chǎn)品和業(yè)務(wù)層面綜合考慮的,包含完整的產(chǎn)品交互邏輯、頁面流轉(zhuǎn)、實(shí)際內(nèi)容和界面設(shè)計(jì)等。比視覺稿更有邏輯,更準(zhǔn)確,更接近于實(shí)際業(yè)務(wù)層面。
為什么要進(jìn)行原子設(shè)計(jì)
原子設(shè)計(jì)為制作設(shè)計(jì)系統(tǒng)提供了清晰的方法。客戶和團(tuán)隊(duì)成員通過實(shí)際的設(shè)計(jì)流程與步驟,能更好的去理解設(shè)計(jì)系統(tǒng)的概念。原子設(shè)計(jì)使我們能夠從抽象的設(shè)計(jì)中過渡到具體的設(shè)計(jì)中來,因此我們可以對(duì)一個(gè)設(shè)計(jì)系統(tǒng)進(jìn)行一致性和可伸縮性等類似特性的控制。
通過模塊化的設(shè)計(jì)系統(tǒng)調(diào)動(dòng)組件,可以使我們開發(fā)新的產(chǎn)品時(shí),從開始就可以對(duì)產(chǎn)品進(jìn)行嚴(yán)格的把控與一定程度上的控制,進(jìn)而規(guī)避了事后風(fēng)險(xiǎn)。開發(fā)之前什么都不確定好,毫無邏輯的去開發(fā),開發(fā)到一半發(fā)現(xiàn)功能與需求對(duì)不上等問題逐漸產(chǎn)生,會(huì)導(dǎo)致產(chǎn)品的延期、人員成本的浪費(fèi)、人員能動(dòng)性降低、資金成本的增加,產(chǎn)品的迭代率的下降、進(jìn)而影響市場(chǎng)先機(jī)與市場(chǎng)占有率。
在開發(fā)新的產(chǎn)品或項(xiàng)目之前就應(yīng)該確定好目標(biāo)和方向,這很像德國人的思維,在軟件開發(fā)之前把一切都策劃好,之后根據(jù)之前策劃的步驟一步步去實(shí)施,如果中途發(fā)現(xiàn)哪里有弊端不會(huì)進(jìn)行修改,要嚴(yán)格按照之前定制好的標(biāo)準(zhǔn)一步步執(zhí)行,前期的項(xiàng)目規(guī)劃尤為的重要。用中國人的設(shè)計(jì)思維去理解德國人這樣的設(shè)計(jì)思維會(huì)覺得非常的愚蠢,但實(shí)際這樣做效率更高,溝通成本低、產(chǎn)出率高,質(zhì)量控制更好,品質(zhì)也更高。
原子設(shè)計(jì)理論 - 總結(jié)
下面顯示了逐步完成設(shè)計(jì)原子設(shè)計(jì)的過程,對(duì)于每一個(gè)層面都有相應(yīng)的介紹。這五個(gè)不同的層面同時(shí)工作,以產(chǎn)生有效的用戶界面設(shè)計(jì)系統(tǒng)。概括總結(jié)原子設(shè)計(jì)理論:
原子:無法進(jìn)一步細(xì)分的UI元素,是界面的基本構(gòu)成要素;
分子:形成相對(duì)簡單的UI組件的原子的集合;
組織:形成界面離散部分的相對(duì)復(fù)雜的組件;
模板:組件放置在布局中,并演示設(shè)計(jì)的基礎(chǔ)內(nèi)容結(jié)構(gòu);
頁面:將真實(shí)的內(nèi)容應(yīng)用于模板,并闡明變化形式以演示最終的UI并測(cè)試設(shè)計(jì)系統(tǒng)的彈性。
作者:羅耀
本文由羅耀創(chuàng)作,僅為學(xué)習(xí)交流
本文地址:http://pkvc.cn/tutorial/di4207.html
您可能還喜歡
- Macaron 馬卡龍系色譜 ;附HC(16進(jìn)制碼
- 7個(gè)手機(jī)版網(wǎng)頁設(shè)計(jì)的原則
- 折紙多邊形網(wǎng)頁背景效果制作教程
- 龐門正道:好好玩耍的點(diǎn)線面(上)
- 網(wǎng)頁設(shè)計(jì)中的常見頁面布局方式
- WAP APP的柵格設(shè)計(jì)
- 八種很漂亮的排版方法和技巧分享
- 網(wǎng)頁設(shè)計(jì)的首屏標(biāo)準(zhǔn)你了解多少?
- 字體大寶庫:40款為網(wǎng)頁設(shè)計(jì)師準(zhǔn)備的時(shí)
- 視覺設(shè)計(jì)分享—專題頁面設(shè)計(jì)篇
- 專訪:石墨文檔產(chǎn)品總監(jiān)羅穎
- UI設(shè)計(jì)不得不知的移動(dòng)端UI尺寸適
- 光音移動(dòng)設(shè)計(jì)規(guī)范 — 表單類
- 體驗(yàn)設(shè)計(jì)中的排序問題
- 網(wǎng)頁設(shè)計(jì)精粹 網(wǎng)頁中那些迷人的按
- aliued:響應(yīng)式設(shè)計(jì)的現(xiàn)狀與趨勢(shì)
- 10個(gè)智能對(duì)象處理的ps技巧
- 網(wǎng)頁UI - 原子設(shè)計(jì)理論(上)
- 如何通過設(shè)計(jì)提升banner點(diǎn)擊率?
- 晉小彥視覺設(shè)計(jì)系列文章(二):全屏