做了几年网页/UI设计居然连一个简单的按钮Button都设计不好！
时间：2023-10-14 02:48:01 | 来源：网站运营
时间：2023-10-14 02:48:01 来源：网站运营
做了几年网页/UI设计居然连一个简单的按钮Button都设计不好！：当今的互联网产品，无论是企业官网，手机移动端网站，还是各种App，几乎找不出一个产品是没有按钮的。
按钮是一个非常小的设计元素但在UI设计中却有种很关键很重要的地位，甚至可以说每一个界面中都少不了它。还有学生告诉过我，他学习网页设计就是从绘制一个按钮开始的。为了能更好的研究透彻关于网页界面的按钮图标设计，有些ui设计专家及权威用户体验凭条还专门研究了关于App界面中按钮设计以什么样的形式和状态出现为最符合用户体验。
由于本人参与的重大项目也仅有2个，资历尚浅，接下来就简单的谈一谈，按钮设计的相关趣闻和故事。将会按照四个部分来讲解。图文有点长，希望大家做好坚持的准备。
- 按钮的发展史
- 扁平化环境下的按钮设计
- 按钮设计有哪些技巧及注意事项
- 遇到两个以上的按钮及按钮群该如何设计
-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设置里开启了微信的“通知”功能，那么你就需要对通知形式进行进一步的设置。而按钮组不会出现这些后续操作，更像是一锤子买卖，这也是按钮组和开关的一个主要的区别。
如果选项在一屏的宽度中可以展示完全，那么组合在一起和分开的区别并不是很大，但是一旦选项过多需要用户滑动和换行才能浏览完的时候，分开的样式更加适合。
单选/复选都是供用户进行选择操作，其实还有一个组件跟单选/复选很相似，那就是下拉列表。当选项过多时，用户可以使用下拉菜单展示并选择内容。下拉列表的优势在于节省了界面空间，但是用户想要看到全部的选项必须要点击出下拉列表，增加了操作步骤，而且会对界面中其他内容造成遮挡。所以当你的界面元素不是很多的情况下，我的个人建议是尽量使用单选/复选按钮。
在线咨询
