网页设计中按钮的类型 第1篇
按钮把颜色、字体和图像这三个属性紧密地结合起来，形成了一个不可分割的集体。按钮也同时引起了关于留白的讨论：内部填充(特别是，标签的左右)和外部边距(毗邻其他元素)。最终，按钮可以体现更多只有内行才懂的属性，例如圆角边框(通过调整border-radius)或上升(通过调整图层阴影效果属性box-shadow)，重要的按钮需要做出强调，可以利用颜色，可以利用边框，可以利用不一样的显示方式。
漂亮的按钮固然能赏心悦目，但是设计的与网站其它内容差异太大，就不是那么美观了。所以设计按钮的时候，要考虑该位置按钮的上下文内容，不能显得太唐突。按钮首先看功能，如果是跳转可以放在知识普及，一般需要填资料的放在介绍完之后，显示按钮，这样会让用户知道这样的按钮是什么用途。
要把按钮当作系统风格的主导代表元素。加分做法是，把按钮的定义和一整套快速发展的标记变量统一，这些标记变量规定了颜色，尺寸，空白和其他细节。按钮看起来很简单，其实包含了各式各样的属性
网页设计中按钮的类型 第2篇
在纯白背景下大多数样式的按钮还行得通，但如果你把按钮搁在照片背景上呢?或者是一个更深的不同颜色的背景?更伤脑筋的是，你的按钮也可以放在浅色中性色的背景上吗?按钮可以用在(包括但不限于上面所提到的)任何情况下吗?主按钮的颜色可以随意改变吗?
把主按钮放在不同的背景上进行演示，然后制定一个相反的替代方案——白色?不同颜色?或者半透明?——当背景变深时应用上述方案。做文档时，把亮色和暗色等方案展示在一系列常见背景上，这样可以把问题讲清楚，把按钮展示在一系列常见背景上，效果好坏都展示
网页设计中按钮的类型 第3篇
将按钮和icon结合使用，能强化意义并加快用户认知，当你加入一个元素之后，即使只是一个简单的icon，按钮的布局也不应该被破坏分解。使用一些很少预见的元素，会引起一些诸如内部留白和对齐方式的烦人问题。你会想把这些问题都一一化解，特别是当按钮可能包含了标签，icon还有其他的一些什么鬼。
把按钮做得灵活一点，不论是用代码还是设计工具，使其具有一定可以容纳其他元素的弹性。当用户可能想往上加东西——标签、icon或者无论什么其他元素——就不用担心加上后的内部留白或对齐方式等后续影响。
网页设计中按钮的类型 第4篇
一种 是用户界面的一个交互元素，旨在鼓励用户采取某种行动。这一行动提出了一个 转换对于特定页面或屏幕（例如购买、联系、订阅等），换句话说，它将被动用户变成主动用户。因此，从技术上讲，它可以是受号召性用语文本支持的任何类型的按钮。它与页面或屏幕上的所有其他按钮的不同之处在于其引人入胜的性质：它必须引起注意并刺激用户执行所需的操作。
这是一个的主页 电子商务网站卖给孩子们的书。在特色幻灯片上，有一个核心操作设定为页面目标：让用户订阅邮件列表共享。因此，按钮被设计为布局中最引人注目的元素之一，以便用户只要愿意就可以立即看到如何执行操作。
网页设计中按钮的类型 第5篇
内容丰富的按钮可以通过触发关联菜单面板来进行选择。很多系统提供了丰富的选择来使UI更紧凑，比如菜单(或下拉列表)或下拉(或分割)按钮。
菜单按钮或是显示当前选项(比如采用Arial字体族)或是展开独立选项菜单(例如分享或者打印)。在右边加入一个箭头icon，你就能得到一个额外的分隔空间，从右边下拉出一个菜单选项，同时左边的标签激活一个单独的主要动作。
用按钮菜单选项来丰富你的APP，但是要谨慎。类似这样的按钮空间分隔方案(左边的是正在进行的动作，右边的是菜单)支持很多应用场景，但是带来了更大的代码开销和更复杂的用户引导。若是设计更简洁的网页，就不要多费心思优先考虑这种不多用的方案了。
网页设计中按钮的类型 第6篇
交互可以发生在密集区域，比如在卡片或侧边栏模块。其他时候，你可能需要一个大型按钮，用在占据了整个视窗的大化的图片上。
提供工具来根据需要调大或调小按钮，这个工具要让人感觉简单，就像另一个css的类或设计工具类型。另外，考虑一些好记的名字——比如：特大(puffy)，特小(micro)——而不仅仅只是平淡的大(large)或者小(small)，同样的，调大调小，按钮视觉表现力最强，次要稍弱，可以修改这些样式：颜色、阴影、大小、留白、装饰手段等等。因此在设计的时候，要学会使用以上方法。
网页设计中按钮的类型 第7篇
在扁平设计时代，类似Material Design，会将“扁平”按钮，多样应用于工具栏、动作组、还有文本串联。在默认状态下，这跟超链接只有轻微的区别甚至是没有区别。然而，从archor tags开始，按钮的状态和行为都会带来一系列需要区别的考量。
如果你的系统提供了扁平设计，要确保它设计上和代码上的惯常用法，都是可以跟超链接区分出来的。此外，确保方案涵盖交互的复杂性，例如聚焦&按压状态，留白，对齐等。
网页设计中按钮的类型 第8篇
在 材料设计，浮动操作按钮（简称FAB）是在应用程序屏幕上呈现主要操作的按钮。通常，它是一个高于其他页面内容的圆形图标按钮。此按钮通常可让用户即时访问用户使用应用程序执行的基本或流行操作。根据移动应用程序的设计和信息架构，FAB 可以：
FAB在屏幕上的位置通常是由高可见度的因素决定的，可能会根据应用程序屏幕的总体设计理念而有所不同。经验法则是每个屏幕只使用一个 FAB，而不是更多，以避免注意力不集中。
这是旅行者日记应用底部应用栏、重叠 FAB 和编织图像列表的交互流程。
尺寸。 大小是告知用户布局元素的重要性和构建组件层次结构的核心方式之一。一个有吸引力且高效的号召性用语按钮需要足够大以便快速找到，但又不能太大，以免破坏布局结构。市场领导者经常在他们的指南中提供关于按钮的适当尺寸的建议。例如，Apple 表示移动 UI 中的 CTA 至少应为 44Х44 像素，而 Microsoft 建议使用 34Х26 像素。如果您为移动设备设计，对不同类型按钮的要求可能非常严格，因此请仔细研究指南，以尽量减少因 UI 设计不佳而导致应用程序被拒绝的风险。
颜色。为了让一些按钮更容易被注意到而一些按钮是次要的，至关重要的是选择合适的颜色. 问题是人类的情绪和行为与视觉环境高度相关，而颜色是这方面最强大的工具之一。在为 CTA 选择颜色时记住这一点至关重要：按钮和背景颜色必须形成良好的对比，以使按钮快速从其他 UI 组件中脱颖而出。
放置。按钮的位置对于建立一个坚实的视觉层次 并且清楚 导航. 如果它们位于用户眼睛无法看到的区域，则其他视觉方面（例如颜色和大小）可能无法有效工作。设计师必须学习最多的东西可扫描区域 并将核心功能的按钮放置在用户的路径中。
复制。强大的按钮微文案通常简短但一致，以便快速吸引用户的注意力。它通常以大写字母执行，以使副本在布局中更具吸引力。不过，这没有必要，决定是根据一般的设计理念做出的，排版，以及短信的心情。
让我们回顾一下页面上使用的所有按钮：
显然，还有更多类型的按钮可以通过 UI 设计示例进行讨论和检查。所以，我们将在下一篇文章中继续审查，不要错过更新。
网页设计中按钮的类型 第9篇
随着社交网络、聊天和电子邮件的高度流行，这些按钮简化了将应用程序或网站内容连接到用户社交资料的过程。这种类型的按钮使用户能够将内容或成就直接分享到社交网络帐户。为了使连接清晰，它显示了具有特定社交网络品牌标志且易于识别的图标。现在很多时候，如果分享不是用户在页面上期望的关键操作，它们无论如何都不会被标记为按钮（没有额外的形状、颜色标记、下划线等）——你只看到图标，但它们是交互的。这种方法支持极简主义和有效使用负空间. 它还可以让用户专注于主要功能，但始终可以看到快速访问其社交资料的迹象。
网页设计中按钮的类型 第10篇
确保所有用户组都清楚地了解图标的含义。由于 FAB 通常代表主要的号召性用语，因此使用清晰的图标更为重要。所有用户组都应该理解图标的含义。我进行的可用性测试表明，当用户不理解 FAB 图标的含义时，他们不会与之交互，这对您的应用程序来说可能是一个关键问题。
FAB 不一定是一个完美的圆圈。可以为 FAB 使用更多视觉上有趣的形式，例如椭圆形。
FAB 的视觉风格略有不同
原文： 翻译：静电
网页设计中按钮的类型 第11篇
按钮是最简单原始的交互，交互伴随着改变。仅仅呈现给开发者页面加载时按钮的样式来表示“按钮长这样!”是不够的。不是开发者而是设计者，来决定状态切换的按钮是如何呈现的，包括：默认状态，鼠标悬停，焦点获取(“光晕状态”)，被按住/激活，甚至旋转等待以及其他花式秀进度的动画。
提供不同状态下的按钮样式合集，无需用户交互(页面中嵌入按钮就好)。文档并不是搞寻宝游戏，加分的做法是像material design那样做视频演示。
网页设计中按钮的类型 第12篇
按钮可以成组。一个按钮组通常由一个主选项和一个或者多个次要选项配对成套出现。切换开关可以显示为开启或关闭状态(比如粗体)，或显示一组选项中被选中的那个(比如文本的对齐选项，有左对齐、右对齐、中间对齐、以及两端对齐)。最复杂的情况下，工具栏把各类按钮都包含了：主按钮，次要按钮，切换开关，菜单，以及其他。
扩大按钮的多样性时，探索并压缩测试按钮在紧凑格局下的多种组合布局方式。系统设计师不是预言家，能预言各种各样的情况。但是探索合理范围内的多元应用场景能帮助你避免被讨厌或之后被讨厌。