按钮

定义

按钮是对用户的点击做出反应,并触发即时操作,每个按钮都有一个相对应的操作或流程。



构成

· 边框:用于次级按钮与幽灵按钮
· 底色:来源于主品牌色
· 文字
· 图标



规则

· 标准按钮分为主要和次要,一个模块中(如浮层、表格、表单、页面等)只能有一个主要按钮,主引导用户的操作;其他的按钮皆为次要操作。
· 主要按钮跟次要按钮组合时,主要按钮需放在最左边。
· 按钮上的文字应保持简洁,使用清楚明了的触发文字,例如:注册、下一步、下载。
· 其他按钮样式有:文字、图标、标签、菜单按钮、悬浮按钮..等。



尺寸和标注


尺寸

尺寸分为大号:高度S9,最小宽度S20;中号:高度S8,最小宽度S15;小号:高度S6,最小宽度S10



按钮使用排列规则:

通用Button与文字、图标等Button组合使用时,垂直居中对齐



按钮多语言排版规则:

多语言情况下的两行展示



分类与样式

Alibaba.com 对按钮分了五种类型:标准按钮、文本按钮、警示按钮、幽灵按钮、按钮组。按钮有Normal(默认)、Hover(悬停)、Disabled(禁用)三种交互状态。

标准按钮:标准按钮分为主要和次要,一个模块中(如浮层、表格、表单、页面等)只能有一个主要按钮,主引导用户的操作;其他的按钮皆为次要操作。

文本按钮:通常用于较不明显的强引导操作,比如卡片中内容信息较多,希望用户不受干扰浏览内容,用文本按钮有助于强调突出卡片的信息。

警示按钮:取用功能色中的警示色,该按钮用于向用户提示即将发生的破坏性行为,如永久删除数据。

幽灵按钮:常用在有色背景上,背景和边框都变为透明。

按钮组:按钮组就是指两个或两个以上的按钮排布在一起,显示多个相关操作。

上一篇: 动效 下一篇: 导航