“按钮”这个元素我们在app或是网页里随处可见，使用场景也五花八门，今天我们就来聊一聊～
这是就不“100天挑战”的第2篇。“按钮”这个元素我们在app或是网页里随处可见，使用场景也五花八门，今天我们就来聊一聊～
什么是按钮
按钮（Button）官方的概念描述我就不多说了，按钮在我理解，就是“可点击的可触发的即时操作媒介”。
按钮类型
从按钮类型来分，按钮有四种类型：主按钮、次按钮、虚线按钮和链接按钮。主按钮在同一个操作区域最多出现一次。
从承载媒介来区分，有文字型的、图标型的、几何型的
从样式来区分，有线型的、面型的。从组合方式来区分有组合按钮和单个按钮
我们这里主要以几何形按钮为常规按钮来叙述并区分。按钮状态按钮从状态来分分为
- 常规(normal/primary)：
- 悬浮（hover）：
- 点击（click）：
- 不可点击（disabled）：
按钮属性从属性来分又分为四种
- 危险：删除/移动/修改权限等危险操作，一般需要二次确认。例如微信表情包的删除等的二次确认。以红色做警示，且需二次确认。
- 幽灵：用于背景色比较复杂的地方，常用在首页/产品页等展示场景。
- 禁用：行动点不可用的时候，一般需要文案解释、置灰或禁用标志。
- 加载中：用于异步操作等待反馈的时候，也可以避免多次提交。
web端或者其他终端则需要根据实际使用场景及比例来调整对应的尺寸大小和高度在对比了多家线上产品尺寸，常规的按钮整理了一个大致范围：移动端：按钮高度35px-50px之间，字号13pt-17pt，圆角4-8web端：按钮高度24px-48px，字号12-18，圆角6-10其他端则需根据具体的场景比例来调整。 圆角按照按钮的造型我们可以对其风格做大致分类
- 直角：严肃、专业、力量、高端（奢侈品、健身、金融）；
- 0-12圆角：通用、中性、用户范围广（社交）；
- 全圆角：年轻、活泼、亲切（儿童、娱乐、购物）；
- 多边形：少见、个性、科技感、文艺；
根据产品风格，选用不同圆角角度突出产品的特点 风格
- 线框
- 渐变风格
- 3D按钮（带阴影）
- 凸起按钮
- 长阴影按钮
- 光晕效果按钮
- 带图标按钮
- 按钮组
- block按钮，宽度根据页面整体安全宽度变化
- 环绕效果按钮
- 表单按钮
—————-Over —————-好啦，以上就是今天的分享。
