国产色精品vr一区二区,欧美黑人巨大videos,欧美性人妖xxxxx极品

搜索

APP

起點課堂會員權(quán)益

職業(yè)體系課特權(quán)

線下行業(yè)大會特權(quán)

個人IP打造特權(quán)

30+門專項技能課

1300+專題課程

12場職場軟技能直播

12場求職輔導(dǎo)直播

12場專業(yè)技能直播

會員專屬社群

榮耀標(biāo)識

發(fā)布

注冊 | 登錄

一篇文章搞懂原子設(shè)計

Andrew

2020-12-21

2 評論 13193 瀏覽 59 收藏

18 分鐘

編輯導(dǎo)讀：原子設(shè)計是一種方法論，由原子、分子、組織、模板和頁面共同協(xié)作以創(chuàng)造出更有效的用戶界面系統(tǒng)的一種設(shè)計方法。本文作者圍繞原子設(shè)計，展開了五個維度的分析，希望對你有幫助。

自決定以寫作的方式來分享設(shè)計經(jīng)驗后，我陸續(xù)發(fā)表了一些設(shè)計提效類的知識。但遺憾的是大部分局限在“器”、“術(shù)”的范圍中，“道”、“法”這類更高緯度的方法很少提及。直到我接觸到了原子設(shè)計，在實際了解并運用之后，我驚喜得發(fā)現(xiàn)，它對一次性設(shè)計的解決力度近乎完美。

什么是一次性設(shè)計？

一次性設(shè)計就是，我今天投入成本完成了一個界面或者營銷需求，但也只是完成了這個需求而已，今后再碰到類似的需求依然吃癟，還得重新投入一輪成本。這種設(shè)計就好像一次性的碗筷，用后即扔，非常非常得低效，它不僅沒有辦法復(fù)用，而且無體系、非模塊的處理方式非常摧殘設(shè)計師的精力。這是導(dǎo)致很多朋友淪為作圖機器的罪魁禍?zhǔn)字弧?/p>

原子設(shè)計這門學(xué)問覆蓋面極為龐大，我不想用一篇沒營養(yǎng)的文章草草了事，那樣對自己、對大家都沒什么實際意義上的幫助。目前的計劃是將它分為幾類。今天先主要搬出理論，后續(xù)的實踐我會結(jié)合實際案例來進(jìn)行分享！

01 從原子到萬物

當(dāng)存在兩個氫原子和一個氧原子時，它們通過共價鍵便構(gòu)成了一個水分子H2O。而如果這個水分子數(shù)量達(dá)到1.67×10^21個時，則構(gòu)成了一滴水滴。

世界一切萬物都如此構(gòu)成。原子組成分子，分子組成有機物，有機物構(gòu)成生命。

網(wǎng)頁設(shè)計師Brad Frost由此獲取到了靈感，既然萬物都是由化學(xué)元素周期表的原子們構(gòu)成，那么我們設(shè)計的網(wǎng)頁呢？

Brad在2013年基于化學(xué)領(lǐng)域的原子理論，結(jié)合設(shè)計領(lǐng)域的知識創(chuàng)建了一套非常非常經(jīng)典的學(xué)說。它就是原子設(shè)計（Atomic Design）。

1. 原子設(shè)計

Brad列出了五點層級來作為這套理論的核心支撐：

Atoms原子
Molecules分子
Organisms有機體（組織）
Templates模板
Pages頁面

1）原子

原子是構(gòu)成設(shè)計所有元素的最小單元。比如顏色、文字、輸入框、圖標(biāo)等等，它們在界面設(shè)計這個維度上都沒辦法細(xì)分的，并且本身不具備獨有的功能。我們在界面中可以隨意改變顏色、或者輸入框的尺寸，但對于整體不會產(chǎn)生任何的影響。

2）分子

按鈕或者顏色本身并不會產(chǎn)生任何作用，但是當(dāng)原子按照某種既定規(guī)律進(jìn)行組合之后就可以成為一個組件，從而被賦予了獨有的功能。比如搜索框、表單、日期選擇器、反饋類組件等等。這些分子都是由文字、圖標(biāo)、輸入框等原子構(gòu)成而來的。

3）有機體（組織）

Organisms翻譯過來是有機體，不過這里參考了其他前輩的翻譯，將其翻譯為組織能夠更好得幫助理解。

組織映射到界面設(shè)計中其實就是由多個分子、原子構(gòu)成的模塊。比如承載各類信息的卡片、列表等等。

4）模板

模板層面基本就和產(chǎn)品掛鉤了。以上的三個層面僅僅屬于相互割裂的個體，它們不足以支撐一個頁面。但是當(dāng)我們基于產(chǎn)品及用戶的需求，將多個有機體進(jìn)行恰當(dāng)?shù)慕M合形成“模板”后，產(chǎn)品便開始有了雛形。而這個模板就是交互設(shè)計師所繪制的原型圖。

從用戶體驗五要素上來說，它屬于框架層。模板所存在的意義就是幫助設(shè)計師專注在功能、內(nèi)容的布局排版，搭建一個抽象化的產(chǎn)品模型為最后一步做鋪墊。

5）界面

界面即我們最終需要產(chǎn)出的高保真視覺稿，它是對模板具象化的結(jié)果，對應(yīng)著體驗五要素中的表現(xiàn)層。

一方面設(shè)計師使用真實圖片、文案代替了模板中的占位符，另一方面通過各類合理的視覺表達(dá)來高效得為用戶傳達(dá)信息或者調(diào)性。這一步在拋開視覺還原度的條件下基本就算是產(chǎn)品的最終形態(tài)了。

而下面我講的原子設(shè)計系統(tǒng)便是基于這個方法論而構(gòu)建，它貫穿了我們所有的設(shè)計過程以及后續(xù)的產(chǎn)品迭代。

02 軟件危機

在講解原子設(shè)計系統(tǒng)之前，我先為各位講一個互聯(lián)網(wǎng)歷史中真實存在的一個事件——軟件危機（Software crisis）。

20世紀(jì)60年代，計算機的發(fā)展速度遠(yuǎn)遠(yuǎn)超過了軟件研發(fā)的速度?？墒钱?dāng)時的匯編語言是面向機器的，開發(fā)們只能針對特定的計算機編寫，導(dǎo)致代碼沒辦法復(fù)用，也極難維護(hù)。

這就好比我希望你能夠為我的軍隊量產(chǎn)罐頭，但是你卻只能精雕細(xì)琢一款米其林三星的法式鵝肝。這跟當(dāng)時規(guī)模化生產(chǎn)的市場需求完全是背道而馳的。

這一連串的問題在1968年的NATO軟件工程會議上被首次定義為軟件危機。在會議中，Douglas McIlroy提出了組件式開發(fā)的概念及解決思路，旨在解決代碼低效無法擴展復(fù)用的弊病。這個超前的思路可謂是天降甘霖一般，在當(dāng)時促成一大批優(yōu)秀語言的誕生（我們當(dāng)年的C語言就是在這個背景下橫空出世的），幫助開發(fā)將代碼復(fù)用到各個場景，極大幅得提升了開發(fā)的效率！

而在半個世紀(jì)后的今天，我們的設(shè)計領(lǐng)域出現(xiàn)了同樣的問題——

1. 設(shè)計不統(tǒng)一

很多頁面曾使用了相似的顏色、組件，而不是固定的一個，如今而它們散落在各個項目的設(shè)計稿中，變得難以管理和維護(hù)。

2. 設(shè)計低效

由于沒有一套提前搭建好的系統(tǒng)，導(dǎo)致每次進(jìn)行新的需求時都難以復(fù)用之前的東西。而且在進(jìn)行不同尺寸的響應(yīng)式適配時需要耗費大量的精力進(jìn)行組件的更改。有時候甚至為減少工作量直接讓開發(fā)按原型圖進(jìn)行布局，最后再進(jìn)行把關(guān)。

3. 多設(shè)計師問題

公司存在多位設(shè)計師時，通常是每個設(shè)計師單獨負(fù)責(zé)一部分業(yè)務(wù)，但是由于沒有一套約定俗成的規(guī)則進(jìn)行約束，導(dǎo)致每個設(shè)計師的產(chǎn)出物不像來自一個產(chǎn)品。

4. 開發(fā)低效

開發(fā)的低效來源于設(shè)計的隨意。每次一有新的樣式或組件都得重寫一套，無法直接復(fù)用之前已有的東西，導(dǎo)致了大量無意義的重復(fù)勞動。

我們的設(shè)計方式僅僅局限在解決單一問題的場景中，而忽略了更多未來將會出現(xiàn)的更多業(yè)務(wù)。導(dǎo)致我們的設(shè)計不成體系，無法模塊化和規(guī)?；?。這些設(shè)計產(chǎn)物即我開頭所講的“一次性設(shè)計”。

而且，有時候設(shè)計師花費大量時間產(chǎn)出設(shè)計稿的功夫，開發(fā)可能早就使用第三方組件搭建出一個模板了。

我們一直在說設(shè)計師和開發(fā)之間仿佛有一道看不見的墻，那道墻一半是語言，一半則是組件化思維。

而將組件化思維踐行到我們設(shè)計領(lǐng)域中的便是原子設(shè)計系統(tǒng)，它基于原子設(shè)計方法論，將原子、分子、有機體作為一個個可復(fù)用的組件進(jìn)行有序得拼裝，來幫助設(shè)計師快速得搭建產(chǎn)品，大幅提升生產(chǎn)效率。

03 原子設(shè)計系統(tǒng)的優(yōu)勢

1. 一致性

首先，原子設(shè)計系統(tǒng)相當(dāng)于為設(shè)計師制定了一套標(biāo)準(zhǔn)化的規(guī)則。所有的設(shè)計工作全部基于這個規(guī)則展開，這也就基本完全避免了多需求、多設(shè)計師協(xié)作時產(chǎn)生的不一致的問題。最后的產(chǎn)品也可以帶來更加一致的體驗。

2. 效率

不像一次性設(shè)計那樣，原子設(shè)計系統(tǒng)中的樣式及組件本身可以無限復(fù)用，在設(shè)計師接收新的需求、項目時只需要直接調(diào)用即可迅速得搭建好模板，再進(jìn)行視覺的填充即可，節(jié)省了大量重復(fù)的設(shè)計工作。并且這個良好的習(xí)慣也可以避免過多無法復(fù)用的設(shè)計影響到下游開發(fā)的效率，避免重復(fù)造輪子。也降低了不必要的溝通成本。

3. 易于擴展維護(hù)

當(dāng)后期產(chǎn)品優(yōu)化迭代時，我們僅需要在系統(tǒng)中改動原子、分子或者有機體的屬性即可實現(xiàn)全局同步更新，非常易于擴展維護(hù)。

04 大廠們的原子設(shè)計系統(tǒng)

在相當(dāng)長的一段時間內(nèi)，混亂和無序是Android在界面設(shè)計中的代名詞，當(dāng)時由工程師為主導(dǎo)的Android可謂是一片無人管理的荒野，任何人都可以在上面建造自己想要的東西。直到2014年，Google I/O大會上發(fā)布了Material Design，這成為了Google真正意義上的首次設(shè)計革命。

如果說誰是原子設(shè)計系統(tǒng)最偉大、最經(jīng)典的先行者，那么Material Design當(dāng)之無愧。它不僅僅為開發(fā)者和設(shè)計師提供了一整套組件庫，還制定了Material Design獨有的設(shè)計原則和設(shè)計語言，形成了一塊相當(dāng)龐大而有序的設(shè)計體系。

而2016年由螞蟻金服團(tuán)隊所發(fā)布的Antdesign，則是國內(nèi)使用原子設(shè)計而搭建的首個設(shè)計系統(tǒng)。它最大的亮點應(yīng)該是詳盡提供了開箱即用的組件框架，并且覆蓋了絕大部分的應(yīng)用場景。對于當(dāng)時中后臺設(shè)計慘不忍睹沒眼看的產(chǎn)品來說堪稱是一片綠洲。

當(dāng)然，其他很多優(yōu)秀的公司也都使用了原子設(shè)計來構(gòu)建自己的設(shè)計系統(tǒng)，比如Uber，Primer等等。

05 設(shè)計系統(tǒng)包括哪些？

設(shè)計系統(tǒng)通常由設(shè)計原則、設(shè)計語言和組件庫組成。

1. 設(shè)計原則

設(shè)計原則即這一套設(shè)計系統(tǒng)所遵循的法則。不論是顏色、圓角、按鈕還是圖標(biāo)等等，它們的制定都需要圍繞這個設(shè)計原則展開執(zhí)行。

它所存在的意義就是為接下來的所有設(shè)計提供了方向，同時傳遞平臺的品牌、儀式感。

比如我們所熟知的Material Design，就用了材質(zhì)隱喻、大膽生動有意義和具有意義的動畫來作為它的設(shè)計原則。

蘋果的設(shè)計原則為創(chuàng)意審美的重要性、隱喻的價值、易用性原則和及時的反饋。將審美作為原則的第一要義，也象征著蘋果本身的對美的追求。

螞蟻的AntDesign就是將自然、確定性、意義性和生長性作為它的設(shè)計價值觀。

2. 設(shè)計語言

我們常說的設(shè)計語言，即在秉承設(shè)計原則、以及業(yè)務(wù)調(diào)性的基礎(chǔ)上，所提前制定的一系列設(shè)計策略。業(yè)務(wù)調(diào)性需要我們基于業(yè)務(wù)背景去衍生出一系列關(guān)鍵詞來給業(yè)務(wù)定性。比如金融產(chǎn)品涉及資金的流轉(zhuǎn)操作，所以安全就可以作為其中一個關(guān)鍵詞。而針對年輕大學(xué)生的校園社交產(chǎn)品就可以使用年輕作為其中一個關(guān)鍵詞。

之后，我們基于這些關(guān)鍵詞進(jìn)行更加具象的映射，然后搭建情緒版來分析、推導(dǎo)出最終的形、色、字、構(gòu)、質(zhì)的視覺風(fēng)格。這些視覺風(fēng)格匯總起來即可作為一套設(shè)計語言。這部分不在此篇討論范圍內(nèi)，所以先簡單帶過，不細(xì)講。