网页界面按钮设计 第1篇
通过以上的一些配图，我们会发现页面中的按钮展现形式多样，有色块的、描边的、文字的、图标的等等。那他们具体是如何分类和使用的呢？接下来就带大家详细地剖析下按钮的分类与使用场景。
首先，根据我们页面中控件的使用交互形式，我们可以将按钮分为两大类：
命令按钮：常规按钮、图标按钮、文字按钮、幽灵按钮、悬浮按钮——通常会触发页面与页面之间的交互，视觉优先级高
选择按钮：开关按钮、单选框、复选框、胶囊选择、标签选择按钮——通常是一种状态即时改变的交互，视觉优先级低
接下来我们详细看一下这两大类按钮的具体细分和使用场景
网页界面按钮设计 第2篇
对于同级别按钮，我们需要遵循以下原则去确定顺序：
除了以上案例分析的组合样式，B 端页面中按钮组合多样，以下罗列了一些常见场景供大家参考：
最后根据以上内容我们来总结下，按钮在设计应当遵循的原则及注意事项
按钮样式符合用户心智模型
按钮类型、层级分明，规则统一
按钮状态清晰，操作反馈明确
根据业务场景使用合适的按钮
网页界面按钮设计 第3篇
首先，我们看一下页面中按钮的阅读顺序：
左对齐排布按钮——从左往右阅读——符合用户“F”型浏览模式
右对齐排布按钮——从右往左阅读——符合“Z”型阅读模式、费茨定律、古腾堡法则
然后根据阅读顺序，我们可以初步的定义出以下按钮层级顺序：
上图的按钮层级顺序，只是一个基础参考，在实际设计的过程中我们还应当考虑业务场景和用户心智模型。例如，主体内容区的底部跟随按钮，若带有明确方向、具有下一步性质的按钮，应当为主按钮，放在最右边。