网页设计 按钮摆放 第1篇
一个操作区域至多一个主按钮
主次按钮样式统一、与其他控件样式区分处理
按钮样式慎用大圆角
按钮中的文字，字号适中，文案精简、无歧义
合理使用投影样式
根据场景合理使用禁用按钮：需要应引导用户操作时，扔掉禁用；明确区分禁用和可用样式；在恰当的时候对禁用按钮给出解释；结合 loading 状态让禁用按钮更生动。
1. 「按钮的学问：确定在左，取消在右？」
推荐指数：五颗星
推荐理由：使用不同的理论说明佐证确定和取消按钮的排版方式
2. 「交互细节！确定按钮到底该放在左边还是右边？」
推荐指数：四颗星
推荐理由：用实验论证确定按钮的放置位置，结论是：确定按钮放在右边比较好
3. 「大厂高手出品！中台组件设计指南：按钮篇 」
推荐指数：五颗星
推荐理由：使用完整的规范去写的文章，实打实的案例。
4. 「按钮规范系列！从四个方面详解「按钮位置」的设计方法」
推荐指数：四颗星
推荐理由：用古腾堡原则详解按钮位置的摆放规律，为什么这么放置。主要案例是 APP 端的。
5. 「5000 字干货！写给新人的按钮设计指南」
推荐指数：五颗星
推荐理由：主要讲的是 APP 端的，层级清晰、案例完整。
6. 「从 6 个层面，系统分析按钮设计的知识点」
推荐指数：五颗星
推荐理由：主要讲的是 APP 端的，命令按钮和选择按钮做了区分说明。案例丰富，常见按钮组成拆解和最后的按钮样式小结表都超级棒
7. 「推荐！禁用状态二三事 」
推荐指数：三颗星
推荐理由：讲述了什么时候、什么场景使用禁用状态以及使用禁用状态的注意事项
整篇文章内容是基于日常学习与工作经验的总结，部分规范内容，大家可以根据自己的产品业务做适配调整，以上仅供参考。部分案例配图源自网络，仅供交流学习，侵删。
欢迎点赞、分享，期待你的关注小红点～欢迎留言交流～
网页设计 按钮摆放 第2篇
首先，我们看一下页面中按钮的阅读顺序：
左对齐排布按钮——从左往右阅读——符合用户“F”型浏览模式
右对齐排布按钮——从右往左阅读——符合“Z”型阅读模式、费茨定律、古腾堡法则
然后根据阅读顺序，我们可以初步的定义出以下按钮层级顺序：
上图的按钮层级顺序，只是一个基础参考，在实际设计的过程中我们还应当考虑业务场景和用户心智模型。例如，主体内容区的底部跟随按钮，若带有明确方向、具有下一步性质的按钮，应当为主按钮，放在最右边。
网页设计 按钮摆放 第3篇
通过以上的一些配图，我们会发现页面中的按钮展现形式多样，有色块的、描边的、文字的、图标的等等。那他们具体是如何分类和使用的呢？接下来就带大家详细地剖析下按钮的分类与使用场景。
首先，根据我们页面中控件的使用交互形式，我们可以将按钮分为两大类：
命令按钮：常规按钮、图标按钮、文字按钮、幽灵按钮、悬浮按钮——通常会触发页面与页面之间的交互，视觉优先级高
选择按钮：开关按钮、单选框、复选框、胶囊选择、标签选择按钮——通常是一种状态即时改变的交互，视觉优先级低
接下来我们详细看一下这两大类按钮的具体细分和使用场景
网页设计 按钮摆放 第4篇
对于同级别按钮，我们需要遵循以下原则去确定顺序：
除了以上案例分析的组合样式，B 端页面中按钮组合多样，以下罗列了一些常见场景供大家参考：
最后根据以上内容我们来总结下，按钮在设计应当遵循的原则及注意事项
按钮样式符合用户心智模型
按钮类型、层级分明，规则统一
按钮状态清晰，操作反馈明确
根据业务场景使用合适的按钮