• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >心得技巧 > 从2009年到2017年,按钮设计发生了哪些变化?

从2009年到2017年,按钮设计发生了哪些变化?

作者:非科班设计-小船 字体:[增加 减小] 来源:互联网 时间:2018-08-23

本文主要包含发展趋势,按钮设计,经验分享,设计趋势等相关知识,非科班设计-小船希望在学习及工作中可以帮助到您

当我们在网上购物,提交我们个人信息都需要用到按钮。网页设计的增长很快,风格似乎也是一个月一变。

在这篇文章中,我们来追溯在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,或者声控交互的发展,也许我们使用多年的按钮是否还会存在,都是一个值得探讨的问题。

欢迎关注微信公众号:非科班设计

fkbsjqr

「除了按钮,还有哪些值得关注的设计趋势」

  • 《跟随这10个趋势,你可以在2018年设计出出众的网页》
  • 《这10个趋势,是2018年用户体验设计关注的重心》
  • 《学会自然语言设计法,提前触摸人工智能设计》
  • 《看了那么多的设计趋势,你知道怎么落地实践吗?》

================明星栏目推荐================

优优教程网: UiiiUiii.com 是优设旗下优质中文教程网站,分享了大量PS、AE、AI、C4D等中文教程,为零基础设计爱好者也准备了贴心的知识树专栏。开启免费自学新篇章,按照我们的专栏一步步学习,一定可以迅速上手并制作出酷炫的视觉效果。

设计导航:国内人气最高的设计网址导航,设计师必备:http://hao..com

优设大课堂

您可能想查找下面的文章:

  • 从2009年到2017年,按钮设计发生了哪些变化?

相关文章

  • 2017-08-06输入自动提示搜索提示功能的样式文件:suggestion.css
  • 2018-08-23科普小课堂!设计师怎样从零开始设计一款APP?
  • 2018-08-23超实用!通用设计法则解析之「无障碍使用」
  • 2018-08-23腾讯设计师:超实用的数据可视化零基础教程之实战案例篇
  • 2017-08-06让网页自动调用双核浏览器的极速模式(Webkit)
  • 2018-08-23看起来很高大上的设计规范,看这篇就知道怎么用了!
  • 2018-08-23腾讯高级设计师:交互知识树系列之平台规范
  • 2018-08-23学会这5个PS小技巧,让工作效率提高5倍!
  • 2018-08-23春节专题!App 设计系列之空白页的价值与设计方案
  • 2018-08-23想成为一名好文案,需要具备这7个职业素养!

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • 从零开始带你掌握空状态设计的正确方法
    • 浏览器可以注册的事件小结
    • 新手建站入门教程初期总结篇
    • 想自学插画?9个必备的手绘插画教程神器
    • UI / UX设计师应该学习的用户心理学原理
    • UX设计师常用的英文单词汇总(持续更新)
    • 高手私藏系列!有哪些能快速提高PPT排版水平的技巧?
    • 轻松看懂规范!详解组件控件结构体系之单元控件类
    • 背后的故事!手机QQ的一键消除红点功能是怎么诞生的?
    • 有创意的关于我们网页页面设计

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有