如果你有維護過產品線的Guideline,就不會對原子設計這個概念陌生。況且原子設計這個概念已經不新了,並且已經不新到廣告圈已經有人用這個概念酒瓶裝新酒解釋方法論了。但是前段時間看到這篇文章還是很積極的翻譯出來了,因為這篇文章在解釋原子設計這個概念的時候,對設計這個概念有自己的解讀與價值觀。最近或者說一直UX&UI圈的營銷號們都在說市場飽和要失業,看了這篇也許會少一點焦慮與迷茫。

最近團隊有些內部工具的專案在前端框架上選了第三方的元件作為基礎,所以在設計上也會基於一定的元件庫去設計。其實在此之前也會基於專案沉澱規範與元件庫,之後進行復用與規範維護,但沒有這樣直接用過第三方的元件庫。而且內部專案對視覺的要求也不高,需求可能直接是我要個什麼樣什麼樣的,一個不小心搬磚感就會油然而生。怎麼破?但其實也許只是你在想法上先入為主了。

而且作者用了個很妙且少見的比喻——音樂。現在見面就你有freestyle嗎?看完這篇還順帶手給你普及了下啥叫flow,啥叫beats。很適合不經意間裝個逼呢。

以下正文

到現在為止,我(文章原作者)已經在設計專案中用了兩年的原子設計了。我忍不住經常去和周圍的人談起關於原子設計的話題。

小貼士:原子設計是一種設計方法,是Brad Frost創造的,基於的想法是在介面設計中,經常會用一些介面上最小的元素(原子)去搭建其他元件。

然而當我去試圖說服我周圍的朋友去使用這個方法的時候,我發現一些人(大部分是我認為真的很有創意的人)會擔心這個方法過於 “工業性”。

“這將終結我的創意!”

“我們將會變成設計元件的機器。”

不幸的是,當我們討論 “工業化” 與 “複用” 的時候,很多人就理解為 “標準化” 與 “限制創意”。我不同意這一點。

當你真的發現你明白瞭如何使用原子設計的時候,你恰恰可以決定在哪裡以及在什麼時候給創意發揮的空間。

當命名方式不同的時候會怎樣

當我開始使用原子設計的時候,我讀了很多相關的文章去了解其他人是怎麼來使用這個方法的,專案以及團隊大小會有怎樣不同的影響。

不同的設計團隊在原子設計方法論中使用的隱喻是不同的。這樣閱讀體驗很糟糕,經常會讓我產生困惑。舉個例子,分子(molecules)和組織(organisms)的區別是?或者模板(templates)和頁面(pages)的區別是?

而且說實話,化學和生物學的隱喻對於一個非理科生(當然也包括我)來說是很 “恐怖” 的。

我決定嘗試一些不用的隱喻去傳達相同的概念——開始先從一些最小的部分開始,然後在此基礎上構建出其他東西。我會選擇更吸引人的隱喻方式。

隱喻1:Lego

這是我發現的第一個有趣的隱喻,也是在解釋元件系統時,最常用的方式。

我擁有不同形狀、不同大小以及不同顏色的積木塊:

【設計方法論】翻譯:原子設計&創意

【設計方法論】翻譯:原子設計&創意

用這些積木塊,我可以創造出不同的元素出來:

【設計方法論】翻譯:原子設計&創意

【設計方法論】翻譯:原子設計&創意

透過把這些元素紙盒在一起,你可以得到一個最終的結果,當然他甚至也可能是另一個更大的東西的一部分。

【設計方法論】翻譯:原子設計&創意

【設計方法論】翻譯:原子設計&創意

Lego最妙的地方在於你可以擴充套件這個隱喻:設計規範(style guide)在這裡面就類似於一盒子的Lego積木可以如何使用的一個規則(建立原則):

【設計方法論】翻譯:原子設計&創意

【設計方法論】翻譯:原子設計&創意

這個隱喻要比原子有趣的多,特別是我的團隊很喜歡,尤其是開發人員們。

但是,這個隱喻依然對我們設計師的工作缺少一些重視。。。

如何去傳達一個概念——當我們設計一個產品的時候,我們不止是在組合一些積木塊,我們是再給使用者傳達一些東西

隱喻2:音樂

最近,在我服務的設計公司Backelite,我將原子設計方法論介紹給我們其中一個客戶,我很幸運的和天才的藝術指導Florian Cordier合作。

使用原子設計不是他自己的選擇, 而且他覺得這個Lego的隱喻不是很恰當,因此他決定自己來尋找一個隱喻,之後他找到一個我認為超讚的比喻方式。

這個想法來源於音樂都是由7個音符和一些節奏符號構成的。

【設計方法論】翻譯:原子設計&創意

【設計方法論】翻譯:原子設計&創意

我們可以把他們組成和絃:

【設計方法論】翻譯:原子設計&創意

【設計方法論】翻譯:原子設計&創意

我們將這些和絃可以在組成主歌部分:

【設計方法論】翻譯:原子設計&創意

【設計方法論】翻譯:原子設計&創意

有了這些元素就可以創造出一個完整的音樂作品,甚至是一個宏大的歌劇作品。

【設計方法論】翻譯:原子設計&創意

【設計方法論】翻譯:原子設計&創意

然而我對這個隱喻最感興趣的點在於他帶來了3個新的概念,這些概念在設計產品的時候是很重要的:

和聲

旋律

節奏

和聲

他是正確組織各部分的方式,他決定了最後的結果是不是和諧與平衡的。

【設計方法論】翻譯:原子設計&創意

【設計方法論】翻譯:原子設計&創意

旋律

這是我們想講給使用者的故事,是這個流程的整體感受,有時這個流需要快一點,有時需要緩一點。

【設計方法論】翻譯:原子設計&創意

【設計方法論】翻譯:原子設計&創意

節奏

最後一點同樣重要,節奏是在使用者在使用產品感受到的情感,包括動效設計、插圖風格、文案寫作等等。

【設計方法論】翻譯:原子設計&創意

感謝這個隱喻,讓我可以在講述關於設計系統的時候可以加入時常缺少的情感以及創造力的部分。

優秀的作曲家和優秀的表演者

【設計方法論】翻譯:原子設計&創意

【設計方法論】翻譯:原子設計&創意

令人喜歡且長盛不衰的音樂需要好的作曲家也需要好的表演者。只是簡單執行完一個作品,即時技術再好也不足以打動觀眾。同樣,一個豐富的元件庫也不足以創造出好的使用者體驗。

我們需要

優秀的作曲家去創造獨特的可以複用的音樂庫。

優秀的演奏家去按照自己的方式去演繹,為作品帶來生命。

而有些時候,我們需要打破規則為作品新增驚喜或者情感。

那是需要創新?還是不需要?

對於我來說,這個問題顯而易見:當我們使用設計系統和原子設計的方法論的時候,依然可以保持創新。

那麼下一個問題一定是:

“我們什麼時候需要創新,什麼時候又需要一致性?”

【設計方法論】翻譯:原子設計&創意

【設計方法論】翻譯:原子設計&創意

我們需要區分在什麼地方我們需要很強的一致性,而什麼地方需要為使用者帶來驚喜和情感,或是去展示品牌的獨特性。

如果我們想保證很高的一致性和複用率,就基於比較具體和複雜的元件進行設計(比如模板和組織)。

如果我們更想讓設計師多一點創新的可能,就提供一些基本的原子或是分子,讓他們自己建立新的元件出來,同時保證了整個設計系統的相似性。

永遠不要忘記:一致,但不死板。

我們節省的時間用來做什麼?

工業化可以幫設計師避免重複勞動和無用的,並且對設計師沒有價值的工作,從而節省時間。比如:在15個不同的頁面上進行同樣的調整工作,建立20次同一個元件或者替換10次同樣文字。

然後我們應該用這些新獲得時間關注對使用者或是客戶更重要的部分:正確的使用者流程,品牌特性,使用者反饋的分析,創新與相關的解決方案,情感化設計等等。

如果你對如何開始根據原子設計的方法設計一個元件系統有興趣,你可以閱讀一下:";原子設計:如何設計一個元件系統";。