从“按钮”看设计风格的演变

按钮是一个很小的设计元素,但是在 UI 设计中却有着很重要的地位,每个应用中都少不了它的身影,很多人可能和我一样,学 UI 都是从临摹一个按钮开始的,今天就来聊聊在这几十年中设计风格和按钮的演变。

三维按钮

20150815001

在我小的时候,家里买了第一台电脑,联想的,名字好像叫天禧,操作系统是 windows98,里面的按钮都是这种三维风格的,用很明显的阴影和高光来告诉用户这是一个可以点击的按钮,是和其他区域不同的,由于当时电脑的分辨率很低,我们可以清楚地看到按钮边缘的像素还有文字的像素。当时基于图形的操作系统刚刚出现,大家刚开始使用,所以设计按钮的时候最关键的就是要把它从界面中突出出来,很明显他们做到了。

20150815002
(windows98 的按钮设计,有很好的突出效果)

拟物化按钮

20150815003

拟物化按钮,可以肯定的说,是由苹果和乔布斯发扬光大的,拟物化是一个设计原则,设计灵感来自于现实世界,乔布斯钟爱于拟物化设计,他认为拟物化的设计能让人立刻就知道这个软件是做什么的,让用户将他们在现实世界中的经验带到虚拟世界中,从而降低用户的学习成本。

从1997年乔布斯重回苹果一直到2012年的 iOS 6,苹果都在坚持和推进拟物化设计,现在打开 dribbble 搜一搜2012年左右的作品,那时的设计师都尽量拟物化做到极致,超写实的光影和纹理,Ps 不行就用三维软件来。

第一个拟物化的作品现在追溯起来应该是苹果的 Quicktime 4,当时苹果团队设计了很多方案乔布斯都不满意,他要求软件的外观要和真实的立体声播放机一致,设计了好多版本乔老爷都不满意,最后他把自己的手表扔给设计师,说你们就照着这个纹理画吧,这样拥有金属拉丝外观的 Quicktime 4就诞生了。

20150815004
(Quicktime 4 的金属拉丝外观和塑料质感的按钮)

20150815005
(当时流行的拟物化按钮,可以看到时间是2012年)

扁平化按钮和幽灵按钮

20150815006

随着2013年苹果推出 iOS 7,扁平化取代了拟物化,成为了新的设计潮流。将界面上所有的纹理和立体效果都抹去,把用户的视线从外观回归到内容本身。从图形化操作界面的出现到现在,已经经历了将近20年,其实就算不把一个按钮做成立体的样子,只要给它以颜色的区分,大家就会知道它是一个可点击的按钮,所以拟物化的存在就没有那么必要了。

后来又出现了幽灵按钮,这个名字很有意思,在英语中它叫 Ghost Button ,其实就是将一个按钮挖空了,只有边界的描边和按钮上的文字,它一般是和一般的扁平化按钮成对出现的,因为这种按钮是空心的,容易和背景融为一体,不会凸显出来,从而更加突出旁边的扁平化按钮。

20150815007(幽灵按钮的使用,因为是空心的,所以更加突出了左边的 Download your free trai 按钮)

微质感按钮

20150815008

在如今的后扁平化时代,按钮的设计已经不局限于扁平化和拟物化了,经常把他们结合起来,用一些不容易察觉到的渐变来表现光影的变化,用阴影表现交互的层级,大家设计的思路也越来越开阔,根据自己的需要来设计各式各样的按钮。

20150815009

(Material design 中用阴影表示层级,里面的按钮也需要遵循这样的设计原则)

20150815010
(最近开始流行起来的,按钮的阴影也不一定是深色,有时候用有颜色的阴影效果也不错)

其实每一个按钮都是为了引导用户在正确的时候点击它,我们从按钮风格的转变可以看到设计风格的转变和设计思维的转变。设计风格和艺术的演变其实一直是不断轮回,螺旋上升的,从最开始古人类在岩石上画下的抽象的壁画,到后来蒙娜丽莎写实的油画,再到梵高毕加索抽象的作品。从上世纪的的包豪斯风格和极简主义,到后来的拟物化设计,再到现在的后扁平化时代,就像轮回一样,设计的功能和初衷才是最重要的,而风格一直随着它不断变。

1 收藏 评论

相关文章

可能感兴趣的话题



直接登录
跳到底部
返回顶部