本文概述
- 运球按钮时间轴
- 2009
- 2010
- 2011
- 2012
- 2013
- 2014
- 2015
- 2016
- 2017
- 下一步是什么?
在本文中, 我将追溯基于Dribbble的Web按钮设计八年的历史。
运球按钮时间轴 2009年, Dribbble创建了:一个供来自世界各地的设计师分享他们当前项目的小平台的平台。使用Dribbble, 我们可以追踪过去八年中按钮趋势和设计的故事。我已经完成了几千个Dribbble镜头, 以创建按钮样式的交互式时间轴:
单击上方的按钮浏览Dribbble时间轴
2009 【多年来的按钮设计–Dribbble时间表】今年, 互联网庆祝成立40周年, 第一个” 镜头” 出现在Dribbble上。按钮的设计以灰度为主。几乎每个按钮设计中都会出现精致的渐变, 圆角和阴影。这种美感是指本机系统按钮。
![多年来的按钮设计–Dribbble时间表](http://www.srcmini.com/wp-content/uploads/2020/04/toptal-blog-image-1505338643093-b6ac31bf01dd8edf1c5c48996862e85b.png)
文章图片
Wojciech Dobry, Dan Cederholm, Josh Bryant, Dribbble, Sarah Parmenter, Matthew Smith
2010 创建Instagram的年份。按钮的形式不会发生很大变化, 但是有更多的颜色, 更多的细节(例如内部阴影)以及更多的装饰性排版。
![多年来的按钮设计–Dribbble时间表](http://www.srcmini.com/wp-content/uploads/2020/04/toptal-blog-image-1505338696586-d2661f9624d02229544d972182fbf15f.png)
文章图片
Wojciech Dobry, Morgan Allan Knutson, Troy Bergland, Claudiu Cioba, Liam McKay, Jared Christensen
2011 CSS3今年首次亮相, 互联网用户数量增长到10亿。拟态仍然占主导地位, 许多设计师都以非常有创意的方式开发这种风格。你无法在此处找到任何应??用阴影或照明的规则, 但是可以确保所有这些元素都存在于每个项目中。
![多年来的按钮设计–Dribbble时间表](http://www.srcmini.com/wp-content/uploads/2020/04/toptal-blog-image-1505338719562-0d8cc793f6446d6f68496b43086fe521.png)
文章图片
Wojciech Dobry, Julien Renvoye, Claudiu Cioba, Meagan Fisher, Josh Hemsley, Jonathan Moreira
2012 拟态的下降和最终形式, 以及平面设计的开端。今年是目前为止最发达的拟态形式, 其中一些设计师已经达到这种风格的大师水平, 而另一些设计师则开始寻找新的东西。
![多年来的按钮设计–Dribbble时间表](http://www.srcmini.com/wp-content/uploads/2020/04/toptal-blog-image-1505338763345-9c7f0f185f7a89af6df2a5ae57b84244.png)
文章图片
Wojciech Dobry, Eduardo Santos, 麦克|创意薄荷糖, Maykel Loomans, Ian Collins, Dawid Liberadzki
![多年来的按钮设计–Dribbble时间表](http://www.srcmini.com/wp-content/uploads/2020/04/toptal-blog-image-1505339057941-a504318bddbd4ab7cfa9f608c51273ef.png)
文章图片
Wojciech Dobry, Cosmin队长, Eddie Lobanovskiy, Jonathan Moreira, Riki Tanone
2014 Google发布了Material Design。但是, 许多设计师并不完全遵循这种风格。这是非常有趣的一年, 因为每个人都突然开始使用幻像按钮样式或扁平按钮。它们出现在Dribbble上的大多数镜头中。两个具有鲜艳色彩的Pixel边框(2014年)。
![多年来的按钮设计–Dribbble时间表](http://www.srcmini.com/wp-content/uploads/2020/04/toptal-blog-image-1505339081409-538a090802956fd215f0d0c375765ade.png)
文章图片
Wojciech Dobry, Eric Hoffman, Ramil Derogongun, Mason Yarnell, Colin Garven, Bill S Kenney
2015 在听到Google发布Material Design公告仅几个月后, UI设计师就爱上了该指南。按钮的平坦表面下面带有精致的阴影, 标志着” 材料设计” 对当前趋势的重大影响。看看有多少人将这种样式应用于他们的项目。
![多年来的按钮设计–Dribbble时间表](http://www.srcmini.com/wp-content/uploads/2020/04/toptal-blog-image-1505339145805-b42a76c67a7d1830b8b1b8eb6abb19dd.png)
文章图片
Wojciech Dobry, George Vasyagin, Victor Erixon, Hoang Nguyen, Leo Leung, Joshua Krohn
2016 设计师很无聊, 所以他们想出了新的元素来与Material and Flat Design混合使用。渐变出现在按钮的表面上, 不是为了强调三维尺寸, 而是为了强调按钮材料本身。该按钮将获得彩色阴影并开始发光。
![多年来的按钮设计–Dribbble时间表](http://www.srcmini.com/wp-content/uploads/2020/04/toptal-blog-image-1505339351353-3af72b67f6bc36f4696e6416202c9a84.png)
文章图片
Wojciech Dobry, Anastasiia Andriichuk, Gleb Kuznetsov, Ghani Pradita, Christopher, Ben Mingo
2017 我很好奇, 我将如何展望未来八年。一方面, 今年到目前为止是极简主义和平面设计的一年。另一方面, 我们仍在寻找新的形式。我们正处于一个不受技术限制的阶段。我们仅受趋势和时尚框架的限制。
![多年来的按钮设计–Dribbble时间表](http://www.srcmini.com/wp-content/uploads/2020/04/toptal-blog-image-1505339373582-d833c01a5da4891d128ba696a6fb0afb.png)
文章图片
Ben Cline, Anton Aheichanka, Vera Voishvilo, George Vasyagin, Ghani Pradita
下一步是什么? 按钮样式将继续发展多长时间?我不知道。我只知道他们会的。进化的原因可能各不相同-技术变化, 设计师意识的增强, 无聊。
不可否认, 按钮正在等待其他更改。也许这种改变将是他们的死亡?借助手势, 直观的交互, AR, VR和声音界面, 我们是否仍需要我们使用多年的按钮?
? ? ?
在srcmini设计博客上进一步阅读:
- 电子商务UX –最佳做法概述(带有信息图)
- 以人为本的设计在产品设计中的重要性
- 最佳UX设计器产品组合–启发性的案例研究和示例
- 移动接口的启发式原理
- 预期设计:如何创建神奇的用户体验
推荐阅读
- CMS Web设计(动态内容应用程序指南)
- 如何进行有效的用户体验研究-指南
- 触摸的力量–按钮设计的发展(图解)
- 增强现实vs.虚拟现实vs.混合现实–入门指南
- 终极用户体验挂钩-用户体验中的预期性,说服力和情感设计
- 后Flash时代的Web动画
- 反对漂亮的应用程序设计
- Adobe XD与Sketch –哪种UX工具适合你()
- A general approach to detect tampered and generated image