原子設計方法論!值得一學的設計思維模式
編輯導語:理論指導實踐是一種理想的結果,但是我們常常很難將二者很好地結合在一起。那么,有什么方法,可以促進我們遵循理論的同時也能夠實踐到位?作者分享了一種方法——原子設計方法論,是一種分層思考的思維模式。靈活運用該方法,對提升頁面及產品整體有很大作用,分享給你。
理論指導實踐是一種理想的結果,但往往很難做到二者的緊密結合。原子設計作為指導設計實踐的理論基礎,是一種分層思考的思維模式。靈活運用原子設計,能有效提升對頁面及產品的整體把控能力。
一、什么是原子設計?
原子設計是創建設計系統的理論方法,分為原子、分子、組織、模板、頁面五個層次。從最基礎的原子開始,原子構成分子,分子組成組織,相互協作以創造出更有效的頁面。
原子設計借鑒了化學中看待事物的方式,并將其應用在數字產品中。例如我們看的界面是由一些基本的元素組成,文字,顏色和圖標等都是一個個原子。
原子設計是一種思維模式,并不特指某一種設計風格或框架。通過原子設計理論,將產品和頁面聯系為一個有機的整體,其中的每個小元素都發揮著至關重要的作用。
二、原子設計方法論: 從原子到產品
原子設計有特定的框架,方便幫助設計師組織思路并在設計過程中作為指導。
1. 原子
原子指化學反應不可再分的基本微粒,雖然基礎但會對分子和個體的形成產生很大的影響。
同理在設計中,原子是構成設計的最基礎的元素,可以是一個icon、一種字體…本身不具備特有的功能但這些基礎元素同樣值得重視。
2. 分子
分子由原子構成,以一定的次序和排列方式結合成分子。回到設計中,多個設計元素組合在一起,也會創造出一種新東西——具有明確功能性的組件。
原子設計強大的地方在于,可以為分子(組件)的創造分配時間,以確保組件具有明確的意義和功能。
3. 組織
不同的分子組合形成組織,在設計中各種不同的組件組合在一起,形成一個完整的功能模塊,例如在首頁輪播圖模塊,有圖像、文字等元素,還有按鈕、導航箭頭等組件。
利用組織這個概念能幫助設計師建立模塊化意識,對頁面結構有更深入的理解。
4. 模板
通過元素、組件和功能模塊的相互關聯,從而得到產品的模板即產品框架,也可以理解為產品的低保真線框圖。
在這個階段,產品的信息架構和可視化的層次結構變得非常重要。產品頁面、搜索結果頁、主頁等都有各自的模板,會顯示內容的結構和基本的原型,方便后期使用。
5. 頁面
在模板基礎上,繼續添加需要的細節,最終會形成完整的頁面,即產品的高保真原型。
這個階段中需要注意的是,頁面中所有的占位符盡可能提供真實的內容——真實的圖像、真實的文案。
對于完成的頁面,我們可以利用原子設計的靈活性來調整和優化頁面設計。
比如當有某些地方的設計沒有達到預期,可以靈活調整頁面中的某個分子或組織模塊來實現想要的效果。
三、原子設計的優勢
1. 靈活性和適應性
原子設計是在設計過程中構建事物的方式,但它并不限制對環境變化做出反應的自由。
通過為產品中的每種類型的內容創建組件和模式,獲得一個靈活的系統。模板為產品的一致性提供了一定的支撐,后期既可以按這些模板原型快速設計,也可以根據需求靈活調整。
原子設計相當于將設計內容納入到一個模式里,組成的頁面不僅擁有準確的內容,并能以最好的樣式展現出來。
2. 系統模式
原子設計鼓勵設計師投入時間和精力來創建整個系統,以便在產品設計的最后階段,能夠以一種高效的方式靈活地完成設計工作。
3. 更少的組件,更高效的開發
利用原子設計可以確保在項目過程中組件的數量會受到一定的控制,避免團隊重復設計同一個組件的多個版本或提供樣式差不多的副本。
控制UI組件的數量,帶來的好處之一就是開發的效率會變得更高。有了以原子設計方法為基礎的理論架構,設計過程的每個環節會緊緊串聯在一起,避免混亂。
四、最后
原子設計成為一種用戶體驗設計方法,以全新的方式帶領大家設計每一個元素、組件以及頁面,通過這樣的方法論有助于設計師構建一個完整的設計系統。
#專欄作家#
作者:Clippp,微信公眾號:Clip設計夾。每周精選設計文章,專注分享關于產品、交互、UI視覺上的設計思考。
本文原創發布于人人都是產品經理,未經作者許可,禁止轉載。
題圖來自Unsplash,基于CC0協議。
類比一下就像微信推文排版,是由幾個模塊拼合在一起的
可以這樣理解!