The Evolution of UI Design on Dribble

原作者：Ryan Bales
翻译：Ely（作者）
文章地址：https://medium.muz.li/the-evolution-of-ui-design-on-dribbble-732de40a30e6

几乎从一开始，我一直在使用Dribbble。我花了一段时间来获得邀请资格，为此我尽可能发布我的作品（感谢Rich），但是回顾Dribble在刚建立的时候，早在2009年，Dribbble更多的是关于UI和网页设计的插图。过去几年的潮流已经转变，插图更多了。看看dribble的主页，你就会明白我的意思了。虽然我也不知道发生了什么事。

尽管如此，Dribbble在UI设计领域已经有了巨大的影响力，所以我想特别谈谈UI设计在Dribbble作品反映的多年来的演变。

Pro Tip: Want to see the first players and shots on Dribbble? Try these URLs
1st Player: https://dribbble.com/1
1st Shot: https://dribbble.com/shots/1
2nd Shot: https://dribbble.com/shots/2

当然还有许多......

在我看来，Dribbble上的UI设计作品，有三种主要的风格转变。让我们来看看每一个吧，我会描述一些特点和展示的例子。我不是设计趋势方面的专家，所以如果我不使用花哨的流行语来描述某种设计风格，那么请原谅我。我相信有人会在评论中说这些。

Shots Between 2009 and 2012

Traits：

• Skeuomorphic（拟物化）
• Gradients （渐变）&shadows（阴影）used on elements to create depth
• Liberal use of textures （纹理）and repeating patterns（重复）
• Toned down color palettes, lots of gray, dark blues.
• Shiny buttons（明亮的按钮）

Examples:

https://dribbble.com/shots/151314-Fantastical

https://dribbble.com/shots/306311-UI-Kit

https://dribbble.com/shots/92791-Experimenting-with-Miro-4-chrome-OSX-app-interface-UI-UX

https://dribbble.com/shots/340599-iPhone-Traveling-App

https://dribbble.com/shots/424369-Dialoggs-Hidden-Navigation

Shots Between 2013 and 2015

Traits:

• Flat design (i.e., little or no gradients, shadows, or highlights)(扁平的设计)
• Color palettes get brighter, more pastel.（调色更明亮更柔和）
• Skeuomorphism is dropped.
• Textures and patterns aren’t used.（不使用文理和图案）
  *Minimalism returns（极简设计）
  *Thin/Extra Thin typography is used more often.（更常使用较细的字体）

Examples:

https://dribbble.com/shots/1625429-Helpdesk

https://dribbble.com/shots/1174646-UI-Elements-Formula-Builder-Concept

https://dribbble.com/shots/947749-Task-app

https://dribbble.com/shots/1135984-Flat-Design-UI-Components

https://dribbble.com/shots/1002972-Juiiicy-s-Flat-payment-page-design

Shots Between 2016 and Now (2017)

Traits:

• Gradients and shadows return but are used to soften the design rather than add realistic depth.
• Colors become even more pastel.
• Bolder typography returns.
• Liberal use of drop shadows on block elements.
• Flat icons.

Examples:

https://dribbble.com/shots/2227334-Social-calendar-app-mobile

https://dribbble.com/shots/3173213-payment-dashboard

https://dribbble.com/shots/3219163-Trello-Atlassian-Redesign

https://dribbble.com/shots/3257206-Pet-Tracker-Dashboard-Concept

https://dribbble.com/shots/3307105-Juno-Nutrition

Dribbble设计模式还会转变吗？

我认为有必要问一下Dribbble的作品是否仅仅反映了平台之外的设计的总体演进，或者Dribbble是否已经成为实际上促使了这些模式转换的驱动因素。你怎么看？

了解UI设计在未来几年如何继续发展将会很有趣。让我知道你是否注意到了相同的趋势，以及你认为UI设计接下来会发生什么。

Ryan Bales是Bync.com的创始人和创意总监。他拥有超过15年的设计经验，专注于数据可视化，数据重型网站和移动应用程序的设计。
你可以在Dribbble上找到他：http://dribbble.com/ryanbales。