中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

文章分享了一個新穎的設(shè)計理念，理念從化學(xué)概念“原子”中衍生出來，當(dāng)其與產(chǎn)品設(shè)計碰撞后會發(fā)生什么樣的化學(xué)反應(yīng)呢？一起來觀摩~

最近在medium上看到一個設(shè)計理念正在興起，這個設(shè)計方法逐漸被國外一些大公司運用于創(chuàng)建有層次和成熟規(guī)范的設(shè)計系統(tǒng)中。筆者很興奮地讀了相關(guān)的外文文章，準(zhǔn)備把這個非常棒的獨角獸設(shè)計流程分享給大家。

Introduction背景介紹

在2013年網(wǎng)頁設(shè)計師Brad Frost從化學(xué)中受到啟發(fā)：原子（Atoms）結(jié)合在一起，形成分子（Molecures），進(jìn)一步結(jié)合形成的生物體（Organisms）。

在已知宇宙中的所有事物都可以分解為一組有限的原子元素（下圖是化學(xué)元素周期表）。

Brad將這個概念應(yīng)用在界面設(shè)計，我們的界面就是由一些基本的元素組成的。Josh Duck的“HTML元素周期表”（下圖）完美闡述了我們所有的網(wǎng)站、APP、企業(yè)內(nèi)部網(wǎng)、hoobadyboops等等是如何由相同的HTML元素組成的。

通過在大層面（頁）和小層面（原子）同時思考界面，Brad認(rèn)為可以利用原子設(shè)計建立一個適應(yīng)組件的動態(tài)系統(tǒng)。

Definition概念

原子設(shè)計是一種方法論，由原子、分子、組織、模板和頁面共同協(xié)作以創(chuàng)造出更有效的用戶界面系統(tǒng)的一種設(shè)計方法。

原子設(shè)計的五個階段分別是：

1.Atoms原子。為網(wǎng)頁構(gòu)成的基本元素。例如標(biāo)簽、輸入，或是一個按鈕，也可以為抽象的概念，例如字體、色調(diào)等。

2.Molecules分子。由原子構(gòu)成的簡單UI組件。例如，一個表單標(biāo)簽，搜索框和按鈕共同打造了一個搜索表單分子。

3.Organisms組織。由原子及分子組成的相對復(fù)雜的UI構(gòu)成物 。

4.Templates模版。將以上元素進(jìn)行排版，顯示設(shè)計的底層內(nèi)容結(jié)構(gòu)。

5.Pages頁面。將實際內(nèi)容（圖片、文章等）套件在特定模板，頁面是模板的具體實例。

Cases案例

在這里介紹一個華人設(shè)計師將Atomic Design應(yīng)用在網(wǎng)頁設(shè)計。

1.項目背景

FEVO主要業(yè)務(wù)為協(xié)助客戶銷售業(yè)務(wù)，因此我們有一個default的活動頁面，客戶提供活動資訊及促銷機(jī)制，消費者即可上網(wǎng)購票。

2.客戶需求

客戶希望可以根據(jù)他們的品牌，設(shè)計定制化的網(wǎng)頁，在有限的開發(fā)時間內(nèi)要保持一致性。

3.問題定義

UI反饋方式不一致：易造成使用者經(jīng)驗混亂，增長認(rèn)知時間。

重點（購票）信息不明顯：按鈕在視覺上與促銷優(yōu)惠的黑色一致，沒有重點的界面減低了銷售的機(jī)會。

4.設(shè)計過程

明確我們的設(shè)計目的是要用最少資源達(dá)到目的資源化，減少開發(fā)成本，讓客戶滿意，這時我們可以利用原子設(shè)計。

建立素材庫，即Atomic Design的歸納元素。通過組織元素建立視覺層次，突出重點。并將此作為一致性的標(biāo)準(zhǔn)。

根據(jù)使用情境，改變原子。

由于素材庫將網(wǎng)頁拆解成元素，更方便重復(fù)使用、創(chuàng)造不同的視覺效果。最后設(shè)計師設(shè)計了四種模板，客戶可以選擇相對的顏色，頁面主要色彩會應(yīng)改變，符合品牌形象。

圖1：Modern現(xiàn)代簡潔版，高濃度的Primary Color，產(chǎn)生有活力、精神的視覺效果。

圖2：Royal深色底創(chuàng)造出高貴的形象，適合百老匯、奢侈品牌等。

圖3：Spring Breeze利用女性柔和的顏色搭配，適合婚禮策劃、春夏活動。

圖4：Vibrant動感：漸變的背景，圖片與促銷優(yōu)惠結(jié)合，在視覺上更為突出，適合演唱會、時尚秀等活動類型。

Benefits優(yōu)點

Consistency一致性

由于分解網(wǎng)站成單一元素，不論在哪一個頁面，UI元素的互動性是相同的，例如顏色變化、字體的排序、以及回饋。不但讓使用者經(jīng)驗相同，在視覺上更為和諧。

Efficiency效率

由于建立了Pattern Library元件庫，一旦要更改某一個元素，可以馬上施行、應(yīng)用。

Collaboration跨部門的共通語言

不僅方便設(shè)計師思考頁面的和諧性，也可以讓工程師、品質(zhì)檢驗清楚頁面的邏輯架構(gòu)及變化，減少不必要的來回溝通。

Criticism批評

WHAT我們變成了用組件設(shè)計的機(jī)器人？

很多人當(dāng)聽到原子設(shè)計“工業(yè)化”和“再利用”的特點時，都將它們理解“標(biāo)準(zhǔn)化”和“創(chuàng)造性限制”。

我不同意。當(dāng)你真正找到了如何使用原子設(shè)計的方法時，你可以精確地決定何時何地給創(chuàng)造力騰出空間。

WHEN“我們什么時候需要創(chuàng)造力，什么時候需要一致性？

我們可以在使用設(shè)計系統(tǒng)和原子設(shè)計方法的同時富有創(chuàng)造性。明確一個評判標(biāo)準(zhǔn)：在哪里保持強烈的一致性，在哪里創(chuàng)造驚喜或者展示品牌的獨特性。

如果我們想要一個強大的一致性和大量的重用系統(tǒng)，我們將從更具體和復(fù)雜的組件（如模板和頁面）開始。

如果我們想給設(shè)計師更多創(chuàng)造性的可能性，我們會給他們原子和分子，這樣他們就可以創(chuàng)造新的成分，同時保持系統(tǒng)相似性。

HOW我們該怎么辦呢？

工業(yè)化可以幫助我們節(jié)省重復(fù)設(shè)計和無用工作的時間，而設(shè)計者卻沒有額外的價值，例如：在15個不同的屏幕上執(zhí)行相同的修改，創(chuàng)建20個相同組件，或者替換10個相同的實例。

這種新獲得的空閑時間應(yīng)該允許我們?yōu)橛脩艋蚩蛻粼O(shè)計更多有趣的元素：正確的用戶流、品牌標(biāo)識、用戶反饋分析、開發(fā)創(chuàng)新的解決方案和進(jìn)行相關(guān)的情感設(shè)計…

Significance意義

The part and the whole局部與整體

使用Atomic Design構(gòu)建組件系統(tǒng)，是創(chuàng)建一組相互依賴的元素。原子設(shè)計包含“局部影響整體，整體影響局部”的關(guān)系。我們不斷地放大和縮小我們的界面。我們將花費時間在細(xì)節(jié)，微觀交互，或者精煉一個組件，然后再后退一步來驗證它在上下文中的樣子，然后再后退一步，看看它作為一個整體做了什么。

Mutualize the work分擔(dān)工作

我們所有的組件都與我們的原子相連。由于一切都是相連的，我們可以很容易地驗證修改系統(tǒng)的部分內(nèi)容（比如色調(diào)原子）對系統(tǒng)其余部分的影響！

我們最終可以像開發(fā)者一樣，擁有自己的風(fēng)格指南，并圍繞這些風(fēng)格指南構(gòu)建完整的系統(tǒng)。

Share the system共享系統(tǒng)

系統(tǒng)的共享對于保持不同產(chǎn)品之間的一致性是至關(guān)重要的。但當(dāng)我們與其他設(shè)計師合作時，這一點更加困難，而且這種情況越來越頻繁。

在這里，我們需要一個所有人可以訪問，并且始終是最新的共享庫，共享庫允許幾個設(shè)計人員從相同的基礎(chǔ)開始設(shè)計。其實這是簡化了我們的工作，因為如果我們在共享庫中更新組件，則修改將自動應(yīng)用在使用此組件的所有設(shè)計內(nèi)容中：

就現(xiàn)狀而言，還沒有一個完全適應(yīng)原子設(shè)計的庫……仍然缺少原子和組件之間的這種強相互依賴性，這使得我們需要創(chuàng)建一個生動的、不斷發(fā)展的系統(tǒng)。另一個問題是，我們?nèi)匀挥袃蓚€不同的庫：設(shè)計器庫和開發(fā)庫……因此必須同時進(jìn)行維護(hù)，容易發(fā)生錯誤并需要大量額外的工作。

我對完美共享庫的設(shè)想是：一個單一的庫，它同時向設(shè)計者和開發(fā)人員提供資源：

Airbnb設(shè)計副總裁Alex Schleifer在IXDC2017國際體驗設(shè)計大會上分享了這一創(chuàng)新React Sketch app 管理設(shè)計系統(tǒng)， 這是為Airbnb的設(shè)計系統(tǒng)而設(shè)計的，其實就是個實時更新的代碼數(shù)據(jù)庫，可以實時查詢sketch數(shù)據(jù)、代碼，也可以下載圖標(biāo)、設(shè)計模塊，所有工程師、設(shè)計師都可以免費下載?？吹竭@個，我想完美共享庫也許并不是那么的遙遠(yuǎn)的未來…

References參考資料

這次我只是創(chuàng)意的搬運工，有興趣的旁友可以翻墻品味下原汁原味的Atomic Design。

http://atomicdesign.bradfrost.com/table-of-contents/

https://uxdesign.cc/atomic-design-how-to-design-systems-of-components-ab41f24f260e

https://uxdesign.cc/atomic-design-creativity-28ef74d71bc6

http://www.ui.cn/detail/248670.html

https://zhuanlan.zhihu.com/atomicdesign

作者：安琪Angela，公眾號：idatadesign?；ヂ?lián)網(wǎng)數(shù)據(jù)行業(yè)UX&PM，參與過數(shù)據(jù)中心，商業(yè)智能和數(shù)據(jù)分析平臺等產(chǎn)品設(shè)計。關(guān)注大數(shù)據(jù)、人工智能和互聯(lián)網(wǎng)金融。歡迎大家一起交流~

本文由 @安琪Angela 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來自PEXELS，基于CCO協(xié)議