关于“按钮”，你需要知道哪些基础知识？

我们在按钮这个元素app或者网页随处可见，使用场景也多种多样，今天我们来谈谈~ 01 什么是按钮 按钮（Button）我就不多说官方概念描述了。我理解按钮是可点击触发的即时操作媒介。 02 按钮类型 按钮有四种类型：主按钮、次按钮、虚线按钮和链接按钮。主按钮最多出现在同一操作区域。 从承载媒体来看，有文字型、图标型、几何型 区分风格，有线型，面型。 区分组合按钮和单个按钮 我们主要用几何按钮作为常规按钮来描述和区分。 03 按钮状态 按钮从状态分为： 常规(normal/primary) 悬浮（hover） 点击（click） 不可点击（disabled） 常规主按钮可选择符合产品调性的按钮颜色，悬挂按钮（PC点击按钮（click）视觉上需要一些反馈。我的常规处理方法是hover状态层顶部覆盖透明度为15%的白色，click状态层顶部覆盖透明度为15%的深色。 不要点击状态（disabled）然后置灰。 04 按钮属性 从属性上分为四种: 危险：删除/移动/修改权限等危险操作一般需要二次确认。例如，删除微信表情符号等二次确认。用红色作为警告，需要二次确认。 幽灵：用于背景色复杂的地方，常用于主页/产品页面等展示场景。 禁用：当行动点不能使用时，一般需要文案解释、灰色或禁用标志。 加载：异步操作等待反馈时，也可避免多次提交。 05 按钮样式 1. 尺寸 在移动端，按钮的平均长度为10-14mm指尖的长度为8-10mm，所以10mm x 10mm是最小触摸目标尺寸。在iOS 在人机交互规范中 44*44 最小点触面积是指触的最小尺寸。因此，我们可以根据这一点在不同的设备 PPI 处理尺寸，在移动端设置点触尺寸的最小点触面积，设置按钮尺寸。 web需要根据实际使用场景和比例调整相应的尺寸和高度。 对比了很多线上产品的尺寸，常规按钮整理了一个大致的范围: 移动：按钮高度35px-50px之间，字号13pt-17pt，圆角4-8 web按钮高度24px-48px，字号12-18，圆角6-10 其他端需要根据具体场景比例进行调整。 2. 圆角 我们可以根据按钮的形状对其风格进行大致分类： 严肃、专业、力量、高端(奢侈品、健身、金融)； 0-12圆角:通用、中性、用户范围广(社交)； 全圆角:年轻、活泼、善良(儿童、娱乐、购物)； 多边形：罕见、个性、科技感、文艺感； 根据产品风格，从不同的圆角突出产品的特点 3. 风格 线框 渐变风格 3D按钮(阴影): 凸起按钮： 长阴影按钮 光晕效果按钮： 带图标按钮 按钮组： block按钮的宽度根据页面的整体安全宽度而变化 环绕效果按钮： 表单按钮： 以上是今天的分享 作者:不，微信官方账号:猪三的日常生活 特别说明：本网站的主要目的是收集与互联网运营相关的干货知识，为运营合作伙伴提供便利。网站收集的公共内容来自互联网或用户提交，这并不意味着网站同意其观点，也不对网站内容的真实性负责。如有侵权行为，请联系网站管理员删除，。