如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里

在本文中，我們想分享 ISUX 設(shè)計趨勢報告的第一部分「圖形設(shè)計趨勢」。在這一部分里，我們展示了當(dāng)下各種品牌和動態(tài)圖形的案例，總結(jié)了 12 個值得注意的平面設(shè)計趨勢。

強大和可變的排版

排版一直是設(shè)計的重要元素，也是傳達品牌強烈信息的手段。從去年開始，粗大的無襯線字體和強有力的排版被應(yīng)用到許多品牌設(shè)計當(dāng)中，這使得它成為平面設(shè)計趨勢的一部分。此外，也有越來越多的品牌采用動態(tài)和反映了 3D 趨勢的三維字體版式設(shè)計。

1. 動力學(xué)排版海報

△ @Andrei Robu

這張動態(tài)排版海報不是簡單地放置圖形和文字，而是將移動的 3D 文字放在固定的圖形上，傳達新的視覺印象。這些圖形主要通過 SNS 以短循環(huán)視頻的形式共享。

2. Uber 品牌識別

△ @Wolffolins

Uber 開發(fā)了一種無襯線字體用于品牌 logo 的再設(shè)計，并將其貫穿于整個品牌系統(tǒng)。采用了這些品牌字體的動態(tài)海報，更為有力地傳達出 Uber 的品牌信息。

3. Squarespace 品牌識別

△ @Dia studio

Dia studio 常將動態(tài)文字應(yīng)?于品牌項?，「Squarespace」是其代表作品之一。

4. FAD 視覺圖形

△ @Practica Studio

以 3D 形態(tài)傳遞活動信息的版面設(shè)計，就像禮品包裝一樣。這種循環(huán)的 GIF 圖也作為品牌主圖形被運用。

5. 韓國女性耐克運動廣告

△ @Wieden＆Kennedy Tokyo

韓國藝人支持女性主觀活動的耐克運動廣告，也采用了大膽的哥特式字體。這些由 Guteform 設(shè)計工作室設(shè)計的字體有基本的延展形式，同時有一個系統(tǒng)能延展成更為寬大的形式以適配媒體的比例。這種動態(tài)化的強烈的排版?zhèn)鬟f了活動信息，和其他設(shè)計元素的互動，最大限度地發(fā)揮了圖形效果。

鮮明的顏色和漸變

隨著 Instagram 用彩色漸變作為品牌色，漸變趨勢已經(jīng)持續(xù)好幾年。最近品牌，UI 和包裝的圖形設(shè)計都采用明亮而強烈的對比色，這種趨勢不僅應(yīng)用于設(shè)計，也應(yīng)用于攝影。強烈的色彩組合，夢幻的色調(diào)和彩色漸變有望應(yīng)用于 2019 年的整體設(shè)計。

1. APP 圖標(biāo)設(shè)計

△ 越來越多的手機 APP 圖標(biāo)使用漸變色

最近，許多移動應(yīng)用程序在其圖標(biāo)設(shè)計上應(yīng)用了彩色漸變。

2. 歐洲體育 – 2018 平昌冬奧會品牌識別

△ @DixonBaxi

歐洲體育臺 2018 年平昌冬奧會的轉(zhuǎn)播也將強對比和漸變色運用于多數(shù)場景中，包括標(biāo)志、圖形和攝影。熒光圖形和深?背景的對比，尤為深刻地凸顯了冬季運動的感覺。

3. 籃球永遠品牌識別

△ @Notreal

NBA 新聞廣播公司品牌重塑項目所使用的，諸如彩色漸變和大膽排版的設(shè)計方法，也反映了的趨勢。他們創(chuàng)作了一個系統(tǒng)，通過各種顏色，字體和布局的應(yīng)用，可以產(chǎn)生各種圖形輸出。

4. 明日之子品牌識別

△ @Plus X

騰訊視頻和哇唧唧哇聯(lián)合出品的選秀節(jié)目明日之子，用多種漸變色圓形表達不同選手的才華。隨著節(jié)目的進行，圖形主題也會隨選手的變化而變化。

不對稱布局

與過去基于固定網(wǎng)格系統(tǒng)的布局相比，最近越來越趨于使用僅顯示圖像一部分的非對稱布局。雖然好像只顯示整個圖像的一部分，設(shè)計師卻可以在大系統(tǒng)中無限延展每個圖形。你可以認為平衡被打破了，設(shè)計師卻可以更加自由地應(yīng)用圖形元素，呈現(xiàn)更強烈的視覺印象，還可以有很酷的圖形組成。

1. 平面海報設(shè)計

△ @Vasjen Katro

設(shè)計了各種各樣圖形的 Vasjen Katro，不斷嘗試的形狀，顏色和布局也反映了的趨勢，特別是不對稱和開放式布局。

2. Easy Peasy 品牌識別

△ @CFC

Easy Peasy 是韓國著名化妝品公司 Amore 推出的獨立化妝品品牌，以品牌關(guān)鍵詞輕松、活躍、有趣和大膽為基礎(chǔ)，嘗試給用戶更加簡單和親切的感覺。品牌用看似自由的手繪波浪線貫穿于整個圖形設(shè)計，打造不對稱之美，展現(xiàn)了自由和親近的形象。

不斷演化的識別度

移動圖標(biāo)已成為趨勢很多年了，現(xiàn)在應(yīng)用交互元素的品牌案例也很多。比起強而有力，靈活而簡單，能隨內(nèi)容做出響應(yīng)和更改的交互圖標(biāo)儼然已成為一種新的趨勢。

1. 國際光影藝術(shù)節(jié)品牌識別

△ @George&Harrison

這是交互圖標(biāo)的其中一個案例，用簡單的方形作為基礎(chǔ)，延展出各種各樣的形狀和圖案。這些基本元素保持了簡單和最大化的交互式圖像效果。

2. SM 娛樂品牌識別

△ @CFC

韓國最大娛樂公司之?，SM 娛樂開發(fā)了一種新的品牌標(biāo)識來反映其不斷擴展的業(yè)務(wù)。它將基本圓形改變成了不同形狀與小號和中號產(chǎn)生關(guān)聯(lián)。靈活的符號和各種顏色的圓形圖案是 SM 娛樂視覺識別的核心。

3. 第 59 屆塞薩洛尼基國際電影節(jié)品牌識別

△ @Beetroot Design

這是電影節(jié)一個有趣的識別案例，用卷軸纏繞的圖像代替尋常的電影節(jié)標(biāo)志。它不是固定的，而是復(fù)雜紊亂的，以復(fù)雜的方式排列各種不同的顏?和圖形，表達了電影節(jié)的目的──通過電影傳達多種多樣的故事和情感。

4. 第 6 屆廣州三年展品牌識別

△ @Another Design

傳遞展覽核心信息，反復(fù)復(fù)制到三維空間的基本矩形，顯示了展覽的特征。在整個展廳中，你可以看到它以多種變動的形態(tài)被應(yīng)用，同時也以不同的形狀被運用到各式各樣的場景中。

3D 中的高端紋理

3D 趨勢如此流行，以至于在平面設(shè)計趨勢中也不得不討論它。當(dāng)下有很多的 3D 圖像嘗試用復(fù)雜的紋理給大眾展示生動逼真和新鮮感十足的印象。通過在三維幾何形態(tài)中，添加逼真的紋理，創(chuàng)造在現(xiàn)實中不可能存在的圖形，人們正在定義一種新的現(xiàn)實主義。

1. 3D 插畫

△ @George Stoyanov

George Stoyanov 通過組合各種幾何形態(tài)來表達形狀之美。這種視覺嘗試很有意思，因為它很難在現(xiàn)實中制作。

2. Adobe Think Tank 視覺圖形

△ @Omar aqil design

這張圖像由不同形狀，紋理和顏色的幾何物體設(shè)計而成，表達了 Adobe Think Tank 包含各種主題論壇的品牌特征。

3. 現(xiàn)代「超級消費者」品牌視頻

△ @Universal everything

將各種各樣的材料和顏色運用到人類行走的形狀當(dāng)中，傳遞出一種非現(xiàn)實和新鮮感十足的視覺印象。

4. 耐克PG3「舒適體驗」廣告

△ @GRIF

用柔軟的毛皮材料營造耐克的主要感覺──舒適感，非現(xiàn)實的圖形里有著生動的質(zhì)感，讓人耳目一新。

流體和液體形狀

使用有機圖形并不是一種新的潮流，但我們發(fā)現(xiàn)今年也有大量的圖形使用水和油等液體來表達效果。它有時被用作品牌的主圖形，你可以在 3D 短動態(tài)圖形中明顯地感受到這種傾向。這種具有強烈色彩和漸變的有機形狀，傳達出一種精致而夢幻的感覺。

1. 有機形態(tài)的 3D 視頻

△ @cmttat

有機形態(tài)通常以 3D 形式被應(yīng)用，并且廣泛應(yīng)用于 SNS 共享的短視頻作品中。今年尤其有很多透明質(zhì)感的案例，這些透明材質(zhì)運用各種顏色，使色彩搭配產(chǎn)生變化，營造出神秘的氣氛。

2. 孔雀學(xué)會 2018 品牌識別

△ @Irradie

將明亮多彩的漸變色應(yīng)用于有機形態(tài)，這些圖像表達了巴黎電子音樂節(jié)的特征。

定制插畫和角色設(shè)計

各式各樣的平面插畫曾經(jīng)退出過潮流，但現(xiàn)在已經(jīng)成為一種強烈的設(shè)計趨勢。很多品牌都通過聘請知名插畫家的方式，用平面插畫給大眾新的印象。去年以來，除了 2D，3D 角色插畫也成為一種趨勢被應(yīng)用到越來越多的品牌設(shè)計當(dāng)中。

1. Uber 品牌插畫

△ @Leo Natsume

運用于尤伯杯品牌新形象的插畫，是其簡潔有序品牌系統(tǒng)中有趣的一部分。

2. Spotify「音樂與你同在」插畫

△ @Circus

這是 Spotify 運用了 2D 插畫的品牌視頻。手繪質(zhì)感，色彩簡單，人形的四肢都很大是最近的插畫趨勢。

3. Belif 品牌插圖

△ @Superfiction

這是基于三維角色的 2D 圖案設(shè)計示例，運用于包裝設(shè)計和品牌視頻。

等距

等距設(shè)計是一種將二維圖形繪制成三維的方法，最近已成為一種趨勢，在圖形和動畫視頻中被廣泛應(yīng)用。許多設(shè)計師通過運用這種技術(shù)，在一個框架中顯示整個圖形，創(chuàng)造有趣和獨特的氛圍，呈現(xiàn)出一種全新的視覺印象。和去年一樣，等距設(shè)計在今年似乎也會越來越流行。

1. 等距插畫

△ @Mohamed Samir

經(jīng)常使用等距技術(shù)和彩色漸變的插畫家 Mohamed Samir 設(shè)計了一系列富有趣味性的海報。

2. 等距視頻

△ @Matthieu BRACCINI、@Panic Studio

將大物體變成微小模型的等距設(shè)計方法能給人留下印象，最近可以看到很多運用了這種方法后，屏幕變得更加特別和有趣的案例。

混合媒介

結(jié)合不同媒介的各種圖形，創(chuàng)建有趣的效果是過去常見的一種方式。最近，結(jié)合大膽色彩，逼真照片和 3D 圖像給大眾新鮮感受的案例也很多。含有扁平化元素的真實圖片和視頻是 2019 的主要趨勢之一。

1. 3D視頻+2D圖形

△ @Sergio Fuego、@giantantstagram

當(dāng) 2D 和 3D 圖像組合在一起，立體效果可以更加獨特和突出。這是使用了此方法的優(yōu)秀視頻案例。

2. 真人實拍視頻+2D插畫

△ @+CRUZ

匡威活動視頻是一個很好地混合了拍攝視頻和 2D 圖形的案例。

3. 真人實拍視頻+發(fā)光涂鴉動畫

△ @blottermedia、@jamiethraves

在真人視頻中添加發(fā)光的涂鴉動畫，可以使視頻更具動態(tài)性和趣味性。當(dāng)下，SNS 平臺上越來越多舞者和歌手的視頻都使用這種效果。

4. 運動 3D 的 2D 插畫視頻

△ @phellaz、@blublustudios

有很多作品很難知道它是 2D 還是 3D。用 3D 表達物體運動，而不是簡單地使用 2D 圖形，這種視頻能傳達一種新的視覺感受。

短而無縫的動畫

當(dāng)通過 SNS 共享圖形圖像變得非常普遍時，短小和重復(fù)的動態(tài)圖形也變得很易見。logo、2D 插畫、3D 圖像和各種各樣的圖形都以短循環(huán)動畫的形式共享。

1. 2D 短動畫

△ @motionmarkus

這些短視頻通過在簡單的扁平插畫里重復(fù)使用短動作，傳達了一種獨特而有趣的形象。

2. 3D 短視頻

△ @arbenl1berateme

由于 3D 是主要趨勢，小而重復(fù)的 3D 圖像也值得注意。添加 3D 真實紋理和效果，可以帶來獨特的視覺感受。

AR/VR

AR 和 VR 技術(shù)的發(fā)展，對平面和多媒體的設(shè)計趨勢產(chǎn)生了很大的影響。這些新技術(shù)使人們對品牌有更加立體的體驗。

1. Le Graphisme Augmente 圖形海報

△ @Laura Normand

盡管是印刷海報，它也允許人們通過印刷材料使得 3D、AR 技術(shù)獲得交互式體驗。印刷海報只包含簡單的幾何圖形和極小的信息，但當(dāng)你通過手機查看時，將獲得更多的信息和看到立體的形狀。

2. Apple Music x Memoji 廣告

△ @Apple

Apple 使用基于 AR 技術(shù)的 memoji 來推廣 Apple 音樂。著名藝術(shù)家如 Ariana Grande 推出了他們的歌曲，通過這支廣告，Apple 一起宣傳了 Apple Music 和 memoji。

3. Nike：上海 Never Done 運動店鋪網(wǎng)站

△ @AKQA

上海耐克通過 AR 技術(shù)實現(xiàn) 360° 網(wǎng)上零售的項目，可以讓消費者根據(jù)運動的出汗量來進行購買和體驗服務(wù)。

4. 奧迪 Quattro Coaster 廣告

△ @POL

這是奧迪利用 AR 技術(shù)的項目，它能讓消費者將汽車從銀幕上帶到自己的位置，從而積極體驗開車的感覺。

5. 2018 年英雄聯(lián)盟全球總決賽開幕式

△ @League of Legends

2018 年英雄聯(lián)盟的開幕舞臺利用 AR 技術(shù)，使演唱 POP/Stars 的真人歌手和游戲里 K/DA 角色一起同臺演出。這些被實時跟蹤的角色，在實際舞臺上帶來了真實的表演效果。

新復(fù)古

新復(fù)古，用現(xiàn)代感覺詮釋復(fù)古，已成為一種新趨勢。新復(fù)古是一個結(jié)合了「新」和「復(fù)古」的詞，是對過去懷舊的現(xiàn)代詮釋，不僅是設(shè)計，在時尚、建筑、流行文化等各領(lǐng)域都是一種新趨勢。

1. 復(fù)古風(fēng)格視頻

△ @dennybusyet  @thekidzzzzz

流行于 80 年代和 90 年代的電子游戲，和好萊塢電影的復(fù)古圖像與視頻，被重新詮釋后，再一次流行起來。

2. Fritz Coffee Company 公司品牌識別

△ @Jo In Hyuk

韓國著名咖啡品牌，F(xiàn)irtz Coffee 創(chuàng)造了的，具有復(fù)古 logo 和圖形的品牌標(biāo)識。

結(jié)語

趨勢不會朝一個方向發(fā)展，它可以擴展成各種各樣的方式，就像我們看到的反映了趨勢的 3D，AR/VR 技術(shù)也包含了復(fù)古風(fēng)格一樣。我們希望這些不同的趨勢能以新的方式被應(yīng)用，從而創(chuàng)造出新穎而有趣的設(shè)計。

藍藍設(shè)計( sillybuy.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)。

如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里

簡介說明

1. 原理表述

系統(tǒng)需要在 400ms 內(nèi)對使用者的操作做出響應(yīng)，這樣才能夠讓使用者保持專注，并提高生產(chǎn)效率。

2. 實驗背景

上世紀(jì) 70 年代后期，計算機研究人員依然認為計算機可以花費兩秒的時間對使用者的操作做出反饋，因為他們認為人們大概正好需要兩秒時間來決定下一步的操作，所以 2s（2000ms）一度成為了當(dāng)年計算機響應(yīng)時間的標(biāo)準(zhǔn)值。直到 1979 年計算機的算力開始大幅提升，也有了足夠的能力在 2000ms 內(nèi)做出響應(yīng)，這時 IBM 的研究員 Walter Doherty 進行了一系列研究來評估算力的增長對生產(chǎn)力的影響。

研究結(jié)果表明，計算機的響應(yīng)速度直接影響了使用者做出下一個決定所要花費的時間（這個時間被稱為用戶響應(yīng)時間），換句話說，計算機相應(yīng)的時間越長，用戶就要花費越多的時間來思考和決定下一步的操作。

上面這張表格充分說明了這一觀點，橫縱坐標(biāo)分別為用戶響應(yīng)時間和系統(tǒng)響應(yīng)時間，我們可以看到系統(tǒng)響應(yīng)時間如果從之前的 2000ms 降低到 300ms ，使用者作出下一步指令所需要的時間就能夠縮短 5s 以上。Doherty 認為人們會將工作需要的一系列操作步驟存儲在短時記憶之內(nèi)，如果系統(tǒng)響應(yīng)時間太長，就會打斷人們的短時記憶，換句話說，思路都不連貫了。

不僅如此，Doherty 還認為響應(yīng)速度低于 400ms 的系統(tǒng)或者程序，會讓人上癮。放在當(dāng)下的環(huán)境來看，這當(dāng)然只是一句比較夸張的話，但是結(jié)論是需要我們重視的，程序的響應(yīng)時間，務(wù)必在 400ms 之內(nèi)。

設(shè)計案例

1. 響應(yīng)時間的多爾蒂閾值

要說「多爾蒂門檻」帶給我們的啟示，上一節(jié)最后一句已經(jīng)表達得足夠清楚：系統(tǒng)或程序的響應(yīng)時間小于 400ms 。為了讓讀者有更加直觀得感受，我們先來一組小動畫感受一下高響應(yīng)延遲有多讓人抓狂，快速響應(yīng)又多么讓人舒服：

應(yīng)用案例 1：模擬延遲效果

注：請務(wù)必挨個觀察，不要看整體，看單個的效果。

從動畫中可以感受到，50ms、200ms 還算可以讓人接受，當(dāng)響應(yīng)時間達到 600ms 時已經(jīng)讓人有些不耐煩，而達到 1000ms 時會讓人不自覺多點幾下，2000ms 時我手機已經(jīng)被我砸了。

2. 另一個因素不能忽視

在如今的計算機算力之下，響應(yīng)時間輕輕松松便能夠達到多爾蒂門檻的閾值，甚至能夠遠比 400ms 更小，但是這就夠了嗎？「多爾蒂門檻」說到底只是給出了響應(yīng)時間的上限，400ms 的響應(yīng)時間或許在多爾蒂那個時代確實能夠大幅提升操作員的操作效率從而產(chǎn)出更大的經(jīng)濟效益（比如銀行系統(tǒng)），但是現(xiàn)在互聯(lián)網(wǎng)已經(jīng)越發(fā)成熟，不少公司的用戶體驗研究者都已經(jīng)意識到，系統(tǒng)響應(yīng)時間已然不是影響用戶響應(yīng)時間的唯一因素了，另一個因素是過渡動畫的持續(xù)時間。

就像谷歌在 Material Design 中明確規(guī)定了過渡動畫的 Speed 這一項，這是為什么呢？用戶體驗是一門關(guān)于情感和邏輯的學(xué)問，而不僅僅是一個統(tǒng)計數(shù)字就能解釋的，讓程序?qū)δ骋徊僮鞯姆答仌r間（包括響應(yīng)+動畫）符合用戶對該操作的預(yù)期才是讓用戶「上癮」的關(guān)鍵。

應(yīng)用案例 2：iOS 中的動畫

所以，哪怕我們的手機、電腦已經(jīng)可以做到在 100ms 之內(nèi)做出響應(yīng)，快到完全有能力在用戶反應(yīng)不過來的情況下給出反饋和結(jié)果，但是這樣是不夠的，我們依然需要「合適時長的」動畫作為計算機反饋和大腦反應(yīng)之間的潤滑劑，而不至于讓程序使用起來太「干澀」，也不至于讓大腦一直處于應(yīng)激反應(yīng)的階段而感到疲勞。

3. 有時不可避免高延遲

在真實世界中我們使用應(yīng)用時會發(fā)現(xiàn)，有時候響應(yīng)速度沒辦法做到如此迅捷快速，比如 APP 啟動時；還有時候即便系統(tǒng)可以響應(yīng)，網(wǎng)絡(luò)卻不行。網(wǎng)絡(luò)并不能在用戶操作的一瞬間就把所有需要的資源都下載好，用戶必須等待幾秒的時間，那么這時候就需要考慮如何減少用戶等待的焦灼感，優(yōu)化等待的體驗。

比如有趣的加載動畫、閃屏頁等，都算是解決辦法。

應(yīng)用案例 3：Netflix 的啟動動畫以及新草的加載動畫

注意事項

動畫的持續(xù)時間應(yīng)當(dāng)在適當(dāng)?shù)膮^(qū)間中取到最短，而不能太突然或太緩慢。

反面案例 1：過快或過慢的動畫

在現(xiàn)實的上線 APP 中，也會有故意把動畫做得很慢的例子，這比較影響操作的流暢性。

反面案例 2：Eggzy

左右滑動的時候動畫效果在實際體驗中非常慢，對于想要進行連續(xù)滑動操作的用戶（即便這樣的使用場景不多），已經(jīng)慢得無法忍受，有一種「不跟手」的感覺，這么慢的動畫已經(jīng)很輕易就能讓用戶感受到自己在等它了。

仔細瀏覽 Material Design 中給出的案例便可以發(fā)現(xiàn)，動畫的持續(xù)時間大致可以參照以下幾條規(guī)律去嘗試：

• 動畫元素越小、動畫幅度越小，持續(xù)時間就越短。
• 復(fù)雜的動畫比簡單的動畫持續(xù)時間更長。
• 一個頁面出現(xiàn)的動畫總是比消失的稍稍長一點（相差大致50ms）。

總結(jié)

• 合理的操作響應(yīng)時長、方式有助于用戶保持專注和提率
• 軟件操作的過度動畫時間不宜太短或太長，最常見于 400ms 左近
• 如果無法避免操作中較長讀取、等待時間，那么就用其他更有趣的動畫、頁面來減少用戶的焦慮感
• 藍藍設(shè)計( sillybuy.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)。

如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里

為什么要構(gòu)建 MIZ Design？

1. 背景

隨著米莊 APP 用戶的增長，以及 APP 不停的迭代，我們在設(shè)計上積累了越來越多的債務(wù)。越來越多的新頁面，新功能，以及不同的組件，都是由不同的設(shè)計師來設(shè)計，前端也是由不同的開發(fā)來實現(xiàn)，這直接導(dǎo)致了整個 APP 越來越臃腫無序，視覺和交互體驗不一致，且團隊溝通成本高，重復(fù)勞動力大，輸出效率低，迭代速度慢。

2. 現(xiàn)狀

開發(fā)層面

• 代碼混亂不統(tǒng)一
• 沒有可控性和可持續(xù)性

場景：

設(shè)計師：涉及到這個組件的頁面都改一下吧。

開發(fā)：改不了，每個頁面都是單獨寫的，改起來非常麻煩，耗時間耗資源耗人力。

設(shè)計師：為什么同樣的組件要單獨寫？

開發(fā)：我怎么知道，這是以前的開發(fā)寫的，而且寫的亂七八糟。

設(shè)計師：……

那怎么辦？不改也得改呀?？偛荒芤恢绷糁@些大大小小的毛病，不解決問題會越來越嚴重。

代碼混亂，遺留了非常多的開發(fā)層面代碼不一致的問題，后期迭代的過程中如果不統(tǒng)一，也會使整個系統(tǒng)失去可控性。

設(shè)計師層面

• 時間和精力的重復(fù)浪費
• 產(chǎn)品體驗和風(fēng)格的混亂

場景 1：

設(shè)計師 A：這個頁面是誰做的？源文件有嗎？

設(shè)計師 B：不知道哎。以前的設(shè)計師做的。去庫里找一下吧。

30 分鐘以后，依然沒有找到源文件。

場景 2：

開會：為什么這個項目的頁面和以前的風(fēng)格差很多？

設(shè)計師 A：現(xiàn)在流行的就是這個風(fēng)格呀，多好看。

設(shè)計師 B：雖然設(shè)計每年都有流行趨勢，但還是要和產(chǎn)品品牌風(fēng)格相結(jié)合。

一個項目兩個設(shè)計師負責(zé)，設(shè)計出來的頁面控件：按鈕，列表，輸入框，色彩，視覺風(fēng)格完全不一致。在 2 個設(shè)計師完成設(shè)計以后，還需要整合在一起重新修改，效率很低。并且每次頁面中的元素，開發(fā)需要根據(jù)不同業(yè)務(wù)中的不同設(shè)計師的「創(chuàng)意」來進行人肉修改。

當(dāng)我們開始設(shè)計新的頁面，功能需求點優(yōu)化的時候，這個問題變得更加嚴重。同時，因為沒有一個統(tǒng)一的基礎(chǔ)設(shè)計規(guī)范原則，設(shè)計師在設(shè)計項目的時候，在設(shè)計決策和討論中花費了大量時間，會存在大量的重復(fù)勞動。同時由于產(chǎn)品的界面和交互缺乏一致性和可預(yù)測性，用戶體驗也受到了影響。整個產(chǎn)品也會在風(fēng)格定位上不統(tǒng)一，沒有確定產(chǎn)品風(fēng)格特質(zhì)的情況下越來越模糊，失去自身品牌該有的特性。

產(chǎn)品迭代，基本上是基于新功能的開發(fā)設(shè)計迭代，新的功能、新的頁面不斷的增加，對于設(shè)計師而言，有設(shè)計規(guī)范的原則做基礎(chǔ)設(shè)計框架，更容易延續(xù) APP 統(tǒng)一的設(shè)計風(fēng)格，不至于被不同的需求，不同的設(shè)計趨勢以及蠢蠢欲動的新的設(shè)計靈感牽著鼻子走，導(dǎo)致越做越亂，無章可循。

一個 APP 就像自己的孩子一樣，從一個嗷嗷待哺的嬰兒逐漸長大成人。設(shè)計系統(tǒng)就好比一個人的生物系統(tǒng)，是整個生物體的基礎(chǔ)。如果對此系統(tǒng)不維護，那么此系統(tǒng)將會隨著時間的增長越來越脆弱以及呈現(xiàn)不可逆的現(xiàn)象。那么如果維護好一個設(shè)計系統(tǒng)，骨骼會在成長中呈現(xiàn)規(guī)律清晰的生長模式，會隨著業(yè)務(wù)的生長而生長，可控制、可更新，使生物體健康的發(fā)展然后去完成它的使命。

什么是設(shè)計規(guī)范？

Design System 最開始是 Guide 演化而來，Guide 是一套可指導(dǎo)、可延續(xù)、可擴展、可統(tǒng)一的、可區(qū)分的視覺指引手冊，指導(dǎo)相關(guān)設(shè)計結(jié)構(gòu)完成統(tǒng)一性與對外區(qū)分性。具象層，它是一種設(shè)計方法；抽象層，它是一種思考模型。

最近幾年，「Design System」這個詞非?；?。下面介紹紅遍全球設(shè)計界的兩大設(shè)計規(guī)范網(wǎng)紅。

1. Material Design

谷歌在 2014 年的 Google I/O 上推出了 Material Design，它的目標(biāo)是創(chuàng)造一個將經(jīng)典的設(shè)計原則和科技、創(chuàng)新相結(jié)合的設(shè)計語言，并且在不同設(shè)備上提供一致的體驗底層系統(tǒng)，并同時支持觸摸、語音、鼠標(biāo)、鍵盤等輸入方式。

一經(jīng)發(fā)布就紅遍了全球設(shè)計界。新穎的設(shè)計理念，清晰明確的設(shè)計原則，詳細的設(shè)計規(guī)范，使之成為完美的安卓端標(biāo)準(zhǔn)設(shè)計規(guī)范。也給設(shè)計界的設(shè)計師們提供了非常好的參考，很多設(shè)計師也根據(jù) Material Design 設(shè)計原則延展出更多的創(chuàng)新設(shè)計可能性，制作了各家的設(shè)計規(guī)范。

出了官方的 Sketch 組件庫以后，谷歌團隊還開發(fā)了基于此設(shè)計規(guī)范的延展工具：比如基于 Material Design 色板的 Sketch 源文件下載；谷歌色彩顏色獲取工具；一整套的 Material Design IOCN 輸出；在 2018 年 5 月份的 Google I/O 大會上，Google 設(shè)計團隊開發(fā)了一款叫做 Material Theme Editor 工具，可以幫助設(shè)計師輕松且快速創(chuàng)建符合自身品牌又符合 Material Design 風(fēng)格的應(yīng)用。

設(shè)計價值觀

• Create：創(chuàng)造一個將經(jīng)典的設(shè)計原則和科技、創(chuàng)新相結(jié)合的設(shè)計語言。
• Unify：開發(fā)一套統(tǒng)一的底層系統(tǒng)，保持各端一致的用戶體驗。
• Customize：靈活多變的視覺語言，讓各家自成一派，形成獨特鮮明的品牌風(fēng)格。

設(shè)計原則

材質(zhì)是一種隱喻：Material Design 的靈感來源于物理世界和世界中的材質(zhì)，包含了材質(zhì)如何接受光的影響以及所形成的光影效果，并且對紙張的質(zhì)感和墨水的介質(zhì)重新進行了構(gòu)想。

大膽，圖形，鮮明：Material Design 基于印刷設(shè)計的指導(dǎo)原則，字體、柵格、留白、顏色等元素都以創(chuàng)造層次、意義和焦點為基礎(chǔ)來讓用戶沉浸在設(shè)計體驗中。

動效賦予意義：微妙順暢地反饋和過渡性的動作效果，引起用戶的注意力并使之保持持續(xù)關(guān)注。當(dāng)元素出現(xiàn)在一個界面中的時候，元素之間的互動重塑了環(huán)境。

基礎(chǔ)靈活：Material Design 同樣旨在實現(xiàn)品牌價值的傳遞。結(jié)合了基礎(chǔ)的代碼、組件和元素，可表達不同的品牌需求。

跨平臺：Material Design 的 UI 組件庫可在不同的平臺共用，不論在安卓平臺、iOS、Flutter，還是 Web 都可保持一致的組件元素。

2. iOS Human Interface Guidelines

iOS 的人機規(guī)范指南，保持了蘋果一貫的風(fēng)格。雖然沒有 Material Design 規(guī)范那么細致全面，但是核心的設(shè)計原則在每個組件的設(shè)計說明中都有滲透。作為 iOS 系統(tǒng)的設(shè)計基礎(chǔ)，建議每個設(shè)計師都需要仔細研究。

iOS 設(shè)計價值觀

• Clarity：系統(tǒng)中所有的文字、圖標(biāo)、圖像以及各個元素都清晰可見，語意表達準(zhǔn)確，功能驅(qū)動設(shè)計。
• Deference：順應(yīng)用戶的行為，流暢的動效和清晰美觀的界面，使用戶沉浸在順暢的交互中，不去打擾用戶。
• Depth：清晰的視覺層級和流暢的動效，同樣提供了系統(tǒng)清晰的層次感，使其富有活力且易于用戶理解。

iOS 設(shè)計原則

Aesthetic Integrity 整體美感：整體美感不僅僅包括美觀的 APP 界面，還包括流暢的交互體驗，產(chǎn)品功能和用戶行為的有效結(jié)合。比如當(dāng)一款工具類 APP 主要是幫助用戶完成一項任務(wù)時，設(shè)計師應(yīng)關(guān)注于用戶操作本身的行為路徑，和產(chǎn)品功能相結(jié)合來幫助用戶完成目標(biāo)，使用戶聚焦功能本身。而如果是一款游戲，那么需要提供非常有吸引力的界面，在鼓勵引導(dǎo)用戶探索的同時也有非常棒的操作體驗。

Consistency 一致性：一個保持了一致性原則的 APP，通過使用標(biāo)準(zhǔn)的控件、熟悉的 icon、標(biāo)準(zhǔn)的文字規(guī)范、統(tǒng)一的組件俗語來實現(xiàn)一個擁有標(biāo)準(zhǔn)化范例的系統(tǒng)。這個系統(tǒng)提供的特性和交互行為也符合用戶的心智模型和預(yù)期。

Direct Manipulation 直接操作：讓用戶在屏幕上直接對內(nèi)容進行操作的交互行為，可以鼓勵用戶和系統(tǒng)進行交互并且更易于理解。當(dāng)用戶翻轉(zhuǎn)屏幕或者使用手勢直接與屏幕交互時，他們會感知到直接操作的行為，并且能立即得到操作結(jié)果。

Feedback 反饋：反饋能夠響應(yīng)操作，呈現(xiàn)結(jié)果，使用戶獲得信息。手機中內(nèi)置的 iOS 應(yīng)用程序為用戶的每一個動作提供可感知的反饋。交互元素在點擊時會凸顯被高亮顯示，進度指示器顯示了需要長時間運行的操作進度、動效和聲音，使用戶能夠更清晰地感知交互行為的結(jié)果并作出響應(yīng)。

Metaphors 隱喻：當(dāng)一個 APP 的虛擬對象和操作路徑與用戶本身所熟悉的心智模型一致時，不管它是來自于真實世界還是數(shù)字世界，用戶都能很快上手。隱喻之所以有效果，是因為用戶和屏幕存在物理上的交互。用戶可以通過移動分層視圖來顯示手機上被遮擋的內(nèi)容；拽拖并且滑動對象，切換開關(guān)，移動滑塊，滾動數(shù)值選擇器，用戶甚至可以通過翻轉(zhuǎn)手勢來翻閱手機上的雜志和文章。

User Control 用戶控制：在 iOS 系統(tǒng)中，用戶是主導(dǎo)者，而不是 APP。APP 可以提供行動建議，給予警告提示，但是不應(yīng)該替用戶做選擇。優(yōu)秀的 APP 始終會在用戶主導(dǎo)和用戶不想要出現(xiàn)的結(jié)果中保持平衡。一個 APP 應(yīng)該始終讓用戶感知到在他的掌控之中。交互的元素給用戶熟悉感并且可預(yù)期；對有破壞性的操作可確認；對錯誤操作可取消，即使是在進行中的行為也可中斷。

在 Sketch 工具中可直接下載 iOS 的組件庫使用。

3. Airbnb DLS

在 2016 年，由工程師和設(shè)計師組成的團隊創(chuàng)建了 Airbnb 的設(shè)計語言系統(tǒng) （DLS）的第一個版本，其目標(biāo)是創(chuàng)建一致的體驗和跨平臺的統(tǒng)一。DLS 包含了一套內(nèi)部和第三方工具，由共享原則和模式定義的組件的集合。這允許使用跨設(shè)計、工程和其他學(xué)科的共享詞匯表進行快速迭代。DLS 的結(jié)構(gòu)簡單而連貫，簡化了團隊之間的溝通。并制定了以下幾條原則來指導(dǎo) DLS 的設(shè)計：

• Unified 統(tǒng)一性，每個組件都是系統(tǒng)的一部分，并且需要積極地響應(yīng)系統(tǒng)，沒有單獨特殊的單一組件。
• Universal 通用性，Airbnb 在全球被全世界人使用，所以我們的產(chǎn)品和視覺語言需要是受歡迎的和易于理解的。
• Iconic 標(biāo)志性，產(chǎn)品的視覺和功能設(shè)計是最重要的，我們的工作必須專注于對視覺和功能給予清晰明確的定義。
• Conversational 對話性，動效在我們產(chǎn)品中是有生命的，它能讓用戶和我們的產(chǎn)品更好的交流對話。

ADS 開源庫

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

Airbnb 團隊在設(shè)計 DLS 過程中，也是通過原子組件的方式來構(gòu)建整個框架，我覺得他們對于設(shè)計系統(tǒng)的理解非常對：「一個統(tǒng)一的設(shè)計語言不應(yīng)該只是一組靜態(tài)的規(guī)則和原子組件構(gòu)成，它應(yīng)該是一個可持續(xù)發(fā)展的系統(tǒng)?！顾栽跇?gòu)建好底層的設(shè)計語言之后，可持續(xù)性、可發(fā)展性，是維護并讓設(shè)計系統(tǒng)產(chǎn)生價值的重點。

4. Ant Design

隨著商業(yè)化的趨勢，越來越多的企業(yè)級產(chǎn)品對擁有更好的用戶體驗有了進一步的要求。帶著這樣的一個終極目標(biāo)，螞蟻金服體驗技術(shù)部經(jīng)過大量的項目實踐和總結(jié)，逐步打磨出一個服務(wù)于企業(yè)級產(chǎn)品的設(shè)計體系 Ant Design?；凇复_定」和「自然」的設(shè)計價值觀，通過模塊化的解決方案，降低冗余的生產(chǎn)成本，讓設(shè)計者專注于更好的用戶體驗。

設(shè)計價值觀

自然，讓人機交互行為更自然。

自然規(guī)律運用到設(shè)計中，自然界的方方面面都會對用戶行為產(chǎn)生深遠影響，設(shè)計者應(yīng)該從其中汲取靈感，并運用到當(dāng)下的設(shè)計工作中。螞蟻金服已做了部分探索，并將追求「自然」作為未來持之以恒的方向。

自然的人機交互核心：節(jié)能。既要節(jié)省身體運動的體力，更要節(jié)省大腦思考的腦力。

那么如何在設(shè)計中體現(xiàn)呢？

• 保持統(tǒng)一性，減少用戶學(xué)習(xí)成本，降低用戶思維耗能。「Don’t make me think」一個道理。
• 隱喻映射，操作行為符合用戶的心智模型，提升產(chǎn)品易學(xué)性，也是減少用戶耗能的一個方向。
• 保持本能，讓用戶行為保持在本能層面，本能層面中無意識產(chǎn)生的自然情緒和行為，容易讓用戶達到心流狀態(tài)。讓用戶更順暢完成任務(wù)，產(chǎn)生愉悅感。

確定，保持克制、對象設(shè)計方法、模塊化。

設(shè)計者需要做出更好的設(shè)計決策，給予研發(fā)團隊一種高確定性、低熵值的研發(fā)狀態(tài)。同時，不同設(shè)計者在充分理解業(yè)務(wù)訴求后，基于 Ant Design 體系都會有相同且符合當(dāng)前業(yè)務(wù)特性的設(shè)計產(chǎn)出。

給予用戶確定感，結(jié)合 Ant Design 的三個關(guān)鍵點，可以總結(jié)為邊界和規(guī)則 2 個方面：

• 設(shè)定邊界，專注于最重要的界面和功能點來組件系統(tǒng)。
• 制定規(guī)則，所有元素抽象為使用者都可理解的類似于「原子」的對象，并且將對象再組件成「模塊」，進行打包封裝，在內(nèi)容和規(guī)則上都給予確定性。

構(gòu)建米莊設(shè)計系統(tǒng)的目標(biāo)是什么？

構(gòu)建米莊設(shè)計系統(tǒng)的目標(biāo)是什么？

• 輕量
• 一致

意義

有了規(guī)范和控件庫，設(shè)計師在接受需求的時候，可以減少設(shè)計成本，提高設(shè)計效率，尤其是在用于快速迭代產(chǎn)品的階段，通過大量的標(biāo)準(zhǔn)化組件即可實現(xiàn)縮短設(shè)計周期的效果，并且設(shè)計師可以更專注于深耕體驗和細節(jié)，同時能保證高質(zhì)量的輸出。

構(gòu)建一個設(shè)計系統(tǒng)來支撐產(chǎn)品的所有業(yè)務(wù)線，解決團隊協(xié)作一致性問題，產(chǎn)品的周期性更新問題，解決不同的設(shè)計師和工程師規(guī)范性輸出 UI 的問題，最終從設(shè)計驅(qū)動商業(yè)的層面上，解決用戶體驗一致性，迭代開發(fā)的問題。

如何來構(gòu)建設(shè)計系統(tǒng)？

1. 項目啟動基礎(chǔ)三要素

時間

APP 進入穩(wěn)定發(fā)展階段，也完成了基礎(chǔ)功能的開發(fā)，在業(yè)務(wù)穩(wěn)定發(fā)展的前提下，構(gòu)建已有 APP 的整體框架，規(guī)范前端開發(fā)和設(shè)計流程是個好時機。在產(chǎn)品發(fā)展到穩(wěn)定階段、參與的人越來越多時，對整個 APP 的頁面整理是非常有必要的。也為了后續(xù)快速發(fā)展的業(yè)務(wù)起到完整系統(tǒng)地支撐能力。

人力

相信幾乎在所有的公司和團隊，規(guī)范建立都是非常有價值，也非常耗費資源的一件事。你可以一天抄一套亮麗炫酷的 UI kit，但是你沒法一天上線一套系統(tǒng)。沒有上線落地的視覺規(guī)范只是耍流氓。所以項目啟動的時候，團隊分工必須明確，你們是一條船上的人了。勢必要有劈浪前行，破釜沉舟的決心。

場景

所以在項目開始之前，便需要和整個團隊統(tǒng)一目標(biāo)意義：視覺規(guī)范的建立，除了保障統(tǒng)一的用戶體驗和認知，還能夠通過工程師代碼層面的組件化提高開發(fā)、設(shè)計效率。整個設(shè)計系統(tǒng)的開發(fā)，從設(shè)計到落地，需要產(chǎn)品、設(shè)計和前端的全力支持。

2. 項目啟動基礎(chǔ)框架

雞生蛋問題

即使我們看了很多設(shè)計系統(tǒng)范例，甚至也下載了很多 UI KIT 的源文件來做參考。我們依然無法確定第一步需要做什么。當(dāng)我們還沒有組建一個 UI kits 組件庫的時候是如何來搭建一個頁面的呢？是先有了組件，然后創(chuàng)造了模塊頁面；還是先設(shè)計了頁面，然后再來歸納總結(jié)出頁面匯總的元件呢。這和先有雞還是先有蛋的問題有所相似。

原子理論

在學(xué)習(xí)其他公司如何搭建設(shè)計系統(tǒng)的時候，我們了解到了 Brad Frost 的原子設(shè)計理論。他提出了原子設(shè)計原則，并且在他的文章中有一句非常出名的引用：

we’re not designing pages, we’re designing systems of components.──Stephen Hay

概念

2013 年網(wǎng)頁設(shè)計師 Brad Frost 從化學(xué)中受到啟發(fā)：原子（Atoms）結(jié)合在一起，形成分子（Molecures），進一步結(jié)合形成了生物體（Organisms）。于是提出了原子設(shè)計方法論，由原子、分子、組織、模板和頁面共同協(xié)作以創(chuàng)造出更有效的用戶界面系統(tǒng)的一種設(shè)計方法。

原子設(shè)計的五個階段

原子（Atoms）：符號，為頁面構(gòu)成的基本元素。例如顏色、字體，或是一個圖標(biāo)等。

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

組織（Organisms）：模塊，由原子及分子組成的相對復(fù)雜的組織，在 UI 頁面中可視為模塊/樣式層級。

模板（Templates）：原型，將以上元素進行排版，顯示設(shè)計的底層內(nèi)容結(jié)構(gòu)，在 UI 設(shè)計中對應(yīng)的是原型圖層級。

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

特點：

• 一致：組件可復(fù)用性高，減少重復(fù)設(shè)計開發(fā)成本，體現(xiàn)一致性原則。
• 清晰：原子理論提出來的層級結(jié)構(gòu)偏向于結(jié)構(gòu)思維，層層遞進，邏輯清晰，使構(gòu)建的所有頁面形成一個系統(tǒng)。
• 效率：系統(tǒng)化的構(gòu)建方式，易于拓展和維護，不僅方便設(shè)計師思考頁面的和諧性，也可以讓工程師、品質(zhì)檢驗清楚頁面的邏輯架構(gòu)及變化，降低溝通成本。

從 Brad Frost 的原子設(shè)計理論得到啟發(fā)，將我們 APP 產(chǎn)品的所有頁面都整理了出來，我們歸納出了組成這些頁面的常用組件。這個詳盡的庫幫助我們以一種更合理的方式構(gòu)建了一個設(shè)計系統(tǒng)的底層框架。

這個理論提出來以后就產(chǎn)生了非常大的轟動。并且至此以后 Atomic Design（原子設(shè)計）成為了構(gòu)建 Design System 的核心指導(dǎo)理論。

Sketch工具

Brad Frost 在 2014 年提出來：「使用 Sketch 的 Atomic Design 是產(chǎn)品設(shè)計的未來。」我們可以使用 Sketch Library 功能實現(xiàn)組件庫的創(chuàng)建。而組件庫的底層邏輯就是原子設(shè)計理論。Sketch 中的 symbols、textstyles、color styles、Layer style ，來構(gòu)建組件和樣式。

Text style：Text Style 用于設(shè)置文字規(guī)范，在一個系統(tǒng)中包含大量的文本樣式，并且擁有不同的文本屬性。使用字體樣式來管理一個系統(tǒng)中的字體樣式，可使之便于管理和修改，保持系統(tǒng)的可持續(xù)性和可用性。并且可單獨輸出字體樣式系統(tǒng)進行團隊之間，不同項目之間的共享。

Layer Style：可編輯元素的各種樣式，比如用于制作顏色規(guī)范，涵蓋填充顏色、描邊顏色、內(nèi)外陰影、模糊效果等內(nèi)容?？墒乖乇３忠恢碌膱D層樣式。

symbols：設(shè)計系統(tǒng)中的任何元素都使用 symbols 來形成符號，可復(fù)用、可嵌套、可批量修改，非常靈活化、輕量化。并且將符號進行嵌套組合，可形成符號嵌套，作為模塊來使用。symbols 在使用過程中如果使用「/」來命名，那么會形成符號嵌套層，作為不同符號組件的分層。同樣的對于 symbols，可使用縮放工具，來靈活適配各種不同的界面需求。

Library：Library 是所有元素、文字樣式、圖層樣式等組合的一個組件庫，可通過共享形式，來使它成為團隊的設(shè)計工具。輕松訪問次庫中的所有元素和樣式，并且始終可同步接受更新，保持一致和的文件狀態(tài)。

3. 實施項目計劃

在確定了原則和工具之后，我們?yōu)樵O(shè)計系統(tǒng)項目制定了完整的項目計劃，因為涉及到上線和設(shè)計兩大塊，所以項目也是分設(shè)計線和落地線，兩條線既有關(guān)聯(lián)性，又是相對獨立和分離的。組件設(shè)計完成以后才可上線落地，因推動落地的過程是需要整個設(shè)計開發(fā)團隊的，不管是從時間還是人力上的資源協(xié)調(diào)和配合，所以落地線需要更加靈活。

設(shè)計階段 – 設(shè)計線

目標(biāo)結(jié)果 – 設(shè)計資產(chǎn)

設(shè)計階段，我們所產(chǎn)出的設(shè)計資產(chǎn)包括設(shè)計價值觀，設(shè)計指導(dǎo)原則，以及設(shè)計模式（解決方案）。

展開實施 – 任務(wù)細分

確定了設(shè)計資產(chǎn)以后，我們將設(shè)計資產(chǎn)進行細分。整理規(guī)范的內(nèi)容并對每個組件進行優(yōu)先級的確定。整理規(guī)范內(nèi)容的過程也是一個逐漸完善的過程，第一次整理可能并不完善，但是沒有關(guān)系，先把基礎(chǔ)框架和內(nèi)容整理好，后續(xù)在設(shè)計過程中有遺漏的再進行添加。

內(nèi)容整理好以后，我們會發(fā)現(xiàn)一套規(guī)范里內(nèi)容非常多，所以需要根據(jù)項目時間來安排所有內(nèi)容的優(yōu)先級和分工。根據(jù)我們的設(shè)計系統(tǒng)的底層邏輯，所以我們將核心組件建設(shè)放在第一階段，比如字體、顏色、icon 等。構(gòu)建了基礎(chǔ)元件以后再來搭建模塊，最后再根據(jù)不同場景來確定樣式。至于分工，最好整個設(shè)計團隊的人員都可參與，互相分擔(dān)工作量以達到工作效率最大化。

整體內(nèi)容確定以后，因每個組件的整理有規(guī)范可循，所以我們針對每個組件的設(shè)計過程也確定了單個組件的設(shè)計流程。

過程跟進 – 關(guān)鍵節(jié)點

在設(shè)計過程中，我們也需要對關(guān)鍵時間節(jié)點的項目整體進程和結(jié)果輸出總結(jié)。此階段是和上線的項目節(jié)點重合的關(guān)鍵點，設(shè)計輸出的內(nèi)容會和上線過程有非常多的磨合，一個組件的落地還需要不停的和開發(fā)溝通，收集反饋意見，并且進行調(diào)整修改，記錄解決問題。

執(zhí)行復(fù)盤 – 結(jié)果驗證

在每個組件的設(shè)計過程中，我們都會反復(fù)完善每個組件的內(nèi)容，包括設(shè)計原則、交互細節(jié)以及應(yīng)用場景等。反復(fù)去驗證組件的可行性。并且對階段性完成的設(shè)計結(jié)果進行復(fù)盤和分享，進一步來驗證設(shè)計方案的可行性。規(guī)范需要不停地優(yōu)化創(chuàng)新，才能讓它的可持續(xù)性特性發(fā)揮至最大。

上線階段 – 落地線

沒有上線落地的視覺規(guī)范只是耍流氓。

設(shè)計師自嗨并無意義。推進的過程，最重要的還是溝通。溝通的內(nèi)容包括組件輸出的合理性、開發(fā)工作量、產(chǎn)品版本迭代需求計劃等。

愿望如此之美好，現(xiàn)實如此之貧瘠。

設(shè)計從落地到上線的過程想必每個設(shè)計師都有大把心得。在公司中實際的推進是非常難的，因為產(chǎn)品需求永遠都做不完，開發(fā)永遠在寫代碼，設(shè)計永遠需要將先完成業(yè)務(wù)需求設(shè)計為前提。所以如何將設(shè)計規(guī)范的內(nèi)容插進項目中是個最關(guān)鍵的點。

存在問題，根據(jù)項目的時間安排和產(chǎn)品迭代安排，我們試圖將不同優(yōu)先級組件的內(nèi)容分配到不同的產(chǎn)品迭代中。實際卻證明這非常的理想化。在這個過程中我們遇到非常多的問題：

• 沒資源：產(chǎn)品的功能需求非常多，項目那么多，開發(fā)根本沒有時間來做視覺規(guī)范的內(nèi)容。
• 風(fēng)險大：即使只是修改一兩個組件的內(nèi)容，在開發(fā)過程中卻涉及到幾十個頁面的修改，導(dǎo)致整個 APP 的不穩(wěn)定性以及每次修改都會涉及到巨大且重復(fù)的測試資源。
• 感知弱：組件開發(fā)完成上線以后，不像頁面，新功能等可明顯讓大家感知到它的變化，規(guī)范性的內(nèi)容都是系統(tǒng)性的量變和體驗上的感知，單點的結(jié)果成就感是比較低的。

解決方案：

APP 在建立的時候沒有規(guī)范性，所以現(xiàn)在想要規(guī)范所有的內(nèi)容就是一個非常巨大的工程。就像沒辦法一口吃掉一整塊蛋糕一樣。

• 拆分：大目標(biāo)拆分成小目標(biāo)，根據(jù)迭代來實現(xiàn)部分組件先后上線策略。我們將一整塊蛋糕再切成 8 塊，發(fā)現(xiàn)還是有點大，那么再繼續(xù)切，切成 12 塊，24 塊。細化到每個組件以及每個涉及到更改的頁面。
• 克制：保持克制是對邊界的一個限定。設(shè)計者在保持克制的狀態(tài)下去做一個更好的決策。米莊為了降低改動的風(fēng)險，盡量和線上的元素保持一致。創(chuàng)新和趨勢設(shè)計固然很好，但是在環(huán)境允許下，先保持克制完成目標(biāo)為第一原則。
• 強調(diào)：體驗層的確是靠感知來體現(xiàn)它的精髓，而在推進的過程中，讓整個團隊在每個需求評審的過程中都對視覺規(guī)范有感知和重視，人人都增加參與感。

我們的核心組件在產(chǎn)品迭代中完成上線以后，將剩余的組件規(guī)劃至開發(fā)的重構(gòu)版本中進行開發(fā)。減少資源的重復(fù)使用，以及最大化降低對 APP 的影響。我們衡量了利弊之后，決定此次規(guī)范的設(shè)計對于樣式的修改減少到最少，保持和線上內(nèi)容的一致性。很多時候我們設(shè)計師對于設(shè)計趨勢是很敏感以及非常想要去創(chuàng)新的，但是基于現(xiàn)狀下保持對樣式的克制完成基礎(chǔ)體系的搭建這個核心目的，是最重要的事。

如何驅(qū)動業(yè)務(wù)

MIZ Design 的設(shè)計資產(chǎn)中設(shè)計價值觀是貫徹整個產(chǎn)品的迭代發(fā)展，是產(chǎn)品持續(xù)迭代的指明燈。設(shè)計原則是團隊成員建立設(shè)計的標(biāo)準(zhǔn)指導(dǎo)規(guī)范；設(shè)計資源庫貫徹設(shè)計師、開發(fā)和產(chǎn)品，實現(xiàn)產(chǎn)品迭代。我們也非常愿意分享這個過程，希望對大家建立設(shè)計規(guī)范整個流程有所幫助。

1. 設(shè)計價值觀 – 指導(dǎo)設(shè)計

When your values are clear to you,making decisions becomes easier.──Roy Disney

當(dāng)你認清自己的價值觀和行為準(zhǔn)則后，決策就輕而易舉了。價值觀是指明燈，貫徹整個產(chǎn)品系統(tǒng)。我們根據(jù)米莊品牌的特性，以及業(yè)務(wù)場景的需求來定義 APP 的設(shè)計價值觀，指導(dǎo) MIZ Design 的設(shè)計語言的建立。

品牌特性

米莊的品牌理念在于科技金融，小額惠普，以簡單可靠的價值觀來驅(qū)動業(yè)務(wù)增長。

業(yè)務(wù)場景

米莊作為金融工具類產(chǎn)品，功能操作場景不算復(fù)雜，強調(diào)一致性的用戶體驗和安全規(guī)律的操作路徑。這也體現(xiàn)了產(chǎn)品對于不同頁面元素之間的相互關(guān)聯(lián)性和一致專業(yè)性的要求。

用戶調(diào)研

結(jié)合我們進行的用戶調(diào)研報告，米莊產(chǎn)品的核心用戶對我們產(chǎn)品的需求是賺取零花錢居多，也就是利益的獲取。所以針對明確的用戶目標(biāo)，我們對于整個產(chǎn)品的設(shè)計需要以產(chǎn)品可操作性、性為第一原則，呈現(xiàn)的視覺層以安全可靠，清晰明確為風(fēng)格導(dǎo)向。

從以上三個方向，我們概括了設(shè)計價值觀核心的三點：

• 自然：自然和諧，有序有趣。
• 信任：真實明確，安全可靠。
• 效率：輕量，操作便捷。

2. 設(shè)計原則 – 規(guī)范邊界

格式塔心理學(xué)

心理學(xué)的完形法則：相似、相近、封閉、簡單。

MIZ Design 的設(shè)計原則參考了格式塔心理學(xué)，取人和萬物交流的過程中，大腦最基礎(chǔ)的一些精神反射和行為操作，格式塔心理學(xué)的理論主張研究意識和行為，強調(diào)經(jīng)驗和行為的整體性，這也符合了米莊的設(shè)計價值觀里關(guān)于效率和自然的定義。所以我們參考此心理學(xué)來幫助團隊順暢地溝通，減少信息不對稱以及學(xué)習(xí)成本，作為協(xié)作的基礎(chǔ)。

第一性原理

• 找到一個簡單的、基本的道理；
• 非常嚴格地按照這個道理行事。

埃隆·馬斯克非常推崇的思維模式是 「First principle thinking」，也就是「第一性原理」。它是一種演繹法思維，自上而下來看，就是從原理出發(fā)，一步步往前推演，直到找出適合該問題的解決方法。自下而上反推，那么它的原則便是從結(jié)果出發(fā)，把事物分解成最基本的組成，看透事物的本質(zhì)，從源頭解決問題。這和原子設(shè)計理論也非常有相通性。巴菲特的伙伴查理·芒格也是第一性原理的積極實踐者，他將此原理視為科學(xué)界和商界非常古老的一條守則。

奧卡姆剃刀原理

Entities should not be multiplied unnecessarily.

如無必要，勿增實體。

• 簡化組織結(jié)構(gòu)
• 關(guān)注核心價值

奧卡姆剃刀定律是由英國奧卡姆的威廉所提出來的。他提出「切勿浪費較多東西去做，用較少的東西同樣可以做好的事情」，也叫簡約法則，是一種迅速決策和判斷認知行之有效的工具之一。可以簡單理解為保持事物的簡單性。在各個學(xué)科，各個研究領(lǐng)域都有發(fā)展。這個原則至少可以追溯到亞里士多德，他寫到：「Nature operates in the shortest way possible」，自然作為一個穩(wěn)定的，持續(xù)自我生長的系統(tǒng)，發(fā)展原則是盡量保持簡約之道。

3. 設(shè)計資產(chǎn) – 業(yè)務(wù)賦能

設(shè)計資產(chǎn)層面，我們輸出的內(nèi)容包含了以下兩大部分：

• MIZ UI KIT_3.0 LIBRARY
• MIZ UI KIT 說明文檔

MIZ UI KIT_3.0 LIBRARY：

• 字體系統(tǒng)
• 調(diào)色板1.0
• 組件庫
• 樣式庫

MIZ UI KIT 說明文檔：

• 組件說明文檔
• 設(shè)計過程說明文檔

開發(fā)層面 – 溝通，減少重復(fù)

基于 UI kit 創(chuàng)建的組件庫，幫助他們在最終產(chǎn)品中保持代碼的一致性和復(fù)用性。并且設(shè)計語言作為一種工具，是整個團隊順暢溝通的最重要的語言。所以我們確保我們的設(shè)計語言，是能夠讓開發(fā)，產(chǎn)品都懂，并在第一時間執(zhí)行的。既然是語言，那么每個元素都會有自己的名字。每個組件，甚至每個組件中不同屬性的元素我們也賦予它名字。

無名萬物之始，有名萬物之母。──《道德經(jīng)》

我們的祖先發(fā)明語言文字的過程，其實就是一個給萬事萬物命名的過程。而名字是連接人和世界的渠道。名字也是主觀的，因此它有情感溫度，也會有文化偏見和個人信息資產(chǎn)的反應(yīng)。所以我們需要給設(shè)計系統(tǒng)中的每一種組件都給予屬于它的名字，才能讓它成為一種專屬于你們產(chǎn)品的特殊語言。

場景：

開發(fā)：#000和#00000000分別替換成什么顏色？

設(shè)計師：#000，替換成 black-1

開發(fā)：那#00000000呢？

設(shè)計師：一臉茫然，這 2 個不是一個顏色嗎？

慣性思維，色值在設(shè)計師眼中，對應(yīng)的是一種色彩，而在開發(fā)眼中只是一堆數(shù)字。將心比心，當(dāng)你扔給開發(fā)一個色值的時候他們只是一個難過的問號；而當(dāng)你給他們具體的一個顏色的名字，他們能馬上對應(yīng)到這個名字，那么就是順暢的。

所以當(dāng)我們給顏色命名以后，溝通就變成了以下這樣：

設(shè)計師：#ff5600 換成 orange-2。

開發(fā)：好的。修改完成。

設(shè)計師：#ff3450 全部替換成 blue-2。

開發(fā)：好的，替換完成。

設(shè)計師：這次我們品牌升級，orange-2 的色值更改為 #ff5666。

開發(fā)：好的。全局修改完成。

雖然修改的過程比較辛苦，但是結(jié)果是好的。從此設(shè)計師掌握了話語權(quán)。當(dāng)然，開發(fā)也很高興。

不單單是色彩，我們對字體、icon 以及間距等也定義了尺寸。給抽象事物以不同的命名來賦予它意義，也能讓使用者使用它產(chǎn)生價值。

設(shè)計層面 – 輸出，快樂傳承

設(shè)計師們可以更加便捷地創(chuàng)建、分享、定義設(shè)計界面的內(nèi)容。此外，在設(shè)計傳承方面，也能讓我們更好地將設(shè)計原則傳遞給新人。

場景：

設(shè)計師 a：此次版本迭代涉及到優(yōu)惠券頁面的優(yōu)惠，這個頁面的字體和顏色有規(guī)范嗎？

設(shè)計師 b：有的。請參照設(shè)計規(guī)范。

不同設(shè)計師在接到需求開始設(shè)計以后會擔(dān)心：怕風(fēng)格有差別，怕頁面不統(tǒng)一。辛苦做好頁面以后發(fā)現(xiàn)和別的設(shè)計師同時做的差別很大，也不符合產(chǎn)品整體品牌調(diào)性，陷入循環(huán)改稿中。此時設(shè)計規(guī)范就是迭代的明燈，天上的北斗七星，指引方向讓你不偏離終點。

同步更新：設(shè)計資產(chǎn)的目標(biāo)用戶，除了團隊中的前端開發(fā)，那么最大受益者其實就是設(shè)計師們。設(shè)計系統(tǒng)的一大優(yōu)點便是修改設(shè)計系統(tǒng)中任何一個原子，整個系統(tǒng)所有這個原子都能感知到。這便是設(shè)計系統(tǒng)的可持續(xù)性、統(tǒng)一性，也是設(shè)計系統(tǒng)的基礎(chǔ)。

△ 組件庫中的任何修改，會同步到所有使用該庫的文檔中

自定義內(nèi)容：組件中的內(nèi)容都可自定義進行修改。

解放重復(fù)生產(chǎn)力

Here’s the simple truth: you can’t innovate on products without first innovating the way you build them. ──Alex Schleifer

這句話的道理和我們的設(shè)計原則中第一性原理相通，從原理出發(fā)，一步步往前推演，直到找出適合該問題的解決方法。這和在構(gòu)建設(shè)計系統(tǒng)的時候是一個道理。學(xué)習(xí)從元認知能力開始，而組件一個系統(tǒng)，從元件開始。埃隆·馬斯克從組成汽車的發(fā)電機開始思考，創(chuàng)辦了特斯拉；從底層元素的創(chuàng)新開始，才會有產(chǎn)品整體性的創(chuàng)新。

最后補充一下結(jié)構(gòu)圖：

藍藍設(shè)計( sillybuy.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)。

如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里

藍藍設(shè)計( sillybuy.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計

如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里

名片，是品牌傳遞的重要工具，但往往被人忽視。雖然紙質(zhì)的名片幾乎已被微信媒介所取代，但是作為設(shè)計師更不應(yīng)該放棄這種貌似不重要的設(shè)計。

相反，越簡單的設(shè)計，更考驗設(shè)計能力。一張名片，可以看出一個人是否真的懂得設(shè)計，因為里面包含太多基本功了。如果連一張簡單的名片都做不好，更不要說其他的設(shè)計了。

藍藍設(shè)計( sillybuy.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計

如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里

那關(guān)于loading動畫相關(guān)知識，我覺得對于設(shè)計師來說是有必要去了解的，所以我找到了這篇優(yōu)秀文章，讓大家能夠深入了解loading動畫，透過現(xiàn)象看本質(zhì)，學(xué)以致用。

圖片來源：Domaso

沒有人喜歡等待

在用戶心目中，優(yōu)秀的應(yīng)用、工具、網(wǎng)站都應(yīng)該是制作精良且能快速響應(yīng)他們需求的產(chǎn)品。

舉一個真實的例子：最近我們新發(fā)布了一個用戶評價的應(yīng)用，第一個版本并不完美，loading延遲在2-3秒。

你猜怎么著？

很多人認為這3秒是一個故障。在實際開發(fā)中，你可能要面對龜速的網(wǎng)絡(luò)，沒有優(yōu)化的代碼，操作時間長或數(shù)據(jù)處理太多等問題。因此，App的運行速度可能沒有用戶預(yù)期中的那么快。雖然早期用戶可能會給你的產(chǎn)品第二次機會，但絕大多數(shù)人會立即退出它。

除非你的產(chǎn)品界面對用戶的行為提供了明確的即時反饋。剛才發(fā)生了什么？是操作錯誤還是在等待服務(wù)器的請求？用戶需要等待多長時間才能正常使用這個工具或網(wǎng)站？用戶為什么要等待呢?

讓我們一起深入了解Loading動畫：

1、loading動畫的歷史由來

2、優(yōu)秀loading動畫所具備的特征

3、細節(jié)可以做出精彩

4、簡單處理還是精心制作

loading動畫的歷史由來

對于這種類型的反饋，設(shè)計師會使用進度條、loading示意圖、預(yù)loading、或旋轉(zhuǎn)器。它們向用戶解釋什么時間發(fā)生了什么或正在loading的過程，以減少用戶的心理焦慮。

你覺得設(shè)計師是從什么時候開始考慮加上這種反饋的？

我很驚訝的看到關(guān)于Nielsen Norman的一篇文章，提到響應(yīng)時間和loading動畫是在1993年（參考1985年的資料）：

如果計算機無法提供快速響應(yīng)，則應(yīng)該以百分比的形式向用戶提供持續(xù)反饋?！綧yers 1985 論文，“計算機-人機界面百分比進度指標(biāo)的重要性”】

顯示進度的三個主要優(yōu)點：向用戶保證系統(tǒng)沒有崩潰且正在處理他們的問題；告訴用戶還需要等待多久時間，讓用戶能騰出時間來做其他的事而不只是干等；甚至可以向用戶提供一些可以閱讀和查看的內(nèi)容，減少等待的焦慮?！?Jakob Nielsen, on January 1, 1993

自從Web 1.0以來，幾乎每個網(wǎng)站都有l(wèi)oading狀態(tài)，用戶可以注意到當(dāng)頁面內(nèi)容正在loading時，這些Loading動畫活躍的身影。

在2007年的時候，網(wǎng)站的Loading形式大概是下面這張圖上的樣子：

2007年時的Loading

在那個年代，你可以找到像Firewoks(2007)、Flash (2008) 或者Loading GIF Generator （2009）這樣的工具來做這些 loading動畫。

到了2010年，隨著CSS3的迅猛發(fā)展，出現(xiàn)了很多教程教大家如何做CSS3動畫，也能找到大量的loading 動畫預(yù)設(shè)包。設(shè)計師也可以在Ps cs5中做這種loading動畫，這個在10年前是非常流行的。

在那時，Loading動畫更像是web的專屬問題，因為頁面loading確實是一個問題。在2010年的時候，很多Flash網(wǎng)頁都做了一些很有創(chuàng)意的loading動畫：

30個創(chuàng)意Flash loading案例（https://web3mantra.com/2010/09/08/30-creative-flash-preloaders-examples/）

漸漸地，設(shè)計師們開始不滿足于簡單的進度條和旋轉(zhuǎn)Loading，到2014年-2016年的時候，變得更加關(guān)注這塊的設(shè)計。所以，你能發(fā)現(xiàn)更多關(guān)于loading教程，免費的Loading設(shè)計資源，插件和開源項目。

2016年出現(xiàn)的Material Design loading(http://www.qooqee.com/news/muse-preloader-widget-tips)

設(shè)計趨勢和方法已經(jīng)發(fā)生了變化，但向用戶提供有效反饋的原則依然需要遵循。

優(yōu)秀loading動畫所具備的特征

在一個完美的世界里，loading動畫應(yīng)該：

盡可能少的顯示給用戶

如果你的工具或網(wǎng)站工作的足夠快，那就是非常完美的?；蛘咧辽僖沟盟鼈兊乃俣确嫌脩舻念A(yù)期，顯示好看的loading動畫只是一個緩兵之計，等待太久了一樣會惹惱用戶。所以，首先應(yīng)該是解決內(nèi)容的loading問題。

給出具體時間

它可以是一條簡單的文本信息，告知大致的等待時間，也可以是可視化的圖形來表示?？偣采蟼髁硕嗌傥募?？更新需要多少分鐘？已經(jīng)進行到了什么階段？這些體驗上的設(shè)計細節(jié)都可以給用戶預(yù)期并減少焦慮。

宇航員數(shù)據(jù)loadingby Cream M.

告訴用戶為什么需要等待

一些應(yīng)用的loading過程，通常讓用戶不大容易理解。一個好的Loading動畫，應(yīng)該要告知用戶等待的原因以及等待的背后軟件正在做什么：

文件獲取動畫 by Vinoth

讓我們說回我的案例，那個反饋工具軟件。當(dāng)我們的等待時間超過1秒時，我們決定給這段等待時間增加一段解釋。動畫說明應(yīng)用目前正在處理截圖資源，這清晰的表明，我們的工具沒有崩潰，它只是正在處理請求：

好的loading動畫

讓等待的過程不那么讓人無聊

可以放一個有趣的動畫來吸引人，讓用戶的眼睛始終保持忙碌。

動畫來源：Alex Kunchevsky

減少用戶等待時間的心理感知

這與上面提到的一點非常相關(guān)，如果你在等待的過程中發(fā)現(xiàn)了一些能夠吸引用戶注意力的東西，那么感覺上時間就會過得更快。它可以是一個引人注目的色彩搭配，有趣的想法，或者是一個什么特別的東西。

蛋糕loading by Pierre Kleinhouse

透傳公司品牌形象

如果用戶在用你的應(yīng)用或者網(wǎng)站時會有一段等待時間，為什么不機智的利用好這段時間呢？我不建議僅僅只是為了做loading而做一個loading動畫或者去在動畫里使用一些心理學(xué)技巧。我覺得最好是將品牌的聲音融入整個Loading動畫中，讓它成為一個非常重要的設(shè)計細節(jié)：

BCG的車票應(yīng)用動畫 by Antonin

細節(jié)可以做出精彩

雖然有些人可能會認為Loading只是一個很小的UI細節(jié)，但它其實也有許多類型和變化。一般來說，我把loading動畫分為幾類，進度條，無限循環(huán)的loading圖和骨架圖。

進度條

當(dāng)可以明確loading時間時使用，進度條可以通過數(shù)字或視覺化的形式來表現(xiàn)。

有數(shù)字進度的，有時也稱為百分比指示符。他們可以簡單直接，也可以很有創(chuàng)意，需要對你的用戶業(yè)務(wù)表達更有效：

一個app loading頁 by Nguyen Tran

你也可以找到有趣的進度條和循環(huán)動畫結(jié)合的loading圖。

Loading動畫by Dragonlady

進度條背后的主要思想是顯示一個操作將花費多長時間以及目前所處的狀態(tài)。根據(jù)UI需求的不同，進度條也可以是線性的，沒有百分比的形式。

想想Gmail，它沒有顯示進度百分比，但是用戶同樣可以感覺到加載的進度。下面是兩個簡單而又創(chuàng)意的例子：

Gamil loading和一個創(chuàng)意loading動畫 by  Allen Zhang

無限loading動畫

當(dāng)loading的時間是未知的時候來使用，它可以是默認的旋轉(zhuǎn)圖，也可以是一些創(chuàng)意動畫，顯示應(yīng)用正在做一些事情。

計算loading圖標(biāo) by Hoang Nguyen

創(chuàng)意性loading動畫一樣可以與業(yè)務(wù)緊密相關(guān)，并幫助支持品牌發(fā)聲。請思考下那些應(yīng)用會使用這種loading動畫？

LittlePin Spinner by Daniel Sofinet

無限循環(huán)動畫要求用戶在上傳或執(zhí)行某些操作時等待，但不要求具體需要多久時間，它們可能會非常簡單或非常有創(chuàng)意。

Loading cat by domaso. So cute!

Infinity by Eszter Balogh. 看起來非常有趣，但是你并不想他們永遠不停下來。

如你所見，如今的loading動畫不僅僅只是一個系統(tǒng)狀態(tài)的UI元素。

骨架動畫

骨架動畫展示了loading頁面的變化過程，你可以把它理解為開始是一些頁面占位圖，逐步加載上一些可見的圖片，文本和其他內(nèi)容。

這個詞最早出現(xiàn)在Luke Wroblewski 的文章中，Luke建議使用骨架動畫來獲得更好的loading體驗。這個想法得到了其他設(shè)計師的支持，并在Facebook、Linkedln、YouTube, Google Drive 等用戶界面中得到了應(yīng)用。

舉個栗子，如果你使用的是網(wǎng)頁設(shè)計工具Figma，你會在頁面頂部看到一個進度條，同時還在逐步loadingUI：首先你會看到占位符，然后才是可用數(shù)據(jù)：

Figma UI

簡單處理還是精心制作

除了這篇文章中所展示的一些優(yōu)秀案例和Dribbble上的設(shè)計概念，在目前大多數(shù)應(yīng)用中，你可能能看到還是一個默認的Loading。

有一段時間，簡單的Loading被大眾所推崇，因為他們對于性能的影響最?。ㄓ绕涫菍τ趙eb）。使用默認的或開源的loading要容易的多，不需要設(shè)計師和開發(fā)花心思來設(shè)計和實現(xiàn)它。

如果你正在開發(fā)MVP或者項目的第一個版本，那么使用簡單的或者開源的loading動畫更符合邏輯。在這個階段，即使把loading動畫做的再怎么有創(chuàng)意，也并不會對你的產(chǎn)品有多么大的幫助，如果它不能解決真正的需求。

一些簡單的loading動畫案例

有趣的是，在2016-2019年，我們可以看到非常多精心的loading動畫。注重細節(jié)，日益成熟的設(shè)計公司，更好的科技環(huán)境，更方便的設(shè)計工具，這些都使得loading動畫變得更加富有創(chuàng)造性。如果你瀏覽Dribbble，能找到非常多超贊的Loading動畫，所以這也成了展現(xiàn)自己設(shè)計能力的一種方式。

藍藍設(shè)計( sillybuy.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)。

如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里

通過點擊、滑動、滾動和鍵盤快捷鍵來交互的日子嗎？它們不再是唯一的交互方式,一起來了解一下~

---

還記得瀏覽網(wǎng)頁時，只能通過點擊、滑動、滾動和鍵盤快捷鍵來交互的日子嗎？而現(xiàn)在，它們不再是唯一的交互方式，當(dāng)蘋果推出第一款iPhone時，多點觸控技術(shù)成為了主流，用戶們了解到，他們不僅可以在界面上指向、輕點還可以捏合、展開和滑動。手勢成為新的操作方式。

一、UI中手勢的力量

手勢非常自然和直觀，他們與真實世界反應(yīng)類似。

對于使用手勢，這里有三個主要的理由：

● 干擾少

App內(nèi)，手勢控制使用地越多，在屏幕上出現(xiàn)的按鈕就越少，這樣可以留出更多空間給更有價值的內(nèi)容。這使得app以內(nèi)容為重點，并讓用戶在沒有障礙，或者在分心的情況下也能進行最重要的操作。

● 使用簡單

一個手勢一旦被用戶發(fā)現(xiàn)和學(xué)習(xí)使用就會讓用戶在體驗感到愉悅，而且手勢可以減少步驟，來達到提高交互體驗的目的。例如，當(dāng)你需要刪除一些項目時，用“一次點擊刪除一個”的方式的很浪費時間的，但是如果使用“滑動一下，刪除一個”的滑動手勢，就更簡單快速，讓用戶更加愉悅。

● 無縫交互

雖然按鈕看起來對于觸發(fā)響應(yīng)更加有用，但手勢具有更大的潛力，使內(nèi)容的交互更加直觀。

二、手勢的缺點

但同時，手勢也存在難規(guī)范、易混淆等缺點。

● 增加用戶負擔(dān)

大多數(shù)手勢學(xué)起來或者記起來不自然也不簡單。舉個例子，在大多數(shù)APP，一個手指的手勢就對應(yīng)一件事，用兩個手指做一個同樣的手勢意味著另外一件事，其他對應(yīng)事件的手勢還有很多。

● 缺乏反饋

在大多數(shù)情況下，手勢不會留下任何路徑記錄。這意味著，如果做一個手勢但沒有得到反應(yīng)或者得到錯的反應(yīng)，這樣就只能獲得很少的信息或者不能獲得有幫助的信息去解釋為什么這么做。

● 缺乏一致性

大多數(shù)手勢在app中還不是標(biāo)準(zhǔn)統(tǒng)一的。他們對于用戶不總是顯而易見的。甚至一個簡單的滑動手勢，在眾多郵箱app內(nèi)的郵件項目中也有著不同的工作方式。例如，在Apple Mail 中，刪除一個未讀項目，你應(yīng)該向左滑動這個沒有打開的郵件，然后界面會出現(xiàn)選項來刪除這個項目。在Gmail里，向左滑動可以把郵件標(biāo)記為未讀狀態(tài)。

三、手勢成為移動端UI成功的關(guān)鍵

1.如何選擇好的手勢

如果你的界面里要使用手勢，那你就必須要去了解你所在的市場以及你的目標(biāo)用戶會去使用的app。要嘗試在你的app里使用和它們相同類型的手勢。這樣，你不僅基于你的目標(biāo)市場的用戶的行為優(yōu)化了你的界面，還讓用戶從一開始就能舒適的使用你的app。

2.手勢教學(xué)

雖然每個移動端app都必定會用到手勢，但是要讓用戶很自然的就能知道如何操作(使用什么手勢可以干什么)卻一個挑戰(zhàn)?？捎|摸的界面提供了很多條件來使用自然的手勢，例如輕點、滑動和捏合來完成任務(wù)，但是不同于圖形界面的操作，手勢的交互用戶往往是看不到的。

因此，要讓用戶能發(fā)現(xiàn)手勢是很重要的。你需要確保你提供了正確的線索----通過視覺引導(dǎo)來幫助用戶更容易的發(fā)現(xiàn)如何與界面進行交互。

3.如何在情境中教育用戶

教程和演示的做法相當(dāng)流行。在許多app中加入教程意味著要想用戶顯示一些說明內(nèi)容來介紹界面。然而，UI教程不是介紹app的核心功能的最優(yōu)雅的式。

良好執(zhí)行的UI手勢總是可以在易于實現(xiàn)視覺提示和漸進式披露的游戲中找到。這顯而易見，最好的游戲可以使人們隨著時間的推移來學(xué)習(xí)到技巧，而不是靠指導(dǎo)他們。例如，PuddingMonster 的游戲機器完全基于手勢，但是他們允許用戶得到基礎(chǔ)的信息，他們不需要做很多的猜測。他們可以展示動畫場景，讓用戶馬上知道要做什么。

四、使用動效來傳達手勢

手勢總是與移動app中的動效相關(guān)聯(lián)。動效在維護用戶體驗中起著非常重要的作用。作為設(shè)計師，你可以利用動效來傳達出用戶可以進行某個操作。當(dāng)動效與手勢一致時，用戶就會意識到自己與該物體正在相互作用。

動效在向用戶提供視覺反饋上是非常重要的。沒有動效，用戶就不能獲得足夠的信息反饋，不能確定他們是不是成功地完成了手勢動作。

這里有三種流行的基于動效來幫助用戶學(xué)習(xí)手勢。

第一種：動效視覺提示

顯示一個在執(zhí)行某個操作時如何和某一個界面元素進行交互的預(yù)覽。它的目的是在手勢和操作之間建立聯(lián)系。例如下圖中的這個游戲app是完全基于手勢操作的，這個app讓用戶不用去猜測就能知道該如何操作。用動畫來傳達功能信息能立即讓用戶清晰的知道該怎么做。

第二種：內(nèi)容的梳理

內(nèi)容梳理是通過微妙的視覺線索來暗示用戶進行手勢操作。例如下圖中卡片的展示，它表明這張卡的背后還存在著其他的卡片，這清晰的表明了可以滑動卡片。

第三種：功能可見性

你可以讓你界面里的某些元素具有很明顯的可供性來讓用戶知道這個是可以進行某種操作的。例如下圖中點擊相機icon后鎖屏就會從下往上彈起，展示出在下面的相機功能。

五、總結(jié)

手勢是一種強大的互動模式。移動設(shè)備已經(jīng)從磚塊發(fā)展到由我們手指驅(qū)動的復(fù)雜計算器。觸摸和手勢交互在使移動體驗更加簡便有趣方面，有很大的潛力。

設(shè)計一款移動端的app一定要思考手勢設(shè)計。手勢應(yīng)該起到協(xié)調(diào)和節(jié)約時間的作用。為了設(shè)計一個有意義的手勢，你應(yīng)該規(guī)定一個動作以及與其配套的一個手勢。提供反饋意見也非常重要，對于可能要進行的行動要有明確提示，并進行手勢的引導(dǎo)。

作者：young68
鏈接：https://www.jianshu.com/p/7132d7e6220f
來源：簡書
簡書著作權(quán)歸作者所有，任何形式的轉(zhuǎn)載都請聯(lián)系作者獲得授權(quán)并注明出處。

藍藍設(shè)計( sillybuy.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計

如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里

人類的大腦天生就能把規(guī)律性的散點連接起來，并對目之所及的事物賦予意義。設(shè)計是一個創(chuàng)造性的領(lǐng)域，是形式和空間的相互融合，并隨之創(chuàng)造各種各樣的體驗。無論我們接觸到什么樣的設(shè)計作品，我們的大腦都會本能地將作品解構(gòu)為更簡單的各個組件，這些組件由基本的形狀和不同的形態(tài)組成，而這些形狀和形態(tài)則與空間息息相關(guān)。過往豐富的體驗與經(jīng)歷，使得我們的腦海中充滿了各種各樣的記憶，于是我們很容易就能識別出這些特定的設(shè)計形式。

正空間，或者說顯著的設(shè)計主體，構(gòu)成了設(shè)計的「肉體」，它是你看到形狀、顏色、圖案等部分。相反，負空間多數(shù)情況下是指背景或大量留白。

文森特·梵高（Vincent Van Gogh）的這幅廣受歡迎的作品，是一個以正負空間之間有著強對比的經(jīng)典設(shè)計案例。

就像正空間似乎支配著負空間一樣，兩者都被用來平衡地傳達一個和諧、連貫的設(shè)計理念。

在平衡的構(gòu)圖中，設(shè)計的正負空間都是相互配合、相互補充的，形成一個無縫、美觀的整體。相反，不平衡的構(gòu)圖會讓觀眾感到不適，傳達出一個不完整的、扭曲的故事。

我們的設(shè)計在表達什么？

網(wǎng)頁設(shè)計的好壞很大程度上取決于它的實用性和可用性。如果你的設(shè)計技巧很差，那么網(wǎng)頁設(shè)計的整體效果和表現(xiàn)都會受到影響。但從另一個角度來看，在「內(nèi)容為王」的時代，如果空間布局使用不當(dāng)，內(nèi)容將對您的網(wǎng)站產(chǎn)生顯著的負面影響。

如果你認為你的開發(fā)技能很棒，但你的設(shè)計技能可能需要更多的改進，那這篇文章對你就太合適了。在本文中，我們將討論：

• 正負空間之間的關(guān)系、重要性及應(yīng)用；
• 空間與認知知覺的關(guān)系；
• 格式塔原理及其它在網(wǎng)頁設(shè)計中的應(yīng)用。

我們還將討論一些真實的網(wǎng)頁設(shè)計實例，探討每個案例如何體現(xiàn)格式塔原理，以及它對空間的創(chuàng)造性使用。

話不多說，一起開始學(xué)習(xí)吧。

一、正負空間的關(guān)系、重要性及應(yīng)用

空間由兩個主要維度組成：正空間和負空間。正空間是可被直接感知到的視覺元素，負空間則為元素以外的留白和間隙。如前所述，正的是物體，負的是物體后面可以通常被忽略的留白區(qū)域。一個是焦點，另一個是背景。在前者產(chǎn)生活動和刺激時，后者則保持靜止和模糊。一個是月亮，另一個是環(huán)繞著它的暗夜。

在網(wǎng)頁設(shè)計中，正負空間相互作用，共同形成構(gòu)圖，傳達理念。只有當(dāng)正負空間通過對比來區(qū)分，同時又向更大的區(qū)域延伸時，才會產(chǎn)生視覺層次（腦補一下陰陽太極圖吧）。

正負空間的交匯之處就是信息的交匯點。負空間拱衛(wèi)著正空間元素，讓后者更加突出和顯著。

通常而言，正空間在絕大多數(shù)時候起主導(dǎo)作用，實際上負空間同樣重要。負空間的優(yōu)點在于:

• 創(chuàng)建易于遵循的視覺層次；
• 吸引注意力，營造焦點，減少分心；
• 幫助營造邊界，突出焦點；
• 讓頁面更容易被掃讀；
• 使頁面看起來自然；
• 不借助外力的情況下，闡明視覺元素之間的關(guān)系；
• 有助于保持頁面干凈清爽；
• 強化網(wǎng)頁的視覺風(fēng)格和外觀。

設(shè)計中的負空間相反并不是負面的。當(dāng)正負空間比例平衡得當(dāng)時，兩者在視覺上會顯得非常舒適。而當(dāng)其中一個占據(jù)主導(dǎo)地位，并給人一種「過于擁擠」或「空洞無物」的印象時，混亂才會發(fā)生。在這兩種情況下，受眾都無法處理如此復(fù)雜的信息，因此，而這樣的空間設(shè)計是不符合網(wǎng)頁設(shè)計的基本原則和設(shè)計動機的。

這是一個網(wǎng)頁模板，它展現(xiàn)了何為「內(nèi)容錯位」和「空間混亂」:

△ 布局混亂

△ 空間失衡

△ 適當(dāng)?shù)牟季终{(diào)整

△ 網(wǎng)頁設(shè)計中空間的合理運用

有意思的是，當(dāng)談到空間的概念和布局出現(xiàn)時，質(zhì)疑聲也隨之而起。

• 是正空間被負空間包圍，還是負空間被正空間吞噬？
• 如何確定正負空間的比例？
• 兩種空間類型中，哪一個作為焦點對象？
• 是否必須突出其中一個而忽略另一個，以便向觀眾傳達設(shè)計師的預(yù)期感知？
• 我將如何通過正負空間之間的變化讓設(shè)計出現(xiàn)質(zhì)的變化？

類似的問題只能在理解基本概念后再來作答。黃金經(jīng)驗法則告訴我們——簡單是最好的策略。

在文章開頭，我曾提到在設(shè)計網(wǎng)頁的時候，盡量創(chuàng)建簡單的用戶界面，這是一舉兩得的舉措，既可以造福你自己，也可以惠及用戶?；驈谋砻嫔峡?，網(wǎng)頁設(shè)計的重點在于增加網(wǎng)站的視覺吸引力，使用戶操作更為簡便。

二、空間與認知知覺之間的聯(lián)系

我們的大腦總是在扮演偵探的角色，試圖尋找隱藏的線索和空間之間缺失的聯(lián)系。因此它會將當(dāng)前的視覺信息與之前的經(jīng)驗進行比對。為了成為一名的網(wǎng)頁設(shè)計師，你必須先了解大腦是如何感知周圍環(huán)境的。它可以幫助你選擇特定的視覺元素，利用它們來影響觀眾的感知。

偉大的設(shè)計師明白心理學(xué)在視覺感知中所扮演的強大角色。當(dāng)某人的目光與你的設(shè)計作品相遇時會發(fā)生什么？他們對你的文章所傳達的信息有何反應(yīng)？——勞拉·布什，Autodesk 品牌內(nèi)容策略師

作為設(shè)計師，你必須清楚地了解視覺設(shè)計和心理學(xué)是如何相互聯(lián)系、相互影響的。換句話說，開發(fā)以用戶為中心的簡單界面，借助正負空間進行設(shè)計主要依靠格式塔原理，它可以幫助你理解和控制視覺和心理的聯(lián)系。

三、網(wǎng)頁設(shè)計中的「格式塔原則」

格式塔在德語中是「形式」的意思。它更多的是一個概念而不是一個單純的詞匯，它最基本的概念是：

整體大于各個部分的總和?！獛鞝柼亍た挤蚩ǎ兰乱嵝睦韺W(xué)家，格式塔心理學(xué)的代表人物之一）

當(dāng)單個部分的集合以某種方式統(tǒng)一時，它們在我們的感知當(dāng)中就是一組。我們把元素看作一個整體，這一概念或理論基本適用于所有的設(shè)計媒介：我們不把文本、顏色和形狀看作單獨的元素，而是把整個網(wǎng)頁看作一個整體。同樣的道理也適用于森林：我們看到的不僅僅是一堆樹，就像我們在看海洋時看不到水滴一樣。

格式塔原則描述了當(dāng)特定的條件出現(xiàn)時，人類大腦是如何感知視覺成分的。它幫助大腦創(chuàng)造視覺圖像。因此，格式塔原理通常會應(yīng)到下面六個主要類別：

• 圖形和背景
• 接近性原則
• 對稱和秩序
• 相似性
• 封閉性
• 連續(xù)性

1. 圖像和背景

「圖形」是直觀地、明顯地與背景分離的物體。

目前最經(jīng)典的例子是圣杯——兩個鏡面對稱輪廓構(gòu)成了花瓶。當(dāng)你第一次看到這張照片的時候，你的眼睛會立即被吸引到畫面上看起來最聚焦的視覺主體上，可能是相互對立的面孔，也可能是花瓶。當(dāng)你的大腦在調(diào)整你的焦點時，背景或花瓶被模糊了，在那一刻，你的大腦直覺地在圖像中感知到背景。

過了一會兒，你會注意到背景中的花瓶，并意識到它本來就在那里。盡管圖形和基本原則看起來模棱兩可，設(shè)計師常常創(chuàng)造視覺上吸引人的超現(xiàn)實和虛幻藝術(shù)，并將之運用于網(wǎng)頁設(shè)計。

有時，圖形與背景之間的關(guān)系是穩(wěn)定的，而這種穩(wěn)固的視覺關(guān)系使得兩者之間，產(chǎn)生區(qū)別。這種關(guān)系有的時候又是不穩(wěn)定的，這意味著圖形和背景是無法清晰區(qū)分的。由于這種關(guān)系的模糊性，用戶會很自然地開始困惑。

為了讓大家直觀地感受到圖形和背景之間的關(guān)系，讓我們詳細的拿幾個案例來進行討論。這些例子都集中在圖形-背景關(guān)系中的三個主要方面：對比度、Box 區(qū)塊和陰影。這三方面涉及到諸多屬性，包括顏色、尺寸和信息量，它們關(guān)系到內(nèi)容的區(qū)分和視覺的縱深。

在下面的第一個例子中，Trellis 使用了一個全屏大圖背景，并且搭配上清晰的 CTA 元素，圖形-背景關(guān)系明確，該關(guān)系清楚地展示出了細節(jié)、色彩和尺寸上的差異。

頁面中的文字是位于中央的手寫風(fēng)格字體，與背景中的圖像相比顯得很突出。和灰色背景圖片構(gòu)成對比的白色文本是吸引用戶注意力的焦點，這使得文本在畫面中是高度可見的。從另一個角度來看，背景圖片是模糊的，所以清晰的文本會非常醒目。這些都表明，這里的文本被優(yōu)先考慮為圖形或正空間，而模糊的圖像被用作背景或負空間，從而強烈地暗示了圖形和背景之間的關(guān)系。

下一個案例是下圖方框里的內(nèi)容。 Ocean Health Index 巧妙地利用了框內(nèi)區(qū)域的內(nèi)容將圖片與背景分離開來。這是你在瀏覽他們的網(wǎng)站時看到的：

當(dāng)你第一次瀏覽這個頁面時，哪個部分會吸引你的注意力？你會發(fā)現(xiàn)，它的主要文本為白色和藍色背景構(gòu)成對比，而更加醒目的是是兩個與文字對比鮮明的 Box 區(qū)塊。前者借助了深色背景和文本色彩上的差異，構(gòu)造對比度。而 Box 區(qū)塊本身的色彩和背景色構(gòu)成對比的同時，還和更靠前的文本構(gòu)成色彩對比。

背景使用了微妙的色調(diào)，使數(shù)字得以鮮明地展現(xiàn)，并突出細節(jié)。方框的運用使它們在頁面上清晰可見。

一些網(wǎng)站還通過添加陰影來表現(xiàn)物與背景的關(guān)系，產(chǎn)生一種圖象被置于背景之上的感覺。以下截圖來自于 serious unsweet.com：

Seriously Unsweetened 的著陸頁使用了不止一種方法來保持圖形與背景的平衡關(guān)系。明亮顏色和陰影的配合；背景是純粹的白色，使得前景元素更容易從中出來。背景之上的元素都是「正空間」，圖中的物體呈現(xiàn)在背景的映襯下，有一種被置于「頂部」的錯覺。而陰影并沒有直接用在圖片和文本上，而是應(yīng)用在圖片的內(nèi)部，這讓我們注意到在主要圖像內(nèi)部還有另一層視覺元素，這意味著里面還有一層圖片-背景關(guān)系——這是一個非常智慧的設(shè)計。

2. 接近性原理

接近性是指頁面中元素之間的接近程度。網(wǎng)頁中的不同元素可以組合在一起，不同的接近程度會帶來不同的關(guān)聯(lián)屬性。除了視覺特征上的接近性之外，這些元素與其他頁面元素之間的距離接近度也會自動地在觀眾的腦海中產(chǎn)生關(guān)聯(lián)感。

從圖像到文本、導(dǎo)航欄到網(wǎng)頁表單，這種接近性原則在網(wǎng)頁設(shè)計中適用范圍非常廣。將類似的內(nèi)容組合在一起時，它將在元素之間創(chuàng)建關(guān)聯(lián)，為觀者提供更好的視覺體驗。

以下是 Mashable 網(wǎng)站導(dǎo)航顯示的運用接近度的案例：

在上方的截圖中，我們可以清楚地看到如何將相同類別的元素放在一起，以顯示它們與主菜單的關(guān)系。由于顏色和文本大小的選擇，使觀者的目光自動被吸引到主標(biāo)題下的子欄目上。

除了導(dǎo)航欄外，基于網(wǎng)格的內(nèi)容也符合黃金比例的接近性。亞馬遜的產(chǎn)品列表就是最好的例子：

這個案例體現(xiàn)的是接近性還是相似性還有待討論。如你所見，具備視覺接近性的同類產(chǎn)品使用狹窄的留白進行分組和分隔。這種接近性會指示用戶在類似的產(chǎn)品列表中，對其目標(biāo)產(chǎn)品基于購買偏好進行排序。此外，封閉性原則也在類似項目的清單中發(fā)揮了作用。

現(xiàn)在，我們來仔細看看 Basecamp 的網(wǎng)頁表單設(shè)計，它在網(wǎng)頁設(shè)計中顯示了另一種接近性的理想情況：

可以看到上圖中的表單是被劃分為兩個主要部分的：個人信息和 ID 生成兩個部分。第一部分被暗示為最重要的字段，第二部分則是一個次要的需求。這兩個部分的標(biāo)題都因顏色和字體大小的不同而產(chǎn)生區(qū)別。在這個網(wǎng)頁表單中，接近度是一個重要指標(biāo)，它將網(wǎng)頁中呈現(xiàn)的信息按優(yōu)先級排列。

3. 對稱和秩序

對稱是指兩個元素呈現(xiàn)出鏡像關(guān)系。它可以被看作是把一個物體一分為二的平衡。真實的對稱圖形包括等邊三角形、圓形和正方形等幾何圖像。

人類的大腦會本能地渴望在面孔中找尋「平衡」和「對稱」，這在美學(xué)上是令人愉悅的。大腦也傾向于在其他物體中找到對稱，因為對稱創(chuàng)造和諧，讓觀者在觀看圖像時感到舒適。

下面是 HvD Fonts 在網(wǎng)頁設(shè)計中體現(xiàn)對稱性的一個很好的案例：

這個頁面不僅顯示了典型的圖形-背景關(guān)系，而且強調(diào)了對稱性原則的運用。頁面被分成四等份，字體大小和顏色相似。四個部分中的每個部分的背景都具有相同的主題色和灰度效果。你也可以注意到負空間不一定是白色的，黑色甚至其他的顏色也可以以圖像作為背景。

對稱性原則還可以衍生出了另一個概念：在網(wǎng)頁設(shè)計中，不對稱會使觀感不佳，必須謹慎使用。許多網(wǎng)站使用不對稱作為平衡間距的元素——非常規(guī)的正空間元素與中性的背景相互平衡，反之亦然。而 Xplode 的營銷理念是不對稱，Xplode 以獨特的美觀悅目的方式引發(fā)不對稱。

這個網(wǎng)頁利用視覺錯覺和不對稱，抓住了觀者的眼球。作為正空間的物體被放置在一個不對稱的布局之下，在負空間中創(chuàng)造了強烈的視覺吸引力。色彩是兩個空間和諧的主要因素，并為觀者創(chuàng)造了一種自然的聯(lián)系。左邊的圖形也有很強的平衡性，而右邊的則是帶來更強的視覺吸引力。你覺得這個設(shè)計如何呢？

4. 相似性原理

相似性與接近性原理密切相關(guān)的原因，是相似分組對象之間共享屬性的質(zhì)量。無論是顏色、形狀、形態(tài)、大小、方向或任何其他屬性，當(dāng)這些屬性中的一個或多個在鄰近對象中共享時，相似性將占上風(fēng)。

即使正空間的元素看起來沒有明顯的聯(lián)系，由于相似性原理，它們也會與負空間元素區(qū)分開。

看看這些 UrbanDecay 的商品列表：

雖然上面的商品各不相同，但在位置、色彩、產(chǎn)品布局、表現(xiàn)方式等方面卻有一定的相似性。唯一不同的是左上角的眼影廣告，在同類產(chǎn)品中獨樹一幟。這顯然是一種營銷策略，目的是在不損害頁面整體對稱和美觀的情況下吸引注意力。這里要考慮的另一點是，尺寸上的相似性使其他圖像與相似的產(chǎn)品類別區(qū)分開來。

除了產(chǎn)品展示之外，正空間可以與相似度結(jié)合使用，也可以與負空間結(jié)合使用。

讓我們來看看 influenster 的著陸頁：

上面例子中對齊的邊框也運用了相似性原理。雖然每個正空間元素是不同的，但是相似的感覺是通過整個頁面中一致的文本字段來傳達的。風(fēng)格、布局和主題都是相似的，因此帶來了統(tǒng)一的視覺效果。

5. 封閉性原理

你是否曾經(jīng)遇到過這樣一幅畫面，看上去是閉合的，但實際上是開放的？這是由于它采用封閉性原理。我們的大腦傾向于「腦補」不完整物體的空白，并利用我們的視覺感知來使圖形完整化。

正空間和負空間一起構(gòu)成一個整體。最好的案例就是負空間中隱藏的形狀和形式，這要求對正空間中要傳達的信息進行評估。在封閉空間創(chuàng)造性地使用著正負空間，可以產(chǎn)生有趣但簡單的設(shè)計。

下面是 Magu Kambucha 的設(shè)計圖：

在這個案例中，可以看到封閉性和圖形-背景關(guān)系的平衡。瓶子和后面的粗體文字構(gòu)成對比，背景則是和兩者都構(gòu)成對比的柔粉色。封閉性體現(xiàn)在哪里？看到瓶子后面的文字了嗎？雖然你不能完全看到它，但仍然知道它是「Kambucha」。除了第一個「K」和最后一個「A」，其他字母都是半隱藏的，這些字母都是憑觀者的直覺自動完成的，整個形式開始成形，意義也隨之成形。

下面是 Cult 的截圖：

即使文本沒有寫得很清楚，我們的頭腦可以很容易地讀到 CULT 這個詞。即使單詞不完整，文本的排列和對齊也可以使其易于辨認。

6. 連續(xù)性原理

最后，根據(jù)一般格式塔原則，連續(xù)性遵循模式，即引導(dǎo)實現(xiàn)遵循一致的路徑，建立從一個對象到另一個對象的線性模式。

在上面的圖片中，盡管圓形色塊的顏色變淡了，但是觀者更傾向于將中間的間隙其看作一條直線。這使我們相信連續(xù)性的原理比色彩的力量更能引導(dǎo)用戶的視覺感知。當(dāng)我們借助負空間在視覺元素中畫出路徑，我們的眼睛傾向于優(yōu)先感知正負空間之間的界限。

腦補出來的這條連續(xù)的線條是我們在設(shè)計中更應(yīng)該引入的視覺線索。

讓我們來看看 Crypton Trading 網(wǎng)站中的視覺線索設(shè)計：

看到頁面右半部分設(shè)計的完美延續(xù)了嗎？不管背景的明暗色調(diào)如何變化，圖案在頁面上的變化都非常顯著。當(dāng)你向下滾動時，你會看到圖案和顏色是如何以連續(xù)和無縫的運動變化的。在這里，色調(diào)的變化是可以忽略的，我們所看到的是一個連續(xù)的線和點的模式。

另一個很好的例子是 OscilloScope 網(wǎng)站：

該網(wǎng)站借用連續(xù)性法則，將網(wǎng)站用戶引入到工作室的 360 度視角中，他們可以在導(dǎo)航中選擇所需的子欄目。

影片《Cargo》的著陸頁也使用了連續(xù)性法則：滾動式的導(dǎo)航，以線性運動的方式讓文本漂浮在網(wǎng)站上。由于 LOGO 是垂直展現(xiàn)的，所以用戶必須向下滾動才能看到它的全貌。當(dāng)頁面向下滾動時，靜態(tài) LOGO 開始與并行的文本塊一起浮動。導(dǎo)航引導(dǎo)用戶經(jīng)歷不同層次的體驗，而不會干擾隱藏在下面的內(nèi)容。

由于我們的眼睛通常遵循最平滑的路徑，設(shè)計師可以使用這樣的方式來創(chuàng)建引導(dǎo)路徑。

總結(jié)

在這篇文章中，我們討論了格式塔原則與網(wǎng)站 UI 的正負空間之間的關(guān)系。通過一些真實的案例，讓大家清楚地知道如何運用簡單有效的方法來改變設(shè)計的觀感。關(guān)鍵是使用這些原理來設(shè)計的時候，可以達到 1 + 1 > 2 的效果。

人類是根據(jù)感知來思考的——主要是基于視覺。根據(jù)格式塔原理，我們傾向于看到更大的整體性圖景，而不是第一眼看到的某一單個元素。

正負空間幫助我們區(qū)分、回憶、感知并識別理解。在格式塔原理的引導(dǎo)下，我們能夠更好地在網(wǎng)頁設(shè)計中利用不同元素來創(chuàng)造吸引人的作品。因為空間對于任何設(shè)計師來說都是一件復(fù)雜的事情，所以最好的方法就是保持格式塔原則的完整性。只有這樣才能真正認識到空間在設(shè)計中的重要性、有效性，繼而使自己成為網(wǎng)頁設(shè)計領(lǐng)域的佼佼者。

藍藍設(shè)計( sillybuy.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)。

如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里

但和視覺稿不同，交互稿里面體現(xiàn)了太多產(chǎn)品本身的邏輯，難免涉及到一些敏感內(nèi)容，所以具體的交互稿不太適合直接分享，這就是比較尷尬的問題了。

不過，這不妨礙我為你們做一份交互稿模板。一來我自己也在用，二來可以幫助大家，何樂而不為。

但我必須重點強調(diào)一句話：框架是死的，人是活的，不一定要拘泥于某種形式，你可以根據(jù)自己的需要自由修改。

模版一：PPT  型的分頁交互稿

第一個是 PPT 型的分頁交互稿，這個樣式最早是從騰訊 CDC 團隊流傳下來的，我在第二家公司的時候就從他們的博客中看到過，當(dāng)時還用 InDesign 做過一個模板。而我現(xiàn)在所在的團隊用的也是這個，因此我過來后就自己重新用 Sketch 做了一版，方便以后使用。

1. 封面

封面很簡單，就是文檔標(biāo)題和作者，頂部有一個通用的文檔標(biāo)題欄，上面的內(nèi)容包括：

• 項目名稱：阿爾法項目（示意）
• 頁面標(biāo)題：iOS 主界面框架（示意，根據(jù)每頁的內(nèi)容進行變化）
• 版本號：1.0（每修改一次都要 + 0.1，當(dāng)然你也可以直接變成 2.0、3.0）
• 修改日期：2018-07-24
• 頁碼：分為當(dāng)前頁碼和總頁數(shù)

我在 Sketch 中為這個模板中需要改動的內(nèi)容都定義了 Symbol，比如這個標(biāo)題欄，你只要選中之后，就可以在右邊的屬性面板中自定義里面的內(nèi)容。

2. 修訂記錄

修訂記錄這頁，記錄了從文檔建立開始，每次更新的主要內(nèi)容，以及相關(guān)人員，方便后期交接的時候給對應(yīng)的產(chǎn)品經(jīng)理、游戲策劃和設(shè)計師查看。有時候交互稿更新一次只是修改一小處地方，如果不備注對方就會很難找到，可能以后你自己都會遺忘。

這一塊我也定義了 Symbol 元件，你可以直接復(fù)制一行，然后修改里面的內(nèi)容，「更新內(nèi)容」的文本支持多行輸入。

3. 目錄

這種分頁型的文檔一定要有目錄，備注好每個模塊對應(yīng)的頁碼，否則十幾頁看下來都暈了，每次想找到對應(yīng)的界面還得重新翻一遍。

4. 內(nèi)容頁面

具體的內(nèi)容頁面才是交互稿的核心，一般會用小氣泡和箭頭進行標(biāo)注，然后在右側(cè)用對應(yīng)的數(shù)字和它們對應(yīng)，寫下詳細的交互說明。

結(jié)構(gòu)可以有很多種，比如上面這種豎屏的界面可以是左右結(jié)構(gòu)，如果是橫屏界面還可以是上下結(jié)構(gòu)等等，根據(jù)情況自由調(diào)整。文字段落的樣式我已經(jīng)定義好了，直接修改套用就行。

其中最重要的氣泡我也做了元件，選中之后直接在右邊修改數(shù)字即可。

5. 導(dǎo)出方式

使用這套模板做好交互稿后，使用 Sketch 的 File -> Export Artboards to PDF 即可將交互稿導(dǎo)出成 PDF 文檔。我很喜歡這個格式，與 PPT 相比，PDF 在任何平臺都可以通用，包括手機、Mac，不用特地裝什么軟件都能很好地打開。

模版二：長圖型的流程交互稿

另一種是更常見的交互稿形式，這也是我這幾年進騰訊后一直使用的格式。

如果你曾經(jīng)用過上文介紹的 PPT 型模板，你一定會發(fā)現(xiàn)：它的好處是 PDF 分頁格式非常整齊，比較適合一次性做一個大產(chǎn)品的交互功能介紹，而不適合小功能的頻繁修改。

今天介紹的這第二種，則是更加輕便快捷的類型。

1. 內(nèi)容模塊

這種長圖型的交互稿，優(yōu)點很明顯：

• 發(fā)揮空間大，可以直接在一片空白上盡情地闡釋每個界面、每個流程，展開說各種細節(jié)。
• 分享和閱讀都很方便，最終格式是一張 PNG 長圖，能隨手發(fā)給老板、產(chǎn)品經(jīng)理和其他相關(guān)同事，電腦手機都能看。
• 不存在分頁和各種格式限制，所以畫起來和修改起來都很快，小迭代要的就是效率。

來看一張基本樣例：

它的結(jié)構(gòu)分為：

交互稿標(biāo)題、日期

按照項目、模塊和功能的方式命名（如：電腦管家 V12 -清理垃圾-深度清理圖標(biāo)化改版），可以地規(guī)范交互稿名稱，讓其他人很容易理解交互稿涉及的是什么內(nèi)容。

相關(guān)負責(zé)人

對應(yīng)的產(chǎn)品經(jīng)理，交互稿的作者，方便評審時或者交接后找人。

需求背景

簡單介紹為什么要做這次設(shè)計，出發(fā)點是什么，遇到了什么問題。

主要界面

這次設(shè)計中，涉及到的所有主要界面，先陳列出來方便大家快速評審和討論，視覺接手后可以根據(jù)這些來進行風(fēng)格設(shè)計。

流程說明

有了主要界面后，我們還可能需要對一些操作流程進行說明，比如怎樣發(fā)送一條語音消息，怎樣刪除一條會話等等。

異常狀態(tài)

最后還要記得檢查一下，每個界面在沒有內(nèi)容時的空狀態(tài)、斷網(wǎng)時的異常狀態(tài)，彈出各種通知的位置等等，千萬不要等到開發(fā)同學(xué)找你的時候才想起來。

上面所說的，就是一份交互稿的常見內(nèi)容模塊了。

2. 模板使用

該模板是專門給 Mac 平臺的 Sketch 用的。

下載后（下載方式見文末），打開你會看到這個界面：

里面的每個模塊我都做了 Symbol 元件，你只要選中就可以在右側(cè)更改內(nèi)容了。

比如下面的文檔基本信息：

我還把可能會用到的各種字體大小、顏色、對齊方式都做成了文字樣式：

選中文字后，在右側(cè)下拉框中選擇你要的樣式就好。

交互稿用的都是黑白灰，還有藍色作為標(biāo)注。

我一直用的這幾種，足夠用。

是不是很心動？別著急，先把這個 Sketch 文件保存成 Template（模板）。

然后，你就可以在新建文件時，選擇從模板處新建，直接用這個模板開始畫稿。

源文件下載

下載鏈接：https://pan.baidu.com/s/1Jrv7-JDyf2j2SDvvg0-wrA

提取碼：npq2

備用鏈接：https://pan.baidu.com/s/1yIMSWw7pJuHF4H3BgoyrPA

作者：WingST（寇敬），男，33歲，騰訊高級交互設(shè)計師、騰訊學(xué)院認證講師，9 年工作經(jīng)驗的資深互聯(lián)網(wǎng)人，曾任 MIG 桌面安全產(chǎn)品部軒轅設(shè)計組組長，目前在騰訊游戲 NEXT Studios 工作室負責(zé)《樂高無限》創(chuàng)造型沙盒游戲的用戶體驗設(shè)計。

負責(zé)過的產(chǎn)品有騰訊電腦管家 V11.0、加速小火箭 V2.0、騰訊手游助手、騰訊網(wǎng)游助手等。曾在 OPPO 手機、金蝶軟件等企業(yè)工作，有著 PC、Web、移動端等多平臺的豐富設(shè)計經(jīng)驗。

結(jié)語

感謝大家的閱讀，末尾做個小廣告，我的新書《交互思維：詳解交互設(shè)計師技能樹》馬上就要上市了，這是我自己九年多來做交互設(shè)計師的經(jīng)驗總結(jié)，也是市面上第一本詳細介紹交互設(shè)計師所應(yīng)該掌握的職業(yè)技能的書，適合所有希望了解交互、學(xué)習(xí)交互的設(shè)計師和產(chǎn)品經(jīng)理。同時書中也有我進騰訊的成長故事，以及一些個人工作和學(xué)習(xí)方法的分享，絕對物超所值 → https://item.jd.com/12576242.html

這是我所總結(jié)的「交互設(shè)計師技能樹」。

藍藍設(shè)計( sillybuy.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)。

如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里

需求是攔截前端的網(wǎng)絡(luò)請求和相應(yīng)。
廢話不多說，直接上干貨。



我用的是vue-cli3所以這個config文件是我自己創(chuàng)建的。

先介紹env.js

//根據(jù)不同的環(huán)境更改不同的baseUrl
let baseUrl = '';
 
//開發(fā)環(huán)境下
if (process.env.NODE_ENV == 'development') {
    baseUrl = '';
 
} else if (process.env.NODE_ENV == 'production') {
    baseUrl = '生產(chǎn)地址';
}
 
export {
    baseUrl,//導(dǎo)出baseUrl
}
在這里我首先設(shè)置了開發(fā)環(huán)境和生產(chǎn)環(huán)境的地址，并向外拋出。

在看一下axios.js

import {
    baseUrl, //引入baseUrl
} from "../config/env";
import axios from 'axios';
import qs from 'qs';
//引入vuex的js文件
import vuex from '../src/store/index';
 
// 創(chuàng)建 axios 實例
let service = axios.create({
    baseUrl: baseUrl,//請求前綴
    timeout: 20000,  // 請求超時時間
    crossDomain: true,//設(shè)置cross跨域
    withCredentials: true//設(shè)置cross跨域 并設(shè)置訪問權(quán)限 允許跨域攜帶cookie信息
})
 
// 設(shè)置 post 默認 Content-Type
service.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';
 
// 添加請求攔截器
service.interceptors.request.use(
 
    (config) => {
        // console.log()
        //下面的代碼是如何在攔截器中調(diào)用vuex管理狀態(tài)。
        //我這里主要是做了一個蒙層的遮蓋
        // vuex.$store.commit('OPEN_LOADING');
 
 
        //判斷請求方式是否為POST，進行轉(zhuǎn)換格式
        config.method === 'post'
            ? config.data = qs.stringify({...config.data})
            : config.params = {...config.params};
        // 請求發(fā)送前進行處理
        return config
    },
    (error) => {
        // 請求錯誤處理
        return Promise.reject(error)
    }
)
 
// 添加響應(yīng)攔截器
service.interceptors.response.use(
    (response) => {
        let { data } = response;
        return data
    },
    (error) => {
        let info = {},
            { status, statusText, data } = error.response
 
        if (!error.response) {
            info = {
                code: 5000,
                msg: 'Network Error'
            }
        } else {
            // 此處整理錯誤信息格式
            info = {
                code: status,
                data: data,
                msg: statusText
            }
        }
    }
)
 
/**
 * 向外拋出service
 */
export default service
最后將這個axios.js文件引入main.js中，并將引入的axios掛載到Vue實例上就ok了。

完美！如有不對的地方還請各位大佬指點，萬分感謝。

踩過的坑：

    怎么在axios攔截器中使用vuex，首先我們要引入vuex的js文件，然后就可以用了，就這么簡單。

藍藍設(shè)計( sillybuy.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)。