深度分析|网页界面的按钮图标设计不止扁平化那么简单-凯发k8国际

author: chris song

当今的互联网产品,无论是企业凯发k8国际官网,手机移动端网站,还是各种app,几乎找不出一个产品是没有按钮的。按钮是一个非常小的设计元素但在ui设计中却有种很关键很重要的地位,甚至可以说每一个界面中都少不了它。还有学生告诉过我,他学习网页设计就是从绘制一个按钮开始的。为了能更好的研究透彻关于网页界面的按钮图标设计,有些ui设计专家及权威用户体验凭条还专门研究了关于app界面中按钮设计以什么样的形式和状态出现为最符合用户体验。


由于本人参与的重大项目也仅有2个,资历尚浅,接下来就简单的谈一谈,按钮设计的相关趣闻和故事。将会按照四个部分来讲解。图文有点长,希望大家做好坚持的准备。


  1. 按钮的发展史

  2. 扁平化环境下的按钮设计

  3. 按钮设计有哪些技巧及注意事项

  4. 遇到两个以上的按钮及按钮群该如何设计



-1-

按钮的发展史




从电脑杀入中国市场起初,我相信很多人都这个界面都记忆尤深。



天禧,操作系统是 windows 98,里面的按钮都是这种三维风格的,用很明显的阴影和高光来告诉用户这是一个可以点击的按钮,是和其他区域不同的。那时候电脑的分辨率很低,我们可以清楚地看到按钮边缘的像素颗粒。由于基于图形的交互界面刚刚代替了基于命令行的界面,是个新鲜事物,所以设计按钮时最关键的就是要让它从界面中突出出来,让用户不需要提示也可以知道它是个可以点击的按钮,很明显他们做到了。


后来拟物化按钮风格来袭。



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


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


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



2012 年流行的拟物化界面,将按钮的质感做到极致



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



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


幽灵按钮的使用,因为是空心的,所以更加突出了左边白色的 download your free trai 按钮


微质感按钮的到来


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



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


有时候用有颜色的阴影显得画面更干净,本来是好的想法,但是被滥用了


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





-2-

按钮在扁平化设计环境中如何设计才更让用户“宠幸”,产生点击欲望


扁平化按钮跟非扁平化按钮在作用上是一致的,区别不大,但扁平化的极简设计对设计师提出了更高要求:


- 精炼内容

- 真正地思考主要任务,让用户专注于主要任务

- 重复上两点来不断迭代

- 勇敢地重新设计


在一个出彩的界面设计中,考虑周全的全局设计布局界面,至少应该包含以下因素:


- 对比颜色、大小及位置

- 考虑按钮作用类型及使用场景

- 各种动宾短语、口号或识别度高的icon

- 填写校验及悬停状态

- 其他


这些因素一定要考虑进去才能做出有点击欲望的按钮,才是真正的“优秀和有效的行为召唤”


假如没有考虑进去,即便按钮做得再精致和拟物化,一样是失败的,让用户想放弃的按钮。


非扁平vs扁平【ios 7 的键盘按钮也是有阴影】


扁平vs非扁平


ios 7 绝大多数情况都具有良好的上下文,当然也专注于让用户一次只做一个任务。在有上下文关联的情况下,就算是简单的「文字链接」也会很容易被识别。当然左图的「agree」按钮也使用了加粗的对比效果。





-3-

按钮设计都有哪些技巧



按钮提供了一个样式简单的标签供人在界定区域内点击,是你应用设计语言基本属性的方式,这种方式以后还会应用在更加复杂的组件当中。


01

按钮要和超链接区分开




在扁平设计时代,类似material design,会将“扁平”按钮,多样应用于工具栏、动作组、还有文本串联。在默认状态下,这跟超链接只有轻微的区别甚至是没有区别。然而,从archor tags开始,按钮的状态和行为都会带来一系列需要区别的考量。

如果你的系统提供了扁平设计,要确保它设计上和代码上的惯常用法,都是可以跟超链接区分出来的。此外,确保方案涵盖交互的复杂性,例如聚焦&按压状态,留白,对齐等。


02

-

 设定文本的风格基调


幸好,过去“点击这里”是存在的。但我们依然需要回答:按钮标签可以有多长。标签是采用祈使语气,即命令式、强制性的语气吗(例如,“保存”或者“关闭”)?我应该在动词后面加上宾语吗(在“保存”后面加上“文档”)?关于常见操作有惯用的标签吗?要加注品牌标语……还是不要呢?


在可以找到全部按钮的标签指南处引入前后一致的用词。当然,用词列表和深度编辑标准可以在voice和tone等指南内找到。不管怎样,按钮指南是开始把指南桥接在一起的好地方。


03

-

当背景较复杂时,按钮用反色


在纯白背景下大多数样式的按钮还行得通,但如果你把按钮搁在照片背景上呢?或者是一个更深的不同颜色的背景?更伤脑筋的是,你的按钮也可以放在浅色中性色的背景上吗?按钮可以用在(包括但不限于上面所提到的)任何情况下吗?主按钮的颜色可以随意改变吗?




把主按钮放在不同的背景上进行演示,然后制定一个相反的替代方案——白色?不同颜色?或者半透明?——当背景变深时应用上述方案。做文档时,把亮色和暗色等方案展示在一系列常见背景上,这样可以把问题讲清楚,把按钮展示在一系列常见背景上,效果好坏都展示。


04

-

设计并建立按钮的交互规范


按钮是最简单原始的交互,交互伴随着改变。仅仅呈现给开发者页面加载时按钮的样式来表示“按钮长这样!”是不够的。不是开发者而是设计者,来决定状态切换的按钮是如何呈现的,包括:默认状态,鼠标悬停,焦点获取(“光晕状态”),被按住/激活,甚至旋转等待以及其他花式秀进度的动画。



提供不同状态下的按钮样式合集,无需用户交互(页面中嵌入按钮就好)。文档并不是搞寻宝游戏,加分的做法是像material design那样做视频演示。


05

-

按钮是系统在视觉风格上最纯粹的表达方式


按钮把颜色、字体和图像这三个属性紧密地结合起来,形成了一个不可分割的集体。按钮也同时引起了关于留白的讨论:内部填充(特别是,标签的左右)和外部边距(毗邻其他元素)。最终,按钮可以体现更多只有内行才懂的属性,例如圆角边框(通过调整border-radius)或上升(通过调整图层阴影效果属性box-shadow),重要的按钮需要做出强调,可以利用颜色,可以利用边框,可以利用不一样的显示方式。



漂亮的按钮固然能赏心悦目,但是设计的与网站其它内容差异太大,就不是那么美观了。所以设计按钮的时候,要考虑该位置按钮的上下文内容,不能显得太唐突。按钮首先看功能,如果是跳转可以放在知识普及,一般需要填资料的放在介绍完之后,显示按钮,这样会让用户知道这样的按钮是什么用途。


要把按钮当作系统风格的主导代表元素。加分做法是,把按钮的定义和一整套快速发展的标记变量统一,这些标记变量规定了颜色,尺寸,空白和其他细节。按钮看起来很简单,其实包含了各式各样的属性。


06

-

次要的按钮不要过度使用灰色以免跟禁用按钮混淆


没人会盼着灰色按钮出现,但是,你可能需要给醒目的颜色饱和的主选项旁边配上一个次要选项。得避免出现另一个同样饱和的颜色,不然那会导致两个颜色饱和的按钮一个挨着一个,就像绿的“保存”和蓝的“提交”。不仅是你,而且要让用户也能知道哪一个更重要。


将次要按钮的颜色和它的禁用状态方案匹配起来。确保所有选项的颜色和谐统一,没有谁是不易被发觉的。哪一个是禁用的?


07

-

限制每页一个按钮,除非这个按钮是重复性主要操作


按钮能唤起页面操作,我们通常用主按钮,来吸引用户对页面最优先功能的注意。除非,页面上分布着一堆主按钮,这时候我们没办法排出优先级,那“用主按钮来吸引用户注意”这一招也就不管用了。



某些情况下,使用一个主按钮是正确做法。比如你需要从一组平行对象中(例如搜索出来一堆结果),或是,从设置页面上展示的不同类别选项中,来做选择。


你应该定义在何时允许页面中有多个主按钮,否则要知道如何避免页面上有多个主按钮。


08

-

留意虚拟按钮(ghosts)在设备上的显示情况


虚拟按钮,外观上仅仅依赖同色的标签和边线构成,缺少中间的填充色。标签后面是什么这可就不确定了。嗯,最简单的情况是白色背景。但其他时候,渐变色或者视觉元素丰富的照片会让标签很难识别。


虚拟按钮吸引着设计师把按钮玩得复杂高深,而不像敦实的高对比的主按钮。所以,才被称为幽灵(ghosts)。我在可用性测试后观察到,虚拟按钮在可用性测试时披上了一层隐形斗篷。被试者看不到按钮或是无法识别它们。这可能会削弱或破坏按钮的价值,无法通过交互提供那些我们意图展现的操作。



09

-

尺寸多样化,可大(非常大/极大/特大)可小(非常小/极小/特小)


交互可以发生在密集区域,比如在卡片或侧边栏模块。其他时候,你可能需要一个大型按钮,用在占据了整个视窗的最大化的图片上。


提供工具来根据需要调大或调小按钮,这个工具要让人感觉简单,就像另一个css的类或设计工具类型。另外,考虑一些好记的名字——比如:特大(puffy),特小(micro)——而不仅仅只是平淡的大(large)或者小(small),同样的,调大调小,按钮视觉表现力最强,次要稍弱,可以修改这些样式:颜色、阴影、大小、留白、装饰手段等等。因此在设计的时候,要学会使用以上方法。


010

-

通过菜单和区域来增加多样性


内容丰富的按钮可以通过触发关联菜单面板来进行选择。很多系统提供了丰富的选择来使ui更紧凑(政府网站建设注意要点),比如菜单(或下拉列表)或下拉(或分割)按钮。


菜单按钮或是显示当前选项(比如采用arial字体族)或是展开独立选项菜单(例如分享或者打印)。在右边加入一个箭头icon,你就能得到一个额外的分隔空间,从右边下拉出一个菜单选项,同时左边的标签激活一个单独的主要动作。


用按钮菜单选项来丰富你的app,但是要谨慎。类似这样的按钮空间分隔方案(左边的是正在进行的动作,右边的是菜单)支持很多应用场景,但是带来了更大的代码开销和更复杂的用户引导。若是设计更简洁的网页,就不要多费心思优先考虑这种不多用的方案了。




-4-

遇到按钮群(多个按钮一起时)如何设计



首先我们来说判断,就是只有两个按钮的情况。一般来说,两个按钮中肯定有一个拥有更高的优先级或者说用户更希望去点击,那么我们会在样式设计上进行区分。



微信的”取消”按钮背景色选择的是灰色,而淘宝直接让”取消”成了一个光秃秃的文字按钮。这样的对比设置可以让用户很快找到“确认登陆”按钮,进而完成登录操作,提升了操作效率。


其实可以让用户进行判断操作的组件还有开关。开关,又称switch,也是我们很常见的一个组件,表示两种相互对立的状态间的切换,多用于表示功能的开启和关闭。而一项功能的开启可能会带来相应的后续操作,例如你在ios设置里开启了微信的“通知”功能,那么你就需要对通知形式进行进一步的设置。而按钮组不会出现这些后续操作,更像是一锤子买卖,这也是按钮组和开关的一个主要的区别。



如果选项在一屏的宽度中可以展示完全,那么组合在一起和分开的区别并不是很大,但是一旦选项过多需要用户滑动和换行才能浏览完的时候,分开的样式更加适合。



单选/复选都是供用户进行选择操作,其实还有一个组件跟单选/复选很相似,那就是下拉列表。当选项过多时,用户可以使用下拉菜单展示并选择内容。下拉列表的优势在于节省了界面空间,但是用户想要看到全部的选项必须要点击出下拉列表,增加了操作步骤,而且会对界面中其他内容造成遮挡。所以当你的界面元素不是很多的情况下,我的个人建议是尽量使用单选/复选按钮。



相关阅读


网站地图