Dribbble有那些優秀的設計風格可以借鑒？

Sponsor

近一年來已經有很多新設計風格出現，并且有部分設計手法、表現形式已形成小的設計趨勢，有不少的設計師在使用，今天我們將分享從UI界面設計、品牌、動效設計、圖標設計、圖形設計、配色、插畫、卡通形象等八個方面的案例，這些案例的設計風格都是 Dribbble 上2018-2019年的高贊作品，非常值得設計師們借鑒學習。

一、界面

三維

By Mike | Creative Mints

隨著C4D軟件的火熱，在界面設計中很多主體元素和造型都采用三維的設計手法，通過簡單建模，加材質渲染后進行頁面排版，這種手法增加畫面質感，烘托氣氛。Make大神不但自己手繪能力很強，還嘗試通過三維軟件對造型、配色、光影進行更深層次的研究。這兩種的視覺體驗還是有明顯的不同之處。

網格規范化

By InVision

網頁設計中使用網格系統可以更好的規范網頁內容，我們看到，使用網格系統的網頁設計，非常的有條理性；看上去也很舒服。最重要的是，它給整個網站的頁面結構定義了一個標準。網格系統雖然沒有統一的準則，但是設計師可以采用黃金分割0.618、白銀比1.414經典比例劃分，或垂直間距與網格系統的間距相同或是整倍。網格系統的參數根據項目的實際情況，盡量建立10的倍數或8的倍數。

極簡風

極簡風格的界面設計通常要具備幾個特征：簡潔、清晰、一致，并且可用。你的交互體系應當通過清晰的視覺傳達方式幫用戶定位并解決問題?？梢酝ㄟ^簡單的配色方案；可使用大字體和醒目的色彩來讓特定的數據成為視覺焦點；也可以大膽使用留白讓畫面具有呼吸感。

暗調高亮風格

By Eddie Lobanovskiy

暗調高亮風格是一種新興的藝術風格，近年來在網頁設計中廣泛應用。暗調高亮風格會更具個性化，也被廣泛年輕人所接受。暗調高亮風格一般以黑色或深色調為背景色，加上一種高飽和度、高亮度的顏色作為主色，首頁過多亮色搭配不好會影響網頁的視覺效果。暗調高亮風格對背景顏色光影明暗處理得當就顯得十分重要。

形式感

By Mike | Creative Mints

騰訊設計師晉小彥出過一本書《形式感+：網頁視覺設計創意拓展與快速表現》，里面寫了很多一些關于形式感設計方法論，比如抄現實的三步驟：減法、分塊、加法，把現實事物提取形態，然后把信息內容與形態結合排版形成一個整體，讓畫面更形象生動有趣。界面中把一幅插畫拆分到每一個小的分塊，通過打散方塊讓畫面更有趣，增加美感的同時也增加畫面的動感。

二、品牌

品牌升級

By Medium

Medium 是一個輕量級內容發行的平臺，允許單一用戶或多人協作，將自己創作的內容以主題的形式結集為專輯，分享給用戶進行消費和閱讀。

2017年8月21日，Medium對自己品牌識別進行全面升級，有原來具有可塑性的折疊式“M”直接改成了襯線字母，這次調整中沒有保留原來的任何設計元素，把兩年辛苦建立的品牌基因完全丟棄。但是它在產品用戶體現下足了功夫。

Medium強調用視覺化的圖文樣式提高用戶的閱讀體驗、用主題為核心的內容組織方式來聚合內容、用用戶投票的眾包形式進一步精選內容、用精美的網站模版來加強頁面的結構化。對 Medium 這樣的新的內容發行形式來說，作者、品牌不是最重要的，話題才是核心。Medium 不希望用戶僅僅因為某篇文章是某個作者所寫就去閱讀，而希望他們閱讀的理由是因為該文章的話題是其真正關注的。目前很多國內設計類的譯文都來自Medium這個平臺，我也會每天關注這個平臺，里面的熱點設計類文章很具有前瞻性和實用性。

品牌調性

By green chameleon

品牌調性，是基于品牌的外在表現而形成的市場印象，從品牌人格化的模式來說，等同于人的性格。Botanical采用襯線字體突出咖啡個性品牌調性，品牌色綠色代表純天然，貼近自然，很陽光。淡淡的暖紅色輔助色拉回了天然健康同時還兼顧女性客戶喝Botanical咖啡。整體包裝也采用細細的字體，Botanical襯線字體正負形比重和字母之間的間距都恰到好處。

歐美風

By Nick Slater

歐美風的logo主要以簡潔緊湊為主，英文字母的構成基本上都是線條路徑環繞，圖形也是通過高度抽象提取造型，通過處理后所形成的文字和圖形相對簡單整齊，容易與其他顏色或者背景形成統一的效果，突出重點，可以給人很深刻的印象，同時也容易記憶。很多NBA球隊的logo風格都是類似這種歐美風格。

品牌延展

By Eddie Lobanovskiy

為了獲得更有效的傳遞品牌價值，需要建立包括Logo、配色、字體、圖標等一整套視覺規范，還需設計元素規范和輔助圖形。首先需要確定品牌主色、輔助色。用戶在使用現在的多平臺互聯網產品中，圖標是重要的品牌設計元素，可以很好的輔助品牌延展到產品中去，統一的圖標設計可以幫助用戶更容易識別品牌所傳遞的價值。

包裝設計

By Mike | Creative Mints

商品包裝展示的商標、圖形、文字和組合排列在一起的一個完整的畫面。這四方面的組合構成了包裝設計的整體效果。商品設計構圖要素商標、圖形、文字和色彩的運用得正確、適當、美觀，就可稱為優秀的設計作品。

包裝設計的圖形主要指產品的形象和其它輔助裝飾形象等。圖形作為設計的語言，就是要把形象的內在、外在的構成因素表現出來，以視覺形象的形式把信息傳達給消費者。要達以此目的，圖形設計的定位準確是非常關鍵的。定位的過程既是熟悉產品全部內容的過程，其中包括商品的商標、品名的含義及同類產品的現狀等諸多因素都要加以熟悉和研究。

三、動效

品牌動效

By Unfold

By lgor Pavlinski

品牌動效Logo作為一種更新穎的展現方式，動態圖形會更容易被用戶所理解，也具有更高的品牌辨識度。給人更加愉悅的視覺享受。一個好的有趣的動態Logo能夠讓人觸發不同的情感。我們在設計時可以營造一個美好的故事情節，也可以體現我們品牌Logo設計中專業度為創新點。在品牌設計上有所創新，讓用戶更加認可該公司的專業性。

界面微交互動效

By Magic Unicorn

By Google

界面微交互動效會讓用戶體驗更加精致到位。想要打造優秀的產品設計，微交互和動效設計是繞不開的，UI界面設計通過微交互反饋告知用戶當前正在發生的事情，所處的狀態。Google系統中控件規范化會讓界面更規范化。細微的動效更能調動用戶情緒，取悅用戶。

插畫動效

By Markus Magnusson

By Zak Steele-Eklund

插畫繪制一般都具有藝術感，插畫傳達的信息是否明確就顯得格外重要。適當添加簡單的動效，會增加插畫的場景性給用戶帶入感。插畫和動效結合起來更容易引導用戶，吸引人的眼球。插畫動畫可以幫助用戶更好的了解內容，會讓用戶在界面插畫中尋找可交互的體驗樂趣。

Mg動畫

By Markus Magnusson

Mg動畫需要很好的節奏感、韻律，每一個場景動畫都需要其中的元素進行連接變化，讓轉場動畫更加自然，Markus Magnusson動畫通過點線面的動效變化讓畫面更加有趣、自然，會讓人更加印象深刻。

彈性動畫

By Markus Magnusson

By Gal Shir

By Eduard Mykhailov

Q彈動畫中的Q彈效果會讓畫面更加有趣，會讓人重復欣賞不回感到膩。使用AE彈性表達式Bounce

和 Overshoot！利用這個兩個表達式你可以輕而易舉地實現各種彈性動畫，也可以使用Ae腳本：物體彈簧彈性預設腳本 Aescripts

Rubberize It，可以將你的物體圖形層中的元素模擬成具有彈簧彈性效果，更符合力學！

人物角色動效

By Eran Mendel

By David Calderon

人物角色動畫的AE使用插件較多，Puppet Tools插件利用圖釘來制作骨架的工具，但因為圖釘工具本身的缺陷，容易破圖。DUIK插件現在普遍用在AE制作角色動畫（角色動畫比較硬），RubberHose插件角色動畫比較軟，相對更加自然。為了更好的做好人物角色動畫還需要平時對人物形態更細致的觀察。

酷炫科技風

By Milkinside

AE Trapcode插件最常用的是particular和form了，這兩款粒子插件可以制作出很多酷炫的動態效果，隨著科技進步上面的動態炫酷風格可適用于多媒體大屏展示或用于公司企業官網，通過粒子插件來突出企業科技感，多用戶互聯網公司。

三維動效（C4D）

By Gleb Kuznetsov?

c4d三維場景動畫通過構建實物和場景模擬生活中的現實場景，會讓用戶體驗真實感，三維軟件制作動效的最大優勢是通過動力學和表達式會模擬真實感，未來在AR/VR領域會有更好的發展。相對于界面動效學習成本難度也相對較大。

偽3D旋轉動效

By Gal Shir

By Markus Magnusson

偽3D旋轉動效漸漸的成為一種趨勢，360度無死角旋轉對角色造型有更高的要求。偽3D旋轉動效也漸漸被更多的設計愛好者所喜歡，偽3D旋轉動效主要使用了ae表達式進行制作對360不同旋轉角度進行定型，這種動效比較新穎、很有意思百看不厭。

游戲動效

By Mike | Creative Mints

By Markus Magnusson

游戲動效可以很好的引導玩家操作，幫助新手引導，讓玩家了解游戲規則和操作使用，好的游戲動效可以增加用戶粘性。游戲動態、場景特效、角色動畫對動畫運動規律都有很高的要求，游戲動態demo也可以節約研發人員的時間成本和溝通效率。

四、圖標

漸變篇

By Ramotion

在扁平化設計剛興起之時，很多的ICON以純色和圖形為主，然而隨著漸變色的流行，當圖標使用了漸變色彩，顯得更加符合趨勢。將漸變的設計同扁平化設計的美學特征融為一體。同樣的圖標，運用了不用色調的變化都會呈現不同的深度和層次。使用得當的漸變色彩，可以使界面和圖標的設計感得到迅速提升。

線面結合

By Eddie Lobanovskiy

線面結合圖標是一種很出彩的風格，線是高度概括的圖標，這時候面更多的是充當裝飾點綴的作用。面的表現方式也有很多種，可以是單色的，漸變色的，也可以像MBE風格那樣提取主體結構形成的面，也可以提取圖標里面有閉合路徑所形成的面。這種風格應用也非常廣泛。

擬物風

By Servin

看慣了扁平風，還是覺得擬物風更加精致耐看，追波最早一批UI設計師擅長擬物風格。需要對造型、光影、材質、繪畫功底都會要很高的要求。ios為代表的都是過去擬物風格的表現方式，強調的是對單一物件的刻畫細節仿真。如果從更廣義的范圍去討論，只要與現實世界有所關聯，都應該稱為擬物？所以當下的設計趨勢，便是這種廣義上的擬物，越來越強調現實世界的物理特性。

Windows也推出了一套自己的設計語言-Fluent Design System，基于平面化設計上增加了通過光感、陰影、材質增強信息的層次感。模擬物理現實的彈性、光影、阻力等特性。增強了widget或者其他元素的動畫特性以此來凸顯現信息。整體更加易用、簡潔且信息突出。

輕擬物

By Rwds

這款由R神繪制的食物主題以輕擬物為主，更易識別，也更加輕簡耐看。簡約細膩，輕快的色彩讓食物很有食欲感。輕擬物風格純粹有質感，細節的處理認真細膩。相比重擬物制作也會更加有效率，值得設計師花時間去研究學習。

五、圖形

共生正負形

By Yoga Perdana

Yoga style之前都是曲線漸變風格，今年大量的嘗試共生正負圖形運用到Logo設計中來，Yoga有意識的更加注重負形的變化，通過圖形標識正負形態的互補，來提高圖形的表現力，增強視覺上的錯視感和沖擊力。字母與圖形的組合趣味性，精心設計之后豐富了圖形的表現力，會有一種眼前一亮的藝術效果。

點線面

By Eddie Lobanovskiy

點線面是Logo設計中基本的構成要素，可以體現Logo中各自的造型特征。合理運用點線面可以讓視覺聚焦，Logo中點線面形態會更加活躍，點線面不僅能夠大幅度提高人們的注意程度，還可以通過造型結構形式不同、色彩明度變化的視覺變化來給人留下深刻的印象。

幾何體

By Mike | Creative Mints

幾何體設計形式在設計中廣泛運用，幾何體設計的畫面都比較簡潔，主要把握結構形體變化、元素造型提取再組合的過程，最后通過冷暖對比、互補色對比來加大視覺沖擊力，使畫面更有張力。抓住用戶眼球，能從優秀的作品中脫穎而出。

六、配色

多彩色

By Eddie Lobanovskiy

多彩色設計總是給人眼前一亮的感覺，細細研究多彩色其實多彩色也有大的主旋律，可以從大的冷暖角度去區分，根據色彩的色塊大小、冷暖對比范圍來確定大方向。當確定暖色調為主色調，冷色調就只能當做輔色調。多彩色還可以通過紅橙黃綠青藍紫的順序來排列，這樣的排列方式會更加有秩序，多而不亂。

七、插畫

寫實風

By Leo Natsume

寫實繪畫骨子里還是具有很強的藝術性，雖然繪畫和設計慢慢細分化，但好的手繪功底有得天獨到的優勢，更多美院畢業都有這樣的功底，寫實繪畫有著不可抗拒的魅力，有著不可替代的功用，有更多的藝術家投身其中，潛心磨礪，必能再現無盡風光。如何把寫實繪畫與設計相融合，讓它有適用更多的場景，發揮其最大的光芒。

硬件升級

By Cuberto

iPad Pro 的精髓不僅僅是屏幕更大、性能更強，在我看來 iPad Pro 的靈魂所在就是可以搭配 Apple Pencil 使用。Apple Pencil 外觀看似一支普通鉛筆，但性能設計十分強大，可以根據壓力度進行不同程度的繪畫和涂色，而且用起來十分流暢,幾乎不像是一支電子筆?；谶@樣的使用體驗，讓越來越多的繪畫軟件產生在 iPad Pro 上，也有越來越多的設計師與插畫師開始在 iPad Pro上工作。硬件升級也是大勢所趨。經濟有能力的設計師可以嘗試。

光影人物風

By Eddie Lobanovskiy

By InVision

光影人物風更多的也是像Mbe style一樣快速區分畫面中的黑白灰三種色調的分布，使用色塊進行區分，最后通過多色配色讓其畫面保持一致性。在配色流程時我們可先使用黑白灰色調進行調色，大的明暗調出來后進行選取顏色，大多數以暖色調為主色調，適當加入冷色調調節防止畫面太膩。

2.5D升級

By Dmitrii Kharchenko

2.5D應該是Mbe插畫風格之后最火的插畫風格了，由于它應用范圍廣，制作方法類教程較多，ps/ai/c4d都可以快速的制作出來。2.5D插畫風格升級后添加了漸變風格增加其科技感，添加了光影效果增加其場景的真實感。加入小人物的工作場景會有一種帶入感，可以很清晰的識別其工作場景。

扁平插畫

By Joanna ?awniczak

扁平插畫要將畫面中的物體造型、陰影、顏色、形狀等具象的實物一定程度上脫離開，通過豐富的想象里，豐富圖形組合趣味性，讓畫面的物體擺放有韻律和節奏感。扁平化插畫風格在色彩選擇上也更加大膽，為了使畫面更豐富會增強明暗關系，增加色彩之間的塊面感、統一性和對比度。隨著大眾審美水平的提高，扁平風格的插畫還是應以簡潔大方的插畫為主，讓具象的事物夸張化、新穎化，能縮短用戶的距離感，增加用戶視覺感官強化扁平插畫內在情感。

人物插畫風

By Dmitrii Kharchenko

人物插畫風也是比較流行的一種插畫風格，由于其使用場景廣，互聯網公司產品和B端產品都可以適用此類插畫風格，而且它的繪畫操作難度適中，很快就流行開來。人物和實際應用場景會給人更多真實感，更好的給用戶傳達信息和情感。適當的加入植物花花草草具有裝飾性的同時增加了畫面的活力。更加貼近自然、擁抱自然。

簡潔燥點風

By Fireart Studio

簡潔風在插畫中也同樣適用，畫面中對每個元素造型進去提煉，每一個提煉后的造型元素都符合人的美學，通過對主題元素進行重組符合透視的前提下通過大小對比、近大遠小增加畫面層次感。燥點使用可以使用亮色燥點代表高光，也可使用暗色燥點代表暗部或陰影。燥點使用可以增加畫面的紋理感。

剪紙風

By Eddie Lobanovskiy

剪紙風具有高度的概括性，強烈的夸張性和豐富的裝飾性，通過造型、紋理和色彩的表達出插畫的內在情感。剪紙風從整體氣質上顯得傳統并且具有親和力，使得剪紙風格的插畫具有更多的藝術價值。剪紙風應用在插畫設計的方方面面，使其在設計的應用性更強，風格也更加突出。值得每個插畫設計師進行嘗試。

八、卡通形象

吉祥物設計

By Mike | Creative Mints

吉祥物設計表現形式多為寫實圖形，用夸張和提煉的手法將原型再現，吉祥物設計是具有鮮明原型特征的創作手法。用卡通手法進行創意需要設計者具有比較扎實的美術功底，能夠十分熟練地從自然原型中提煉特征元素，用藝術的手法重新表現，要準確把握企業的品牌內涵以及賽事活動的特點，還要對形象適合后續衍生品開發有良好的規劃能力?，F在在公司品牌文化宣傳具有舉足輕重的作用。

表情包

By Ryan Putnam

表情包在國內還是有很廣闊的市場。表情包這個東西太神奇了，可以使枯燥的文字變得有趣，表情的意義讓生硬的文字更有人情味兒，讓聊天變得更加有趣。斗圖在聊天群或聊天軟件很常見，最厲害的那種人可以不用打字就可以和別人聊天，不論別人說什么都有對應的表情回去，而且很恰當，這樣的聊天真的讓人很開心。表情包的應用還可以解放人的天性，很多常在內心深處不方便表達的都可以用表情包來表達自己的心聲。

總結：

2019年自己嘗試寫第一篇設計流行趨勢實在不易，陸陸續續也準備了大半個月，先把追波2018年1000贊的優秀作品下載下來進行分類總結，發現符合當下趨勢的設計作品，對單個作品進行分析解刨。從578個作品中第一輪篩選還剩200多個優秀作品，第二輪篩選也還剩128個作品，優秀的作品實在太多了，最后還是在128個作品中刷選出以上N種流行趨勢，大家可以根據自己的喜好和實際的工作需要提高相對應的技能。

（Ps：由于作品中有大量的視頻和動效，也遇到Gif壓縮的問題。為了方便大家觀看也嘗試了很多動效壓縮的方法，最終使用了AE插件Gif gun重新對動效和視頻進行壓縮，整體效果很算不錯。）

作者：水手哥學設計（微信號：shuishouge_design）

贊助商鏈接

喜歡這篇文章嗎？歡迎分享到你的微博、QQ群，并關注我們的微博，謝謝支持。
版權：除非注明，本站文章均為原創文章，轉載請聯系我們授權，否則禁止轉載。