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

吉祥物设计表现形式多为写实图形，用夸张和提炼的手法将原型再现，吉祥物设计是具有鲜明原型特征的创作手法。用卡通手法进行创意需要设计者具有比较扎实的美术功底，能够十分熟练地从自然原型中提炼特征元素，用艺术的手法重新表现，要准确把握企业的品牌内涵以及赛事活动的特点，还要对形象适合后续衍生品开发有良好的规划能力。现在在公司品牌文化宣传具有举足轻重的作用。

表情包

By Ryan Putnam

表情包在国内还是有很广阔的市场。表情包这个东西太神奇了，可以使枯燥的文字变得有趣，表情的意义让生硬的文字更有人情味儿，让聊天变得更加有趣。斗图在聊天群或聊天软件很常见，最厉害的那种人可以不用打字就可以和别人聊天，不论别人说什么都有对应的表情回去，而且很恰当，这样的聊天真的让人很开心。表情包的应用还可以解放人的天性，很多常在内心深处不方便表达的都可以用表情包来表达自己的心声。

总结：

2019年自己尝试写第一篇设计流行趋势实在不易，陆陆续续也准备了大半个月，先把追波2018年1000赞的优秀作品下载下来进行分类总结，发现符合当下趋势的设计作品，对单个作品进行分析解刨。从578个作品中第一轮筛选还剩200多个优秀作品，第二轮筛选也还剩128个作品，优秀的作品实在太多了，最后还是在128个作品中刷选出以上N种流行趋势，大家可以根据自己的喜好和实际的工作需要提高相对应的技能。

（Ps：由于作品中有大量的视频和动效，也遇到Gif压缩的问题。为了方便大家观看也尝试了很多动效压缩的方法，最终使用了AE插件Gif gun重新对动效和视频进行压缩，整体效果很算不错。）

作者：水手哥学设计（微信号：shuishouge_design）

赞助商链接

喜欢这篇文章吗？欢迎分享到你的微博、QQ群，并关注我们的微博，谢谢支持。
版权：除非注明，本站文章均为原创文章，转载请联系我们授权，否则禁止转载。