如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里
為了和大家分享關(guān)于設(shè)計(jì)趨勢(shì)的見解，ISUX 研究了 2019 年至 2020 年的設(shè)計(jì)趨勢(shì)。沒有必要去遵循年度設(shè)計(jì)趨勢(shì)報(bào)告，但是否意識(shí)到這一趨勢(shì)，對(duì)設(shè)計(jì)師來講卻非常重要。首先，我們總結(jié)了平面設(shè)計(jì)的總體趨勢(shì)，同時(shí)也研究了從 Zepeto app 和 Memoji 開始的，最近擴(kuò)展出來的 IP 形象設(shè)計(jì)和角色設(shè)計(jì)趨勢(shì)。在本文中，我們想分享 ISUX 設(shè)計(jì)趨勢(shì)報(bào)告的第一部分「圖形設(shè)計(jì)趨勢(shì)」。在這一部分里，我們展示了當(dāng)下各種品牌和動(dòng)態(tài)圖形的案例，總結(jié)了 12 個(gè)值得注意的平面設(shè)計(jì)趨勢(shì)。
排版一直是設(shè)計(jì)的重要元素，也是傳達(dá)品牌強(qiáng)烈信息的手段。從去年開始，粗大的無襯線字體和強(qiáng)有力的排版被應(yīng)用到許多品牌設(shè)計(jì)當(dāng)中，這使得它成為平面設(shè)計(jì)趨勢(shì)的一部分。此外，也有越來越多的品牌采用動(dòng)態(tài)和反映了 3D 趨勢(shì)的三維字體版式設(shè)計(jì)。
1. 動(dòng)力學(xué)排版海報(bào)
這張動(dòng)態(tài)排版海報(bào)不是簡單地放置圖形和文字，而是將移動(dòng)的 3D 文字放在固定的圖形上，傳達(dá)新的視覺印象。這些圖形主要通過 SNS 以短循環(huán)視頻的形式共享。
2. Uber 品牌識(shí)別
Uber 開發(fā)了一種無襯線字體用于品牌 logo 的再設(shè)計(jì)，并將其貫穿于整個(gè)品牌系統(tǒng)。采用了這些品牌字體的動(dòng)態(tài)海報(bào)，更為有力地傳達(dá)出 Uber 的品牌信息。
3. Squarespace 品牌識(shí)別
Dia studio 常將動(dòng)態(tài)文字應(yīng)?于品牌項(xiàng)?，「Squarespace」是其代表作品之一。
4. FAD 視覺圖形
以 3D 形態(tài)傳遞活動(dòng)信息的版面設(shè)計(jì)，就像禮品包裝一樣。這種循環(huán)的 GIF 圖也作為品牌主圖形被運(yùn)用。
5. 韓國女性耐克運(yùn)動(dòng)廣告
韓國藝人支持女性主觀活動(dòng)的耐克運(yùn)動(dòng)廣告，也采用了大膽的哥特式字體。這些由 Guteform 設(shè)計(jì)工作室設(shè)計(jì)的字體有基本的延展形式，同時(shí)有一個(gè)系統(tǒng)能延展成更為寬大的形式以適配媒體的比例。這種動(dòng)態(tài)化的強(qiáng)烈的排版?zhèn)鬟f了活動(dòng)信息，和其他設(shè)計(jì)元素的互動(dòng)，最大限度地發(fā)揮了圖形效果。
隨著 Instagram 用彩色漸變作為品牌色，漸變趨勢(shì)已經(jīng)持續(xù)好幾年。最近品牌，UI 和包裝的圖形設(shè)計(jì)都采用明亮而強(qiáng)烈的對(duì)比色，這種趨勢(shì)不僅應(yīng)用于設(shè)計(jì)，也應(yīng)用于攝影。強(qiáng)烈的色彩組合，夢(mèng)幻的色調(diào)和彩色漸變有望應(yīng)用于 2019 年的整體設(shè)計(jì)。
1. APP 圖標(biāo)設(shè)計(jì)
△ 越來越多的手機(jī) APP 圖標(biāo)使用漸變色
最近，許多移動(dòng)應(yīng)用程序在其圖標(biāo)設(shè)計(jì)上應(yīng)用了彩色漸變。
2. 歐洲體育 – 2018 平昌冬奧會(huì)品牌識(shí)別
歐洲體育臺(tái) 2018 年平昌冬奧會(huì)的轉(zhuǎn)播也將強(qiáng)對(duì)比和漸變色運(yùn)用于多數(shù)場(chǎng)景中，包括標(biāo)志、圖形和攝影。熒光圖形和深?背景的對(duì)比，尤為深刻地凸顯了冬季運(yùn)動(dòng)的感覺。
3. 籃球永遠(yuǎn)品牌識(shí)別
△ @Notreal
NBA 新聞廣播公司品牌重塑項(xiàng)目所使用的，諸如彩色漸變和大膽排版的設(shè)計(jì)方法，也反映了的趨勢(shì)。他們創(chuàng)作了一個(gè)系統(tǒng)，通過各種顏色，字體和布局的應(yīng)用，可以產(chǎn)生各種圖形輸出。
4. 明日之子品牌識(shí)別
△ @Plus X
騰訊視頻和哇唧唧哇聯(lián)合出品的選秀節(jié)目明日之子，用多種漸變色圓形表達(dá)不同選手的才華。隨著節(jié)目的進(jìn)行，圖形主題也會(huì)隨選手的變化而變化。
與過去基于固定網(wǎng)格系統(tǒng)的布局相比，最近越來越趨于使用僅顯示圖像一部分的非對(duì)稱布局。雖然好像只顯示整個(gè)圖像的一部分，設(shè)計(jì)師卻可以在大系統(tǒng)中無限延展每個(gè)圖形。你可以認(rèn)為平衡被打破了，設(shè)計(jì)師卻可以更加自由地應(yīng)用圖形元素，呈現(xiàn)更強(qiáng)烈的視覺印象，還可以有很酷的圖形組成。
1. 平面海報(bào)設(shè)計(jì)
設(shè)計(jì)了各種各樣圖形的 Vasjen Katro，不斷嘗試的形狀，顏色和布局也反映了的趨勢(shì)，特別是不對(duì)稱和開放式布局。
2. Easy Peasy 品牌識(shí)別
△ @CFC
Easy Peasy 是韓國著名化妝品公司 Amore 推出的獨(dú)立化妝品品牌，以品牌關(guān)鍵詞輕松、活躍、有趣和大膽為基礎(chǔ)，嘗試給用戶更加簡單和親切的感覺。品牌用看似自由的手繪波浪線貫穿于整個(gè)圖形設(shè)計(jì)，打造不對(duì)稱之美，展現(xiàn)了自由和親近的形象。
移動(dòng)圖標(biāo)已成為趨勢(shì)很多年了，現(xiàn)在應(yīng)用交互元素的品牌案例也很多。比起強(qiáng)而有力，靈活而簡單，能隨內(nèi)容做出響應(yīng)和更改的交互圖標(biāo)儼然已成為一種新的趨勢(shì)。
1. 國際光影藝術(shù)節(jié)品牌識(shí)別
這是交互圖標(biāo)的其中一個(gè)案例，用簡單的方形作為基礎(chǔ)，延展出各種各樣的形狀和圖案。這些基本元素保持了簡單和最大化的交互式圖像效果。
2. SM 娛樂品牌識(shí)別
△ @CFC
韓國最大娛樂公司之?，SM 娛樂開發(fā)了一種新的品牌標(biāo)識(shí)來反映其不斷擴(kuò)展的業(yè)務(wù)。它將基本圓形改變成了不同形狀與小號(hào)和中號(hào)產(chǎn)生關(guān)聯(lián)。靈活的符號(hào)和各種顏色的圓形圖案是 SM 娛樂視覺識(shí)別的核心。
3. 第 59 屆塞薩洛尼基國際電影節(jié)品牌識(shí)別
這是電影節(jié)一個(gè)有趣的識(shí)別案例，用卷軸纏繞的圖像代替尋常的電影節(jié)標(biāo)志。它不是固定的，而是復(fù)雜紊亂的，以復(fù)雜的方式排列各種不同的顏?和圖形，表達(dá)了電影節(jié)的目的──通過電影傳達(dá)多種多樣的故事和情感。
4. 第 6 屆廣州三年展品牌識(shí)別
傳遞展覽核心信息，反復(fù)復(fù)制到三維空間的基本矩形，顯示了展覽的特征。在整個(gè)展廳中，你可以看到它以多種變動(dòng)的形態(tài)被應(yīng)用，同時(shí)也以不同的形狀被運(yùn)用到各式各樣的場(chǎng)景中。
3D 趨勢(shì)如此流行，以至于在平面設(shè)計(jì)趨勢(shì)中也不得不討論它。當(dāng)下有很多的 3D 圖像嘗試用復(fù)雜的紋理給大眾展示生動(dòng)逼真和新鮮感十足的印象。通過在三維幾何形態(tài)中，添加逼真的紋理，創(chuàng)造在現(xiàn)實(shí)中不可能存在的圖形，人們正在定義一種新的現(xiàn)實(shí)主義。
1. 3D 插畫
George Stoyanov 通過組合各種幾何形態(tài)來表達(dá)形狀之美。這種視覺嘗試很有意思，因?yàn)樗茈y在現(xiàn)實(shí)中制作。
2. Adobe Think Tank 視覺圖形
這張圖像由不同形狀，紋理和顏色的幾何物體設(shè)計(jì)而成，表達(dá)了 Adobe Think Tank 包含各種主題論壇的品牌特征。
3. 現(xiàn)代「超級(jí)消費(fèi)者」品牌視頻
將各種各樣的材料和顏色運(yùn)用到人類行走的形狀當(dāng)中，傳遞出一種非現(xiàn)實(shí)和新鮮感十足的視覺印象。
4. 耐克PG3「舒適體驗(yàn)」廣告
△ @GRIF
用柔軟的毛皮材料營造耐克的主要感覺──舒適感，非現(xiàn)實(shí)的圖形里有著生動(dòng)的質(zhì)感，讓人耳目一新。
使用有機(jī)圖形并不是一種新的潮流，但我們發(fā)現(xiàn)今年也有大量的圖形使用水和油等液體來表達(dá)效果。它有時(shí)被用作品牌的主圖形，你可以在 3D 短動(dòng)態(tài)圖形中明顯地感受到這種傾向。這種具有強(qiáng)烈色彩和漸變的有機(jī)形狀，傳達(dá)出一種精致而夢(mèng)幻的感覺。
1. 有機(jī)形態(tài)的 3D 視頻
△ @cmttat
有機(jī)形態(tài)通常以 3D 形式被應(yīng)用，并且廣泛應(yīng)用于 SNS 共享的短視頻作品中。今年尤其有很多透明質(zhì)感的案例，這些透明材質(zhì)運(yùn)用各種顏色，使色彩搭配產(chǎn)生變化，營造出神秘的氣氛。
2. 孔雀學(xué)會(huì) 2018 品牌識(shí)別
△ @Irradie
將明亮多彩的漸變色應(yīng)用于有機(jī)形態(tài)，這些圖像表達(dá)了巴黎電子音樂節(jié)的特征。
各式各樣的平面插畫曾經(jīng)退出過潮流，但現(xiàn)在已經(jīng)成為一種強(qiáng)烈的設(shè)計(jì)趨勢(shì)。很多品牌都通過聘請(qǐng)知名插畫家的方式，用平面插畫給大眾新的印象。去年以來，除了 2D，3D 角色插畫也成為一種趨勢(shì)被應(yīng)用到越來越多的品牌設(shè)計(jì)當(dāng)中。
1. Uber 品牌插畫
運(yùn)用于尤伯杯品牌新形象的插畫，是其簡潔有序品牌系統(tǒng)中有趣的一部分。
2. Spotify「音樂與你同在」插畫
△ @Circus
這是 Spotify 運(yùn)用了 2D 插畫的品牌視頻。手繪質(zhì)感，色彩簡單，人形的四肢都很大是最近的插畫趨勢(shì)。
3. Belif 品牌插圖
這是基于三維角色的 2D 圖案設(shè)計(jì)示例，運(yùn)用于包裝設(shè)計(jì)和品牌視頻。
等距設(shè)計(jì)是一種將二維圖形繪制成三維的方法，最近已成為一種趨勢(shì)，在圖形和動(dòng)畫視頻中被廣泛應(yīng)用。許多設(shè)計(jì)師通過運(yùn)用這種技術(shù)，在一個(gè)框架中顯示整個(gè)圖形，創(chuàng)造有趣和獨(dú)特的氛圍，呈現(xiàn)出一種全新的視覺印象。和去年一樣，等距設(shè)計(jì)在今年似乎也會(huì)越來越流行。
1. 等距插畫
經(jīng)常使用等距技術(shù)和彩色漸變的插畫家 Mohamed Samir 設(shè)計(jì)了一系列富有趣味性的海報(bào)。
2. 等距視頻
△ @Matthieu BRACCINI、@Panic Studio
將大物體變成微小模型的等距設(shè)計(jì)方法能給人留下印象，最近可以看到很多運(yùn)用了這種方法后，屏幕變得更加特別和有趣的案例。
結(jié)合不同媒介的各種圖形，創(chuàng)建有趣的效果是過去常見的一種方式。最近，結(jié)合大膽色彩，逼真照片和 3D 圖像給大眾新鮮感受的案例也很多。含有扁平化元素的真實(shí)圖片和視頻是 2019 的主要趨勢(shì)之一。
1. 3D視頻+2D圖形
△ @Sergio Fuego、@giantantstagram
當(dāng) 2D 和 3D 圖像組合在一起，立體效果可以更加獨(dú)特和突出。這是使用了此方法的優(yōu)秀視頻案例。
2. 真人實(shí)拍視頻+2D插畫
△ @+CRUZ
匡威活動(dòng)視頻是一個(gè)很好地混合了拍攝視頻和 2D 圖形的案例。
3. 真人實(shí)拍視頻+發(fā)光涂鴉動(dòng)畫
在真人視頻中添加發(fā)光的涂鴉動(dòng)畫，可以使視頻更具動(dòng)態(tài)性和趣味性。當(dāng)下，SNS 平臺(tái)上越來越多舞者和歌手的視頻都使用這種效果。
4. 運(yùn)動(dòng) 3D 的 2D 插畫視頻
有很多作品很難知道它是 2D 還是 3D。用 3D 表達(dá)物體運(yùn)動(dòng)，而不是簡單地使用 2D 圖形，這種視頻能傳達(dá)一種新的視覺感受。
當(dāng)通過 SNS 共享圖形圖像變得非常普遍時(shí)，短小和重復(fù)的動(dòng)態(tài)圖形也變得很易見。logo、2D 插畫、3D 圖像和各種各樣的圖形都以短循環(huán)動(dòng)畫的形式共享。
1. 2D 短動(dòng)畫
這些短視頻通過在簡單的扁平插畫里重復(fù)使用短動(dòng)作，傳達(dá)了一種獨(dú)特而有趣的形象。
2. 3D 短視頻
由于 3D 是主要趨勢(shì)，小而重復(fù)的 3D 圖像也值得注意。添加 3D 真實(shí)紋理和效果，可以帶來獨(dú)特的視覺感受。
AR 和 VR 技術(shù)的發(fā)展，對(duì)平面和多媒體的設(shè)計(jì)趨勢(shì)產(chǎn)生了很大的影響。這些新技術(shù)使人們對(duì)品牌有更加立體的體驗(yàn)。
1. Le Graphisme Augmente 圖形海報(bào)
盡管是印刷海報(bào)，它也允許人們通過印刷材料使得 3D、AR 技術(shù)獲得交互式體驗(yàn)。印刷海報(bào)只包含簡單的幾何圖形和極小的信息，但當(dāng)你通過手機(jī)查看時(shí)，將獲得更多的信息和看到立體的形狀。
2. Apple Music x Memoji 廣告
△ @Apple
Apple 使用基于 AR 技術(shù)的 memoji 來推廣 Apple 音樂。著名藝術(shù)家如 Ariana Grande 推出了他們的歌曲，通過這支廣告，Apple 一起宣傳了 Apple Music 和 memoji。
3. Nike：上海 Never Done 運(yùn)動(dòng)店鋪網(wǎng)站
△ @AKQA
上海耐克通過 AR 技術(shù)實(shí)現(xiàn) 360° 網(wǎng)上零售的項(xiàng)目，可以讓消費(fèi)者根據(jù)運(yùn)動(dòng)的出汗量來進(jìn)行購買和體驗(yàn)服務(wù)。
4. 奧迪 Quattro Coaster 廣告
△ @POL
這是奧迪利用 AR 技術(shù)的項(xiàng)目，它能讓消費(fèi)者將汽車從銀幕上帶到自己的位置，從而積極體驗(yàn)開車的感覺。
5. 2018 年英雄聯(lián)盟全球總決賽開幕式
2018 年英雄聯(lián)盟的開幕舞臺(tái)利用 AR 技術(shù)，使演唱 POP/Stars 的真人歌手和游戲里 K/DA 角色一起同臺(tái)演出。這些被實(shí)時(shí)跟蹤的角色，在實(shí)際舞臺(tái)上帶來了真實(shí)的表演效果。
新復(fù)古，用現(xiàn)代感覺詮釋復(fù)古，已成為一種新趨勢(shì)。新復(fù)古是一個(gè)結(jié)合了「新」和「復(fù)古」的詞，是對(duì)過去懷舊的現(xiàn)代詮釋，不僅是設(shè)計(jì)，在時(shí)尚、建筑、流行文化等各領(lǐng)域都是一種新趨勢(shì)。
1. 復(fù)古風(fēng)格視頻
流行于 80 年代和 90 年代的電子游戲，和好萊塢電影的復(fù)古圖像與視頻，被重新詮釋后，再一次流行起來。
2. Fritz Coffee Company 公司品牌識(shí)別
韓國著名咖啡品牌，F(xiàn)irtz Coffee 創(chuàng)造了的，具有復(fù)古 logo 和圖形的品牌標(biāo)識(shí)。
趨勢(shì)不會(huì)朝一個(gè)方向發(fā)展，它可以擴(kuò)展成各種各樣的方式，就像我們看到的反映了趨勢(shì)的 3D，AR/VR 技術(shù)也包含了復(fù)古風(fēng)格一樣。我們希望這些不同的趨勢(shì)能以新的方式被應(yīng)用，從而創(chuàng)造出新穎而有趣的設(shè)計(jì)。
藍(lán)藍(lán)設(shè)計(jì)( www.bouu.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。
如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里
簡介說明1. 原理表述
系統(tǒng)需要在 400ms 內(nèi)對(duì)使用者的操作做出響應(yīng)，這樣才能夠讓使用者保持專注，并提高生產(chǎn)效率。
2. 實(shí)驗(yàn)背景
上世紀(jì) 70 年代后期，計(jì)算機(jī)研究人員依然認(rèn)為計(jì)算機(jī)可以花費(fèi)兩秒的時(shí)間對(duì)使用者的操作做出反饋，因?yàn)樗麄冋J(rèn)為人們大概正好需要兩秒時(shí)間來決定下一步的操作，所以 2s（2000ms）一度成為了當(dāng)年計(jì)算機(jī)響應(yīng)時(shí)間的標(biāo)準(zhǔn)值。直到 1979 年計(jì)算機(jī)的算力開始大幅提升，也有了足夠的能力在 2000ms 內(nèi)做出響應(yīng)，這時(shí) IBM 的研究員 Walter Doherty 進(jìn)行了一系列研究來評(píng)估算力的增長對(duì)生產(chǎn)力的影響。
研究結(jié)果表明，計(jì)算機(jī)的響應(yīng)速度直接影響了使用者做出下一個(gè)決定所要花費(fèi)的時(shí)間（這個(gè)時(shí)間被稱為用戶響應(yīng)時(shí)間），換句話說，計(jì)算機(jī)相應(yīng)的時(shí)間越長，用戶就要花費(fèi)越多的時(shí)間來思考和決定下一步的操作。
上面這張表格充分說明了這一觀點(diǎn)，橫縱坐標(biāo)分別為用戶響應(yīng)時(shí)間和系統(tǒng)響應(yīng)時(shí)間，我們可以看到系統(tǒng)響應(yīng)時(shí)間如果從之前的 2000ms 降低到 300ms ，使用者作出下一步指令所需要的時(shí)間就能夠縮短 5s 以上。Doherty 認(rèn)為人們會(huì)將工作需要的一系列操作步驟存儲(chǔ)在短時(shí)記憶之內(nèi)，如果系統(tǒng)響應(yīng)時(shí)間太長，就會(huì)打斷人們的短時(shí)記憶，換句話說，思路都不連貫了。
不僅如此，Doherty 還認(rèn)為響應(yīng)速度低于 400ms 的系統(tǒng)或者程序，會(huì)讓人上癮。放在當(dāng)下的環(huán)境來看，這當(dāng)然只是一句比較夸張的話，但是結(jié)論是需要我們重視的，程序的響應(yīng)時(shí)間，務(wù)必在 400ms 之內(nèi)。
要說「多爾蒂門檻」帶給我們的啟示，上一節(jié)最后一句已經(jīng)表達(dá)得足夠清楚：系統(tǒng)或程序的響應(yīng)時(shí)間小于 400ms 。為了讓讀者有更加直觀得感受，我們先來一組小動(dòng)畫感受一下高響應(yīng)延遲有多讓人抓狂，快速響應(yīng)又多么讓人舒服：
應(yīng)用案例 1：模擬延遲效果
注：請(qǐng)務(wù)必挨個(gè)觀察，不要看整體，看單個(gè)的效果。
從動(dòng)畫中可以感受到，50ms、200ms 還算可以讓人接受，當(dāng)響應(yīng)時(shí)間達(dá)到 600ms 時(shí)已經(jīng)讓人有些不耐煩，而達(dá)到 1000ms 時(shí)會(huì)讓人不自覺多點(diǎn)幾下，2000ms 時(shí)我手機(jī)已經(jīng)被我砸了。
在如今的計(jì)算機(jī)算力之下，響應(yīng)時(shí)間輕輕松松便能夠達(dá)到多爾蒂門檻的閾值，甚至能夠遠(yuǎn)比 400ms 更小，但是這就夠了嗎？「多爾蒂門檻」說到底只是給出了響應(yīng)時(shí)間的上限，400ms 的響應(yīng)時(shí)間或許在多爾蒂那個(gè)時(shí)代確實(shí)能夠大幅提升操作員的操作效率從而產(chǎn)出更大的經(jīng)濟(jì)效益（比如銀行系統(tǒng)），但是現(xiàn)在互聯(lián)網(wǎng)已經(jīng)越發(fā)成熟，不少公司的用戶體驗(yàn)研究者都已經(jīng)意識(shí)到，系統(tǒng)響應(yīng)時(shí)間已然不是影響用戶響應(yīng)時(shí)間的唯一因素了，另一個(gè)因素是過渡動(dòng)畫的持續(xù)時(shí)間。
就像谷歌在 Material Design 中明確規(guī)定了過渡動(dòng)畫的 Speed 這一項(xiàng)，這是為什么呢？用戶體驗(yàn)是一門關(guān)于情感和邏輯的學(xué)問，而不僅僅是一個(gè)統(tǒng)計(jì)數(shù)字就能解釋的，讓程序?qū)δ骋徊僮鞯姆答仌r(shí)間（包括響應(yīng)+動(dòng)畫）符合用戶對(duì)該操作的預(yù)期才是讓用戶「上癮」的關(guān)鍵。
應(yīng)用案例 2：iOS 中的動(dòng)畫
所以，哪怕我們的手機(jī)、電腦已經(jīng)可以做到在 100ms 之內(nèi)做出響應(yīng)，快到完全有能力在用戶反應(yīng)不過來的情況下給出反饋和結(jié)果，但是這樣是不夠的，我們依然需要「合適時(shí)長的」動(dòng)畫作為計(jì)算機(jī)反饋和大腦反應(yīng)之間的潤滑劑，而不至于讓程序使用起來太「干澀」，也不至于讓大腦一直處于應(yīng)激反應(yīng)的階段而感到疲勞。
在真實(shí)世界中我們使用應(yīng)用時(shí)會(huì)發(fā)現(xiàn)，有時(shí)候響應(yīng)速度沒辦法做到如此迅捷快速，比如 APP 啟動(dòng)時(shí)；還有時(shí)候即便系統(tǒng)可以響應(yīng)，網(wǎng)絡(luò)卻不行。網(wǎng)絡(luò)并不能在用戶操作的一瞬間就把所有需要的資源都下載好，用戶必須等待幾秒的時(shí)間，那么這時(shí)候就需要考慮如何減少用戶等待的焦灼感，優(yōu)化等待的體驗(yàn)。
比如有趣的加載動(dòng)畫、閃屏頁等，都算是解決辦法。
應(yīng)用案例 3：Netflix 的啟動(dòng)動(dòng)畫以及新草的加載動(dòng)畫
動(dòng)畫的持續(xù)時(shí)間應(yīng)當(dāng)在適當(dāng)?shù)膮^(qū)間中取到最短，而不能太突然或太緩慢。
反面案例 1：過快或過慢的動(dòng)畫
在現(xiàn)實(shí)的上線 APP 中，也會(huì)有故意把動(dòng)畫做得很慢的例子，這比較影響操作的流暢性。
反面案例 2：Eggzy
左右滑動(dòng)的時(shí)候動(dòng)畫效果在實(shí)際體驗(yàn)中非常慢，對(duì)于想要進(jìn)行連續(xù)滑動(dòng)操作的用戶（即便這樣的使用場(chǎng)景不多），已經(jīng)慢得無法忍受，有一種「不跟手」的感覺，這么慢的動(dòng)畫已經(jīng)很輕易就能讓用戶感受到自己在等它了。
仔細(xì)瀏覽 Material Design 中給出的案例便可以發(fā)現(xiàn)，動(dòng)畫的持續(xù)時(shí)間大致可以參照以下幾條規(guī)律去嘗試：
如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里
為什么要構(gòu)建 MIZ Design？隨著米莊 APP 用戶的增長，以及 APP 不停的迭代，我們?cè)谠O(shè)計(jì)上積累了越來越多的債務(wù)。越來越多的新頁面，新功能，以及不同的組件，都是由不同的設(shè)計(jì)師來設(shè)計(jì)，前端也是由不同的開發(fā)來實(shí)現(xiàn)，這直接導(dǎo)致了整個(gè) APP 越來越臃腫無序，視覺和交互體驗(yàn)不一致，且團(tuán)隊(duì)溝通成本高，重復(fù)勞動(dòng)力大，輸出效率低，迭代速度慢。
開發(fā)層面
場(chǎng)景：
設(shè)計(jì)師：涉及到這個(gè)組件的頁面都改一下吧。
開發(fā)：改不了，每個(gè)頁面都是單獨(dú)寫的，改起來非常麻煩，耗時(shí)間耗資源耗人力。
設(shè)計(jì)師：為什么同樣的組件要單獨(dú)寫？
開發(fā)：我怎么知道，這是以前的開發(fā)寫的，而且寫的亂七八糟。
設(shè)計(jì)師：……
那怎么辦？不改也得改呀?？偛荒芤恢绷糁@些大大小小的毛病，不解決問題會(huì)越來越嚴(yán)重。
代碼混亂，遺留了非常多的開發(fā)層面代碼不一致的問題，后期迭代的過程中如果不統(tǒng)一，也會(huì)使整個(gè)系統(tǒng)失去可控性。
設(shè)計(jì)師層面
場(chǎng)景 1：
設(shè)計(jì)師 A：這個(gè)頁面是誰做的？源文件有嗎？
設(shè)計(jì)師 B：不知道哎。以前的設(shè)計(jì)師做的。去庫里找一下吧。
30 分鐘以后，依然沒有找到源文件。
場(chǎng)景 2：
開會(huì)：為什么這個(gè)項(xiàng)目的頁面和以前的風(fēng)格差很多？
設(shè)計(jì)師 A：現(xiàn)在流行的就是這個(gè)風(fēng)格呀，多好看。
設(shè)計(jì)師 B：雖然設(shè)計(jì)每年都有流行趨勢(shì)，但還是要和產(chǎn)品品牌風(fēng)格相結(jié)合。
一個(gè)項(xiàng)目兩個(gè)設(shè)計(jì)師負(fù)責(zé)，設(shè)計(jì)出來的頁面控件：按鈕，列表，輸入框，色彩，視覺風(fēng)格完全不一致。在 2 個(gè)設(shè)計(jì)師完成設(shè)計(jì)以后，還需要整合在一起重新修改，效率很低。并且每次頁面中的元素，開發(fā)需要根據(jù)不同業(yè)務(wù)中的不同設(shè)計(jì)師的「創(chuàng)意」來進(jìn)行人肉修改。
當(dāng)我們開始設(shè)計(jì)新的頁面，功能需求點(diǎn)優(yōu)化的時(shí)候，這個(gè)問題變得更加嚴(yán)重。同時(shí)，因?yàn)闆]有一個(gè)統(tǒng)一的基礎(chǔ)設(shè)計(jì)規(guī)范原則，設(shè)計(jì)師在設(shè)計(jì)項(xiàng)目的時(shí)候，在設(shè)計(jì)決策和討論中花費(fèi)了大量時(shí)間，會(huì)存在大量的重復(fù)勞動(dòng)。同時(shí)由于產(chǎn)品的界面和交互缺乏一致性和可預(yù)測(cè)性，用戶體驗(yàn)也受到了影響。整個(gè)產(chǎn)品也會(huì)在風(fēng)格定位上不統(tǒng)一，沒有確定產(chǎn)品風(fēng)格特質(zhì)的情況下越來越模糊，失去自身品牌該有的特性。
產(chǎn)品迭代，基本上是基于新功能的開發(fā)設(shè)計(jì)迭代，新的功能、新的頁面不斷的增加，對(duì)于設(shè)計(jì)師而言，有設(shè)計(jì)規(guī)范的原則做基礎(chǔ)設(shè)計(jì)框架，更容易延續(xù) APP 統(tǒng)一的設(shè)計(jì)風(fēng)格，不至于被不同的需求，不同的設(shè)計(jì)趨勢(shì)以及蠢蠢欲動(dòng)的新的設(shè)計(jì)靈感牽著鼻子走，導(dǎo)致越做越亂，無章可循。
一個(gè) APP 就像自己的孩子一樣，從一個(gè)嗷嗷待哺的嬰兒逐漸長大成人。設(shè)計(jì)系統(tǒng)就好比一個(gè)人的生物系統(tǒng)，是整個(gè)生物體的基礎(chǔ)。如果對(duì)此系統(tǒng)不維護(hù)，那么此系統(tǒng)將會(huì)隨著時(shí)間的增長越來越脆弱以及呈現(xiàn)不可逆的現(xiàn)象。那么如果維護(hù)好一個(gè)設(shè)計(jì)系統(tǒng)，骨骼會(huì)在成長中呈現(xiàn)規(guī)律清晰的生長模式，會(huì)隨著業(yè)務(wù)的生長而生長，可控制、可更新，使生物體健康的發(fā)展然后去完成它的使命。
Design System 最開始是 Guide 演化而來，Guide 是一套可指導(dǎo)、可延續(xù)、可擴(kuò)展、可統(tǒng)一的、可區(qū)分的視覺指引手冊(cè)，指導(dǎo)相關(guān)設(shè)計(jì)結(jié)構(gòu)完成統(tǒng)一性與對(duì)外區(qū)分性。具象層，它是一種設(shè)計(jì)方法；抽象層，它是一種思考模型。
最近幾年，「Design System」這個(gè)詞非?；?。下面介紹紅遍全球設(shè)計(jì)界的兩大設(shè)計(jì)規(guī)范網(wǎng)紅。
谷歌在 2014 年的 Google I/O 上推出了 Material Design，它的目標(biāo)是創(chuàng)造一個(gè)將經(jīng)典的設(shè)計(jì)原則和科技、創(chuàng)新相結(jié)合的設(shè)計(jì)語言，并且在不同設(shè)備上提供一致的體驗(yàn)底層系統(tǒng)，并同時(shí)支持觸摸、語音、鼠標(biāo)、鍵盤等輸入方式。
一經(jīng)發(fā)布就紅遍了全球設(shè)計(jì)界。新穎的設(shè)計(jì)理念，清晰明確的設(shè)計(jì)原則，詳細(xì)的設(shè)計(jì)規(guī)范，使之成為完美的安卓端標(biāo)準(zhǔn)設(shè)計(jì)規(guī)范。也給設(shè)計(jì)界的設(shè)計(jì)師們提供了非常好的參考，很多設(shè)計(jì)師也根據(jù) Material Design 設(shè)計(jì)原則延展出更多的創(chuàng)新設(shè)計(jì)可能性，制作了各家的設(shè)計(jì)規(guī)范。
出了官方的 Sketch 組件庫以后，谷歌團(tuán)隊(duì)還開發(fā)了基于此設(shè)計(jì)規(guī)范的延展工具：比如基于 Material Design 色板的 Sketch 源文件下載；谷歌色彩顏色獲取工具；一整套的 Material Design IOCN 輸出；在 2018 年 5 月份的 Google I/O 大會(huì)上，Google 設(shè)計(jì)團(tuán)隊(duì)開發(fā)了一款叫做 Material Theme Editor 工具，可以幫助設(shè)計(jì)師輕松且快速創(chuàng)建符合自身品牌又符合 Material Design 風(fēng)格的應(yīng)用。
設(shè)計(jì)價(jià)值觀
設(shè)計(jì)原則
材質(zhì)是一種隱喻：Material Design 的靈感來源于物理世界和世界中的材質(zhì)，包含了材質(zhì)如何接受光的影響以及所形成的光影效果，并且對(duì)紙張的質(zhì)感和墨水的介質(zhì)重新進(jìn)行了構(gòu)想。
大膽，圖形，鮮明：Material Design 基于印刷設(shè)計(jì)的指導(dǎo)原則，字體、柵格、留白、顏色等元素都以創(chuàng)造層次、意義和焦點(diǎn)為基礎(chǔ)來讓用戶沉浸在設(shè)計(jì)體驗(yàn)中。
動(dòng)效賦予意義：微妙順暢地反饋和過渡性的動(dòng)作效果，引起用戶的注意力并使之保持持續(xù)關(guān)注。當(dāng)元素出現(xiàn)在一個(gè)界面中的時(shí)候，元素之間的互動(dòng)重塑了環(huán)境。
基礎(chǔ)靈活：Material Design 同樣旨在實(shí)現(xiàn)品牌價(jià)值的傳遞。結(jié)合了基礎(chǔ)的代碼、組件和元素，可表達(dá)不同的品牌需求。
跨平臺(tái)：Material Design 的 UI 組件庫可在不同的平臺(tái)共用，不論在安卓平臺(tái)、iOS、Flutter，還是 Web 都可保持一致的組件元素。
iOS 的人機(jī)規(guī)范指南，保持了蘋果一貫的風(fēng)格。雖然沒有 Material Design 規(guī)范那么細(xì)致全面，但是核心的設(shè)計(jì)原則在每個(gè)組件的設(shè)計(jì)說明中都有滲透。作為 iOS 系統(tǒng)的設(shè)計(jì)基礎(chǔ)，建議每個(gè)設(shè)計(jì)師都需要仔細(xì)研究。
iOS 設(shè)計(jì)價(jià)值觀
iOS 設(shè)計(jì)原則
Aesthetic Integrity 整體美感：整體美感不僅僅包括美觀的 APP 界面，還包括流暢的交互體驗(yàn)，產(chǎn)品功能和用戶行為的有效結(jié)合。比如當(dāng)一款工具類 APP 主要是幫助用戶完成一項(xiàng)任務(wù)時(shí)，設(shè)計(jì)師應(yīng)關(guān)注于用戶操作本身的行為路徑，和產(chǎn)品功能相結(jié)合來幫助用戶完成目標(biāo)，使用戶聚焦功能本身。而如果是一款游戲，那么需要提供非常有吸引力的界面，在鼓勵(lì)引導(dǎo)用戶探索的同時(shí)也有非常棒的操作體驗(yàn)。
Consistency 一致性：一個(gè)保持了一致性原則的 APP，通過使用標(biāo)準(zhǔn)的控件、熟悉的 icon、標(biāo)準(zhǔn)的文字規(guī)范、統(tǒng)一的組件俗語來實(shí)現(xiàn)一個(gè)擁有標(biāo)準(zhǔn)化范例的系統(tǒng)。這個(gè)系統(tǒng)提供的特性和交互行為也符合用戶的心智模型和預(yù)期。
Direct Manipulation 直接操作：讓用戶在屏幕上直接對(duì)內(nèi)容進(jìn)行操作的交互行為，可以鼓勵(lì)用戶和系統(tǒng)進(jìn)行交互并且更易于理解。當(dāng)用戶翻轉(zhuǎn)屏幕或者使用手勢(shì)直接與屏幕交互時(shí)，他們會(huì)感知到直接操作的行為，并且能立即得到操作結(jié)果。
Feedback 反饋：反饋能夠響應(yīng)操作，呈現(xiàn)結(jié)果，使用戶獲得信息。手機(jī)中內(nèi)置的 iOS 應(yīng)用程序?yàn)橛脩舻拿恳粋€(gè)動(dòng)作提供可感知的反饋。交互元素在點(diǎn)擊時(shí)會(huì)凸顯被高亮顯示，進(jìn)度指示器顯示了需要長時(shí)間運(yùn)行的操作進(jìn)度、動(dòng)效和聲音，使用戶能夠更清晰地感知交互行為的結(jié)果并作出響應(yīng)。
Metaphors 隱喻：當(dāng)一個(gè) APP 的虛擬對(duì)象和操作路徑與用戶本身所熟悉的心智模型一致時(shí)，不管它是來自于真實(shí)世界還是數(shù)字世界，用戶都能很快上手。隱喻之所以有效果，是因?yàn)橛脩艉推聊淮嬖谖锢砩系慕换?。用戶可以通過移動(dòng)分層視圖來顯示手機(jī)上被遮擋的內(nèi)容；拽拖并且滑動(dòng)對(duì)象，切換開關(guān)，移動(dòng)滑塊，滾動(dòng)數(shù)值選擇器，用戶甚至可以通過翻轉(zhuǎn)手勢(shì)來翻閱手機(jī)上的雜志和文章。
User Control 用戶控制：在 iOS 系統(tǒng)中，用戶是主導(dǎo)者，而不是 APP。APP 可以提供行動(dòng)建議，給予警告提示，但是不應(yīng)該替用戶做選擇。優(yōu)秀的 APP 始終會(huì)在用戶主導(dǎo)和用戶不想要出現(xiàn)的結(jié)果中保持平衡。一個(gè) APP 應(yīng)該始終讓用戶感知到在他的掌控之中。交互的元素給用戶熟悉感并且可預(yù)期；對(duì)有破壞性的操作可確認(rèn)；對(duì)錯(cuò)誤操作可取消，即使是在進(jìn)行中的行為也可中斷。
在 Sketch 工具中可直接下載 iOS 的組件庫使用。
在 2016 年，由工程師和設(shè)計(jì)師組成的團(tuán)隊(duì)創(chuàng)建了 Airbnb 的設(shè)計(jì)語言系統(tǒng) （DLS）的第一個(gè)版本，其目標(biāo)是創(chuàng)建一致的體驗(yàn)和跨平臺(tái)的統(tǒng)一。DLS 包含了一套內(nèi)部和第三方工具，由共享原則和模式定義的組件的集合。這允許使用跨設(shè)計(jì)、工程和其他學(xué)科的共享詞匯表進(jìn)行快速迭代。DLS 的結(jié)構(gòu)簡單而連貫，簡化了團(tuán)隊(duì)之間的溝通。并制定了以下幾條原則來指導(dǎo) DLS 的設(shè)計(jì)：
ADS 開源庫
Airbnb 設(shè)計(jì)副總裁 Alex Schleifer 在 IXDC 2017 國際體驗(yàn)設(shè)計(jì)大會(huì)上分享了這一創(chuàng)新的 React Sketch APP 管理設(shè)計(jì)系統(tǒng)，這是為 Airbnb 的設(shè)計(jì)系統(tǒng)而設(shè)計(jì)的，其實(shí)就是個(gè)實(shí)時(shí)更新的代碼數(shù)據(jù)庫，可以實(shí)時(shí)查詢 Sketch 數(shù)據(jù)和代碼，也可以下載圖標(biāo)、設(shè)計(jì)模塊，所有工程師和設(shè)計(jì)師都可以免費(fèi)下載?？吹竭@個(gè)，我想完美共享庫也許并不是那么的遙遠(yuǎn)。
Airbnb 團(tuán)隊(duì)在設(shè)計(jì) DLS 過程中，也是通過原子組件的方式來構(gòu)建整個(gè)框架，我覺得他們對(duì)于設(shè)計(jì)系統(tǒng)的理解非常對(duì)：「一個(gè)統(tǒng)一的設(shè)計(jì)語言不應(yīng)該只是一組靜態(tài)的規(guī)則和原子組件構(gòu)成，它應(yīng)該是一個(gè)可持續(xù)發(fā)展的系統(tǒng)。」所以在構(gòu)建好底層的設(shè)計(jì)語言之后，可持續(xù)性、可發(fā)展性，是維護(hù)并讓設(shè)計(jì)系統(tǒng)產(chǎn)生價(jià)值的重點(diǎn)。
隨著商業(yè)化的趨勢(shì)，越來越多的企業(yè)級(jí)產(chǎn)品對(duì)擁有更好的用戶體驗(yàn)有了進(jìn)一步的要求。帶著這樣的一個(gè)終極目標(biāo)，螞蟻金服體驗(yàn)技術(shù)部經(jīng)過大量的項(xiàng)目實(shí)踐和總結(jié)，逐步打磨出一個(gè)服務(wù)于企業(yè)級(jí)產(chǎn)品的設(shè)計(jì)體系 Ant Design?；凇复_定」和「自然」的設(shè)計(jì)價(jià)值觀，通過模塊化的解決方案，降低冗余的生產(chǎn)成本，讓設(shè)計(jì)者專注于更好的用戶體驗(yàn)。
設(shè)計(jì)價(jià)值觀
自然，讓人機(jī)交互行為更自然。
自然規(guī)律運(yùn)用到設(shè)計(jì)中，自然界的方方面面都會(huì)對(duì)用戶行為產(chǎn)生深遠(yuǎn)影響，設(shè)計(jì)者應(yīng)該從其中汲取靈感，并運(yùn)用到當(dāng)下的設(shè)計(jì)工作中。螞蟻金服已做了部分探索，并將追求「自然」作為未來持之以恒的方向。
自然的人機(jī)交互核心：節(jié)能。既要節(jié)省身體運(yùn)動(dòng)的體力，更要節(jié)省大腦思考的腦力。
那么如何在設(shè)計(jì)中體現(xiàn)呢？
確定，保持克制、對(duì)象設(shè)計(jì)方法、模塊化。
設(shè)計(jì)者需要做出更好的設(shè)計(jì)決策，給予研發(fā)團(tuán)隊(duì)一種高確定性、低熵值的研發(fā)狀態(tài)。同時(shí)，不同設(shè)計(jì)者在充分理解業(yè)務(wù)訴求后，基于 Ant Design 體系都會(huì)有相同且符合當(dāng)前業(yè)務(wù)特性的設(shè)計(jì)產(chǎn)出。
給予用戶確定感，結(jié)合 Ant Design 的三個(gè)關(guān)鍵點(diǎn)，可以總結(jié)為邊界和規(guī)則 2 個(gè)方面：
構(gòu)建米莊設(shè)計(jì)系統(tǒng)的目標(biāo)是什么？
意義
有了規(guī)范和控件庫，設(shè)計(jì)師在接受需求的時(shí)候，可以減少設(shè)計(jì)成本，提高設(shè)計(jì)效率，尤其是在用于快速迭代產(chǎn)品的階段，通過大量的標(biāo)準(zhǔn)化組件即可實(shí)現(xiàn)縮短設(shè)計(jì)周期的效果，并且設(shè)計(jì)師可以更專注于深耕體驗(yàn)和細(xì)節(jié)，同時(shí)能保證高質(zhì)量的輸出。
構(gòu)建一個(gè)設(shè)計(jì)系統(tǒng)來支撐產(chǎn)品的所有業(yè)務(wù)線，解決團(tuán)隊(duì)協(xié)作一致性問題，產(chǎn)品的周期性更新問題，解決不同的設(shè)計(jì)師和工程師規(guī)范性輸出 UI 的問題，最終從設(shè)計(jì)驅(qū)動(dòng)商業(yè)的層面上，解決用戶體驗(yàn)一致性，迭代開發(fā)的問題。
時(shí)間
APP 進(jìn)入穩(wěn)定發(fā)展階段，也完成了基礎(chǔ)功能的開發(fā)，在業(yè)務(wù)穩(wěn)定發(fā)展的前提下，構(gòu)建已有 APP 的整體框架，規(guī)范前端開發(fā)和設(shè)計(jì)流程是個(gè)好時(shí)機(jī)。在產(chǎn)品發(fā)展到穩(wěn)定階段、參與的人越來越多時(shí)，對(duì)整個(gè) APP 的頁面整理是非常有必要的。也為了后續(xù)快速發(fā)展的業(yè)務(wù)起到完整系統(tǒng)地支撐能力。
人力
相信幾乎在所有的公司和團(tuán)隊(duì)，規(guī)范建立都是非常有價(jià)值，也非常耗費(fèi)資源的一件事。你可以一天抄一套亮麗炫酷的 UI kit，但是你沒法一天上線一套系統(tǒng)。沒有上線落地的視覺規(guī)范只是耍流氓。所以項(xiàng)目啟動(dòng)的時(shí)候，團(tuán)隊(duì)分工必須明確，你們是一條船上的人了。勢(shì)必要有劈浪前行，破釜沉舟的決心。
場(chǎng)景
所以在項(xiàng)目開始之前，便需要和整個(gè)團(tuán)隊(duì)統(tǒng)一目標(biāo)意義：視覺規(guī)范的建立，除了保障統(tǒng)一的用戶體驗(yàn)和認(rèn)知，還能夠通過工程師代碼層面的組件化提高開發(fā)、設(shè)計(jì)效率。整個(gè)設(shè)計(jì)系統(tǒng)的開發(fā)，從設(shè)計(jì)到落地，需要產(chǎn)品、設(shè)計(jì)和前端的全力支持。
雞生蛋問題
即使我們看了很多設(shè)計(jì)系統(tǒng)范例，甚至也下載了很多 UI KIT 的源文件來做參考。我們依然無法確定第一步需要做什么。當(dāng)我們還沒有組建一個(gè) UI kits 組件庫的時(shí)候是如何來搭建一個(gè)頁面的呢？是先有了組件，然后創(chuàng)造了模塊頁面；還是先設(shè)計(jì)了頁面，然后再來歸納總結(jié)出頁面匯總的元件呢。這和先有雞還是先有蛋的問題有所相似。
原子理論
在學(xué)習(xí)其他公司如何搭建設(shè)計(jì)系統(tǒng)的時(shí)候，我們了解到了 Brad Frost 的原子設(shè)計(jì)理論。他提出了原子設(shè)計(jì)原則，并且在他的文章中有一句非常出名的引用：
we’re not designing pages, we’re designing systems of components.──Stephen Hay
概念
2013 年網(wǎng)頁設(shè)計(jì)師 Brad Frost 從化學(xué)中受到啟發(fā)：原子（Atoms）結(jié)合在一起，形成分子（Molecures），進(jìn)一步結(jié)合形成了生物體（Organisms）。于是提出了原子設(shè)計(jì)方法論，由原子、分子、組織、模板和頁面共同協(xié)作以創(chuàng)造出更有效的用戶界面系統(tǒng)的一種設(shè)計(jì)方法。
原子設(shè)計(jì)的五個(gè)階段
原子（Atoms）：符號(hào)，為頁面構(gòu)成的基本元素。例如顏色、字體，或是一個(gè)圖標(biāo)等。
分子（Molecules）：組件，由原子構(gòu)成的簡單 UI 組件。例如，一個(gè)表單標(biāo)簽，搜索框和按鈕共同打造了一個(gè)搜索表單分子。
組織（Organisms）：模塊，由原子及分子組成的相對(duì)復(fù)雜的組織，在 UI 頁面中可視為模塊/樣式層級(jí)。
模板（Templates）：原型，將以上元素進(jìn)行排版，顯示設(shè)計(jì)的底層內(nèi)容結(jié)構(gòu)，在 UI 設(shè)計(jì)中對(duì)應(yīng)的是原型圖層級(jí)。
頁面（Pages），將實(shí)際內(nèi)容（圖片、文章等）套件在特定模板，頁面是模板的具體實(shí)例。
特點(diǎn)：
從 Brad Frost 的原子設(shè)計(jì)理論得到啟發(fā)，將我們 APP 產(chǎn)品的所有頁面都整理了出來，我們歸納出了組成這些頁面的常用組件。這個(gè)詳盡的庫幫助我們以一種更合理的方式構(gòu)建了一個(gè)設(shè)計(jì)系統(tǒng)的底層框架。
這個(gè)理論提出來以后就產(chǎn)生了非常大的轟動(dòng)。并且至此以后 Atomic Design（原子設(shè)計(jì)）成為了構(gòu)建 Design System 的核心指導(dǎo)理論。
Sketch工具
Brad Frost 在 2014 年提出來：「使用 Sketch 的 Atomic Design 是產(chǎn)品設(shè)計(jì)的未來?！刮覀兛梢允褂?Sketch Library 功能實(shí)現(xiàn)組件庫的創(chuàng)建。而組件庫的底層邏輯就是原子設(shè)計(jì)理論。Sketch 中的 symbols、textstyles、color styles、Layer style ，來構(gòu)建組件和樣式。
Text style：Text Style 用于設(shè)置文字規(guī)范，在一個(gè)系統(tǒng)中包含大量的文本樣式，并且擁有不同的文本屬性。使用字體樣式來管理一個(gè)系統(tǒng)中的字體樣式，可使之便于管理和修改，保持系統(tǒng)的可持續(xù)性和可用性。并且可單獨(dú)輸出字體樣式系統(tǒng)進(jìn)行團(tuán)隊(duì)之間，不同項(xiàng)目之間的共享。
Layer Style：可編輯元素的各種樣式，比如用于制作顏色規(guī)范，涵蓋填充顏色、描邊顏色、內(nèi)外陰影、模糊效果等內(nèi)容。可使元素保持一致的圖層樣式。
symbols：設(shè)計(jì)系統(tǒng)中的任何元素都使用 symbols 來形成符號(hào)，可復(fù)用、可嵌套、可批量修改，非常靈活化、輕量化。并且將符號(hào)進(jìn)行嵌套組合，可形成符號(hào)嵌套，作為模塊來使用。symbols 在使用過程中如果使用「/」來命名，那么會(huì)形成符號(hào)嵌套層，作為不同符號(hào)組件的分層。同樣的對(duì)于 symbols，可使用縮放工具，來靈活適配各種不同的界面需求。
Library：Library 是所有元素、文字樣式、圖層樣式等組合的一個(gè)組件庫，可通過共享形式，來使它成為團(tuán)隊(duì)的設(shè)計(jì)工具。輕松訪問次庫中的所有元素和樣式，并且始終可同步接受更新，保持一致和的文件狀態(tài)。
在確定了原則和工具之后，我們?yōu)樵O(shè)計(jì)系統(tǒng)項(xiàng)目制定了完整的項(xiàng)目計(jì)劃，因?yàn)樯婕暗缴暇€和設(shè)計(jì)兩大塊，所以項(xiàng)目也是分設(shè)計(jì)線和落地線，兩條線既有關(guān)聯(lián)性，又是相對(duì)獨(dú)立和分離的。組件設(shè)計(jì)完成以后才可上線落地，因推動(dòng)落地的過程是需要整個(gè)設(shè)計(jì)開發(fā)團(tuán)隊(duì)的，不管是從時(shí)間還是人力上的資源協(xié)調(diào)和配合，所以落地線需要更加靈活。
設(shè)計(jì)階段 – 設(shè)計(jì)線
目標(biāo)結(jié)果 – 設(shè)計(jì)資產(chǎn)
設(shè)計(jì)階段，我們所產(chǎn)出的設(shè)計(jì)資產(chǎn)包括設(shè)計(jì)價(jià)值觀，設(shè)計(jì)指導(dǎo)原則，以及設(shè)計(jì)模式（解決方案）。
展開實(shí)施 – 任務(wù)細(xì)分
確定了設(shè)計(jì)資產(chǎn)以后，我們將設(shè)計(jì)資產(chǎn)進(jìn)行細(xì)分。整理規(guī)范的內(nèi)容并對(duì)每個(gè)組件進(jìn)行優(yōu)先級(jí)的確定。整理規(guī)范內(nèi)容的過程也是一個(gè)逐漸完善的過程，第一次整理可能并不完善，但是沒有關(guān)系，先把基礎(chǔ)框架和內(nèi)容整理好，后續(xù)在設(shè)計(jì)過程中有遺漏的再進(jìn)行添加。
內(nèi)容整理好以后，我們會(huì)發(fā)現(xiàn)一套規(guī)范里內(nèi)容非常多，所以需要根據(jù)項(xiàng)目時(shí)間來安排所有內(nèi)容的優(yōu)先級(jí)和分工。根據(jù)我們的設(shè)計(jì)系統(tǒng)的底層邏輯，所以我們將核心組件建設(shè)放在第一階段，比如字體、顏色、icon 等。構(gòu)建了基礎(chǔ)元件以后再來搭建模塊，最后再根據(jù)不同場(chǎng)景來確定樣式。至于分工，最好整個(gè)設(shè)計(jì)團(tuán)隊(duì)的人員都可參與，互相分擔(dān)工作量以達(dá)到工作效率最大化。
整體內(nèi)容確定以后，因每個(gè)組件的整理有規(guī)范可循，所以我們針對(duì)每個(gè)組件的設(shè)計(jì)過程也確定了單個(gè)組件的設(shè)計(jì)流程。
過程跟進(jìn) – 關(guān)鍵節(jié)點(diǎn)
在設(shè)計(jì)過程中，我們也需要對(duì)關(guān)鍵時(shí)間節(jié)點(diǎn)的項(xiàng)目整體進(jìn)程和結(jié)果輸出總結(jié)。此階段是和上線的項(xiàng)目節(jié)點(diǎn)重合的關(guān)鍵點(diǎn)，設(shè)計(jì)輸出的內(nèi)容會(huì)和上線過程有非常多的磨合，一個(gè)組件的落地還需要不停的和開發(fā)溝通，收集反饋意見，并且進(jìn)行調(diào)整修改，記錄解決問題。
執(zhí)行復(fù)盤 – 結(jié)果驗(yàn)證
在每個(gè)組件的設(shè)計(jì)過程中，我們都會(huì)反復(fù)完善每個(gè)組件的內(nèi)容，包括設(shè)計(jì)原則、交互細(xì)節(jié)以及應(yīng)用場(chǎng)景等。反復(fù)去驗(yàn)證組件的可行性。并且對(duì)階段性完成的設(shè)計(jì)結(jié)果進(jìn)行復(fù)盤和分享，進(jìn)一步來驗(yàn)證設(shè)計(jì)方案的可行性。規(guī)范需要不停地優(yōu)化創(chuàng)新，才能讓它的可持續(xù)性特性發(fā)揮至最大。
上線階段 – 落地線
沒有上線落地的視覺規(guī)范只是耍流氓。
設(shè)計(jì)師自嗨并無意義。推進(jìn)的過程，最重要的還是溝通。溝通的內(nèi)容包括組件輸出的合理性、開發(fā)工作量、產(chǎn)品版本迭代需求計(jì)劃等。
愿望如此之美好，現(xiàn)實(shí)如此之貧瘠。
設(shè)計(jì)從落地到上線的過程想必每個(gè)設(shè)計(jì)師都有大把心得。在公司中實(shí)際的推進(jìn)是非常難的，因?yàn)楫a(chǎn)品需求永遠(yuǎn)都做不完，開發(fā)永遠(yuǎn)在寫代碼，設(shè)計(jì)永遠(yuǎn)需要將先完成業(yè)務(wù)需求設(shè)計(jì)為前提。所以如何將設(shè)計(jì)規(guī)范的內(nèi)容插進(jìn)項(xiàng)目中是個(gè)最關(guān)鍵的點(diǎn)。
存在問題，根據(jù)項(xiàng)目的時(shí)間安排和產(chǎn)品迭代安排，我們?cè)噲D將不同優(yōu)先級(jí)組件的內(nèi)容分配到不同的產(chǎn)品迭代中。實(shí)際卻證明這非常的理想化。在這個(gè)過程中我們遇到非常多的問題：
解決方案：
APP 在建立的時(shí)候沒有規(guī)范性，所以現(xiàn)在想要規(guī)范所有的內(nèi)容就是一個(gè)非常巨大的工程。就像沒辦法一口吃掉一整塊蛋糕一樣。
我們的核心組件在產(chǎn)品迭代中完成上線以后，將剩余的組件規(guī)劃至開發(fā)的重構(gòu)版本中進(jìn)行開發(fā)。減少資源的重復(fù)使用，以及最大化降低對(duì) APP 的影響。我們衡量了利弊之后，決定此次規(guī)范的設(shè)計(jì)對(duì)于樣式的修改減少到最少，保持和線上內(nèi)容的一致性。很多時(shí)候我們?cè)O(shè)計(jì)師對(duì)于設(shè)計(jì)趨勢(shì)是很敏感以及非常想要去創(chuàng)新的，但是基于現(xiàn)狀下保持對(duì)樣式的克制完成基礎(chǔ)體系的搭建這個(gè)核心目的，是最重要的事。
MIZ Design 的設(shè)計(jì)資產(chǎn)中設(shè)計(jì)價(jià)值觀是貫徹整個(gè)產(chǎn)品的迭代發(fā)展，是產(chǎn)品持續(xù)迭代的指明燈。設(shè)計(jì)原則是團(tuán)隊(duì)成員建立設(shè)計(jì)的標(biāo)準(zhǔn)指導(dǎo)規(guī)范；設(shè)計(jì)資源庫貫徹設(shè)計(jì)師、開發(fā)和產(chǎn)品，實(shí)現(xiàn)產(chǎn)品迭代。我們也非常愿意分享這個(gè)過程，希望對(duì)大家建立設(shè)計(jì)規(guī)范整個(gè)流程有所幫助。
When your values are clear to you,making decisions becomes easier.──Roy Disney
當(dāng)你認(rèn)清自己的價(jià)值觀和行為準(zhǔn)則后，決策就輕而易舉了。價(jià)值觀是指明燈，貫徹整個(gè)產(chǎn)品系統(tǒng)。我們根據(jù)米莊品牌的特性，以及業(yè)務(wù)場(chǎng)景的需求來定義 APP 的設(shè)計(jì)價(jià)值觀，指導(dǎo) MIZ Design 的設(shè)計(jì)語言的建立。
品牌特性
米莊的品牌理念在于科技金融，小額惠普，以簡單可靠的價(jià)值觀來驅(qū)動(dòng)業(yè)務(wù)增長。
業(yè)務(wù)場(chǎng)景
米莊作為金融工具類產(chǎn)品，功能操作場(chǎng)景不算復(fù)雜，強(qiáng)調(diào)一致性的用戶體驗(yàn)和安全規(guī)律的操作路徑。這也體現(xiàn)了產(chǎn)品對(duì)于不同頁面元素之間的相互關(guān)聯(lián)性和一致專業(yè)性的要求。
用戶調(diào)研
結(jié)合我們進(jìn)行的用戶調(diào)研報(bào)告，米莊產(chǎn)品的核心用戶對(duì)我們產(chǎn)品的需求是賺取零花錢居多，也就是利益的獲取。所以針對(duì)明確的用戶目標(biāo)，我們對(duì)于整個(gè)產(chǎn)品的設(shè)計(jì)需要以產(chǎn)品可操作性、性為第一原則，呈現(xiàn)的視覺層以安全可靠，清晰明確為風(fēng)格導(dǎo)向。
從以上三個(gè)方向，我們概括了設(shè)計(jì)價(jià)值觀核心的三點(diǎn)：
格式塔心理學(xué)
心理學(xué)的完形法則：相似、相近、封閉、簡單。
MIZ Design 的設(shè)計(jì)原則參考了格式塔心理學(xué)，取人和萬物交流的過程中，大腦最基礎(chǔ)的一些精神反射和行為操作，格式塔心理學(xué)的理論主張研究意識(shí)和行為，強(qiáng)調(diào)經(jīng)驗(yàn)和行為的整體性，這也符合了米莊的設(shè)計(jì)價(jià)值觀里關(guān)于效率和自然的定義。所以我們參考此心理學(xué)來幫助團(tuán)隊(duì)順暢地溝通，減少信息不對(duì)稱以及學(xué)習(xí)成本，作為協(xié)作的基礎(chǔ)。
第一性原理
埃隆·馬斯克非常推崇的思維模式是 「First principle thinking」，也就是「第一性原理」。它是一種演繹法思維，自上而下來看，就是從原理出發(fā)，一步步往前推演，直到找出適合該問題的解決方法。自下而上反推，那么它的原則便是從結(jié)果出發(fā)，把事物分解成最基本的組成，看透事物的本質(zhì)，從源頭解決問題。這和原子設(shè)計(jì)理論也非常有相通性。巴菲特的伙伴查理·芒格也是第一性原理的積極實(shí)踐者，他將此原理視為科學(xué)界和商界非常古老的一條守則。
奧卡姆剃刀原理
Entities should not be multiplied unnecessarily.
如無必要，勿增實(shí)體。
奧卡姆剃刀定律是由英國奧卡姆的威廉所提出來的。他提出「切勿浪費(fèi)較多東西去做，用較少的東西同樣可以做好的事情」，也叫簡約法則，是一種迅速?zèng)Q策和判斷認(rèn)知行之有效的工具之一。可以簡單理解為保持事物的簡單性。在各個(gè)學(xué)科，各個(gè)研究領(lǐng)域都有發(fā)展。這個(gè)原則至少可以追溯到亞里士多德，他寫到：「Nature operates in the shortest way possible」，自然作為一個(gè)穩(wěn)定的，持續(xù)自我生長的系統(tǒng)，發(fā)展原則是盡量保持簡約之道。
設(shè)計(jì)資產(chǎn)層面，我們輸出的內(nèi)容包含了以下兩大部分：
MIZ UI KIT_3.0 LIBRARY：
MIZ UI KIT 說明文檔：
開發(fā)層面 – 溝通，減少重復(fù)
基于 UI kit 創(chuàng)建的組件庫，幫助他們?cè)谧罱K產(chǎn)品中保持代碼的一致性和復(fù)用性。并且設(shè)計(jì)語言作為一種工具，是整個(gè)團(tuán)隊(duì)順暢溝通的最重要的語言。所以我們確保我們的設(shè)計(jì)語言，是能夠讓開發(fā)，產(chǎn)品都懂，并在第一時(shí)間執(zhí)行的。既然是語言，那么每個(gè)元素都會(huì)有自己的名字。每個(gè)組件，甚至每個(gè)組件中不同屬性的元素我們也賦予它名字。
無名萬物之始，有名萬物之母。──《道德經(jīng)》
我們的祖先發(fā)明語言文字的過程，其實(shí)就是一個(gè)給萬事萬物命名的過程。而名字是連接人和世界的渠道。名字也是主觀的，因此它有情感溫度，也會(huì)有文化偏見和個(gè)人信息資產(chǎn)的反應(yīng)。所以我們需要給設(shè)計(jì)系統(tǒng)中的每一種組件都給予屬于它的名字，才能讓它成為一種專屬于你們產(chǎn)品的特殊語言。
場(chǎng)景：
開發(fā)：#000和#00000000分別替換成什么顏色？
設(shè)計(jì)師：#000，替換成 black-1
開發(fā)：那#00000000呢？
設(shè)計(jì)師：一臉茫然，這 2 個(gè)不是一個(gè)顏色嗎？
慣性思維，色值在設(shè)計(jì)師眼中，對(duì)應(yīng)的是一種色彩，而在開發(fā)眼中只是一堆數(shù)字。將心比心，當(dāng)你扔給開發(fā)一個(gè)色值的時(shí)候他們只是一個(gè)難過的問號(hào)；而當(dāng)你給他們具體的一個(gè)顏色的名字，他們能馬上對(duì)應(yīng)到這個(gè)名字，那么就是順暢的。
所以當(dāng)我們給顏色命名以后，溝通就變成了以下這樣：
設(shè)計(jì)師：#ff5600 換成 orange-2。
開發(fā)：好的。修改完成。
設(shè)計(jì)師：#ff3450 全部替換成 blue-2。
開發(fā)：好的，替換完成。
設(shè)計(jì)師：這次我們品牌升級(jí)，orange-2 的色值更改為 #ff5666。
開發(fā)：好的。全局修改完成。
雖然修改的過程比較辛苦，但是結(jié)果是好的。從此設(shè)計(jì)師掌握了話語權(quán)。當(dāng)然，開發(fā)也很高興。
不單單是色彩，我們對(duì)字體、icon 以及間距等也定義了尺寸。給抽象事物以不同的命名來賦予它意義，也能讓使用者使用它產(chǎn)生價(jià)值。
設(shè)計(jì)層面 – 輸出，快樂傳承
設(shè)計(jì)師們可以更加便捷地創(chuàng)建、分享、定義設(shè)計(jì)界面的內(nèi)容。此外，在設(shè)計(jì)傳承方面，也能讓我們更好地將設(shè)計(jì)原則傳遞給新人。
場(chǎng)景：
設(shè)計(jì)師 a：此次版本迭代涉及到優(yōu)惠券頁面的優(yōu)惠，這個(gè)頁面的字體和顏色有規(guī)范嗎？
設(shè)計(jì)師 b：有的。請(qǐng)參照設(shè)計(jì)規(guī)范。
不同設(shè)計(jì)師在接到需求開始設(shè)計(jì)以后會(huì)擔(dān)心：怕風(fēng)格有差別，怕頁面不統(tǒng)一。辛苦做好頁面以后發(fā)現(xiàn)和別的設(shè)計(jì)師同時(shí)做的差別很大，也不符合產(chǎn)品整體品牌調(diào)性，陷入循環(huán)改稿中。此時(shí)設(shè)計(jì)規(guī)范就是迭代的明燈，天上的北斗七星，指引方向讓你不偏離終點(diǎn)。
同步更新：設(shè)計(jì)資產(chǎn)的目標(biāo)用戶，除了團(tuán)隊(duì)中的前端開發(fā)，那么最大受益者其實(shí)就是設(shè)計(jì)師們。設(shè)計(jì)系統(tǒng)的一大優(yōu)點(diǎn)便是修改設(shè)計(jì)系統(tǒng)中任何一個(gè)原子，整個(gè)系統(tǒng)所有這個(gè)原子都能感知到。這便是設(shè)計(jì)系統(tǒng)的可持續(xù)性、統(tǒng)一性，也是設(shè)計(jì)系統(tǒng)的基礎(chǔ)。
△ 組件庫中的任何修改，會(huì)同步到所有使用該庫的文檔中
自定義內(nèi)容：組件中的內(nèi)容都可自定義進(jìn)行修改。
解放重復(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è)計(jì)原則中第一性原理相通，從原理出發(fā)，一步步往前推演，直到找出適合該問題的解決方法。這和在構(gòu)建設(shè)計(jì)系統(tǒng)的時(shí)候是一個(gè)道理。學(xué)習(xí)從元認(rèn)知能力開始，而組件一個(gè)系統(tǒng)，從元件開始。埃隆·馬斯克從組成汽車的發(fā)電機(jī)開始思考，創(chuàng)辦了特斯拉；從底層元素的創(chuàng)新開始，才會(huì)有產(chǎn)品整體性的創(chuàng)新。
最后補(bǔ)充一下結(jié)構(gòu)圖：
藍(lán)藍(lán)設(shè)計(jì)( www.bouu.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。
如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里
藍(lán)藍(lán)設(shè)計(jì)( www.bouu.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì)
如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里
名片，是品牌傳遞的重要工具，但往往被人忽視。雖然紙質(zhì)的名片幾乎已被微信媒介所取代，但是作為設(shè)計(jì)師更不應(yīng)該放棄這種貌似不重要的設(shè)計(jì)。
相反，越簡單的設(shè)計(jì)，更考驗(yàn)設(shè)計(jì)能力。一張名片，可以看出一個(gè)人是否真的懂得設(shè)計(jì)，因?yàn)槔锩姘嗷竟α?。如果連一張簡單的名片都做不好，更不要說其他的設(shè)計(jì)了。
藍(lán)藍(lán)設(shè)計(jì)( www.bouu.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì)
如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里
Loading動(dòng)畫，在現(xiàn)在的設(shè)計(jì)中已經(jīng)是一個(gè)必須要設(shè)計(jì)的系統(tǒng)元素，它能減緩用戶等待焦慮的心態(tài)，也能用來作為品牌透?jìng)?，增加曝光?
那關(guān)于loading動(dòng)畫相關(guān)知識(shí)，我覺得對(duì)于設(shè)計(jì)師來說是有必要去了解的，所以我找到了這篇優(yōu)秀文章，讓大家能夠深入了解loading動(dòng)畫，透過現(xiàn)象看本質(zhì)，學(xué)以致用。
圖片來源：Domaso
沒有人喜歡等待
在用戶心目中，優(yōu)秀的應(yīng)用、工具、網(wǎng)站都應(yīng)該是制作精良且能快速響應(yīng)他們需求的產(chǎn)品。
舉一個(gè)真實(shí)的例子：最近我們新發(fā)布了一個(gè)用戶評(píng)價(jià)的應(yīng)用，第一個(gè)版本并不完美，loading延遲在2-3秒。
你猜怎么著？
很多人認(rèn)為這3秒是一個(gè)故障。在實(shí)際開發(fā)中，你可能要面對(duì)龜速的網(wǎng)絡(luò)，沒有優(yōu)化的代碼，操作時(shí)間長或數(shù)據(jù)處理太多等問題。因此，App的運(yùn)行速度可能沒有用戶預(yù)期中的那么快。雖然早期用戶可能會(huì)給你的產(chǎn)品第二次機(jī)會(huì)，但絕大多數(shù)人會(huì)立即退出它。
除非你的產(chǎn)品界面對(duì)用戶的行為提供了明確的即時(shí)反饋。剛才發(fā)生了什么？是操作錯(cuò)誤還是在等待服務(wù)器的請(qǐng)求？用戶需要等待多長時(shí)間才能正常使用這個(gè)工具或網(wǎng)站？用戶為什么要等待呢?
讓我們一起深入了解Loading動(dòng)畫：
1、loading動(dòng)畫的歷史由來
2、優(yōu)秀loading動(dòng)畫所具備的特征
3、細(xì)節(jié)可以做出精彩
4、簡單處理還是精心制作
loading動(dòng)畫的歷史由來
對(duì)于這種類型的反饋，設(shè)計(jì)師會(huì)使用進(jìn)度條、loading示意圖、預(yù)loading、或旋轉(zhuǎn)器。它們向用戶解釋什么時(shí)間發(fā)生了什么或正在loading的過程，以減少用戶的心理焦慮。
你覺得設(shè)計(jì)師是從什么時(shí)候開始考慮加上這種反饋的？
我很驚訝的看到關(guān)于Nielsen Norman的一篇文章，提到響應(yīng)時(shí)間和loading動(dòng)畫是在1993年（參考1985年的資料）：
如果計(jì)算機(jī)無法提供快速響應(yīng)，則應(yīng)該以百分比的形式向用戶提供持續(xù)反饋?！綧yers 1985 論文，“計(jì)算機(jī)-人機(jī)界面百分比進(jìn)度指標(biāo)的重要性”】
顯示進(jìn)度的三個(gè)主要優(yōu)點(diǎn)：向用戶保證系統(tǒng)沒有崩潰且正在處理他們的問題；告訴用戶還需要等待多久時(shí)間，讓用戶能騰出時(shí)間來做其他的事而不只是干等；甚至可以向用戶提供一些可以閱讀和查看的內(nèi)容，減少等待的焦慮?！?Jakob Nielsen, on January 1, 1993
自從Web 1.0以來，幾乎每個(gè)網(wǎng)站都有l(wèi)oading狀態(tài)，用戶可以注意到當(dāng)頁面內(nèi)容正在loading時(shí)，這些Loading動(dòng)畫活躍的身影。
在2007年的時(shí)候，網(wǎng)站的Loading形式大概是下面這張圖上的樣子：
2007年時(shí)的Loading
在那個(gè)年代，你可以找到像Firewoks(2007)、Flash (2008) 或者Loading GIF Generator （2009）這樣的工具來做這些 loading動(dòng)畫。
到了2010年，隨著CSS3的迅猛發(fā)展，出現(xiàn)了很多教程教大家如何做CSS3動(dòng)畫，也能找到大量的loading 動(dòng)畫預(yù)設(shè)包。設(shè)計(jì)師也可以在Ps cs5中做這種loading動(dòng)畫，這個(gè)在10年前是非常流行的。
在那時(shí)，Loading動(dòng)畫更像是web的專屬問題，因?yàn)轫撁鎙oading確實(shí)是一個(gè)問題。在2010年的時(shí)候，很多Flash網(wǎng)頁都做了一些很有創(chuàng)意的loading動(dòng)畫：
30個(gè)創(chuàng)意Flash loading案例（https://web3mantra.com/2010/09/08/30-creative-flash-preloaders-examples/）
漸漸地，設(shè)計(jì)師們開始不滿足于簡單的進(jìn)度條和旋轉(zhuǎn)Loading，到2014年-2016年的時(shí)候，變得更加關(guān)注這塊的設(shè)計(jì)。所以，你能發(fā)現(xiàn)更多關(guān)于loading教程，免費(fèi)的Loading設(shè)計(jì)資源，插件和開源項(xiàng)目。
2016年出現(xiàn)的Material Design loading(http://www.qooqee.com/news/muse-preloader-widget-tips)
設(shè)計(jì)趨勢(shì)和方法已經(jīng)發(fā)生了變化，但向用戶提供有效反饋的原則依然需要遵循。
優(yōu)秀loading動(dòng)畫所具備的特征
在一個(gè)完美的世界里，loading動(dòng)畫應(yīng)該：
盡可能少的顯示給用戶
如果你的工具或網(wǎng)站工作的足夠快，那就是非常完美的?；蛘咧辽僖沟盟鼈兊乃俣确嫌脩舻念A(yù)期，顯示好看的loading動(dòng)畫只是一個(gè)緩兵之計(jì)，等待太久了一樣會(huì)惹惱用戶。所以，首先應(yīng)該是解決內(nèi)容的loading問題。
給出具體時(shí)間
它可以是一條簡單的文本信息，告知大致的等待時(shí)間，也可以是可視化的圖形來表示?？偣采蟼髁硕嗌傥募扛滦枰嗌俜昼?？已經(jīng)進(jìn)行到了什么階段？這些體驗(yàn)上的設(shè)計(jì)細(xì)節(jié)都可以給用戶預(yù)期并減少焦慮。
宇航員數(shù)據(jù)loadingby Cream M.
告訴用戶為什么需要等待
一些應(yīng)用的loading過程，通常讓用戶不大容易理解。一個(gè)好的Loading動(dòng)畫，應(yīng)該要告知用戶等待的原因以及等待的背后軟件正在做什么：
文件獲取動(dòng)畫 by Vinoth
讓我們說回我的案例，那個(gè)反饋工具軟件。當(dāng)我們的等待時(shí)間超過1秒時(shí)，我們決定給這段等待時(shí)間增加一段解釋。動(dòng)畫說明應(yīng)用目前正在處理截圖資源，這清晰的表明，我們的工具沒有崩潰，它只是正在處理請(qǐng)求：
好的loading動(dòng)畫
讓等待的過程不那么讓人無聊
可以放一個(gè)有趣的動(dòng)畫來吸引人，讓用戶的眼睛始終保持忙碌。
動(dòng)畫來源：Alex Kunchevsky
減少用戶等待時(shí)間的心理感知
這與上面提到的一點(diǎn)非常相關(guān)，如果你在等待的過程中發(fā)現(xiàn)了一些能夠吸引用戶注意力的東西，那么感覺上時(shí)間就會(huì)過得更快。它可以是一個(gè)引人注目的色彩搭配，有趣的想法，或者是一個(gè)什么特別的東西。
蛋糕loading by Pierre Kleinhouse
透?jìng)鞴酒放菩蜗?/strong>
如果用戶在用你的應(yīng)用或者網(wǎng)站時(shí)會(huì)有一段等待時(shí)間，為什么不機(jī)智的利用好這段時(shí)間呢？我不建議僅僅只是為了做loading而做一個(gè)loading動(dòng)畫或者去在動(dòng)畫里使用一些心理學(xué)技巧。我覺得最好是將品牌的聲音融入整個(gè)Loading動(dòng)畫中，讓它成為一個(gè)非常重要的設(shè)計(jì)細(xì)節(jié)：
BCG的車票應(yīng)用動(dòng)畫 by Antonin
細(xì)節(jié)可以做出精彩
雖然有些人可能會(huì)認(rèn)為Loading只是一個(gè)很小的UI細(xì)節(jié)，但它其實(shí)也有許多類型和變化。一般來說，我把loading動(dòng)畫分為幾類，進(jìn)度條，無限循環(huán)的loading圖和骨架圖。
進(jìn)度條
當(dāng)可以明確loading時(shí)間時(shí)使用，進(jìn)度條可以通過數(shù)字或視覺化的形式來表現(xiàn)。
有數(shù)字進(jìn)度的，有時(shí)也稱為百分比指示符。他們可以簡單直接，也可以很有創(chuàng)意，需要對(duì)你的用戶業(yè)務(wù)表達(dá)更有效：
一個(gè)app loading頁 by Nguyen Tran
你也可以找到有趣的進(jìn)度條和循環(huán)動(dòng)畫結(jié)合的loading圖。
Loading動(dòng)畫by Dragonlady
進(jìn)度條背后的主要思想是顯示一個(gè)操作將花費(fèi)多長時(shí)間以及目前所處的狀態(tài)。根據(jù)UI需求的不同，進(jìn)度條也可以是線性的，沒有百分比的形式。
想想Gmail，它沒有顯示進(jìn)度百分比，但是用戶同樣可以感覺到加載的進(jìn)度。下面是兩個(gè)簡單而又創(chuàng)意的例子：
Gamil loading和一個(gè)創(chuàng)意loading動(dòng)畫 by Allen Zhang
無限loading動(dòng)畫
當(dāng)loading的時(shí)間是未知的時(shí)候來使用，它可以是默認(rèn)的旋轉(zhuǎn)圖，也可以是一些創(chuàng)意動(dòng)畫，顯示應(yīng)用正在做一些事情。
計(jì)算loading圖標(biāo) by Hoang Nguyen
創(chuàng)意性loading動(dòng)畫一樣可以與業(yè)務(wù)緊密相關(guān)，并幫助支持品牌發(fā)聲。請(qǐng)思考下那些應(yīng)用會(huì)使用這種loading動(dòng)畫？
LittlePin Spinner by Daniel Sofinet
無限循環(huán)動(dòng)畫要求用戶在上傳或執(zhí)行某些操作時(shí)等待，但不要求具體需要多久時(shí)間，它們可能會(huì)非常簡單或非常有創(chuàng)意。
Loading cat by domaso. So cute!
Infinity by Eszter Balogh. 看起來非常有趣，但是你并不想他們永遠(yuǎn)不停下來。
如你所見，如今的loading動(dòng)畫不僅僅只是一個(gè)系統(tǒng)狀態(tài)的UI元素。
骨架動(dòng)畫
骨架動(dòng)畫展示了loading頁面的變化過程，你可以把它理解為開始是一些頁面占位圖，逐步加載上一些可見的圖片，文本和其他內(nèi)容。
這個(gè)詞最早出現(xiàn)在Luke Wroblewski 的文章中，Luke建議使用骨架動(dòng)畫來獲得更好的loading體驗(yàn)。這個(gè)想法得到了其他設(shè)計(jì)師的支持，并在Facebook、Linkedln、YouTube, Google Drive 等用戶界面中得到了應(yīng)用。
舉個(gè)栗子，如果你使用的是網(wǎng)頁設(shè)計(jì)工具Figma，你會(huì)在頁面頂部看到一個(gè)進(jìn)度條，同時(shí)還在逐步loadingUI：首先你會(huì)看到占位符，然后才是可用數(shù)據(jù)：
Figma UI
簡單處理還是精心制作
除了這篇文章中所展示的一些優(yōu)秀案例和Dribbble上的設(shè)計(jì)概念，在目前大多數(shù)應(yīng)用中，你可能能看到還是一個(gè)默認(rèn)的Loading。
有一段時(shí)間，簡單的Loading被大眾所推崇，因?yàn)樗麄儗?duì)于性能的影響最小（尤其是對(duì)于web）。使用默認(rèn)的或開源的loading要容易的多，不需要設(shè)計(jì)師和開發(fā)花心思來設(shè)計(jì)和實(shí)現(xiàn)它。
如果你正在開發(fā)MVP或者項(xiàng)目的第一個(gè)版本，那么使用簡單的或者開源的loading動(dòng)畫更符合邏輯。在這個(gè)階段，即使把loading動(dòng)畫做的再怎么有創(chuàng)意，也并不會(huì)對(duì)你的產(chǎn)品有多么大的幫助，如果它不能解決真正的需求。
一些簡單的loading動(dòng)畫案例
有趣的是，在2016-2019年，我們可以看到非常多精心的loading動(dòng)畫。注重細(xì)節(jié)，日益成熟的設(shè)計(jì)公司，更好的科技環(huán)境，更方便的設(shè)計(jì)工具，這些都使得loading動(dòng)畫變得更加富有創(chuàng)造性。如果你瀏覽Dribbble，能找到非常多超贊的Loading動(dòng)畫，所以這也成了展現(xiàn)自己設(shè)計(jì)能力的一種方式。
藍(lán)藍(lán)設(shè)計(jì)( www.bouu.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。
如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里
通過點(diǎn)擊、滑動(dòng)、滾動(dòng)和鍵盤快捷鍵來交互的日子嗎？它們不再是唯一的交互方式,一起來了解一下~
還記得瀏覽網(wǎng)頁時(shí)，只能通過點(diǎn)擊、滑動(dòng)、滾動(dòng)和鍵盤快捷鍵來交互的日子嗎？而現(xiàn)在，它們不再是唯一的交互方式，當(dāng)蘋果推出第一款iPhone時(shí)，多點(diǎn)觸控技術(shù)成為了主流，用戶們了解到，他們不僅可以在界面上指向、輕點(diǎn)還可以捏合、展開和滑動(dòng)。手勢(shì)成為新的操作方式。
一、UI中手勢(shì)的力量
手勢(shì)非常自然和直觀，他們與真實(shí)世界反應(yīng)類似。
對(duì)于使用手勢(shì)，這里有三個(gè)主要的理由：
● 干擾少
App內(nèi)，手勢(shì)控制使用地越多，在屏幕上出現(xiàn)的按鈕就越少，這樣可以留出更多空間給更有價(jià)值的內(nèi)容。這使得app以內(nèi)容為重點(diǎn)，并讓用戶在沒有障礙，或者在分心的情況下也能進(jìn)行最重要的操作。
● 使用簡單
一個(gè)手勢(shì)一旦被用戶發(fā)現(xiàn)和學(xué)習(xí)使用就會(huì)讓用戶在體驗(yàn)感到愉悅，而且手勢(shì)可以減少步驟，來達(dá)到提高交互體驗(yàn)的目的。例如，當(dāng)你需要?jiǎng)h除一些項(xiàng)目時(shí)，用“一次點(diǎn)擊刪除一個(gè)”的方式的很浪費(fèi)時(shí)間的，但是如果使用“滑動(dòng)一下，刪除一個(gè)”的滑動(dòng)手勢(shì)，就更簡單快速，讓用戶更加愉悅。
● 無縫交互
雖然按鈕看起來對(duì)于觸發(fā)響應(yīng)更加有用，但手勢(shì)具有更大的潛力，使內(nèi)容的交互更加直觀。
二、手勢(shì)的缺點(diǎn)
但同時(shí)，手勢(shì)也存在難規(guī)范、易混淆等缺點(diǎn)。
● 增加用戶負(fù)擔(dān)
大多數(shù)手勢(shì)學(xué)起來或者記起來不自然也不簡單。舉個(gè)例子，在大多數(shù)APP，一個(gè)手指的手勢(shì)就對(duì)應(yīng)一件事，用兩個(gè)手指做一個(gè)同樣的手勢(shì)意味著另外一件事，其他對(duì)應(yīng)事件的手勢(shì)還有很多。
● 缺乏反饋
在大多數(shù)情況下，手勢(shì)不會(huì)留下任何路徑記錄。這意味著，如果做一個(gè)手勢(shì)但沒有得到反應(yīng)或者得到錯(cuò)的反應(yīng)，這樣就只能獲得很少的信息或者不能獲得有幫助的信息去解釋為什么這么做。
● 缺乏一致性
大多數(shù)手勢(shì)在app中還不是標(biāo)準(zhǔn)統(tǒng)一的。他們對(duì)于用戶不總是顯而易見的。甚至一個(gè)簡單的滑動(dòng)手勢(shì)，在眾多郵箱app內(nèi)的郵件項(xiàng)目中也有著不同的工作方式。例如，在Apple Mail 中，刪除一個(gè)未讀項(xiàng)目，你應(yīng)該向左滑動(dòng)這個(gè)沒有打開的郵件，然后界面會(huì)出現(xiàn)選項(xiàng)來刪除這個(gè)項(xiàng)目。在Gmail里，向左滑動(dòng)可以把郵件標(biāo)記為未讀狀態(tài)。
三、手勢(shì)成為移動(dòng)端UI成功的關(guān)鍵
1.如何選擇好的手勢(shì)
如果你的界面里要使用手勢(shì)，那你就必須要去了解你所在的市場(chǎng)以及你的目標(biāo)用戶會(huì)去使用的app。要嘗試在你的app里使用和它們相同類型的手勢(shì)。這樣，你不僅基于你的目標(biāo)市場(chǎng)的用戶的行為優(yōu)化了你的界面，還讓用戶從一開始就能舒適的使用你的app。
2.手勢(shì)教學(xué)
雖然每個(gè)移動(dòng)端app都必定會(huì)用到手勢(shì)，但是要讓用戶很自然的就能知道如何操作(使用什么手勢(shì)可以干什么)卻一個(gè)挑戰(zhàn)?？捎|摸的界面提供了很多條件來使用自然的手勢(shì)，例如輕點(diǎn)、滑動(dòng)和捏合來完成任務(wù)，但是不同于圖形界面的操作，手勢(shì)的交互用戶往往是看不到的。
因此，要讓用戶能發(fā)現(xiàn)手勢(shì)是很重要的。你需要確保你提供了正確的線索----通過視覺引導(dǎo)來幫助用戶更容易的發(fā)現(xiàn)如何與界面進(jìn)行交互。
3.如何在情境中教育用戶
教程和演示的做法相當(dāng)流行。在許多app中加入教程意味著要想用戶顯示一些說明內(nèi)容來介紹界面。然而，UI教程不是介紹app的核心功能的最優(yōu)雅的式。
良好執(zhí)行的UI手勢(shì)總是可以在易于實(shí)現(xiàn)視覺提示和漸進(jìn)式披露的游戲中找到。這顯而易見，最好的游戲可以使人們隨著時(shí)間的推移來學(xué)習(xí)到技巧，而不是靠指導(dǎo)他們。例如，PuddingMonster 的游戲機(jī)器完全基于手勢(shì)，但是他們?cè)试S用戶得到基礎(chǔ)的信息，他們不需要做很多的猜測(cè)。他們可以展示動(dòng)畫場(chǎng)景，讓用戶馬上知道要做什么。
四、使用動(dòng)效來傳達(dá)手勢(shì)
手勢(shì)總是與移動(dòng)app中的動(dòng)效相關(guān)聯(lián)。動(dòng)效在維護(hù)用戶體驗(yàn)中起著非常重要的作用。作為設(shè)計(jì)師，你可以利用動(dòng)效來傳達(dá)出用戶可以進(jìn)行某個(gè)操作。當(dāng)動(dòng)效與手勢(shì)一致時(shí)，用戶就會(huì)意識(shí)到自己與該物體正在相互作用。
動(dòng)效在向用戶提供視覺反饋上是非常重要的。沒有動(dòng)效，用戶就不能獲得足夠的信息反饋，不能確定他們是不是成功地完成了手勢(shì)動(dòng)作。
這里有三種流行的基于動(dòng)效來幫助用戶學(xué)習(xí)手勢(shì)。
第一種：動(dòng)效視覺提示
顯示一個(gè)在執(zhí)行某個(gè)操作時(shí)如何和某一個(gè)界面元素進(jìn)行交互的預(yù)覽。它的目的是在手勢(shì)和操作之間建立聯(lián)系。例如下圖中的這個(gè)游戲app是完全基于手勢(shì)操作的，這個(gè)app讓用戶不用去猜測(cè)就能知道該如何操作。用動(dòng)畫來傳達(dá)功能信息能立即讓用戶清晰的知道該怎么做。
第二種：內(nèi)容的梳理
內(nèi)容梳理是通過微妙的視覺線索來暗示用戶進(jìn)行手勢(shì)操作。例如下圖中卡片的展示，它表明這張卡的背后還存在著其他的卡片，這清晰的表明了可以滑動(dòng)卡片。
第三種：功能可見性
你可以讓你界面里的某些元素具有很明顯的可供性來讓用戶知道這個(gè)是可以進(jìn)行某種操作的。例如下圖中點(diǎn)擊相機(jī)icon后鎖屏就會(huì)從下往上彈起，展示出在下面的相機(jī)功能。
五、總結(jié)
手勢(shì)是一種強(qiáng)大的互動(dòng)模式。移動(dòng)設(shè)備已經(jīng)從磚塊發(fā)展到由我們手指驅(qū)動(dòng)的復(fù)雜計(jì)算器。觸摸和手勢(shì)交互在使移動(dòng)體驗(yàn)更加簡便有趣方面，有很大的潛力。
設(shè)計(jì)一款移動(dòng)端的app一定要思考手勢(shì)設(shè)計(jì)。手勢(shì)應(yīng)該起到協(xié)調(diào)和節(jié)約時(shí)間的作用。為了設(shè)計(jì)一個(gè)有意義的手勢(shì)，你應(yīng)該規(guī)定一個(gè)動(dòng)作以及與其配套的一個(gè)手勢(shì)。提供反饋意見也非常重要，對(duì)于可能要進(jìn)行的行動(dòng)要有明確提示，并進(jìn)行手勢(shì)的引導(dǎo)。
藍(lán)藍(lán)設(shè)計(jì)( www.bouu.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì)
如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里
在設(shè)計(jì)的時(shí)候，各種視覺要素以有序的方式排列，設(shè)計(jì)師需要通過對(duì)各部分空間的精妙設(shè)置來實(shí)現(xiàn)這一點(diǎn)。通常而言，我們的目光總會(huì)被最引人注目的部分吸引——無論它是視覺主體還是負(fù)空間。視覺主體和負(fù)空間，兩者都很重要，尤其當(dāng)你需要平和地呈現(xiàn)一個(gè)和諧、連貫、天衣無縫的設(shè)計(jì)。那么在一個(gè)網(wǎng)頁設(shè)計(jì)作品中，設(shè)計(jì)師到底利用空間傳達(dá)出怎樣的一個(gè)故事呢？這就牽涉到我們今天要聊的主題了，格式塔原理。人類的大腦天生就能把規(guī)律性的散點(diǎn)連接起來，并對(duì)目之所及的事物賦予意義。設(shè)計(jì)是一個(gè)創(chuàng)造性的領(lǐng)域，是形式和空間的相互融合，并隨之創(chuàng)造各種各樣的體驗(yàn)。無論我們接觸到什么樣的設(shè)計(jì)作品，我們的大腦都會(huì)本能地將作品解構(gòu)為更簡單的各個(gè)組件，這些組件由基本的形狀和不同的形態(tài)組成，而這些形狀和形態(tài)則與空間息息相關(guān)。過往豐富的體驗(yàn)與經(jīng)歷，使得我們的腦海中充滿了各種各樣的記憶，于是我們很容易就能識(shí)別出這些特定的設(shè)計(jì)形式。
正空間，或者說顯著的設(shè)計(jì)主體，構(gòu)成了設(shè)計(jì)的「肉體」，它是你看到形狀、顏色、圖案等部分。相反，負(fù)空間多數(shù)情況下是指背景或大量留白。
文森特·梵高（Vincent Van Gogh）的這幅廣受歡迎的作品，是一個(gè)以正負(fù)空間之間有著強(qiáng)對(duì)比的經(jīng)典設(shè)計(jì)案例。
就像正空間似乎支配著負(fù)空間一樣，兩者都被用來平衡地傳達(dá)一個(gè)和諧、連貫的設(shè)計(jì)理念。
在平衡的構(gòu)圖中，設(shè)計(jì)的正負(fù)空間都是相互配合、相互補(bǔ)充的，形成一個(gè)無縫、美觀的整體。相反，不平衡的構(gòu)圖會(huì)讓觀眾感到不適，傳達(dá)出一個(gè)不完整的、扭曲的故事。
網(wǎng)頁設(shè)計(jì)的好壞很大程度上取決于它的實(shí)用性和可用性。如果你的設(shè)計(jì)技巧很差，那么網(wǎng)頁設(shè)計(jì)的整體效果和表現(xiàn)都會(huì)受到影響。但從另一個(gè)角度來看，在「內(nèi)容為王」的時(shí)代，如果空間布局使用不當(dāng)，內(nèi)容將對(duì)您的網(wǎng)站產(chǎn)生顯著的負(fù)面影響。
如果你認(rèn)為你的開發(fā)技能很棒，但你的設(shè)計(jì)技能可能需要更多的改進(jìn)，那這篇文章對(duì)你就太合適了。在本文中，我們將討論：
我們還將討論一些真實(shí)的網(wǎng)頁設(shè)計(jì)實(shí)例，探討每個(gè)案例如何體現(xiàn)格式塔原理，以及它對(duì)空間的創(chuàng)造性使用。
話不多說，一起開始學(xué)習(xí)吧。
空間由兩個(gè)主要維度組成：正空間和負(fù)空間。正空間是可被直接感知到的視覺元素，負(fù)空間則為元素以外的留白和間隙。如前所述，正的是物體，負(fù)的是物體后面可以通常被忽略的留白區(qū)域。一個(gè)是焦點(diǎn)，另一個(gè)是背景。在前者產(chǎn)生活動(dòng)和刺激時(shí)，后者則保持靜止和模糊。一個(gè)是月亮，另一個(gè)是環(huán)繞著它的暗夜。
在網(wǎng)頁設(shè)計(jì)中，正負(fù)空間相互作用，共同形成構(gòu)圖，傳達(dá)理念。只有當(dāng)正負(fù)空間通過對(duì)比來區(qū)分，同時(shí)又向更大的區(qū)域延伸時(shí)，才會(huì)產(chǎn)生視覺層次（腦補(bǔ)一下陰陽太極圖吧）。
正負(fù)空間的交匯之處就是信息的交匯點(diǎn)。負(fù)空間拱衛(wèi)著正空間元素，讓后者更加突出和顯著。
通常而言，正空間在絕大多數(shù)時(shí)候起主導(dǎo)作用，實(shí)際上負(fù)空間同樣重要。負(fù)空間的優(yōu)點(diǎn)在于:
設(shè)計(jì)中的負(fù)空間相反并不是負(fù)面的。當(dāng)正負(fù)空間比例平衡得當(dāng)時(shí)，兩者在視覺上會(huì)顯得非常舒適。而當(dāng)其中一個(gè)占據(jù)主導(dǎo)地位，并給人一種「過于擁擠」或「空洞無物」的印象時(shí)，混亂才會(huì)發(fā)生。在這兩種情況下，受眾都無法處理如此復(fù)雜的信息，因此，而這樣的空間設(shè)計(jì)是不符合網(wǎng)頁設(shè)計(jì)的基本原則和設(shè)計(jì)動(dòng)機(jī)的。
這是一個(gè)網(wǎng)頁模板，它展現(xiàn)了何為「內(nèi)容錯(cuò)位」和「空間混亂」:
△ 布局混亂
△ 空間失衡
△ 適當(dāng)?shù)牟季终{(diào)整
△ 網(wǎng)頁設(shè)計(jì)中空間的合理運(yùn)用
有意思的是，當(dāng)談到空間的概念和布局出現(xiàn)時(shí)，質(zhì)疑聲也隨之而起。
類似的問題只能在理解基本概念后再來作答。黃金經(jīng)驗(yàn)法則告訴我們——簡單是最好的策略。
在文章開頭，我曾提到在設(shè)計(jì)網(wǎng)頁的時(shí)候，盡量創(chuàng)建簡單的用戶界面，這是一舉兩得的舉措，既可以造福你自己，也可以惠及用戶?；驈谋砻嫔峡?，網(wǎng)頁設(shè)計(jì)的重點(diǎn)在于增加網(wǎng)站的視覺吸引力，使用戶操作更為簡便。
我們的大腦總是在扮演偵探的角色，試圖尋找隱藏的線索和空間之間缺失的聯(lián)系。因此它會(huì)將當(dāng)前的視覺信息與之前的經(jīng)驗(yàn)進(jìn)行比對(duì)。為了成為一名的網(wǎng)頁設(shè)計(jì)師，你必須先了解大腦是如何感知周圍環(huán)境的。它可以幫助你選擇特定的視覺元素，利用它們來影響觀眾的感知。
偉大的設(shè)計(jì)師明白心理學(xué)在視覺感知中所扮演的強(qiáng)大角色。當(dāng)某人的目光與你的設(shè)計(jì)作品相遇時(shí)會(huì)發(fā)生什么？他們對(duì)你的文章所傳達(dá)的信息有何反應(yīng)？——?jiǎng)诶げ际?，Autodesk 品牌內(nèi)容策略師
作為設(shè)計(jì)師，你必須清楚地了解視覺設(shè)計(jì)和心理學(xué)是如何相互聯(lián)系、相互影響的。換句話說，開發(fā)以用戶為中心的簡單界面，借助正負(fù)空間進(jìn)行設(shè)計(jì)主要依靠格式塔原理，它可以幫助你理解和控制視覺和心理的聯(lián)系。
格式塔在德語中是「形式」的意思。它更多的是一個(gè)概念而不是一個(gè)單純的詞匯，它最基本的概念是：
整體大于各個(gè)部分的總和?！獛鞝柼亍た挤蚩ǎ兰乱嵝睦韺W(xué)家，格式塔心理學(xué)的代表人物之一）
當(dāng)單個(gè)部分的集合以某種方式統(tǒng)一時(shí)，它們?cè)谖覀兊母兄?dāng)中就是一組。我們把元素看作一個(gè)整體，這一概念或理論基本適用于所有的設(shè)計(jì)媒介：我們不把文本、顏色和形狀看作單獨(dú)的元素，而是把整個(gè)網(wǎng)頁看作一個(gè)整體。同樣的道理也適用于森林：我們看到的不僅僅是一堆樹，就像我們?cè)诳春Ｑ髸r(shí)看不到水滴一樣。
格式塔原則描述了當(dāng)特定的條件出現(xiàn)時(shí)，人類大腦是如何感知視覺成分的。它幫助大腦創(chuàng)造視覺圖像。因此，格式塔原理通常會(huì)應(yīng)到下面六個(gè)主要類別：
1. 圖像和背景
「圖形」是直觀地、明顯地與背景分離的物體。
目前最經(jīng)典的例子是圣杯——兩個(gè)鏡面對(duì)稱輪廓構(gòu)成了花瓶。當(dāng)你第一次看到這張照片的時(shí)候，你的眼睛會(huì)立即被吸引到畫面上看起來最聚焦的視覺主體上，可能是相互對(duì)立的面孔，也可能是花瓶。當(dāng)你的大腦在調(diào)整你的焦點(diǎn)時(shí)，背景或花瓶被模糊了，在那一刻，你的大腦直覺地在圖像中感知到背景。
過了一會(huì)兒，你會(huì)注意到背景中的花瓶，并意識(shí)到它本來就在那里。盡管圖形和基本原則看起來模棱兩可，設(shè)計(jì)師常常創(chuàng)造視覺上吸引人的超現(xiàn)實(shí)和虛幻藝術(shù)，并將之運(yùn)用于網(wǎng)頁設(shè)計(jì)。
有時(shí)，圖形與背景之間的關(guān)系是穩(wěn)定的，而這種穩(wěn)固的視覺關(guān)系使得兩者之間，產(chǎn)生區(qū)別。這種關(guān)系有的時(shí)候又是不穩(wěn)定的，這意味著圖形和背景是無法清晰區(qū)分的。由于這種關(guān)系的模糊性，用戶會(huì)很自然地開始困惑。
為了讓大家直觀地感受到圖形和背景之間的關(guān)系，讓我們?cè)敿?xì)的拿幾個(gè)案例來進(jìn)行討論。這些例子都集中在圖形-背景關(guān)系中的三個(gè)主要方面：對(duì)比度、Box 區(qū)塊和陰影。這三方面涉及到諸多屬性，包括顏色、尺寸和信息量，它們關(guān)系到內(nèi)容的區(qū)分和視覺的縱深。
在下面的第一個(gè)例子中，Trellis 使用了一個(gè)全屏大圖背景，并且搭配上清晰的 CTA 元素，圖形-背景關(guān)系明確，該關(guān)系清楚地展示出了細(xì)節(jié)、色彩和尺寸上的差異。
頁面中的文字是位于中央的手寫風(fēng)格字體，與背景中的圖像相比顯得很突出。和灰色背景圖片構(gòu)成對(duì)比的白色文本是吸引用戶注意力的焦點(diǎn)，這使得文本在畫面中是高度可見的。從另一個(gè)角度來看，背景圖片是模糊的，所以清晰的文本會(huì)非常醒目。這些都表明，這里的文本被優(yōu)先考慮為圖形或正空間，而模糊的圖像被用作背景或負(fù)空間，從而強(qiáng)烈地暗示了圖形和背景之間的關(guān)系。
下一個(gè)案例是下圖方框里的內(nèi)容。 Ocean Health Index 巧妙地利用了框內(nèi)區(qū)域的內(nèi)容將圖片與背景分離開來。這是你在瀏覽他們的網(wǎng)站時(shí)看到的：
當(dāng)你第一次瀏覽這個(gè)頁面時(shí)，哪個(gè)部分會(huì)吸引你的注意力？你會(huì)發(fā)現(xiàn)，它的主要文本為白色和藍(lán)色背景構(gòu)成對(duì)比，而更加醒目的是是兩個(gè)與文字對(duì)比鮮明的 Box 區(qū)塊。前者借助了深色背景和文本色彩上的差異，構(gòu)造對(duì)比度。而 Box 區(qū)塊本身的色彩和背景色構(gòu)成對(duì)比的同時(shí)，還和更靠前的文本構(gòu)成色彩對(duì)比。
背景使用了微妙的色調(diào)，使數(shù)字得以鮮明地展現(xiàn)，并突出細(xì)節(jié)。方框的運(yùn)用使它們?cè)陧撁嫔锨逦梢姟?
一些網(wǎng)站還通過添加陰影來表現(xiàn)物與背景的關(guān)系，產(chǎn)生一種圖象被置于背景之上的感覺。以下截圖來自于 serious unsweet.com：
Seriously Unsweetened 的著陸頁使用了不止一種方法來保持圖形與背景的平衡關(guān)系。明亮顏色和陰影的配合；背景是純粹的白色，使得前景元素更容易從中出來。背景之上的元素都是「正空間」，圖中的物體呈現(xiàn)在背景的映襯下，有一種被置于「頂部」的錯(cuò)覺。而陰影并沒有直接用在圖片和文本上，而是應(yīng)用在圖片的內(nèi)部，這讓我們注意到在主要圖像內(nèi)部還有另一層視覺元素，這意味著里面還有一層圖片-背景關(guān)系——這是一個(gè)非常智慧的設(shè)計(jì)。
2. 接近性原理
接近性是指頁面中元素之間的接近程度。網(wǎng)頁中的不同元素可以組合在一起，不同的接近程度會(huì)帶來不同的關(guān)聯(lián)屬性。除了視覺特征上的接近性之外，這些元素與其他頁面元素之間的距離接近度也會(huì)自動(dòng)地在觀眾的腦海中產(chǎn)生關(guān)聯(lián)感。
從圖像到文本、導(dǎo)航欄到網(wǎng)頁表單，這種接近性原則在網(wǎng)頁設(shè)計(jì)中適用范圍非常廣。將類似的內(nèi)容組合在一起時(shí)，它將在元素之間創(chuàng)建關(guān)聯(lián)，為觀者提供更好的視覺體驗(yàn)。
以下是 Mashable 網(wǎng)站導(dǎo)航顯示的運(yùn)用接近度的案例：
在上方的截圖中，我們可以清楚地看到如何將相同類別的元素放在一起，以顯示它們與主菜單的關(guān)系。由于顏色和文本大小的選擇，使觀者的目光自動(dòng)被吸引到主標(biāo)題下的子欄目上。
除了導(dǎo)航欄外，基于網(wǎng)格的內(nèi)容也符合黃金比例的接近性。亞馬遜的產(chǎn)品列表就是最好的例子：
這個(gè)案例體現(xiàn)的是接近性還是相似性還有待討論。如你所見，具備視覺接近性的同類產(chǎn)品使用狹窄的留白進(jìn)行分組和分隔。這種接近性會(huì)指示用戶在類似的產(chǎn)品列表中，對(duì)其目標(biāo)產(chǎn)品基于購買偏好進(jìn)行排序。此外，封閉性原則也在類似項(xiàng)目的清單中發(fā)揮了作用。
現(xiàn)在，我們來仔細(xì)看看 Basecamp 的網(wǎng)頁表單設(shè)計(jì)，它在網(wǎng)頁設(shè)計(jì)中顯示了另一種接近性的理想情況：
可以看到上圖中的表單是被劃分為兩個(gè)主要部分的：個(gè)人信息和 ID 生成兩個(gè)部分。第一部分被暗示為最重要的字段，第二部分則是一個(gè)次要的需求。這兩個(gè)部分的標(biāo)題都因顏色和字體大小的不同而產(chǎn)生區(qū)別。在這個(gè)網(wǎng)頁表單中，接近度是一個(gè)重要指標(biāo)，它將網(wǎng)頁中呈現(xiàn)的信息按優(yōu)先級(jí)排列。
3. 對(duì)稱和秩序
對(duì)稱是指兩個(gè)元素呈現(xiàn)出鏡像關(guān)系。它可以被看作是把一個(gè)物體一分為二的平衡。真實(shí)的對(duì)稱圖形包括等邊三角形、圓形和正方形等幾何圖像。
人類的大腦會(huì)本能地渴望在面孔中找尋「平衡」和「對(duì)稱」，這在美學(xué)上是令人愉悅的。大腦也傾向于在其他物體中找到對(duì)稱，因?yàn)閷?duì)稱創(chuàng)造和諧，讓觀者在觀看圖像時(shí)感到舒適。
下面是 HvD Fonts 在網(wǎng)頁設(shè)計(jì)中體現(xiàn)對(duì)稱性的一個(gè)很好的案例：
這個(gè)頁面不僅顯示了典型的圖形-背景關(guān)系，而且強(qiáng)調(diào)了對(duì)稱性原則的運(yùn)用。頁面被分成四等份，字體大小和顏色相似。四個(gè)部分中的每個(gè)部分的背景都具有相同的主題色和灰度效果。你也可以注意到負(fù)空間不一定是白色的，黑色甚至其他的顏色也可以以圖像作為背景。
對(duì)稱性原則還可以衍生出了另一個(gè)概念：在網(wǎng)頁設(shè)計(jì)中，不對(duì)稱會(huì)使觀感不佳，必須謹(jǐn)慎使用。許多網(wǎng)站使用不對(duì)稱作為平衡間距的元素——非常規(guī)的正空間元素與中性的背景相互平衡，反之亦然。而 Xplode 的營銷理念是不對(duì)稱，Xplode 以獨(dú)特的美觀悅目的方式引發(fā)不對(duì)稱。
這個(gè)網(wǎng)頁利用視覺錯(cuò)覺和不對(duì)稱，抓住了觀者的眼球。作為正空間的物體被放置在一個(gè)不對(duì)稱的布局之下，在負(fù)空間中創(chuàng)造了強(qiáng)烈的視覺吸引力。色彩是兩個(gè)空間和諧的主要因素，并為觀者創(chuàng)造了一種自然的聯(lián)系。左邊的圖形也有很強(qiáng)的平衡性，而右邊的則是帶來更強(qiáng)的視覺吸引力。你覺得這個(gè)設(shè)計(jì)如何呢？
4. 相似性原理
相似性與接近性原理密切相關(guān)的原因，是相似分組對(duì)象之間共享屬性的質(zhì)量。無論是顏色、形狀、形態(tài)、大小、方向或任何其他屬性，當(dāng)這些屬性中的一個(gè)或多個(gè)在鄰近對(duì)象中共享時(shí)，相似性將占上風(fēng)。
即使正空間的元素看起來沒有明顯的聯(lián)系，由于相似性原理，它們也會(huì)與負(fù)空間元素區(qū)分開。
看看這些 UrbanDecay 的商品列表：
雖然上面的商品各不相同，但在位置、色彩、產(chǎn)品布局、表現(xiàn)方式等方面卻有一定的相似性。唯一不同的是左上角的眼影廣告，在同類產(chǎn)品中獨(dú)樹一幟。這顯然是一種營銷策略，目的是在不損害頁面整體對(duì)稱和美觀的情況下吸引注意力。這里要考慮的另一點(diǎn)是，尺寸上的相似性使其他圖像與相似的產(chǎn)品類別區(qū)分開來。
除了產(chǎn)品展示之外，正空間可以與相似度結(jié)合使用，也可以與負(fù)空間結(jié)合使用。
讓我們來看看 influenster 的著陸頁：
上面例子中對(duì)齊的邊框也運(yùn)用了相似性原理。雖然每個(gè)正空間元素是不同的，但是相似的感覺是通過整個(gè)頁面中一致的文本字段來傳達(dá)的。風(fēng)格、布局和主題都是相似的，因此帶來了統(tǒng)一的視覺效果。
5. 封閉性原理
你是否曾經(jīng)遇到過這樣一幅畫面，看上去是閉合的，但實(shí)際上是開放的？這是由于它采用封閉性原理。我們的大腦傾向于「腦補(bǔ)」不完整物體的空白，并利用我們的視覺感知來使圖形完整化。
正空間和負(fù)空間一起構(gòu)成一個(gè)整體。最好的案例就是負(fù)空間中隱藏的形狀和形式，這要求對(duì)正空間中要傳達(dá)的信息進(jìn)行評(píng)估。在封閉空間創(chuàng)造性地使用著正負(fù)空間，可以產(chǎn)生有趣但簡單的設(shè)計(jì)。
下面是 Magu Kambucha 的設(shè)計(jì)圖：
在這個(gè)案例中，可以看到封閉性和圖形-背景關(guān)系的平衡。瓶子和后面的粗體文字構(gòu)成對(duì)比，背景則是和兩者都構(gòu)成對(duì)比的柔粉色。封閉性體現(xiàn)在哪里？看到瓶子后面的文字了嗎？雖然你不能完全看到它，但仍然知道它是「Kambucha」。除了第一個(gè)「K」和最后一個(gè)「A」，其他字母都是半隱藏的，這些字母都是憑觀者的直覺自動(dòng)完成的，整個(gè)形式開始成形，意義也隨之成形。
下面是 Cult 的截圖：
即使文本沒有寫得很清楚，我們的頭腦可以很容易地讀到 CULT 這個(gè)詞。即使單詞不完整，文本的排列和對(duì)齊也可以使其易于辨認(rèn)。
6. 連續(xù)性原理
最后，根據(jù)一般格式塔原則，連續(xù)性遵循模式，即引導(dǎo)實(shí)現(xiàn)遵循一致的路徑，建立從一個(gè)對(duì)象到另一個(gè)對(duì)象的線性模式。
在上面的圖片中，盡管圓形色塊的顏色變淡了，但是觀者更傾向于將中間的間隙其看作一條直線。這使我們相信連續(xù)性的原理比色彩的力量更能引導(dǎo)用戶的視覺感知。當(dāng)我們借助負(fù)空間在視覺元素中畫出路徑，我們的眼睛傾向于優(yōu)先感知正負(fù)空間之間的界限。
腦補(bǔ)出來的這條連續(xù)的線條是我們?cè)谠O(shè)計(jì)中更應(yīng)該引入的視覺線索。
讓我們來看看 Crypton Trading 網(wǎng)站中的視覺線索設(shè)計(jì)：
看到頁面右半部分設(shè)計(jì)的完美延續(xù)了嗎？不管背景的明暗色調(diào)如何變化，圖案在頁面上的變化都非常顯著。當(dāng)你向下滾動(dòng)時(shí)，你會(huì)看到圖案和顏色是如何以連續(xù)和無縫的運(yùn)動(dòng)變化的。在這里，色調(diào)的變化是可以忽略的，我們所看到的是一個(gè)連續(xù)的線和點(diǎn)的模式。
另一個(gè)很好的例子是 OscilloScope 網(wǎng)站：
該網(wǎng)站借用連續(xù)性法則，將網(wǎng)站用戶引入到工作室的 360 度視角中，他們可以在導(dǎo)航中選擇所需的子欄目。
影片《Cargo》的著陸頁也使用了連續(xù)性法則：滾動(dòng)式的導(dǎo)航，以線性運(yùn)動(dòng)的方式讓文本漂浮在網(wǎng)站上。由于 LOGO 是垂直展現(xiàn)的，所以用戶必須向下滾動(dòng)才能看到它的全貌。當(dāng)頁面向下滾動(dòng)時(shí)，靜態(tài) LOGO 開始與并行的文本塊一起浮動(dòng)。導(dǎo)航引導(dǎo)用戶經(jīng)歷不同層次的體驗(yàn)，而不會(huì)干擾隱藏在下面的內(nèi)容。
由于我們的眼睛通常遵循最平滑的路徑，設(shè)計(jì)師可以使用這樣的方式來創(chuàng)建引導(dǎo)路徑。
在這篇文章中，我們討論了格式塔原則與網(wǎng)站 UI 的正負(fù)空間之間的關(guān)系。通過一些真實(shí)的案例，讓大家清楚地知道如何運(yùn)用簡單有效的方法來改變?cè)O(shè)計(jì)的觀感。關(guān)鍵是使用這些原理來設(shè)計(jì)的時(shí)候，可以達(dá)到 1 + 1 > 2 的效果。
人類是根據(jù)感知來思考的——主要是基于視覺。根據(jù)格式塔原理，我們傾向于看到更大的整體性圖景，而不是第一眼看到的某一單個(gè)元素。
正負(fù)空間幫助我們區(qū)分、回憶、感知并識(shí)別理解。在格式塔原理的引導(dǎo)下，我們能夠更好地在網(wǎng)頁設(shè)計(jì)中利用不同元素來創(chuàng)造吸引人的作品。因?yàn)榭臻g對(duì)于任何設(shè)計(jì)師來說都是一件復(fù)雜的事情，所以最好的方法就是保持格式塔原則的完整性。只有這樣才能真正認(rèn)識(shí)到空間在設(shè)計(jì)中的重要性、有效性，繼而使自己成為網(wǎng)頁設(shè)計(jì)領(lǐng)域的佼佼者。
藍(lán)藍(lán)設(shè)計(jì)( www.bouu.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。
如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里
作為交互設(shè)計(jì)師，天天畫的就是交互稿了。而對(duì)于很多新手交互設(shè)計(jì)師以及想轉(zhuǎn)行做交互的同學(xué)們來說，一定都非常想知道大廠的交互設(shè)計(jì)師畫出來的交互稿具體是什么樣子的。但和視覺稿不同，交互稿里面體現(xiàn)了太多產(chǎn)品本身的邏輯，難免涉及到一些敏感內(nèi)容，所以具體的交互稿不太適合直接分享，這就是比較尷尬的問題了。
不過，這不妨礙我為你們做一份交互稿模板。一來我自己也在用，二來可以幫助大家，何樂而不為。
但我必須重點(diǎn)強(qiáng)調(diào)一句話：框架是死的，人是活的，不一定要拘泥于某種形式，你可以根據(jù)自己的需要自由修改。
第一個(gè)是 PPT 型的分頁交互稿，這個(gè)樣式最早是從騰訊 CDC 團(tuán)隊(duì)流傳下來的，我在第二家公司的時(shí)候就從他們的博客中看到過，當(dāng)時(shí)還用 InDesign 做過一個(gè)模板。而我現(xiàn)在所在的團(tuán)隊(duì)用的也是這個(gè)，因此我過來后就自己重新用 Sketch 做了一版，方便以后使用。
1. 封面
封面很簡單，就是文檔標(biāo)題和作者，頂部有一個(gè)通用的文檔標(biāo)題欄，上面的內(nèi)容包括：
我在 Sketch 中為這個(gè)模板中需要改動(dòng)的內(nèi)容都定義了 Symbol，比如這個(gè)標(biāo)題欄，你只要選中之后，就可以在右邊的屬性面板中自定義里面的內(nèi)容。
2. 修訂記錄
修訂記錄這頁，記錄了從文檔建立開始，每次更新的主要內(nèi)容，以及相關(guān)人員，方便后期交接的時(shí)候給對(duì)應(yīng)的產(chǎn)品經(jīng)理、游戲策劃和設(shè)計(jì)師查看。有時(shí)候交互稿更新一次只是修改一小處地方，如果不備注對(duì)方就會(huì)很難找到，可能以后你自己都會(huì)遺忘。
這一塊我也定義了 Symbol 元件，你可以直接復(fù)制一行，然后修改里面的內(nèi)容，「更新內(nèi)容」的文本支持多行輸入。
3. 目錄
這種分頁型的文檔一定要有目錄，備注好每個(gè)模塊對(duì)應(yīng)的頁碼，否則十幾頁看下來都暈了，每次想找到對(duì)應(yīng)的界面還得重新翻一遍。
4. 內(nèi)容頁面
具體的內(nèi)容頁面才是交互稿的核心，一般會(huì)用小氣泡和箭頭進(jìn)行標(biāo)注，然后在右側(cè)用對(duì)應(yīng)的數(shù)字和它們對(duì)應(yīng)，寫下詳細(xì)的交互說明。
結(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 文檔。我很喜歡這個(gè)格式，與 PPT 相比，PDF 在任何平臺(tái)都可以通用，包括手機(jī)、Mac，不用特地裝什么軟件都能很好地打開。
另一種是更常見的交互稿形式，這也是我這幾年進(jìn)騰訊后一直使用的格式。
如果你曾經(jīng)用過上文介紹的 PPT 型模板，你一定會(huì)發(fā)現(xiàn)：它的好處是 PDF 分頁格式非常整齊，比較適合一次性做一個(gè)大產(chǎn)品的交互功能介紹，而不適合小功能的頻繁修改。
今天介紹的這第二種，則是更加輕便快捷的類型。
這種長圖型的交互稿，優(yōu)點(diǎn)很明顯：
來看一張基本樣例：
它的結(jié)構(gòu)分為：
交互稿標(biāo)題、日期
按照項(xiàng)目、模塊和功能的方式命名（如：電腦管家 V12 -清理垃圾-深度清理圖標(biāo)化改版），可以地規(guī)范交互稿名稱，讓其他人很容易理解交互稿涉及的是什么內(nèi)容。
相關(guān)負(fù)責(zé)人
對(duì)應(yīng)的產(chǎn)品經(jīng)理，交互稿的作者，方便評(píng)審時(shí)或者交接后找人。
需求背景
簡單介紹為什么要做這次設(shè)計(jì)，出發(fā)點(diǎn)是什么，遇到了什么問題。
主要界面
這次設(shè)計(jì)中，涉及到的所有主要界面，先陳列出來方便大家快速評(píng)審和討論，視覺接手后可以根據(jù)這些來進(jìn)行風(fēng)格設(shè)計(jì)。
流程說明
有了主要界面后，我們還可能需要對(duì)一些操作流程進(jìn)行說明，比如怎樣發(fā)送一條語音消息，怎樣刪除一條會(huì)話等等。
異常狀態(tài)
最后還要記得檢查一下，每個(gè)界面在沒有內(nèi)容時(shí)的空狀態(tài)、斷網(wǎng)時(shí)的異常狀態(tài)，彈出各種通知的位置等等，千萬不要等到開發(fā)同學(xué)找你的時(shí)候才想起來。
上面所說的，就是一份交互稿的常見內(nèi)容模塊了。
該模板是專門給 Mac 平臺(tái)的 Sketch 用的。
下載后（下載方式見文末），打開你會(huì)看到這個(gè)界面：
里面的每個(gè)模塊我都做了 Symbol 元件，你只要選中就可以在右側(cè)更改內(nèi)容了。
比如下面的文檔基本信息：
我還把可能會(huì)用到的各種字體大小、顏色、對(duì)齊方式都做成了文字樣式：
選中文字后，在右側(cè)下拉框中選擇你要的樣式就好。
交互稿用的都是黑白灰，還有藍(lán)色作為標(biāo)注。
我一直用的這幾種，足夠用。
是不是很心動(dòng)？別著急，先把這個(gè) Sketch 文件保存成 Template（模板）。
然后，你就可以在新建文件時(shí)，選擇從模板處新建，直接用這個(gè)模板開始畫稿。
下載鏈接：https://pan.baidu.com/s/1Jrv7-JDyf2j2SDvvg0-wrA
提取碼：npq2
備用鏈接：https://pan.baidu.com/s/1yIMSWw7pJuHF4H3BgoyrPA
作者：WingST（寇敬），男，33歲，騰訊高級(jí)交互設(shè)計(jì)師、騰訊學(xué)院認(rèn)證講師，9 年工作經(jīng)驗(yàn)的資深互聯(lián)網(wǎng)人，曾任 MIG 桌面安全產(chǎn)品部軒轅設(shè)計(jì)組組長，目前在騰訊游戲 NEXT Studios 工作室負(fù)責(zé)《樂高無限》創(chuàng)造型沙盒游戲的用戶體驗(yàn)設(shè)計(jì)。
負(fù)責(zé)過的產(chǎn)品有騰訊電腦管家 V11.0、加速小火箭 V2.0、騰訊手游助手、騰訊網(wǎng)游助手等。曾在 OPPO 手機(jī)、金蝶軟件等企業(yè)工作，有著 PC、Web、移動(dòng)端等多平臺(tái)的豐富設(shè)計(jì)經(jīng)驗(yàn)。
感謝大家的閱讀，末尾做個(gè)小廣告，我的新書《交互思維：詳解交互設(shè)計(jì)師技能樹》馬上就要上市了，這是我自己九年多來做交互設(shè)計(jì)師的經(jīng)驗(yàn)總結(jié)，也是市面上第一本詳細(xì)介紹交互設(shè)計(jì)師所應(yīng)該掌握的職業(yè)技能的書，適合所有希望了解交互、學(xué)習(xí)交互的設(shè)計(jì)師和產(chǎn)品經(jīng)理。同時(shí)書中也有我進(jìn)騰訊的成長故事，以及一些個(gè)人工作和學(xué)習(xí)方法的分享，絕對(duì)物超所值 → https://item.jd.com/12576242.html
這是我所總結(jié)的「交互設(shè)計(jì)師技能樹」。
藍(lán)藍(lán)設(shè)計(jì)( www.bouu.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。
如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里
需求是攔截前端的網(wǎng)絡(luò)請(qǐng)求和相應(yīng)。
廢話不多說，直接上干貨。
我用的是vue-cli3所以這個(gè)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 實(shí)例
let service = axios.create({
baseUrl: baseUrl,//請(qǐng)求前綴
timeout: 20000, // 請(qǐng)求超時(shí)時(shí)間
crossDomain: true,//設(shè)置cross跨域
withCredentials: true//設(shè)置cross跨域 并設(shè)置訪問權(quán)限 允許跨域攜帶cookie信息
})
// 設(shè)置 post 默認(rèn) Content-Type
service.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';
// 添加請(qǐng)求攔截器
service.interceptors.request.use(
(config) => {
// console.log()
//下面的代碼是如何在攔截器中調(diào)用vuex管理狀態(tài)。
//我這里主要是做了一個(gè)蒙層的遮蓋
// vuex.$store.commit('OPEN_LOADING');
//判斷請(qǐng)求方式是否為POST，進(jìn)行轉(zhuǎn)換格式
config.method === 'post'
? config.data = qs.stringify({...config.data})
: config.params = {...config.params};
// 請(qǐng)求發(fā)送前進(jìn)行處理
return config
},
(error) => {
// 請(qǐng)求錯(cuò)誤處理
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 {
// 此處整理錯(cuò)誤信息格式
info = {
code: status,
data: data,
msg: statusText
}
}
}
)
/**
* 向外拋出service
*/
export default service
最后將這個(gè)axios.js文件引入main.js中，并將引入的axios掛載到Vue實(shí)例上就ok了。
完美！如有不對(duì)的地方還請(qǐng)各位大佬指點(diǎn)，萬分感謝。
踩過的坑：
怎么在axios攔截器中使用vuex，首先我們要引入vuex的js文件，然后就可以用了，就這么簡單。
藍(lán)藍(lán)設(shè)計(jì)( www.bouu.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.bouu.cn
