什么是 设计Dribbble风 ?

只要你是设计师,你就肯定知道Dribbble。它是一个供设计师展示作品、同行交流、寻找灵感的场所。Dribbble鼓励创作者上传个人的作品,以及正在创作的作品到网站上。

目前国内的设计基本上都是模仿国外的设计方式和风格,而Dribbble几乎是全世界最优秀设计作品的聚集地,并且是最新风格探索的实验基地。

设计Dribbble风是指Dribbble上的那些异于我们日常所接触到的设计风格和界面优秀作品的集合统称,她包含了大胆的配色、夸张的排版、赏心悦目的设计界面、丝滑流畅的交互体验等,是值得国内设计师去探究学习的。

风格名称:

设计 Dribbble 风

风格优点:

夸张、大胆、优美、丝滑

使用工具:

Figma,Principle,Adobe,sketch

探索方向:

移动端、web端、icon、交互

当创意受到局限的时候,在dribbble上经常可以提供灵感。如果你想让自己的配色更干净更柔和更绚丽,在dribbble上也可以学习到很多意想不到的颜色搭配,原来颜色还可以这么用。交互以及小动画的拓展学习,一个小icon如何跳转演变,你可以在dribbble上找到答案,收藏起来留着日后参考。

D站的意义更多在于开眼界,去看不同风格,看设计师的上限。多积累,多模仿,然后开拓自己的风格和设计语言是很重要的。

炫技还是落地

13年底,Intercom 的产品VP Paul Adams 在 Intercom 官博发表了 一篇博文。文章讲述了网络上设计社区里普遍存在的一种现象,大意是“许多设计师在社区中分享的作品往往是为了炫技,而产品的逻辑通常都经不起推敲的,真正优秀的设计应该从更高的层面出发,而不只是做表面上的工作”。

设计追波风这篇文章抨击的是现在Dribbble等网站上分享的作品过于追求炫技,而缺乏设计深层次的逻辑。

作者的观点肯定是正确地,我也相信80%的设计师都知道这个问题。而设计技巧就好像是一把刀,刀的锋利有助于解决问题的效率和可能性。而在闲暇时候设计师之间的交流集中于“亮刀”上,实属正常不过。所以在Dribbble上大家集中于刀法上的切磋,内功上自然重视,只是在其他地方上讨论罢了。

“屌爆了!”Dribbble就是用这种形式来鼓励大家炫技

许多设计者的产品设计作品都聚焦在最表层,只关注于自己做的东西是否足够的“追波味儿”。“完美的扁平化设计”,“像素级的精致度”,听起来很犀利,但往往这些作品都没有实现产品的真正目的。既没有解决用户每天真实遇到的问题,也没有将完整的业务体系考虑进来。追波上的设计师们喜欢钻研界面的轮廓和绚丽的色彩等细节,以此交朋结友,相互点赞和分享。看完别人的作品后,自己跟着兴冲冲来一发。结果就是大量的设计在追波上都长得差不多。不管你做的是社交软件,金融软件,电商网站还是天气应用,同样的风格都套进去使。

设计最重要的一步,往往并不会去追求外观的美

相比之下,优秀的设计师通常都附上了他们的思考过程。手绘稿、图解、利弊、 阻碍、权衡、解决方案,以及阐明交互和动效的原型。在真实参数的考量下,描述产品的模块如何移动和变化,它们的动态效果又如何呈现。
这就是为什么追波的许多“ReDesign”类的作品实属愚蠢。因为许多人做设计的时候,并不清楚这个产品的渊源,用户真实的需求,技术有哪些限制,深层的组织架构又如何。

思考一下设计的四个层面

设计是一个多层面的过程。依次经过目标、架构、交互、视觉这几个层面是有一个最佳顺序的。很多设计师单单专注于第四个层面而完全忽视了其他因素,如果其他三个层面的问题还没有解决好,那么诸如栅格、字体、色彩、美感等方面的深入都是无用功。

设计系统越来越重要,因为网络无处不在

随着移动技术的惊人发展,设计师将参与到系统化的设计中已经是一个趋势。而这也是设计师要学代码的原因。设计师需要通过探讨系统中组件之间的联系去定义问题和寻求解决方案。而不是以前这种扣像素的年代了。


“Dribbble上的作品体现的是设计师的上限,而实际设计开发产品的时候考验的是设计师的下限”。

Dribbble 2021年趋势

追波上的高赞作品案例非常值得设计师们借鉴学习,像其中我们现在广泛应用的极简主义风格、玻璃拟物化风格、插画、3D等。
设计作品有浓浓的“追波风”,其实是因为追波上的作品用色是非常大胆的,经常出现撞色等;其次柔和的背景渐变、极光色、柔和的偏色大阴影也是在追波上广泛应用的;随着短视频的发展,占满屏幕的视频或者图片作为背景,给人以沉浸式的体验感的设计方式应用的越来越广泛;最后不得不说那些流畅的交互体验,让人爱不释手。

Travel App UI探索
Travel Service : Mobile App
Travel Website ( Mobile Version )
Donut Food Landing Page Exploration
Fintech Home age Ofsapce
Online Education App
Travel App UI Exploration
Food Recipe App
Credit Card Landing page
Abstract Wallpaper App
Cloud Storage APP
Job Search Platform Mobile
Reminder The Annual Target

应用场景探索

每每从Dribbble官网上发现精美的网站、UI、UX、插画设计等作品时,感觉自己的得到了艺术的熏陶。同时不禁感叹,什么时候,这个世界级设计网站的灵感首页能多一点看到咱们中文字体的作品呀。

—— ——移动端探索

移动端包括插画、轻拟物、玻璃、暗调高亮等风格的运用。

点击查看 →
—— ——网站探索

网站页面的探索主要运用极简主义风格,加之交互体验的实现。

点击查看 →
—— ——客户端探索

客户端注重界面风格的探索,使后台应用不再那样单调乏味。

点击查看 →
Beauty dating
2021年3月-2021年4月

玻璃质感与沉浸式界面的融合

把阴影、透明度以及模糊的背景结合到一起,会使界面呈现出介于玻璃和塑料板之间的质感。可以看到在设计上,适量使用 “玻璃” 效果实际上会使产品看起来更好,对用户更有吸引力。界面会变得更丰富、更立体、更具有层次感。

点击图片查看
(提示:figma服务器在国外,首次打开速度慢,请等完全加载完。)
Beauty dating ×
Afternoon tea
2021年2月-2021年3月

插画与轻拟物的碰撞

看惯了扁平风,还是觉得拟物风更加精致耐看,基于平面化设计上增加了通过光感、阴影、材质增强信息的层次感。模拟物理现实的弹性、光影、阻力等特性。整体更加易用、简洁且信息突出。

点击图片查看
(提示:figma服务器在国外,首次打开速度慢,请等完全加载完。)
Afternoon tea ×
The movie
2021年1月-2021年2月

暗调高亮风格与深色风格的不同

暗调高亮风格是一种新兴的艺术风格,近年来在设计中广泛应用。暗调高亮风格会更具个性化,也被广泛年轻人所接受。暗调高亮风格一般以黑色或深色调为背景色,加上一种高饱和度、高亮度的颜色作为主色。暗调高亮风格对背景颜色光影明暗处理得当就显得十分重要。

点击图片查看
(提示:figma服务器在国外,首次打开速度慢,请等完全加载完。)
The movie ×
The shoe shop
2020年11月-2020年12月

Dark Mode 真实的照片

当然有时候3D插图并不一定适合所有产品,有时候真人和真实的物品会对用户产生更大的吸引力,让他们更加感同身受。深色模式无论是美学还是为了在眼睛上看起来更轻松,让它仅仅是作为一项功能却在越来越多的设计网站上流行。

点击图片查看
(提示:figma服务器在国外,首次打开速度慢,请等完全加载完。)
The shoe shop ×
The car
2020年7月-2020年9月

极简风格下的网页设计

极简风格的界面通常要具备几个特征:简洁、清晰、一致,并且可用。交互体系应当通过清晰的视觉传达方式帮用户定位并解决问题。可使用大字体和醒目的色彩来让特定的数据成为视觉焦点;也可以大胆使用留白让画面具有呼吸感。

点击图片查看
(提示:figma服务器在国外,首次打开速度慢,请等完全加载完。)
The car ×
web其他
2020年10月-2020年12月

网页端其他风格的尝试

界面微交互动效会让用户体验更加精致到位。想要打造优秀的产品设计,微交互和动效设计是绕不开的,UI界面设计通过微交互反馈告知用户当前正在发生的事情,所处的状态。。细微的动效更能调动用户情绪,取悦用户。

点击图片查看
(提示:figma服务器在国外,首次打开速度慢,请等完全加载完。)
web其他 ×
客户端
2020年12月-2021年1月

客户平台不止只是功能的实现

设计中使用网格系统可以更好的规范内容,使用网格系统的设计,非常的有条理性;看上去也很舒服。最重要的是,它给整个页面结构定义了一个标准。网格系统虽然没有统一的准则,但可以采用黄金分割0.618、白银比1.414经典比例划分,或垂直间距与网格系统的间距相同或是整倍。

点击图片查看
(提示:figma服务器在国外,首次打开速度慢,请等完全加载完。)
客户端 ×

交互demo

我喜欢的设计,就好像香草冰激凌:简单而甜美,朴素而不吝啬。它是一个坚实的基础,在必要时可以容下一些新奇的体验,比如巧克力碎片和夹心饼干,但这些体验应该是珍贵的。通常情况下,一个香草冰激凌球就足够了。