按钮设计8年发展史(2009年-2017年)

当我们在网上购物,提交我们个人信息都需要用到-按钮。网页设计的增长很快,风格似乎也是一个月一变。最近几年,我们经历过从文 本链接到拟物化设计再到扁平化瀑布流设计。导航是网页设计中最重要的元素,并且按钮是最重要的行为工具。

在这篇文章中,我们来追溯在Dribbble上按钮设计的八年发展史。

按钮的时间线

2009年,成立了一个为全世界设计师提供分享他们设计项目的平台-Dribbble。通过Dribbble我们可以看到过去八年按钮设计的趋势和设 计变化。

我在Dribbble上找了很多分类创建了下面的按钮风格时间线:

2009

2009年,因特网要庆祝40周岁,第一个种类出现在Dribbble。按钮设计的以灰色为主导。按钮几乎都是用微妙的渐变, 圆角,和阴影构成。

2010

2010年,Instagram成立。按钮的风格并没有大幅度的改变,但是使用了更多的颜色,更多的细节(例如内阴影),更 多的装饰排版。

2011

2011年,CSS3首次亮相,互联网使用者大规模增长。拟物化依旧占主导地位,但是有很多设计者开始在这个风格上进行 创新。也许你找寻不到阴影或者高亮的使用规范,但是可以确定的是这些元素依旧是每个项目的主流。

2012

2012年,拟物化风格趋势下降,扁平化风格趋势开始出现。这一年是拟物化风格发展最快的一年,很多设计师在这种风 格上达到了很高的水平,同时有些设计师开始寻找一些新的东西。

2013

2013年,Apple明确的将拟物化使用在iOS7上。毫无疑问的,这一年也出现了新的设计趋势——扁平化设计。几乎 Dribbble上每一个独立的设计师——在同一时间——放弃了在其app或者web页面上使用三维的按钮,转而决定使用平 面设计。

2014

2014年,谷歌发布了Material Design。但是很多设计师并没有完全遵循这种风格。这是一个非常有意思的一年,因为每 个设计师几乎是突然开始用扁平化风格的按钮。在Dribbble中就能够找到很多这种风格。简而言之就是:两个像素的边 框按钮。

2015

在谷歌发布了Material Design的几个月后,UI设计师们很快的喜欢上了这种风格。扁平的按钮下方增加了微小的阴影。 很多设计师将这种风格应用到项目中就能证明这种风格对设计趋势的重大影响。

2016

2016年,设计师开始将新的元素与Material和平面设计风格混合。渐变出现在按钮设计中,不再强调三维感,而是强调 按钮本身的质感。按钮开始使用发光的彩色阴影。

2017

2017年,一方面极简主义和扁平化设计已经持续了一年。另一方面,设计师们依旧在寻找新的表现形式。我们正处于一 个在技术上没有限制,而是局限于潮流和时尚框架的阶段。

接下来呢?

接下来按钮的发展是怎样的?我也不知道。只知道按钮进化的原因有很多种—技术的改变,设计师设计意识的成长,等等。

不可否认,按钮已经成熟,可以进行其他方面的更改。随着手势交互,AR,VR,或者声控交互,也许我们使用多年的按钮是否还会存在 都是一个值得探讨的问题?

译文地址:非科班设计(公众号)

译者:小船

(0)

相关推荐

  • Firefox 4.0 浏览器工具栏按钮设计

    作为一款开源浏览器,Mozilla一直也在同大家分享新界面的开发进程。Firefox 4.0新界面的一个重要改进就是工具栏按钮的设计和布局,今天Mozilla开发人员Stephen Horlander ...

  • 还在担心按钮设计吗?来看看这十条基本准则

    设计按钮的方法有很多,但是基本准则却只有那么几种.你在浏览一些图库的时候会发现,大多数按钮的设计大同小异,只有少数那么几个做到了仔细推敲.反复打磨的用心. 不管用什么工具,首先,我们要了解按钮这一元素 ...

  • 圣诞版-按钮设计

    快到圣诞节了!小伙伴们,肯定都急着找素材吧,找素材还不如自己做素材,不会肿么办???一堆问号!浓浓的节日气氛,UI按钮怎么能缺席呐?在这里教大家做一个精美圣诞的按钮吧,附带原文件!废话不说了,赶紧往下 ...

  • 25富有灵感的使用了幽灵按钮设计的网页欣赏

    什么是幽灵按钮?好恐怖哦!NO,小编告诉你,幽灵按钮可漂亮了."幽灵按钮",它是指一个具备按钮形状和文字的按钮,但是它没有底色,中间是空的,而且有些"幽灵按钮" ...

  • 回顾2017系列篇(三):UX设计大会,都预示了哪些设计趋势?

    2017已成过去,在这一年中,无数的UX大会和设计大会在世界各地召开.每一场会议的召开,都是界内精英人士的交流和智慧的碰撞.虽然2017年的会议都已过去,但每场会议上的话题探讨,尤其是界内精英们分享他 ...

  • 2017年十个UI设计趋势

    UI 设计越来越重要,它在直观塑造企业形象的同时,也成为留住用户的关键.与此同时,UI 的设计风格每一年都在发生变化.就像是扁平化.手势.微交互.卡片式成为过去两年中的关键词一样.总有一些好的设计总是 ...

  • 按钮系统的设计思考模型

    通过模型的方式呈现出按钮系统设计思考过程,从忙碌的工作生活中抽出时间分享自己关于按钮系统设计的思考. 我们都知道各种各样不同名称的按钮,比如行为召唤按钮,灵魂按钮等这些按钮对于大家理解按钮设计很有帮助 ...

  • 想设计好按钮,你还差份最全的场景分析

    按钮在UI设计中是一种常用的UI控件,在界面中作为主要的行动点,引导用户进行相应的操作,它在用户和产品的交互中承担着重要的作用.按钮设计看似简单,但是如果想要更好的交互体验,引导用户进行相应的操作,提 ...

  • 学UI网站长的10年设计生涯回顾

    虎哥! 蒽,就是那个天天卖萌的,亲民无敌的虎哥:就是那个每天半夜给你们点评作业的虎哥.虽然虎哥30好几了,真看不出来.虎哥说自己发育晚,哎,我就这么信了吧,心态好就是显年轻啊,大写的服. 虎哥2019 ...