提交需求
赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!
按钮是交互设计的基本元素,它模仿真实世界与对象进行交互方式,它帮助用户探索界面,明确行动目标。本文将通过按钮的分类、用法和设计原则带大家了解这个小元素。
按钮是交互设计的基本元素,它模仿真实世界与对象进行交互方式,是用户和界面进行交流的主要方式,它帮助用户探索界面,明确行动目标。 本文将通过按钮的分类、用法和设计原则三个方面来带大家了解这个小小的元素。
按钮是交互设计的基本元素,它模仿真实世界与对象进行交互方式,是用户和界面进行交流的主要方式,它帮助用户探索界面,明确行动目标。
本文将通过按钮的分类、用法和设计原则三个方面来带大家了解这个小小的元素。
按钮的分类及使用
CTA按钮
CTA是一种强引导性的按钮,它能充分引起用户的注意,在页面中脱颖而出,并鼓励用户进行操作。在淘宝,考拉这类电商app的界面中,购买行为是整个业务的核心,也是最需要着重强调的。所以在这类app的页面中购买按钮最为突出,是一种典型的CAT按钮。
浮动按钮(FAB)
浮动按钮通常是在页面中的某个固定位置漂浮着,是一种高优先级别的按钮,通常用在一些核心、频繁使用的操作上。例如摩拜app中的“扫码开锁”。
图标按钮
顾名思义就是用一个个形象的图标来表示不同的操作,例如,我们最常见的“点赞” “留言” “收藏” 等等。页面中的主要操作可以考虑使用图标按钮,但在某些地方图标按钮无法准确的表达出按钮的含义,则会配上一些简短的文字,来进行解说和强调。
文字按钮
用几个文字来代表按钮,文字可以是按钮的操作结果,也可以是一个动词。它没有集成为我们常见的形状,和一般的文本相似,所有看起来并不是很特别像按钮,是一种点击感比较弱的按钮,通常用于创建辅助交互区域。在使用时为了传达可点击的感觉,会使用主题色,或者加粗等方式来突出它。
幽灵按钮
不同于文字按钮,幽灵按钮在文本的周围加上了一圈细线,看上去更加像是一个可以点击的按钮。幽灵按钮具有简洁轻盈的特点,可以使得它即表达出了自己的按钮特性,又不会影响页面的平衡。页面中的主要操作也可以时常看到它们的身影。
下拉按钮
单击下拉按钮时,将显示互斥项目的下拉列表。通常填写列表中遇到此类型。
汉堡按钮
汉堡按钮将所有的操作都折叠起来,只有点击开来才可以看到里面的操作内容。因此汉堡按钮里面的操作都不易被发现,通常都使用在一些不常用的操作中。
按钮设计原则
虽然不同类型的按钮都有不同的使用场景,但他们都有以下几个共同的设计原则:
足够引人注目
越是重要的按钮越是要足够引人注目,例如使用主色调或者背景对比色,将所占面积放大。即使是弱点击感的文字按钮,在页面中也要让用户直观的感受它们的存在。当需要强调按钮中的文字时,不妨采用圆角的按钮。圆角按钮不仅可以带给用户亲和的感觉,也可以让用户更加聚集文字内容。
例如:在马蜂窝的详情页面里,我们可以依次看到:底部的操作栏(客服、店铺、收藏、购买)、开通vip、价格说明、更多班期和一些表示更多的图标按钮。底部的“立即购买”和价格底下的“开通vip”都是重要的业务按钮,这个两个在颜色上都做了突出显示,点击区域也是最大的,即使是“价格说明”、“更多班期”这类弱点击感的文字按钮,也在用蓝色做了突出显示,让用户感知到它们。
按钮的描述
按钮的描述是对按钮的说明,也是对面操作后产生情况的描述。可以直接将说明放在按钮里面,例如:常见的保存按钮;也可以先进行一段文字描述,再抛出按钮。其目的都是为了让用户了解到按钮的功能,使用户对自己的行为有掌控的感觉。
按钮位置
按钮的位置要考虑操作便捷性和阅读性。阅读性是指按钮的放置位置要符合常使用的视觉线路:“F”线路、“Z”线路。便捷性即按钮的位置要放在容易点击的地方,web页面边缘部分是最易操作的区域,手机端则是靠下居中的区域。(下图为手机端各个点击区域的操作难易情况)
例如网易音乐的弹窗,为了适应大屏手机的操作,将之前水平并排的两个文字按钮变成了右对齐的展示方式。
按钮的大小
麻省理工学院的研究发现,手指垫的平均值在10-14mm之间,指尖的平均值为8-10mm,因此10mm x 10mm的最小触摸目标尺寸则很好,即不小于44Х44 px(@2图的情况下)。
同时,为了防止紧挨着的按钮之间的误操作,两个按钮之间的距离最小建议控制在16px(@2图的情况下)及以上。不要因为按钮大小设置不合适而让用户放弃和你的页面进行交互哦~
按钮的反馈
无论是何种操作,及时的反馈都是一种良好的交互体验,按钮也不例外。按钮是否可以点击,按钮点击前,点击后也应该及时给出变化。
平板电脑和移动设备上很难出现悬停状态,因为你的手指无法“悬停”。因此,如果为应用程序进行设计,可以忽略此状态。
END......
更多分享,欢迎关注公众号:七七的设计手札
大牛,别默默的看了,快登录帮我点评一下吧!:)
登录 立即注册