网页设计如何设置按钮 第1篇
关于顺序，最常见的疑问是确定按钮应该在取消按钮左边还是右边，这是一个争论已久的话题。
在弹窗中，确定按钮和取消按钮的顺序在各设计体系中都不一样，下图是操作系统三巨头：Apple、Google、Micrisoft 的方案。三巨头证明了两种主次顺序都能被接受，只要在系统中统一。
那 Ant Design 应该如何选择呢？
（弹窗中的按钮，从左往右依次：MacOS、Material、UWP）
在决策按钮默认的阅读顺序时我们考虑了以下四方面：
风险操作；
方向性意义；
对话习惯；
响应式规则。
上面顺序呈现了各因素在决策时的权重，例如，一旦按钮出现方向性含义，则权重大于对话习惯，但一旦操作存在风险，则需优先决策。
网页设计如何设置按钮 第2篇
按钮可以成组。一个按钮组通常由一个主选项和一个或者多个次要选项配对成套出现。切换开关可以显示为开启或关闭状态(比如粗体)，或显示一组选项中被选中的那个(比如文本的对齐选项，有左对齐、右对齐、中间对齐、以及两端对齐)。最复杂的情况下，工具栏把各类按钮都包含了：主按钮，次要按钮，切换开关，菜单，以及其他。
扩大按钮的多样性时，探索并压缩测试按钮在紧凑格局下的多种组合布局方式。系统设计师不是预言家，能预言各种各样的情况。但是探索合理范围内的多元应用场景能帮助你避免被讨厌或之后被讨厌。
网页设计如何设置按钮 第3篇
在扁平设计时代，类似Material Design，会将“扁平”按钮，多样应用于工具栏、动作组、还有文本串联。在默认状态下，这跟超链接只有轻微的区别甚至是没有区别。然而，从archor tags开始，按钮的状态和行为都会带来一系列需要区别的考量。
如果你的系统提供了扁平设计，要确保它设计上和代码上的惯常用法，都是可以跟超链接区分出来的。此外，确保方案涵盖交互的复杂性，例如聚焦&按压状态，留白，对齐等。
网页设计如何设置按钮 第4篇
内容丰富的按钮可以通过触发关联菜单面板来进行选择。很多系统提供了丰富的选择来使UI更紧凑，比如菜单(或下拉列表)或下拉(或分割)按钮。
菜单按钮或是显示当前选项(比如采用Arial字体族)或是展开独立选项菜单(例如分享或者打印)。在右边加入一个箭头icon，你就能得到一个额外的分隔空间，从右边下拉出一个菜单选项，同时左边的标签激活一个单独的主要动作。
用按钮菜单选项来丰富你的APP，但是要谨慎。类似这样的按钮空间分隔方案(左边的是正在进行的动作，右边的是菜单)支持很多应用场景，但是带来了更大的代码开销和更复杂的用户引导。若是设计更简洁的网页，就不要多费心思优先考虑这种不多用的方案了。
网页设计如何设置按钮 第5篇
通过以上的一些配图，我们会发现页面中的按钮展现形式多样，有色块的、描边的、文字的、图标的等等。那他们具体是如何分类和使用的呢？接下来就带大家详细地剖析下按钮的分类与使用场景。
首先，根据我们页面中控件的使用交互形式，我们可以将按钮分为两大类：
命令按钮：常规按钮、图标按钮、文字按钮、幽灵按钮、悬浮按钮——通常会触发页面与页面之间的交互，视觉优先级高
选择按钮：开关按钮、单选框、复选框、胶囊选择、标签选择按钮——通常是一种状态即时改变的交互，视觉优先级低
接下来我们详细看一下这两大类按钮的具体细分和使用场景
网页设计如何设置按钮 第6篇
交互可以发生在密集区域，比如在卡片或侧边栏模块。其他时候，你可能需要一个大型按钮，用在占据了整个视窗的大化的图片上。
提供工具来根据需要调大或调小按钮，这个工具要让人感觉简单，就像另一个css的类或设计工具类型。另外，考虑一些好记的名字——比如：特大(puffy)，特小(micro)——而不仅仅只是平淡的大(large)或者小(small)，同样的，调大调小，按钮视觉表现力最强，次要稍弱，可以修改这些样式：颜色、阴影、大小、留白、装饰手段等等。因此在设计的时候，要学会使用以上方法。
网页设计如何设置按钮 第7篇
调整按钮的样式变量，呈现不同的视觉重量，达到分级强调目的。
我们将按钮视觉强调程度分为四级，了解其原理后，可以根据样式变量和按钮类型组合出需要的按钮。
(按钮强调度分级)
一级按钮通常是主按钮，突出“完成”、“推荐”的操作。
一个按钮区最多应该使用一个主按钮。那么一个页面可以有多个主按钮吗？因为没有足够的反面案例支撑一个页面不能有多个主按钮，比较建议在一个焦点任务中，最多一个主按钮，也可以没有主按钮。
也称之为次要按钮，可用于所有次要的按钮行动，如果我们有许多具有相似重要性的行动在一个屏幕上，或不确定要选择哪种按钮，次要按钮永远是最安全的选择。
目前二级按钮的视觉强调程度有些偏弱，后续我们也会考虑调优此问题。
没有外边框，用链接色突出，例如文字按钮。比较适合诸如“取消”、“还原”等无需强调的操作。文首提到的表格操作列这类无需强调的操作也推荐使用。
并不是非常规范的按钮，用于满足复杂的个性化需求，当按钮数量特别多，并且保证用户直识别的情况。
最后将位置、顺序、视觉强调三项变量组合，可以得到一个最基础的 「默认规则」， 用于覆盖最简单的场景 ：
网页设计如何设置按钮 第8篇
一个操作区域至多一个主按钮
主次按钮样式统一、与其他控件样式区分处理
按钮样式慎用大圆角
按钮中的文字，字号适中，文案精简、无歧义
合理使用投影样式
根据场景合理使用禁用按钮：需要应引导用户操作时，扔掉禁用；明确区分禁用和可用样式；在恰当的时候对禁用按钮给出解释；结合 loading 状态让禁用按钮更生动。
1. 「按钮的学问：确定在左，取消在右？」
推荐指数：五颗星
推荐理由：使用不同的理论说明佐证确定和取消按钮的排版方式
2. 「交互细节！确定按钮到底该放在左边还是右边？」
推荐指数：四颗星
推荐理由：用实验论证确定按钮的放置位置，结论是：确定按钮放在右边比较好
3. 「大厂高手出品！中台组件设计指南：按钮篇 」
推荐指数：五颗星
推荐理由：使用完整的规范去写的文章，实打实的案例。
4. 「按钮规范系列！从四个方面详解「按钮位置」的设计方法」
推荐指数：四颗星
推荐理由：用古腾堡原则详解按钮位置的摆放规律，为什么这么放置。主要案例是 APP 端的。
5. 「5000 字干货！写给新人的按钮设计指南」
推荐指数：五颗星
推荐理由：主要讲的是 APP 端的，层级清晰、案例完整。
6. 「从 6 个层面，系统分析按钮设计的知识点」
推荐指数：五颗星
推荐理由：主要讲的是 APP 端的，命令按钮和选择按钮做了区分说明。案例丰富，常见按钮组成拆解和最后的按钮样式小结表都超级棒
7. 「推荐！禁用状态二三事 」
推荐指数：三颗星
推荐理由：讲述了什么时候、什么场景使用禁用状态以及使用禁用状态的注意事项
整篇文章内容是基于日常学习与工作经验的总结，部分规范内容，大家可以根据自己的产品业务做适配调整，以上仅供参考。部分案例配图源自网络，仅供交流学习，侵删。
欢迎点赞、分享，期待你的关注小红点～欢迎留言交流～
网页设计如何设置按钮 第9篇
将按钮和icon结合使用，能强化意义并加快用户认知，当你加入一个元素之后，即使只是一个简单的icon，按钮的布局也不应该被破坏分解。使用一些很少预见的元素，会引起一些诸如内部留白和对齐方式的烦人问题。你会想把这些问题都一一化解，特别是当按钮可能包含了标签，icon还有其他的一些什么鬼。
把按钮做得灵活一点，不论是用代码还是设计工具，使其具有一定可以容纳其他元素的弹性。当用户可能想往上加东西——标签、icon或者无论什么其他元素——就不用担心加上后的内部留白或对齐方式等后续影响。
网页设计如何设置按钮 第10篇
按钮是最简单原始的交互，交互伴随着改变。仅仅呈现给开发者页面加载时按钮的样式来表示“按钮长这样!”是不够的。不是开发者而是设计者，来决定状态切换的按钮是如何呈现的，包括：默认状态，鼠标悬停，焦点获取(“光晕状态”)，被按住/激活，甚至旋转等待以及其他花式秀进度的动画。
提供不同状态下的按钮样式合集，无需用户交互(页面中嵌入按钮就好)。文档并不是搞寻宝游戏，加分的做法是像material design那样做视频演示。