“按钮”这个元素我们在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按钮,宽度根据页面整体安全宽度变化
环绕效果按钮:
表单按钮:
以上是今天的分享
最近一段时间,我们的系统在做一个新功能,其中涉及到一些与权限相关的功能,之前也接触过权限相关的设计,这篇文章就来对关于权限设计的进行一次总结。对于各种产品,不管是C端产品或者是B端产品,每个产品当中...
谨以此文深切哀悼新冠疫情中牺牲烈士和逝世同胞。 向英雄致敬,向逝者致哀。 4月4日清明节,全国上下深切哀悼新冠疫情中牺牲的烈士和逝世的同胞。互联网厂商积极行动,通过多种形式营造哀悼氛围,缅怀逝者,展...
好的口碑能够带动品牌的传播速度,也能够触动人心吸引更多的人们去选择该品牌。那应该如何洞悉定义一个品牌的口碑?如何落实一个品牌的口碑呢? 数字时代的口碑就是生意。 数字化手段加速口碑的高效传播,好口碑...
出于种种原因,产品岗位会天然地带有主观性,运气好的话,感性与主观性能打造出不俗的产品亮点;运气不好的话,过度主观将给产品与用户带来不小伤害。那么我们该如何降低推理过程的主观性呢?笔者将告诉我们答案,详...
文章分析了 UI 从无到有的流行趋势过程,从最初的拟态设计到当下设计,给出发生设计趋势变化的背景和原因,帮助大家理解设计在每一个时期与人们需求之间的关联,随着人们在每一个时期需求的不同,设计趋势也随之...
当被老板问到,昨天数据为何跌了30%时,我们可以如何应对老板的发问呢?今天这篇文章教你4个技巧,让你轻松应对老板发问。小伙伴们赶紧进来看一看! 在职场上,背KPI指标的同学都知道,遇到下面这种情况,...