AG亚游集团

服務電話

028-85283257

13540034978

13540034978 / 028-85283257

461544981@qq.com

contact
成都市武侯區航空路6號豐德國際廣場B1座12A樓02號
聯係我們
關於原子設計,你想要的都在這裏

前邊對《Atomic Design》全書做了翻譯並按照章節順序梳理了核心要點,進行了知識提煉。本篇文章將對全書內容進行總結和重新梳理,讓大家可以更清楚的弄懂原子設計的所有內容。本文將分為三部分:


  • 1.為什麽需要原子設計理論?

  • 2.原子設計理論是什麽?

  • 3.原子設計理論的實際應用


為什麽需要原子設計理論?


弄清楚一個事情的最好方式不是問是什麽,而是先問為什麽。那為什麽要學習原子設計理論呢?這需要從網頁設計的現狀說起。


現存問題


現在的網頁設計遇到了幾個問題。首先,由於設計師自身或者團隊的原因,界麵樣式混亂缺乏一致性;另外,隨著用戶使用的設備類型不斷增加,屏幕尺寸越來越多,單一的布局設計無法滿足;從整個開發流程來說,目前的瀑布式工作流也滿足不了敏捷開發的需求;最後,靜態的設計稿無法展示響應式設計以及交互,不能完全反映其在瀏覽器中的最終效果。



根本原因


造成這些問題的根本原因是“界麵隱喻”。我們通常說“網頁”,其實就是將它看做是一個頁麵。頁麵是平麵設計的叫法,網頁設計也是由平麵設計發展而來,因此保留了很多平麵設計的方法。這些方法在一開始很有用,但是隨著技術發展,已經逐漸落伍,從而導致了上麵所說的幾個問題。




解決思路


那該如何解決這些問題? 那就是“模塊化設計”。模塊化是工業發展過程中產生的一種高效模式,製造業和建築業等行業通過模塊化,大幅提高了效率。將這種思路引入到網頁設計,就可以解決現存的問題。 通過模塊化的思路,可以改善落後的網站更新管理策略,不用每次改版都從頭重新設計一次;還可以使迭代開發變得更加敏捷;網站內容也可以適配大量的設備尺寸和環境;同時,很方便應用於前端代碼中;最重要的是,模塊化重組了視覺設計的流程和方法,讓我們關注於更加體係化的界麵設計方案。



現有解決方案


基於模塊化的思想,出現了很多UI框架,作為現階段的解決方案,如Twitter的bootstrap,從一定程度上解決了問題。但是,這些UI框架自身也帶來的不少問題,如基於框架設計的網頁外觀非常相似,沒有品牌特色;框架整體過於龐大,帶來不少冗餘,從而影響性能;框架的覆蓋度不夠時,需要自定義代碼;而且,我們自己不能命名組件,這對團隊交流造成影響。



終極解決方案


最後,終於發展出了設計體係,它成為終極解決方案。


設計體係的基礎是風格指南(Style Guides),根據內容的不同,可以分為品牌識別指南、設計語言指南、語態和語氣指南、寫作風格指南、代碼樣式指南和前端樣式指南,即樣式庫。樣式庫是風格指南的核心。



風格指南相對於傳統的設計方法,很很多的優勢:它可以促進整個體驗的一致性和凝聚力;加快團隊的工作流程,節省時間和金錢;在所有崗位之間建立協作性更好的工作流;建立每個人之間的共享詞匯表;提供有用的文檔,幫助我們影響利益相關者、同事、甚至第三方;使跨瀏覽器/設備,性能和可訪問性測試更加容易;提供良好的擴展性基礎,可以隨著時間的推移進行修改、擴展和改進。


總結來說,就是現有設計方法不能滿足目前的環境,需要模塊化的解決方案。而基於模塊化的終極解決方案就是設計體係,設計體係的基礎是風格指南,風格指南的核心是樣式庫,而原子設計是構建樣式庫的理論依據。因此,我們需要學習原子設計理論,來構建樣式庫,從而建立屬於自己團隊的設計體係。


原子設計理論是什麽?


弄清楚為什麽,我們再看看看原子設計理論到底是什麽。



原子設計是一種方法,它由五個不同的階段組成,這些階段一起工作,以更科學和層次分明的方式創建界麵設計體係。原子設計的五個階段是:原子,分子,有機體,模板,界麵。這5個階段並不是一個線性的過程,而是一種心智模型,用於把界麵看做是整體與部分的集合。



原子是構成用戶界麵的基礎組成部分,它包含基礎的HTML元素,如label、input、button等,無法再分解,自身具有獨特屬性且不會單獨出現,隻存在於實際界麵中。



分子是相對簡單的元素組,作為一個單元起作用,如上邊提到的原子label、input和button組合在一起,就形成了一個搜索分子。分子通常都具有一定的目的性和功能,簡單可複用。



有機體是由分子、原子或其他有機體組成相對複雜的組件,如上邊提到的搜索分子和logo、導航一起形成頭部有機體。有機體可以由相似或不同的分子類型組成,提供界麵的上下文環境。



模板用來展示所有組件的頁麵級對象,用來表明設計的底層內容結構。上邊提到的頭部有機體就可以被應用到這個頭部模板中。



頁麵是模板的特定實例,顯示了具有實際代表內容界麵。在頁麵階段,我們可以查看真實的內容是如何融合在一起,從而測試設計體係的有效性,查看界麵有沒有什麽問題。如果存在問題,就需要返回到更小的模塊中,進行調整和修改。同時,頁麵展示了模板中內容中的動態部分,比如長短不一的標題等。


原子設計理論有以下幾個優點:整體與部分之間切換,確保組件的功能正常並且在界麵中保持和諧;分離結構與內容,兩者會互相影響;規範組件命名。


原子設計理論的實際應用


弄清楚了原子設計的理論知識後,我們需要將它運用起來,建立自己的樣式庫,從而形成設計體係。具體操作可分為4步:確定樣式庫範圍、確認整體視覺風格、搭建樣式庫以及維護樣式庫並形成設計體係。


確定樣式庫範圍


確定樣式庫的範圍可以分為兩種情況。一種是對於已有的項目進行重設計,另一種是設計新項目。


對於重設計的項目,需要利用界麵清單來對樣式進行匯總。界麵清單是構成用戶界麵的完整集合。



具體如何操作?可以組織一次工作坊,團隊中所有角色都盡量參加,來體驗UI的不一致。讓所有人對構成用戶體驗的所有獨特UI樣式進行截圖和分類,對收集結果進行匯總。討論要保留哪些樣式,刪除那些樣式,以及哪些樣式可以合並在一起。最後,討論如何對每個樣式進行命名。


需要收集的元素類別包括:全局元素,導航,圖片,圖標,表單組件,按鈕,標題,區塊,列表,交互式組件,多媒體組件,第三方插件,廣告,消息提醒,顏色,動效等。 這些收集到的唯一元素,將作為建立樣式庫的依據。



對於新項目來說,則需要產品經理和交互設計師來快速生產低保真的線框圖,從而確定整個項目的內容樣式清單,可以用Excel表格來展示。


從內容清單中,我們也可以得到將要設計頁麵的所有元素。


確認整體視覺風格


接下來需要視覺設計師來確認整體視覺風格。可以通過以下幾種方式來進行:



快速找到視覺方向的方法是20秒直覺測試。它的具體操作方法是:選擇本行業和其他行業相對著名的網站20-30個,在項目啟動會上向利益相關者展示,每個網站20秒。之後,讓每個人對所看的網站從1-10分進行打分,1分表示很糟糕,10分表示很完美。


完成之後,將每個人的分數相加,然後進行討論。討論得分最低的5個網站,得分最高的5個網站和爭議最大的網站(有人打了高分,有人打了低分)。參與者向大家解釋他為什麽打高分或者打低分,哪裏吸引到他或者哪裏覺得很差勁,通過小組來對意見的分歧進行討論。


通過這個測試,設計師可以在前期弄清楚利益相關者的喜好,並解決審美差異,最終在視覺方向上達成一些共識,從而可以更好的開展下一步的設計工作。



樣式圖塊可以在前期建立視覺方向,而又不用設計完整的設計稿。它通過前期調研的情緒版演化而來。通過文字、顏色,排版,造型,質感等方向,建立一個由各種樣式圖塊組成的頁麵。通過該頁麵,可以和利益相關者交流視覺的各個方麵,而又不用浪費時間去直接出設計稿,進行快速的反饋和討論。


樣式圖塊對於探索視覺方向非常有用,但是仍然比較抽象,因此還需要更直觀一點的展示方式,這就是元素拚貼。



在用樣式圖塊確定了基本的視覺元素之後,可以將這些元素應用於實際的界麵組件中,從而生成元素拚貼。它可以向利益相關者展示實際的頁麵元素將會是什麽樣子,從而讓他們真實感受到最終的頁麵效果。


當然,還有其他策略方法可以幫助建立視覺方向,但整體的原則都是在前期多進行探索和確認,不斷的進行交流,而不是直接深入細節去做完整的設計稿。


搭建樣式庫


在確定了樣式庫的範圍和視覺方向之後,就可以開始著手搭建樣式庫。這個階段分為兩個部分:視覺組件庫和前端樣式庫建立。


視覺組件庫可以在Adobe Xd或Sketch中進行,這兩個軟件都支持樣式庫的建立。工作原理是最小的樣式(原子)包含在較大的樣式(分子)中,更大的樣式(有機體)中包含這些樣式,而有機體則包含在更大的樣式(模板)中。遵循“DRY”原則,即“don't repeat yourself”,更改某個樣式,所有用到該樣式的地方都會同步更改。


具體的搭建方式在這裏不做詳細敘述,後邊將會單獨寫文章來講解。


對於前端樣式庫的搭建,作者推薦了一個前端工具“Pattern Lab”,它也保持著原子設計理論的工作原理,並且還有可以將動態數據添加進樣式結構中並展示樣式變化,如選中或禁用的tabs;同時支持響應式的設計,可以查看整個分辨率內的樣式變化;還可以展示樣式相關的底層代碼;提供樣式描述和注釋;提供樣式的上下文信息,如構成元素和使用場景。



Pattern Lab使用了Mustache的include功能,將將小的樣式包含在大的樣式中,感興趣的小夥伴可以去看本書的第三章。


維護樣式庫並創建設計體係


創建完成樣式庫隻是第一步,後邊還有一係列的維護和擴展工作要做,直至形成屬於自己團隊的設計體係。


首先,要將樣式庫作為一個正式的項目來維護,這就需要投入時間和人力,要有專門負責設計體係的團隊。如果你屬於大型的設計團隊,那麽可以專門成立一個設計小組來負責設計體係;如果你的團隊隻有少數的幾個人,那麽就需要少數的高級設計師來兼職負責設計體係。



其次,你需要建立樣式庫的更新規範,比如該如何修改、新增和刪除樣式。在修改樣式的時候,必須弄清楚修改的原因以及如何修改,修改完了之後如何同步;新增樣式時必須謹慎,保證每一個新增的樣式都是可以複用到其他地方;刪除樣式時,必須製定淘汰計劃,並提前通知使用該樣式的團隊。


更新樣式庫之後,必須將這些更新內容同步到實際項目中,這需要前端來優化底層代碼,從而更好的實現同步功能。


之後,需要在整個公司去推廣你的樣式庫,讓更多的人收益。比如產品經理,運營人員,後端開發等,設計體係可以成為公司的資源池,使得各個崗位都能高效的協作。


為了讓大家都能很方便的訪問並使用樣式庫,需要有一個專門的地方來展示設計體係,比如一個首頁。你需要保證這個首頁足夠的吸引人,這樣有助於建立認知並幫助更多人來關注設計體係。


一旦團隊的人都來使用你的樣式庫,你就需要一套交流和推廣的機製。


在前期的創建過程中,你可以建立一個內部博客或者釘釘群來發布你的進度,分享想法和解答疑問。樣式庫建成之後,你需要及時將更新信息持續傳達給團隊,如更新日誌、路標規劃、成功案例、提示和使用技巧等。同時需要通過培訓等手段讓團隊學會如何使用你的樣式庫,可以通過工作坊、在線會議、入職培訓等方式來進行。


你還需要反饋機製,幫助用戶在遇到問題時可以找到解決方案。如建立JIRA的反饋庫、微信群、論壇或者定期回訪用戶;同時可以采取用戶訪談,問卷調查或定期會議的方式主動尋求反饋。


另外,公開你的樣式庫,讓全世界都可以查看,這將提高你的知名度,增強團隊責任感並且充當出色的招聘工具來吸引優秀的人加入到團隊。


最後,可以通過不斷的擴大範圍,來形成你的設計體係。如增加設計原則,品牌指南,語氣語調指南,寫作指南等等,將適用範圍從Web擴展到iOS和Android等。


隻有投入大量的時間和精力,不斷維護和優化,你的設計體係才能長期發展。


總結


以上就是關於原子設計的所有內容。這還不是全部,點擊 鏈接 可以查看全書的思維導圖。怎麽樣,還過癮吧?最後再給大家一個小小的福利,那就是《Atomic Design》全書的中文版pdf下載。隻需要關注我的公眾號,並回複“原子設計”就可以獲取下載鏈接,快來領取吧!




原文鏈接: 


Source
成都AG亚游集团科技
date
2020-05-26 15:30:33
share
真心愛爾·誠意服務

多一份了解,多一個選擇

即可開啟一站式服務體驗
預約麵談可撥打 135-4003-4978 / 028-85283257
取消谘詢