- 设计理论 -

按钮设计进化史

作者:Quines·QQQ 原文出处:海盐社
2018-07-25

17.jpeg

今天要分享的是,从按钮设计风格的进化中,提炼出来的按钮设计要点。

大家都知道界面交互中离不开按钮,不论是日常界面设计,还是与页面交互时,按钮是我们一定会涉及到的控件。他对于界面与用户的交互起到了关键作用,是我们与界面交互时最常用、最普通、也最重要的控件。



目录

一、发展时间轴(2009-2017)

二、设计误区

三、总结

四、参考链接



屏幕快照 2018-07-25 上午11.35.37.png


随着互联网的热度不断攀升,按钮的更新迭代可以说是日新月异,但是按钮作为行为工具的地位一点也没有被动摇。


屏幕快照 2018-07-25 上午11.35.44.png

640.png

原创


我们和按钮的初识可以追溯到家用电脑普及之初,windows系统那时候的按钮。

如图,Windows95系统的按钮,使用强烈的明暗对比方式来制造立体效果,以区分按钮与背景。这种方式同时也帮助用户理解视觉上的元素关系,通过按钮上加虚线的方式来提示哪个是推荐操作或者说哪个是可交互的元素。

设计原则:运用强烈的明暗交界线,让元素与背景和内容区分开,提示用户这个地方是可点击的。


屏幕快照 2018-07-25 上午11.35.57.png

640-1.png

原创


2009年,因特网诞生40年,按钮设计逐渐演变成以灰色为主导。按钮开始采用渐变的方式过度明暗交接初的光阴变化,让按钮的立体不再那么死板,并且按钮开始出现圆角的形式,给用户的的感觉没有那么生硬。

设计源则:运用强烈的明暗交界线,让元素与背景和内容区分开,提示用户这个地方是可点击的。


屏幕快照 2018-07-25 上午11.36.12.png

640-2.png

原创


2009年的风格继续延续,因为互联网的快速发展,技术上的发展也让网站设计的视觉美上得到发展,设计师开始追求更好的视觉效果,按钮的设计逐渐被重视,增加了更多细节和更多的颜色,并开始出现拟物化的趋势。

设计源则:运用颜色,让按钮在界面中脱颖而出,增加了更多细节的同时也提升了视觉效果,强调并引导用户去点击。


屏幕快照 2018-07-25 上午11.36.26.png

640.jpeg

原创


2011到2012年,互联网使用者大规模增长,2012年更是移动物联网元年,移动互联网也开始普及,为了让用户降低学习成本,拟物化风格占到了主导地位。

如图,移动设备上的计算器,让用户从视觉上就能感受到现实生活中的物品再像移动虚拟世界靠近,增加了用户与移动设备、移动互联网的亲密感,并且有效的降低了用户的学习成本。

2012年,是拟物化风格发展最快的一年,很多设计师在拟物化风格中磨练出了很高的水平。Apple明确的将拟物化使用在iOS7上,水晶按钮和拟物的风格的搭配风靡一时。

设计源则:用熟悉的物件降低学习成本、养成用户的交互习惯,模拟现实中的交互方式,传达丰富的人性化情感。


屏幕快照 2018-07-25 上午11.36.36.png

640-3.png

原创


2013年,这一年也出现了新的设计趋势——扁平化设计。前几年的拟物风格降低了用户的学习成本,同时也让用户养成了一定的交互习惯后。拟物化风格趋势下降,扁平化风格趋势开始出现。

从那年的ios设计中可以看出,iOS7采用了全新的扁平化以及极简化设计风格,设计师认为简单的元素与严谨的布局,能更有效的让用户对重点一目了然,过多的拟物设计会分散用户对重要信息的甄别。


2014年,谷歌发布了Material Design。“按钮告知用户按下按钮后将进行的操作”这是MD的开篇第一句话。这一年,苹果、谷歌、微软都加入“扁平大军”。

“扁平“设计,就好比是一个球体去掉明暗、透视等视觉效果,从三维变为二维的一个过程。但是很多设计师并没有完全遵循这种风格。


设计源则:元素本身不再具有非常强烈的人性化情感提示,转为通过整体而非个体来产生现实扭曲力场。描边和色块按钮成了的代表。


屏幕快照 2018-07-25 上午11.36.45.png

640-4.png

原创


这种风格近似扁平,但利用细微的阴影、高光,以及层级来创造一些深度。在谷歌发布了Material Design的后的2015年,UI设计师们开始的喜欢上了这种风格,消失的阴影又开始出现在扁平的设计风格中。

设计原则:使按钮逐渐有了质感,增加了页面的层级、明确按钮的可点击性,同时也让按钮不再过于“高冷”。


屏幕快照 2018-07-25 上午11.36.56.png

640-5.png

原创


2016-2017年,轻拟物风逐渐形成,设计师开始不满足于Material和阴影的融合合。开始在设计中加入拟物的设计。但不同于最初的拟物风格,不强调按钮的独特性和拟物的完整度,而是强调按钮本身的质感和页面的融合性。轻拟物不失简约、清新的味道。同时按钮的阴影也不再是灰黑色,逐渐与页面色或是按钮色融合出现了单色或多色阴影。

设计原则:不失简约、确又加入了拟物风,增加清新的味道和人性化情感。


屏幕快照 2018-07-25 上午11.37.06.png


我们在使用App或是浏览网站的时候,体验是否流畅,按钮的交互是一个至关重要的因素。因此他的可识别性、标签感和大小间距都是我们设计时应该考虑的因素。


屏幕快照 2018-07-25 上午11.37.15.png

640-6.png

原创


经过上文对按钮进化史的介绍,我们不难看出按钮的形状基本都是圆形、圆角方形或是直角方形。很少会用到三角形五边形等异形按钮,一般异形多用于标签iocn。


屏幕快照 2018-07-25 上午11.37.26.png

640-7.png


按钮的提示文字也叫标签文本,相比于图形的标签,文字的提示性更强。因此用到文字做标签的时候,我们要注意提示文字的大小和可识别度。


屏幕快照 2018-07-25 上午11.37.37.png

640-8.png

原创


我们在浏览资讯app或是玩游戏的时候,有没有遇到过按钮太小造成的误操作呢?

在做按钮设计的时候,一定需要考虑按钮的可触摸尺寸,按钮的间隔间距,让用户可以点并不会点错。


640-1.jpeg


而来自 MIT Touch Lab 的一项研究表明,手指的平均触摸大小在10-14mm之间,指尖的范围则在8-10mm,这就使得最合适的尺寸下限应该在10mm x 10mm左右。


屏幕快照 2018-07-25 上午11.37.50.png


回顾过去的几年,按钮的设计风格变化不可谓不大,但按钮“向用户传达其功能可见性”的初衷一直没变。首先我们要从视觉上让用户意识到,这是一个可点击的按钮;然后要根据按钮上的信息和位置明确这个按钮的功能。按钮,是会影响整个交互流程是否流畅的重要因素。


屏幕快照 2018-07-25 上午11.37.54.png


https://zhuanlan.zhihu.com/p/32068145 《【译】按钮设计8年发展史》

http://www.woshipm.com/pd/880172.html《按钮设计8年发展史》

https://www.jianshu.com/p/7aec2dada057《小按钮中大学问之按钮设计原则》

http://touchlab.mit.edu/publications/2003_009.pdf《MIT Touch Lab 》



18.jpeg

海盐社.jpeg

喜欢就分享
精选评论