最新消息
最新消息| AtomicDesign原子設計理念:構建科學規范的設計系統 | 2022-07-18 |
| 文章来源：由「百度新聞」平台非商業用途取用"http://www.woshipm.com/pd/728887.html" 文章分享了一個新穎的設計理念，理念從化學概念“原子”中衍生出來，當其與產品設計碰撞后會發生什麼樣的化學反應呢？一起來觀摩~最近在medium上看到一個設計理念正在興起，這個設計方法逐漸被國外一些大公司運用于創建有層次和成熟規范的設計系統中。筆者很興奮地讀了相關的外文文章，準備把這個非常棒的獨角獸設計流程分享給大家。Introduction背景介紹在2013年網頁設計師BradFrost從化學中受到啟發：原子（Atoms）結合在一起，形成分子（Molecures），進一步結合形成的生物體（Organisms）。在已知宇宙中的所有事物都可以分解為一組有限的原子元素（下圖是化學元素周期表）。Brad將這個概念應用在界面設計，我們的界面就是由一些基本的元素組成的。JoshDuck的“HTML元素周期表”（下圖）完美闡述了我們所有的網站、APP、企業內部網、hoobadyboops等等是如何由相同的HTML元素組成的。通過在大層面（頁）和小層面（原子）同時思考界面，Brad認為可以利用原子設計建立一個適應組件的動態系統。Definition概念原子設計是一種方法論，由原子、分子、組織、模板和頁面共同協作以創造出更有效的用戶界面系統的一種設計方法。原子設計的五個階段分別是：1.Atoms原子。為網頁構成的基本元素。例如標簽、輸入，或是一個按鈕，也可以為抽象的概念，例如字體、色調等。2.Molecules分子。由原子構成的簡單UI組件。例如，一個表單標簽，搜索框和按鈕共同打造了一個搜索表單分子。3.Organisms組織。由原子及分子組成的相對復雜的UI構成物。4.Templates模版。將以上元素進行排版，顯示設計的底層內容結構。5.Pages頁面。將實際內容（圖片、文章等）套件在特定模板，頁面是模板的具體實例。Cases案例在這里介紹一個華人設計師將AtomicDesign應用在網頁設計。1.項目背景FEVO主要業務為協助客戶銷售業務，因此我們有一個default的活動頁面，客戶提供活動資訊及促銷機制，消費者即可上網購票。2.客戶需求客戶希望可以根據他們的品牌，設計定制化的網頁，在有限的開發時間內要保持一致性。3.問題定義UI反饋方式不一致：易造成使用者經驗混亂，增長認知時間。重點（購票）信息不明顯：按鈕在視覺上與促銷優惠的黑色一致，沒有重點的界面減低了銷售的機會。4.設計過程明確我們的設計目的是要用最少資源達到目的資源化，減少開發成本，讓客戶滿意，這時我們可以利用原子設計。建立素材庫，即AtomicDesign的歸納元素。通過組織元素建立視覺層次，突出重點。并將此作為一致性的標準。根據使用情境，改變原子。由于素材庫將網頁拆解成元素，更方便重復使用、創造不同的視覺效果。最后設計師設計了四種模板，客戶可以選擇相對的顏色，頁面主要色彩會應改變，符合品牌形象。圖1：Modern現代簡潔版，高濃度的PrimaryColor，產生有活力、精神的視覺效果。圖2：Royal深色底創造出高貴的形象，適合百老匯、奢侈品牌等。圖3：SpringBreeze利用女性柔和的顏色搭配，適合婚禮策劃、春夏活動。圖4：Vibrant動感：漸變的背景，圖片與促銷優惠結合，在視覺上更為突出，適合演唱會、時尚秀等活動類型。Benefits優點Consistency一致性由于分解網站成單一元素，不論在哪一個頁面，UI元素的互動性是相同的，例如顏色變化、字體的排序、以及回饋。不但讓使用者經驗相同，在視覺上更為和諧。Efficiency效率由于建立了PatternLibrary元件庫，一旦要更改某一個元素，可以馬上施行、應用。Collaboration跨部門的共通語言不僅方便設計師思考頁面的和諧性，也可以讓工程師、品質檢驗清楚頁面的邏輯架構及變化，減少不必要的來回溝通。Criticism批評WHAT我們變成了用組件設計的機器人？很多人當聽到原子設計“工業化”和“再利用”的特點時，都將它們理解“標準化”和“創造性限制”。我不同意。當你真正找到了如何使用原子設計的方法時，你可以精確地決定何時何地給創造力騰出空間。WHEN“我們什麼時候需要創造力，什麼時候需要一致性？我們可以在使用設計系統和原子設計方法的同時富有創造性。明確一個評判標準：在哪里保持強烈的一致性，在哪里創造驚喜或者展示品牌的獨特性。如果我們想要一個強大的一致性和大量的重用系統，我們將從更具體和復雜的組件（如模板和頁面）開始。如果我們想給設計師更多創造性的可能性，我們會給他們原子和分子，這樣他們就可以創造新的成分，同時保持系統相似性。HOW我們該怎么辦呢？工業化可以幫助我們節省重復設計和無用工作的時間，而設計者卻沒有額外的價值，例如：在15個不同的屏幕上執行相同的修改，創建20個相同組件，或者替換10個相同的實例。這種新獲得的空閑時間應該允許我們為用戶或客戶設計更多有趣的元素：正確的用戶流、品牌標識、用戶反饋分析、開發創新的解決方案和進行相關的情感設計…Significance意義Thepartandthewhole局部與整體使用AtomicDesign構建組件系統，是創建一組相互依賴的元素。原子設計包含“局部影響整體，整體影響局部”的關系。我們不斷地放大和縮小我們的界面。我們將花費時間在細節，微觀交互，或者精煉一個組件，然后再后退一步來驗證它在上下文中的樣子，然后再后退一步，看看它作為一個整體做了什麼。Mutualizethework分擔工作我們所有的組件都與我們的原子相連。由于一切都是相連的，我們可以很容易地驗證修改系統的部分內容（比如色調原子）對系統其余部分的影響！我們最終可以像開發者一樣，擁有自己的風格指南，并圍繞這些風格指南構建完整的系統。Sharethesystem共享系統系統的共享對于保持不同產品之間的一致性是至關重要的。但當我們與其他設計師合作時，這一點更加困難，而且這種情況越來越頻繁。在這里，我們需要一個所有人可以訪問，并且始終是最新的共享庫，共享庫允許幾個設計人員從相同的基礎開始設計。其實這是簡化了我們的工作，因為如果我們在共享庫中更新組件，則修改將自動應用在使用此組件的所有設計內容中：就現狀而言，還沒有一個完全適應原子設計的庫……仍然缺少原子和組件之間的這種強相互依賴性，這使得我們需要創建一個生動的、不斷發展的系統。另一個問題是，我們仍然有兩個不同的庫：設計器庫和開發庫……因此必須同時進行維護，容易發生錯誤并需要大量額外的工作。我對完美共享庫的設想是：一個單一的庫，它同時向設計者和開發人員提供資源：Airbnb設計副總裁AlexSchleifer在IXDC2017國際體驗設計大會上分享了這一創新ReactSketchapp管理設計系統，這是為Airbnb的設計系統而設計的，其實就是個實時更新的代碼數據庫，可以實時查詢sketch數據、代碼，也可以下載圖標、設計模塊，所有工程師、設計師都可以免費下載。看到這個，我想完美共享庫也許并不是那么的遙遠的未來…References參考資料這次我只是創意的搬運工，有興趣的旁友可以翻墻品味下原汁原味的AtomicDesign。http:atomicdesign.bradfrost.comtable-of-contentshttps:uxdesign.ccatomic-design-how-to-design-systems-of-components-ab41f24f260ehttps:uxdesign.ccatomic-design-creativity-28ef74d71bc6http:www.ui.cndetail248670.htmlhttps:zhuanlan.zhihu.comatomicdesign作者：安琪Angela，公眾號：idatadesign。互聯網數據行業UXPM，參與過數據中心，商業智能和數據分析平臺等產品設計。關注大數據、人工智能和互聯網金融。歡迎大家一起交流~本文由@安琪Angela原創發布于人人都是產品經理。未經許可，禁止轉載。題圖來自PEXELS，基于CCO協議 關鍵字標籤：婚禮攝影費用 |
|
 |
|
