千锋教育-做有情怀、有良心、有品质的IT职业教育机构

400-811-9990
当前位置:千锋视频教程 >  UI视频教程  >  UI教程之了解Button设计的发展演变

UI教程之了解Button设计的发展演变

时间:2018-06-06 11:50     来源:千锋视频教程 作者:千锋老师

Button,无处不在。

尤其是在当前移动互联时代,充斥在你我手机的各类app里。

长长方方的一块区域中,它承载着许多重要的功能。你点击它“返回”某处,也用它“确定”你的决定;有时它可以“删除”不必要的表达,却也能用来“分享”你的感受。

总之,林林总总,形形色色的button早已是各类设计作品中不可或缺的重要元素之一。与其他元素相比,Button的功能性决定了它在设计上的特殊性。

今天,我们就来简单的说一说这些Button们的前世今生,用一个时间的纬度来看一下它们这些年的变化,或许就能发现,在承担了所谓“功能性第一”这样天职一般的责任下,它们的设计形式也曾是如此丰富多彩。

1

Button的开始

当然,Button从来不只是存在于屏幕中。早在18世纪初,就相继有欧美各个国家的天才们发明了各种形式的打字机。而打字机的字母按键,可以说是最早Button的一种实体形式。

2

而当爱迪生发明了电灯之后,开关则作为Button的另一种重要形式,也逐渐的进入人们的生活。

随着上世纪60,70年代,人类全面进入电器时代,那些实体形式的Button也一个个的被安置在各式各样的家用电器上。

3

电视机,录音机,冰箱,洗衣机,微波炉们上的按钮也从简单的“开关模式”进化到如:可以上下移动精确的调节音量,轻轻旋转调整频率等,相对复杂的设计。人们也慢慢习惯了按钮的各种操作,打开模式,关闭模式,Hover状态,双击弹起等等,一些直到如今还奉行着的用户习惯设计,其实早在30,40年前就被养成了。

4

然而,在屏幕的世界中,Button出现的也并不晚。上个世纪50年代就有了第一款电子游戏,一直70,80年代,初代红白机的诞生。虽然那时大多数游戏内的Button都只是一行文字组成的选项,但这些的确是Button在屏幕世界,最初的样子。

5

进入90年代后,个人电脑与互联网的兴起,使得Button在屏幕世界的需求量成倍增长。这种增长的方向主要分布在以下三个地方:电脑操作系统,游戏和各类软件。

同时Ui,UE的设计规范也逐渐成型,这对之后,主要是移动端按键设计的影响,意义重大而深远。

6

7

随着时间的推移,2000年以后,互联网技术的发展使得button在屏幕世界的功能变得越来越多。这种改变,似乎感觉Button在真实世界中不那么重要了。一直到Iphone的出现,采用了触摸屏技术而取消了实体按键,使得人们感觉Button原本就应该是屏幕中来的,而非是对真实世界的模拟,当然这是之后的事情了。

8

即便是这样,当时的Button,从设计上来说,还是偏向于拟物的。什么叫拟物?就是指对真实按键的模仿。我们可以看下面的这些案例。

9

这款当年火爆网络的播放器的很明显模仿了当时的MP3的造型,设计上讲究质感,按键的布局也接近真实的MP3。虽然这样的设计布局未见得高效和科学,但是它通过一种高度模拟实体产品的方法,也的确免去了用户重新培养使用习惯的麻烦。

10

早期的即时通讯软件在现实中并不存在,是互联网的一项专属发明。由于找不到实物的参考而只能自己设计布局。即便是这样,在一些Button的设计上还是尽量的保持了质感,努力创造与现实世界的某种联系。

这些早期的Button,虽然现在看样式有些过时。但却也不乏一些精彩的设计,其中win操作界面和ISO系统的设计更是被奉为经典,现在最主要的一些UI,UE,Button的设计规范和习惯,都是这两款系统界面设计的延伸与发展。

11

Button设计近十年

以上这些,虽说也是Button的发展史,可毕竟离我们这批80后90后设计师还颇有些遥远。那么进入千禧年后,Button又经历过那些变化,它是如何变成现在这个样子?除了现在的偏平化风格与拟物化风格,还有什么被遗忘的形式呢?

主导航的地位

2000年-2006年左右,企业网站进入繁荣时期。

就像现在的公众号,无论是跨国大企业,还是只有几个人的小公司,拥有自己专属的网站成了一种标配。那个年代最热门的是电子商务,而淘宝这类大型电子商务平台还没有形成规模。于是,企业网站的职责就不单只是做形象宣传,同时也需要负责相当的电子商务功能。

12

13

14

15

但是,由于当时大部分中小企业并没有自己的广告代理公司,所以导致做企业官网的时候几乎没有拿得出手的物料,最多只有一个企业logo。在这样的情况下,为了保证美观,网站设计师们可以说是千方百计,自己手动加料,把画面中最大的Button——主导航,最为重要的视觉表现元素之一来精心设计。另外一个重要的设计元素就是Banner,这个今天姑且不说。

16

17

所以可以说,当时在网站设计里,主导航的设计形式,绝对是重中之重。同时也出现了许多,精彩的,富有质感的或者想象力出众的作品。

18

19

20

融在画面中Button设计

06年后,随着当时Flash的脚本语言升级到3.0,人们发现Flash其实可以很好的与服务器语言做结合,(PHP,ASP等等),登录与注册,上传照片与下载文档等等功能,在flash端完全可以实现。

于是以flash为全站的企业官网也好,还是flash的活动网站也好,都如雨后春笋一般蓬勃发展起来。加上flash原本的动画特长,也推动了button出现了千变万化的动态效果。

21

22

而另一方面,以Button为主要视觉元素的情况依然存在,而且随着当时国内网站设计师的技法逐渐成熟,Button在视觉设计领域达到了一定的高度。

23

24

一个好的设计师,一定会考虑到Button的各种状态,并且考虑它们之间的切换效果以及这种变化对于主画面的影响。这让许多网站的Button最终变成了画面的一部分。它们就这样完美的融合在画面之中,毫无违和感。不仅这样,当鼠标滑过时,它们的动效往往更让人惊艳。

扁平化与拟物化之争

2010年,当时的苹果 CEO 乔布斯发表了一篇1700字的文章来详细解释了iPhone、iPod touch 和 iPad 不支持 Flash 的原因。这也导致随后几年,flash完全丧失了移动端的占有率。abobe也不得不宣布将在2020年完全停止Flash的更新和开发。

25

随着flash的陨落,Button也回归了按钮原有的功能性,在设计上也逐渐的进入极简风盛行的时代。

还是苹果,这个当年拟物风格的缔造者之一。在2013年9月,推出iphone5s手机的同时,其搭载的ios7.0的操作系统,完全摒弃了原先的拟物风格,采用了扁平化的设计。

26

虽然,当时的设计界对这种颠覆性的举动褒贬不一。但是,随着越来越多的app以及其他手机操作系统的跟进,这种最高效的扁平化的button设计,已经成为现下最主流的风格。

27

当然,拟物的button设计也还是能在一些游戏app中,找到身影。又或者就是有人喜欢这种相对富有韵味和温度的设计形式。

28

29

30

就像谁曾说过:时尚是一个轮回,一样。谁又能拍着胸脯保证,在十几二十年后,拟物风就不会重新流行?又或许人类早已进入意识控制设备的时代,压根就不需要Button这回事儿了。

最后我相信,您在读了这篇流水之后,对Button设计的提高,是真的没有太大帮助:)。但是,同时我整理了超过100种button设计的图片参考,给到大家。相信这个还是会有一些帮助的。

希望大家在设计完主画面之后,千万不要忽略Button的设计,不管是扁平还是拟物,毕竟做好每个细节,这才叫Profession,共勉。

千锋UI培训拥有一支优秀的教师团队。UI设计学科讲师都是资深的网站工程师和设计讲师,很多讲师拥有着10年网站开发与教学经验以及上百个网站项目成功案例的经验,对企业产品设计流程非常熟悉,对行业的前沿流行趋势也是十分了解。可以说,经过千锋导师的讲解,学员对于现阶段行业需要的设计理念的把握将会更盛一筹。千锋平台的免费UI视频教程帮助每一个爱好UI设计的同学快速学习。

  • 北京天丰利校区(总部)地址:北京市海淀区宝盛北里西区28号天丰利商城4层
    北京沙河校区:北京市昌平区沙阳路18号北京科技职业技术学院广场服务楼2、3层
    咨询电话:400-811-9990
    面授课程:HTML5大前端培训、JavaEE+分布式开发培训、Python全栈+人工智能培训、全链路UI/UE设计培训、物联网+嵌入式培训、大数据+人工智能培训、全栈软件测试培训、PHP全栈+服务器集群培训、云计算+信息安全培训、Unity游戏开发培训、红帽RHCE认证、Android培训、iOS培训、好程序员
  • 深圳西部硅谷校区地址:深圳市宝安区宝安大道5010号深圳西部硅谷B座A区605-619
    深圳大学城校区地址:深圳市南山区留仙大道1201号大学城创客小镇16栋3楼
    咨询电话: 0755-23015275/23015546-801(硅谷) 0755-86660670-801(大学城)
    面授课程:HTML5大前端培训、JavaEE+分布式开发培训、Python全栈+人工智能培训、全链路UI/UE设计培训、物联网+嵌入式培训、大数据+人工智能培训、全栈软件测试培训、PHP全栈+服务器集群培训、云计算+信息安全培训、Unity游戏开发培训、红帽RHCE认证、Android培训、iOS培训、好程序员
  • 上海校区地址:上海市宝山区同济支路199号智慧七立方3号楼2-4层
    咨询电话:400-811-9990 021-65233829-609
    面授课程:HTML5大前端培训、JavaEE+分布式开发培训、Python全栈+人工智能培训、全链路UI/UE设计培训、物联网+嵌入式培训、大数据+人工智能培训、全栈软件测试培训、PHP全栈+服务器集群培训、云计算+信息安全培训、Unity游戏开发培训、红帽RHCE认证、Android培训、iOS培训、好程序员
  • 郑州校区地址:郑州市二七区航海中路60号海为科技园C区10层、12层
    咨询电话:0371-55191750
    面授课程:HTML5大前端培训、JavaEE+分布式开发培训、Python全栈+人工智能培训、全链路UI/UE设计培训、物联网+嵌入式培训、大数据+人工智能培训、全栈软件测试培训、PHP全栈+服务器集群培训、云计算+信息安全培训、Unity游戏开发培训、红帽RHCE认证、Android培训、iOS培训、好程序员
  • 广州校区地址:广州市天河区元岗路310号智汇park创意园E座5层
    咨询电话:020-22119207
    面授课程:HTML5大前端培训、JavaEE+分布式开发培训、Python全栈+人工智能培训、全链路UI/UE设计培训、物联网+嵌入式培训、大数据+人工智能培训、全栈软件测试培训、PHP全栈+服务器集群培训、云计算+信息安全培训、Unity游戏开发培训、红帽RHCE认证、Android培训、iOS培训、好程序员
  • 大连校区地址:辽宁省大连市高新园区爱贤街10号大连设计城A座901
    咨询电话:400-811-9990
    面授课程:HTML5大前端培训、JavaEE+分布式开发培训、Python全栈+人工智能培训、全链路UI/UE设计培训、物联网+嵌入式培训、大数据+人工智能培训、全栈软件测试培训、PHP全栈+服务器集群培训、云计算+信息安全培训、Unity游戏开发培训、红帽RHCE认证、Android培训、iOS培训、好程序员
  • 武汉金融港校区地址:武汉市东湖高新技术开发区光谷大道77号金融港B18栋3楼
    武汉智慧园校区地址:武汉市东湖高新技术开发区光谷大道61号智慧园21栋2楼
    咨询电话:027-59313371
    面授课程:HTML5大前端培训、全链路UI/UE设计培训、PHP全栈+服务器集群培训、JavaEE+分布式开发培训、大数据+人工智能培训、 Unity游戏开发培训、Python培训、云计算+信息安全培训、全栈软件测试培训、智能物联网+嵌入式培训、Android培训、iOS培训
  • 成都校区地址:成都市武侯区科华北路62号力宝大厦N(北楼)18楼
    咨询电话:400-811-9990 028-83178771
    面授课程:HTML5大前端培训、JavaEE+分布式开发培训、Python全栈+人工智能培训、全链路UI/UE设计培训、物联网+嵌入式培训、大数据+人工智能培训、全栈软件测试培训、PHP全栈+服务器集群培训、云计算+信息安全培训、Unity游戏开发培训、红帽RHCE认证、Android培训、iOS培训、好程序员
  • 西安校区地址:西安市雁塔区高新六路52号立人科技C座西区4楼
    咨询电话:029-85363390
    面授课程:HTML5大前端培训、JavaEE+分布式开发培训、Python全栈+人工智能培训、全链路UI/UE设计培训、物联网+嵌入式培训、大数据+人工智能培训、全栈软件测试培训、PHP全栈+服务器集群培训、云计算+信息安全培训、Unity游戏开发培训、红帽RHCE认证、Android培训、iOS培训、好程序员
  • 杭州校区地址:浙江省杭州市江干区九堡旺田书画城A座4层
    咨询电话:400-811-9990 0571-86893632
    面授课程:HTML5大前端培训、JavaEE+分布式开发培训、Python全栈+人工智能培训、全链路UI/UE设计培训、物联网+嵌入式培训、大数据+人工智能培训、全栈软件测试培训、PHP全栈+服务器集群培训、云计算+信息安全培训、Unity游戏开发培训、红帽RHCE认证、Android培训、iOS培训、好程序员
  • 青岛校区地址:青岛市市北区龙城路卓越世纪中心3号楼8层801
    咨询电话:0532-80911190
    面授课程:HTML5大前端培训、JavaEE+分布式开发培训、Python全栈+人工智能培训、全链路UI/UE设计培训、物联网+嵌入式培训、大数据+人工智能培训、全栈软件测试培训、PHP全栈+服务器集群培训、云计算+信息安全培训、Unity游戏开发培训、红帽RHCE认证、Android培训、iOS培训、好程序员
  • 重庆校区地址:重庆市高新区科园一路2号大西洋国际12-1
    咨询电话:400-811-9990 023-68883009
    面授课程:HTML5大前端培训、JavaEE+分布式开发培训、Python全栈+人工智能培训、全链路UI/UE设计培训、物联网+嵌入式培训、大数据+人工智能培训、全栈软件测试培训、PHP全栈+服务器集群培训、云计算+信息安全培训、Unity游戏开发培训、红帽RHCE认证、Android培训、iOS培训、好程序员
  • 长沙校区地址:湖南省长沙市岳麓区麓谷企业广场A2栋三单元306号
    咨询电话:0731-85513210
    面授课程:HTML5大前端培训、JavaEE+分布式开发培训、Python全栈+人工智能培训、全链路UI/UE设计培训、物联网+嵌入式培训、大数据+人工智能培训、全栈软件测试培训、PHP全栈+服务器集群培训、云计算+信息安全培训、Unity游戏开发培训、红帽RHCE认证、Android培训、iOS培训、好程序员
  • 哈尔滨校区地址:哈尔滨市松北区创新一路699号 科技创新城19号楼B座五楼
    咨询电话:400-811-9990/0451-87173191
    面授课程:HTML5大前端培训、JavaEE+分布式开发培训、Python全栈+人工智能培训、全链路UI/UE设计培训、物联网+嵌入式培训、大数据+人工智能培训、全栈软件测试培训、PHP全栈+服务器集群培训、云计算+信息安全培训、Unity游戏开发培训、红帽RHCE认证、Android培训、iOS培训、好程序员
  • 南京校区地址:南京市建邺区应天大街780号应天智汇产业园弘辉园1幢2楼
    咨询电话:400-811-9990
    面授课程:HTML5大前端培训、JavaEE+分布式开发培训、Python全栈+人工智能培训、全链路UI/UE设计培训、物联网+嵌入式培训、大数据+人工智能培训、全栈软件测试培训、PHP全栈+服务器集群培训、云计算+信息安全培训、Unity游戏开发培训、红帽RHCE认证、Android培训、iOS培训、好程序员
  • 千锋教育服务号

    了解千锋动态
    关注千锋教育服务号

  • 千锋教育移动站

    扫一扫快速进入
    千锋移动端页面

  • 千锋互联服务号

    扫码匿名提建议
    直达CEO信箱