2018-12-10 資深UI設(shè)計者
如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里
每個人都在關(guān)注趨勢，Dribbble 是設(shè)計師的集散地，那么在2018年，Dribbble 反映出來設(shè)計趨勢是什么？
每個人都在關(guān)注趨勢，Dribbble 是設(shè)計師的集散地，也是設(shè)計趨勢最容易體現(xiàn)的地方。如果你經(jīng)常關(guān)注 Dribbble 上的那些設(shè)計作品，你總會注意到許多有意思的共性，在更長的時間尺度上關(guān)注這些共性，會發(fā)現(xiàn)其中不少會延伸到更大的設(shè)計領(lǐng)域和范疇，其中很多會以趨勢的形式成為階段性甚至長期的設(shè)計趨勢。這些流行的趨勢有的關(guān)乎技法，有的則是色彩、風(fēng)格，甚至是某種隱喻。
當(dāng)然，不論如何，作為設(shè)計師，這些趨勢的價值是毋庸置疑的，關(guān)注它們，以開放的心態(tài)面對著，也許它們會在下一個階段在我們自己的設(shè)計作品中開花結(jié)果。
以人為核心的自定義插畫是這兩年來，最顯著的設(shè)計趨勢之一。這種插畫展現(xiàn)形式能夠快速呈現(xiàn)想要呈現(xiàn)的環(huán)境、流程，更重要的是創(chuàng)造情感訴求。標(biāo)準(zhǔn)而寫實的人物形象在大量的設(shè)計訴求之下，顯得平庸而不夠突出，這也使得走樣但是富有張力的非標(biāo)準(zhǔn)人物身材比例顯得更加出彩，這也是為什么近年來我們能夠如此頻繁地看到諸多非標(biāo)準(zhǔn)的人物插畫。
這幅插畫來自 icons8 。巨大的鞋子，不成比例的巨手，水壺纖細(xì)的握柄和壺頸，強(qiáng)烈的對比顯得頗具張力。
Diana Stoyanova 的插畫呈現(xiàn)了一個忙碌女性的形象，非標(biāo)準(zhǔn)的身材略顯抽象，但是很有力量。
Diana Stoyanova 的這幅插畫作品用夸張巨大的人物形象來強(qiáng)調(diào)你比手機(jī)更大，更重要。
而 Radio 的這幅插畫則使用走樣的身材營造出有趣而可愛的形象，讓交互更加有意思。
時至今日，插畫在 UI 中已經(jīng)不再鮮見。自定義的插畫早就不是裝飾性的設(shè)計，它讓UI界面更加具有視覺吸引力，和情感表達(dá)的能力。更重要的是，它是功能性的，它為界面的功能和信息提供支撐，以「互文」的方式來告知用戶界面想要呈現(xiàn)的功能，畢竟圖片和插畫所呈現(xiàn)的視覺信息比文字更快。
這個界面也是 icons8 團(tuán)隊制作的。輔助性的插畫讓報錯信息也顯得足夠明亮而正能量，讓用戶不會覺得難受。
這組作品同樣來自 icons8 ，這次的風(fēng)格不同，并且是為移動端新用戶引導(dǎo)而設(shè)計的。引人矚目的插畫將文字描述的優(yōu)勢更加具象化地表現(xiàn)出來。
Netguru 的報錯頁面顯得非常純粹也非常可愛。
Hoang Nguyen 所設(shè)計的這個插畫甚至是交互式的，它的靈感來源于一款經(jīng)典的滑塊游戲，動效模擬了這個效果。
動畫效果是強(qiáng)化視覺的重要手段。在以往，視覺和圖形化元素絕大多數(shù)都是靜態(tài)的，但是現(xiàn)在為了更加積極地迎合用戶體驗，動態(tài)的設(shè)計已經(jīng)成為常規(guī)，許多動效所帶來的效果是靜態(tài)設(shè)計所無法呈現(xiàn)的，在情緒和氛圍上的營造也更加強(qiáng)大。
動效不僅能夠讓產(chǎn)品在視覺上更加吸引人，而且能夠向用戶呈現(xiàn)出產(chǎn)品的品質(zhì)感。此外，你還能夠在網(wǎng)站、通知、教程和交互流等吧托女個的地方找到動效。這也是為何 Dribbble 的設(shè)計作品中，有如此之多的動態(tài)的圖形化元素。
Motion Design School 的這個動態(tài) LOGO 借用了負(fù)空間的設(shè)計方法，主體則采用了狗的形象，動態(tài)呈現(xiàn)下極為可愛生動。
Awsmd 則更有意思，將水母的運動方式賦予了花朵，良好總生命體在體態(tài)上貫穿一致，有著的視覺表現(xiàn)力。
Markus Magnusson 將一組風(fēng)格一致情節(jié)連貫地插畫動態(tài)地連接到了一起，讓LOGO 具備了強(qiáng)大的敘事能力。
Yup Nguyen 的動畫則不僅時尚，而且非常有趣，讓人感到愉悅，而忘記等待的煩惱。
Dribbble 上的數(shù)字插畫主題之一，就是對各種工作流程和場景。插畫和平面設(shè)計師熱衷于相對藝術(shù)地呈現(xiàn)設(shè)計工作的流程，團(tuán)隊的協(xié)作，創(chuàng)意的發(fā)散過程，溝通的狀態(tài)，工作空間的呈現(xiàn)。它流行的另一原因，是這種內(nèi)容的插畫在著陸頁和博客文章頁面中非常適用，且非常流行。
Tubik Studio 的這幅插畫展現(xiàn)了設(shè)計師的工作空間，整個視角似乎是在廣角相機(jī)下被扭曲了，非常有趣。
來自 Walid Beno 的這個插畫則呈現(xiàn)的是團(tuán)隊協(xié)作的場景，巨大的UI界面顯得頗為夸張，不過主題性也是借此才得以體現(xiàn)和強(qiáng)化。
Pitch 的這幅插畫同樣呈現(xiàn)的是團(tuán)隊協(xié)作的場景，不過加入的動效非常微妙，將協(xié)作的趨勢和狀態(tài)給放大了出來，視覺上更加動感，且足夠時尚。
Ted Kulakevich 的插畫中則描摹的是一個正在工作，喝著咖啡的角色形象，和日常的設(shè)計和創(chuàng)意工作者的狀態(tài)非常接近，令人賞心悅目的色彩則讓整個狀態(tài)令觀者非常舒適。
如果你的工作狀態(tài)也是如此的忙碌，那么你應(yīng)該能夠從 icons8 的這幅插畫中找到共鳴。插畫中被工作內(nèi)容所包圍的狀態(tài)不就是你嘛？
設(shè)計是一個需要想象力的工作。有趣的小怪獸，奇妙的機(jī)器人，經(jīng)典或者原創(chuàng)的卡通人物，只存在于傳說和想象中的生物，從來都不會在 Dribbble 上缺席。品牌吉祥物的設(shè)計在這種趨勢下越來越具有明顯的情感表現(xiàn)力，而卡通化的角色形象很大程度上會利用人們對于特定動物或者特定形象的情感關(guān)聯(lián)，人格化、角色化之后的吉祥物，能夠讓用戶產(chǎn)生在和它進(jìn)行情感交流的錯覺。
設(shè)計師 Mike 的網(wǎng)頁設(shè)計作品當(dāng)中，有趣的卡通形象作為視覺主體，讓產(chǎn)品和用戶更快和頁面產(chǎn)生視覺連接。
和Mike 的設(shè)計目標(biāo)不同的是，Alexandra Zutto 的插畫是借助機(jī)器人的形象來呈現(xiàn)未來主義的氛圍。
Motion Design School 使用可愛的動態(tài)插畫來強(qiáng)化品牌的展示。
這組來自 icons8 的插畫所營造的是一個典型的結(jié)帳場景。真正特別的地方在于角色的設(shè)定，人和機(jī)器人之間的交互，營造出科幻的氛圍。
Ramothion 靈活的運用狐貍這個吉祥物形象，結(jié)合UI元素，表達(dá)了「演示」的主題。
icons8 的這幅插畫則利用了噪點來賦予角色以一種帶有藝術(shù)感的氣息。
運動就是生命，對于設(shè)計師和插畫師而言，最有張力的東西大概都藏在運動將要開始的時候，藏而未發(fā)的一瞬間，或者運動過程中，姿態(tài)舒展的某一秒。
體育運動中往往能夠更快找到這樣的狀態(tài)，不過其他的主題之下，也存在類似的運動狀態(tài)。這樣的運動狀態(tài)充滿了表現(xiàn)力，設(shè)計師和插畫師們常常會借助色彩、圖形、曲線等元素來構(gòu)建這樣的設(shè)計作品。
Unfold 的插畫呈現(xiàn)的是沖過終點的運動員，主題暗示出了成功、成就，明亮的色彩和舒展的姿態(tài)在整體上保持了一致，藝術(shù)性也不低。
同樣是呈現(xiàn)的跑步，但是Jack Daly 所表現(xiàn)的是即將開始的運動，蓄勢待發(fā)的一瞬間的狀態(tài)。這幅插畫是給 InVision 所設(shè)計的，主題是設(shè)計沖刺，而這幅插畫非常貼合這一隱喻。
Walid Beno 的插畫所呈現(xiàn)的場景非常獨特，現(xiàn)實的路徑和虛擬的景象連在一起，人物仿佛騎行在現(xiàn)在與未來之間。
這幅來自 Tubik 的插畫則將運動的場景和手機(jī)熔于一個場景當(dāng)中，整個構(gòu)圖非常動態(tài)。
平面設(shè)計另外一個重要的趨勢，就是使用盡可能具有表現(xiàn)力的插畫設(shè)計，利用陰影和負(fù)空間來創(chuàng)造戲劇感和視覺影響力，就像Vogue 的御用設(shè)計師 Malika Favre 的插畫作品那樣。
有限的色彩，引人矚目的色彩對比，光影之間的互相成就，大膽而有意義的細(xì)節(jié)。如果你稍微有意識地去看，會發(fā)現(xiàn)每天都有設(shè)計師在 Dribbble 上發(fā)布這樣風(fēng)格的作品。
比如 Ksenia Shokorova 的這幅插畫就很好地呈現(xiàn)出夏天的炎熱和慵懶的夏日氣氛，以富有表現(xiàn)力的人物輪廓作為構(gòu)圖的中心，甲板和水面構(gòu)成鮮明的對比，色彩不多但是令人印象深刻。
Joanna Lawniszak 的插畫則使用強(qiáng)烈的光影，讓一個簡單的著名變得具有明顯的舞臺效果，相當(dāng)大氣。
Yoga Perdana 的這個LOGO設(shè)計作品利用的是負(fù)空間，讓文字當(dāng)中融入了一個非常清晰的貓的形象，并且還呈現(xiàn)出貓在文字之間穿插的效果。
這個名為 Mr.Travel 的LOGO設(shè)計作品來自設(shè)計師 Yuri Kartashov，他將男人的面部和山脈的形象結(jié)合到了一起。
Dmitry Stolz 的設(shè)計項目 Fetch My Meds 中使用了兩個可愛的動物角色，微妙的動畫和明確的對比使得兩個角色顯得活潑而有趣。
3D 無疑是現(xiàn)在 Dribbble 上最熱門的趨勢。大家用3D建模來做各種各樣的東西，無論是等軸測的插畫還是游戲角色，還是以往大家會用PS來繪制的光影，現(xiàn)在一并使用 3D建模和渲染來實現(xiàn)了。
Ueno 這個引人入勝的動畫效果就是在 3D 渲染的基礎(chǔ)上實現(xiàn)的，有趣的元素構(gòu)建成的場景讓人愛不釋手，而這居然是一個招聘廣告？有意思。
Tubik Studio 的這個首圖中的插畫形象，同樣是使用3D建模來實現(xiàn)的，這樣的角色形象很容易讓人聯(lián)想到動漫和游戲，結(jié)合風(fēng)格類似的CTA元素，可以極強(qiáng)地影響用戶的注意力。
這是設(shè)計師 Mohamed Chahin 精心設(shè)計的等軸測插畫，柔和的色調(diào)和模糊的光影讓家的氛圍得到了強(qiáng)化。
隨著精通插畫的設(shè)計師越來越多，插畫開始深入到設(shè)計的方方面面，包括在 Web 和 UI 界面當(dāng)中的字體、圖形甚至整個氛圍和環(huán)境。由于注意力的競爭如此的激烈，以往原本只需要普通圖片就能做到的事情，現(xiàn)在需要借助插畫來做到。
在 Dropbox Design 的這篇創(chuàng)意相關(guān)的文章當(dāng)中，包含有一些這樣帶有粗野主義風(fēng)格的插畫。也許你并不是那么青睞這種風(fēng)格的插畫，但是即便如此，你也不會繞過這幅插畫只單純?yōu)g覽文字。
這是一幅關(guān)于醫(yī)生和專業(yè)交互界面的插畫，作者是設(shè)計師 Alexander Savic ，插畫會將人迅速帶入進(jìn)醫(yī)療保健相關(guān)的領(lǐng)域。
這幅插畫來自設(shè)計工作室 Fireart Studio，它暗示了約會 APP 背后的真實和潛藏的精彩，讓人主動追求屬于自己的愛情。
Dmitry Stolz 的插畫則呈現(xiàn)了移動端APP 上的交互，做決策的關(guān)鍵時刻。
最后一個值得一體的趨勢，則是類似剪紙一樣的多層剪切視覺效果插畫。這種設(shè)計效果讓插畫具備了豐富的層次，顯得深沉而原創(chuàng)，帶有更強(qiáng)的物理工藝質(zhì)感和難以磨滅的印象。
Eddie Lobanovskiy 的插畫就是使用的這樣的效果，主題關(guān)于太空，這種多層剪切效果讓太空顯得更為深邃。
Michael Fugoso 的設(shè)計作品，他將這種插畫定義為具有深度幻覺的平面數(shù)字插畫。
如果這種插畫風(fēng)格和卷軸效果結(jié)合起來，就更加強(qiáng)大了，
Studio V?R的多層次剪切插畫在交互中次第呈現(xiàn)，各個部分相互之間影響并關(guān)聯(lián)著。
這是 Anano Miminoshvili 所創(chuàng)建的一個網(wǎng)頁滾動交互的案例，隨著用戶不斷滾動，不同的層級的元素次第運動，一個接這一個被激活。
毫無疑問，Dribbble 本身正在逐步成熟，越來越多的設(shè)計作品中，開始融入更為明顯的藝術(shù)特征，設(shè)計的層次和力量感比以往更強(qiáng)了。作為設(shè)計師發(fā)布各種小樣、練習(xí)的Dribbble，本身也作為設(shè)計領(lǐng)域的試驗田而存在，很多設(shè)計趨勢在這個平臺上醞釀，成熟，并且逐漸走向世界。
藍(lán)藍(lán)設(shè)計( www.bouu.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)。
藍(lán)藍(lán)設(shè)計的小編 http://www.bouu.cn