Button,无处不在。
尤其是在当前移动互联时代,充斥在你我手机的各类app里。
长长方方的一块区域中,它承载着许多重要的功能。你点击它“返回”某处,也用它“确定”你的决定;有时它可以“删除”不必要的表达,却也能用来“分享”你的感受。
总之,林林总总,形形色色的button早已是各类设计作品中不可或缺的重要元素之一。与其他元素相比,Button的功能性决定了它在设计上的特殊性。
今天,我们就来简单的说一说这些Button们的前世今生,用一个时间的纬度来看一下它们这些年的变化,或许就能发现,在承担了所谓“功能性第一”这样天职一般的责任下,它们的设计形式也曾是如此丰富多彩。
Button的开始
当然,Button从来不只是存在于屏幕中。早在18世纪初,就相继有欧美各个国家的天才们发明了各种形式的打字机。而打字机的字母按键,可以说是最早Button的一种实体形式。
而当爱迪生发明了电灯之后,开关则作为Button的另一种重要形式,也逐渐的进入人们的生活。
随着上世纪60,70年代,人类全面进入电器时代,那些实体形式的Button也一个个的被安置在各式各样的家用电器上。
电视机,录音机,冰箱,洗衣机,微波炉们上的按钮也从简单的“开关模式”进化到如:可以上下移动精确的调节音量,轻轻旋转调整频率等,相对复杂的设计。人们也慢慢习惯了按钮的各种操作,打开模式,关闭模式,Hover状态,双击弹起等等,一些直到如今还奉行着的用户习惯设计,其实早在30,40年前就被养成了。
然而,在屏幕的世界中,Button出现的也并不晚。上个世纪50年代就有了第一款电子游戏,一直70,80年代,初代红白机的诞生。虽然那时大多数游戏内的Button都只是一行文字组成的选项,但这些的确是Button在屏幕世界,最初的样子。
进入90年代后,个人电脑与互联网的兴起,使得Button在屏幕世界的需求量成倍增长。这种增长的方向主要分布在以下三个地方:电脑操作系统,游戏和各类软件。
同时Ui,UE的设计规范也逐渐成型,这对之后,主要是移动端按键设计的影响,意义重大而深远。
随着时间的推移,2000年以后,互联网技术的发展使得button在屏幕世界的功能变得越来越多。这种改变,似乎感觉Button在真实世界中不那么重要了。一直到Iphone的出现,采用了触摸屏技术而取消了实体按键,使得人们感觉Button原本就应该是屏幕中来的,而非是对真实世界的模拟,当然这是之后的事情了。
即便是这样,当时的Button,从设计上来说,还是偏向于拟物的。什么叫拟物?就是指对真实按键的模仿。我们可以看下面的这些案例。
这款当年火爆网络的播放器的很明显模仿了当时的MP3的造型,设计上讲究质感,按键的布局也接近真实的MP3。虽然这样的设计布局未见得高效和科学,但是它通过一种高度模拟实体产品的方法,也的确免去了用户重新培养使用习惯的麻烦。
早期的即时通讯软件在现实中并不存在,是互联网的一项专属发明。由于找不到实物的参考而只能自己设计布局。即便是这样,在一些Button的设计上还是尽量的保持了质感,努力创造与现实世界的某种联系。
这些早期的Button,虽然现在看样式有些过时。但却也不乏一些精彩的设计,其中win操作界面和ISO系统的设计更是被奉为经典,现在最主要的一些UI,UE,Button的设计规范和习惯,都是这两款系统界面设计的延伸与发展。
Button设计近十年
以上这些,虽说也是Button的发展史,可毕竟离我们这批80后90后设计师还颇有些遥远。那么进入千禧年后,Button又经历过那些变化,它是如何变成现在这个样子?除了现在的偏平化风格与拟物化风格,还有什么被遗忘的形式呢?
主导航的地位
2000年-2006年左右,企业网站进入繁荣时期。
就像现在的公众号,无论是跨国大企业,还是只有几个人的小公司,拥有自己专属的网站成了一种标配。那个年代最热门的是电子商务,而淘宝这类大型电子商务平台还没有形成规模。于是,企业网站的职责就不单只是做形象宣传,同时也需要负责相当的电子商务功能。
但是,由于当时大部分中小企业并没有自己的广告代理公司,所以导致做企业官网的时候几乎没有拿得出手的物料,最多只有一个企业logo。在这样的情况下,为了保证美观,网站设计师们可以说是千方百计,自己手动加料,把画面中最大的Button——主导航,最为重要的视觉表现元素之一来精心设计。另外一个重要的设计元素就是Banner,这个今天姑且不说。
所以可以说,当时在网站设计里,主导航的设计形式,绝对是重中之重。同时也出现了许多,精彩的,富有质感的或者想象力出众的作品。
融在画面中Button设计
06年后,随着当时Flash的脚本语言升级到3.0,人们发现Flash其实可以很好的与服务器语言做结合,(PHP,ASP等等),登录与注册,上传照片与下载文档等等功能,在flash端完全可以实现。
于是以flash为全站的企业官网也好,还是flash的活动网站也好,都如雨后春笋一般蓬勃发展起来。加上flash原本的动画特长,也推动了button出现了千变万化的动态效果。
而另一方面,以Button为主要视觉元素的情况依然存在,而且随着当时国内网站设计师的技法逐渐成熟,Button在视觉设计领域达到了一定的高度。
一个好的设计师,一定会考虑到Button的各种状态,并且考虑它们之间的切换效果以及这种变化对于主画面的影响。这让许多网站的Button最终变成了画面的一部分。它们就这样完美的融合在画面之中,毫无违和感。不仅这样,当鼠标滑过时,它们的动效往往更让人惊艳。
puma活动网站_腾讯视频
扁平化与拟物化之争
2010年,当时的苹果 CEO 乔布斯发表了一篇1700字的文章来详细解释了 iPhone、iPod touch 和 iPad 不支持 Flash 的原因。这也导致随后几年,flash完全丧失了移动端的占有率。abobe也不得不宣布将在2020年完全停止Flash的更新和开发。
随着flash的陨落,Button也回归了按钮原有的功能性,在设计上也逐渐的进入极简风盛行的时代。
还是苹果,这个当年拟物风格的缔造者之一。在2013年9月,推出iphone5s手机的同时,其搭载的ios7.0的操作系统,完全摒弃了原先的拟物风格,采用了扁平化的设计。
虽然,当时的设计界对这种颠覆性的举动褒贬不一。但是,随着越来越多的app以及其他手机操作系统的跟进,这种最高效的扁平化的button设计,已经成为现下最主流的风格。
当然,拟物的button设计也还是能在一些游戏app中,找到身影。又或者就是有人喜欢这种相对富有韵味和温度的设计形式。
就像谁曾说过:时尚是一个轮回,一样。谁又能拍着胸脯保证,在十几二十年后,拟物风就不会重新流行?又或许人类早已进入意识控制设备的时代,压根就不需要Button这回事儿了。
最后我相信,您在读了这篇流水之后,对Button设计的提高,是真的没有太大帮助:)。但是,同时我整理了超过100种button设计的图片参考,给到大家。相信这个还是会有一些帮助的。
希望大家在设计完主画面之后,千万不要忽略Button的设计,不管是扁平还是拟物,毕竟做好每个细节,这才叫Profession,共勉。
链接:https://pan.baidu.com/s/1YJP-K2ycxWMpFYPbQDkybw
密码:8clk
一份创意炒饭,闲言碎语配汤,你喜欢不喜欢?
网友评论