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