每周设计赏析 #4

这周太忙，拖到周五才开始写赏析，各位观众老爷太太们久等了~

在网上看到一篇很有意思的文章，是关于Dribbble网站内容UI风格这几年的转变，某种程度上这也代表了整个设计圈的最近几年的演变过程，这个过程我感觉很有意思，翻译过来加了一些个人理解大家分享。

Ps: Dribbble 是全球最大的设计师社区，里面有很多顶尖设计师会分享自己的作品和心得。由于其作品质量和数量都属上乘，许多设计师都在上面寻找设计灵感，这个社区逐渐成为了全球UI设计的风向标。原文作者是Ryan Bales，Bync.com的创始人和设计总监。

开始之前，先来看看Dribbble的第一个用户和第一幅作品...

第一个用户，Dan Cederholm，Dribbble联合创始人，设计师:https://dribbble.com/1

第一幅作品，出自上面这位大哥：

一个电商网站的商品展示UI

来，进入正题，印象中这些年一共有三次比较大的风格改变，接下来分别看一下这几次改变的风格特点和典型案例。

2009-2012

拟物化（看起来像真实的东西）

渐变&阴影来体现UI的层级

使用材质和纹理

整体色调偏深（多用灰色，深蓝）

按钮比较小

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

2013-2015

扁平化（很少或者不用渐变/阴影/高光）

颜色趋于明亮，多用粉彩色（较低饱和度的彩色）

基本不用拟物化设计了

材质纹理也基本不采用了

极简主义回归

细体/极细体文字回归

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

2016-2017

渐变和阴影又回归了，但是变得比较低调，主要是为设计增添一些细节，而不是让UI拟物

颜色更加偏粉彩

加粗的字体回归了

浮层元素投影变得比较大而深

扁平图标

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

设计风格的改变到底是什么驱动的呢？

我个人认为“从简”可以比较好的概括，最初的设计是伴随着互联网技术的巨大变革，很多新出现的技术给了设计师“炫技”的空间，大家都想做出特别的东西，“逼真”就是一种让人眼前一亮的方式，就像看到一副栩栩如生的素描，不管懂不懂美术的人都会赞叹一句“画的真好”。但是随着整个行业的日趋成熟稳定，设计也回归到它的本质-服务用户，大家都开始谈论用户体验，想着如何做出更加简单易懂易上手的产品，简单的线条和颜色无疑会最大限度的降低UI产生的干扰，让用户聚焦在产品功能本身，UI也就顺理成章的从“炫技”转向“服务”。

但是随着新一波的技术浪潮来临，新兴的产品和交互方式开始不断涌现，比如VR，设计师开始考虑如何在虚拟的3D环境中创造新的UI，没有了成熟的“视觉指南”和“交互规范”束缚，大家又大开脑洞开始了新一轮的探索，或许若干年后再看现在的VR产品，又会觉得“怎么那么复杂呢”？