专业的短链接生成工具
链接域名
短网址有效期
关于“按钮”,你需要知道哪些基础知识?
更新时间:2025-6-3 01:33:10 作者:爱短链
我理解按钮是可点击触发的即时操作媒介。
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按钮的宽度根据页面的整体安全宽度而变化 环绕效果按钮: 表单按钮: 以上是今天的分享 作者:不,微信官方账号:猪三的日常生活 特别说明:本网站的主要目的是收集与互联网运营相关的干货知识,为运营合作伙伴提供便利。
网站收集的公共内容来自互联网或用户提交,这并不意味着网站同意其观点,也不对网站内容的真实性负责。
如有侵权行为,请联系网站管理员删除,。