想让按钮设计更精致?收下这20条超实用的技巧

释放双眼,带上耳机,听听看~!
本文为大家梳理总结了 20 条在设计按钮时需要避免的问题,希望这些设计细节和思考帮助你完美避开问题,把按钮设计做到最好。

按钮在产品界面中是非常重要的元件之一,按钮作为用户引流和行动触发来说都是至关重要的。如何把按钮设计做到最好,是设计师需要不断探索的问题,把控好每一个细节才能让每一个元件p 3 1 ,更精致。

本文为大家梳理总结了 20 条在设计按f I w B C = x _ &钮时需要避免的问题,希望这些设计细节和思考帮助你完美避开问题,把按钮设计做到最好。

按钮设计强弱表现

在整个产S / @ j . ~ Z [品设计中我们要根据信息传递的优先级对按钮A } *设计进行主次区分,设计表达要有强弱差异。按钮设计可以通过大小、填充、描边、色相、饱和度等的不同来进行强弱差异,不同强弱的差异表现出按钮的等级:行1 _ + e C W J动触发、主要、次要、辅助、禁用等。

想让按钮设计更精致?收下这20条超实用的技巧

想让按钮设计更精致?收下这20条超实用的技巧

Z A i # o & E角设置要合理

对于按钮边框来说,我们通常采 W U f D H r #用全圆角和小圆角居多,这样显得稳重大气。而大圆角按钮并J t [ h D +非不可用,只是p ) o Z相对& O U B ! N = k w较少,会显得按钮不方不圆的,设计表现显得不够成熟。

全圆角的圆角值等于按钮高度值的一半,而小圆角的圆角值我们通常控制在 1/4H(高度值的四分之一)以内(F # E $ J 8 `仅为个人参考,并非绝对值)。g X G p h N D

想让按钮设计更精致?收下这20条超实用的技巧

想让按钮设计更精致?收下这20条超实用的技巧

投影设置要用对色彩关系

给一个有彩色系按钮设置投影时,选择无彩色系(比如黑色)也能达到效果,只是1 – G x g为了得到更! o ^ ` ] W e好的视觉效果,h ; *提高用户感官体验。我们也可以尝试基于按钮本身色相来确定投影颜色,这样得到的效果会显得更加干净清爽。

想让按钮设计更精致?收下这20条超实用的技巧

想让按钮设计更精致?收下这20条超实用的技巧

投影的使用勿过度泛滥

虽然投影的运% u [ ; S用可以使按C w % ( o } ` T钮更有层次感,但是也需要根据具体情况慎用。比如对于一些浅色按钮来说| G S ! , H 6 (也许投影L s u o反而会降低按钮的识别度,使得按钮配色环境显得不够干净清爽。

想让按钮设计更精致?收下这20条超实用的技巧

想让按钮设计更精致?收下这20条超实用的技巧

给按钮文字一点呼吸感

按钮文字和边框的设计要预留一定的留白,不要做“舍不得”的设计,使得按钮给人感觉很拥挤。如6 # q j ?果你把控不好可以分析一些按钮的负空间获取经验,看看文字大小和负空间之间是否存在某种比例关系。找到这个比例关系运用到按钮设计中,也许会让你的设计显得更加成熟稳重。

想让按钮设计更精致?收下这20条超实用的技巧

想让按钮设计更精致?收下这20条超实用的技巧

按钮设计别让用户思考

按钮的存在是为了引导用户进行引导式操作,而不是让用户对其产生困惑。按钮设计别让用户思考这是啥,是否可以点击,需要简洁明了的对此操作进行指引。如果你设计的按钮样式与“标准”差异太大,用户就会@ C u 0 g产生疑惑,影响使用体验。

想让按钮设计更精致?收下这20条超实用的技巧

想让按钮设计更精致?收下这20条超实用的技巧

样式表达D ^ / #的一致性

当设计元素规范统一时,用户操作过程中的理解成本最低,一致性也因此成为最有力$ G i E的可用性原则之一。我们在设计按钮的时候要注意样式表达的一致性,比如:按钮形状、色彩定义、K r 5 F 2 O U风格特征等,这样k F O { S r 1会使得我们的设计可用性更强。

想让按钮设计更精致?收下这20条超实用的技巧

想让按钮设计更精致?收下这20条超实用的技巧

箭头运用不是字符输入

一些初入职场的设计师会偷懒直接字符输入形成按钮内部所需箭头,& . ) q ] j `这样的表达方式h b p t S然显得粗糙些。箭头要当成{ E w b { o图标来进行设计,控制好箭头的粗细和文字笔画的粗细值接近,这样显得更有细节和态度。

想让按钮设计更精致?收下这20条超实用的技巧

想让按钮设计更精致?收下这20条超实用的技巧

按钮设计主次分明

通过信息对比才能形成主次之分,按钮设计需要在风格上进行区分,达到层次结构的视觉提示。主要的按钮需j $ p 2 E要和次要的、辅助的形成差异,最大化突出主按钮的视觉效果,更好的引导用户根据设定的轨迹进行操作。

想让按钮设计更精致?收下这20条超实用的技巧

想让按钮设计更精致?收下这20条超实用的技巧

按钮设计不要让用户误解

在整C / V | s _ = $个项目设计规范中,需要避免让用户把非按钮, j . . 5 L :状态的内容进行误判。在确定好按钮样式特征之后,不d 6 X要在其它场景运用其样式特征或者类似的风格特征,这样会让用户产生错误的认知,因而进行无用的操作。

想让按钮设计更精致?收下这20条超实用的技巧

想让按钮设计更精致?收下这20条超实用的技巧

按钮文本表达要言简意赅

在进行按钮文本思考的时候,尽量减少字符和单词的数量,内容表达言简意赅,只要能够准确传达信息识别度即可。有时候也不一定需要文本,图标可以传递的信息可以考虑文本的减少,也许可以让界面的呼吸感更强。

想让按钮设计更精致?收下这20条超实用的技巧

想让按钮设计更精致?收下这20条超实用的技巧

按钮文本设置切勿换行

单行文字的可读性更高,如果出现换行就会降低可读性。我们在设计按钮的时候,确保文本内容在一行之内显示,如果设计空间不足要考虑文本内容D # j ^ D r g的精简。

想让按钮设计更精致?收下这20条超实用的技巧

想让按钮设计更精致?收下这20条超实用的技巧

特殊场景要灵活转变

底部按钮的运用并非固定不变,不同机型或者特殊场景的考虑需要灵活转变。比如 iPhone X 等类型的机型,由于底部需要预留主页控制器的位置,所以在设计按钮的时候需要考虑上中下的过渡衔接? o L R 4 N |,这样才能带给用户更好的感官体验。

想让按钮设计更精致?收下这20条超实用的技巧

想让按钮设计更精致?收下这20条超实用的技巧

按钮大小要便于点击

按钮需要方便用户进行点击操作,如果用户点击失败或者误点到周边元素,就会带给用户不友好的体验。若是带有文本的按钮,只要文字大小不要小于极限值,通常实现出来的按钮交互热区都会满足点击需求。

如果是纯 icon 的按钮,除了按钮大小需要控制合J : ^ q y j Y适以外,也要确保交互热区能够满足点击区域要求。

想让按钮设计更精致?收下这20条超实用的技巧

想让按钮设计更精致?收下这20条超实用的技巧

同属板块按钮大小一致

在同属板块内的按钮设计,我们可以通过按钮的强弱来体现层z l i W K 1 c w级关系,不要让按钮大小不一,这样视觉平衡E P h y , # * 3 ,会受到影响。

想让按钮设计更精致?收下这20条超实用的技巧

想让按钮设计更精致?收下这20条超实用的技巧

按钮设计考虑文本最大值

稍微注意细节的设计师也不会让文本的长度超过按钮宽度,这是一个非常明显的错误。但是按钮文本变得很长是遇见过的,几个字即可表达的意思却使用了过多修饰词。在进行按T V _ 6 Z * ,钮文本思考的时候,要根据最佳的视觉效果设定一个最大值,不要任其无限制发挥,这样会使得最终的视觉效果大打折扣,甚至影响用户j O 7感官体验。o W F r : !

想让按钮设计更精致?收下这20条超实用的技巧

想让按钮设计更精致?收下这20条超实用的技巧

保持按钮可读性

按钮设计需要考虑在不同环境下的适应度,确保用户可以一目了然的发现它。现在很多产品都适配了深色主题模式,按钮的配色不能只考虑白色或者浅色背景下的运用,需要考虑大多数背景下的适配。在进行色彩选择的时候,始终保持按钮与背景的高对比度和可读性。

想让按钮设计更精致?收下这20条超实用的技巧

想让按钮设计更精致?收下这20条超实用的技巧

8 7 F钮去文本是否合理

关于按钮文本的设置需要结# J t Q O W合信息传递的识别性和准确性,虽然纯图标显得设计简洁大方,但是需要考虑图形是否可以准确的表达其含义,不会让用户出现误解或者错误的认知。所以,按钮去文本需要根据文案代– C u p M J & )表的含义来判断,如果不需要辅助解释也能判断出按钮的意思,那么更为简洁的设计表达效果更佳。

想让按钮设计更精致?收下这20条超实用的技巧

想让按钮设计更精致?收下这20条超实用的技巧

正确判断按钮颜色选择

色彩在设计中是最直观的体现,不同的颜色会传递不同的性格,带给用户认知差异。而按钮# a R S # X X的颜色选择也并非随性发挥,需要结合品牌色和辅助色作出判断。

通常比较统一的标准是采用品牌色作为大部分按钮的颜色,遇到一u x a 6 3 Y [ 7 些需要差异化的按钮会选择辅助色来表达,红色或者橙色多为行动刺激作用,不适合在非品牌色的时候滥用。浅灰色或者低F % ^饱和度的色系会带有不可用、禁用、失效c V Q P 8 z s等属性,需要酌情选择。

想让按钮设计更精致?收下这20条超实用的技巧

想让按钮设计更精致?收下这20条超实用的技巧

按钮位置结合用户体验

引导用户作出选择的按钮应该放在左 K e v S边还是右边,根据操作系统的不同也引起了设计师们的争议。比如 Windows 系统习惯将确认按钮放在左边,而苹果系统却选择了放在右边,用户运用系统( 5 C的习惯会影响其行为的适应j = ^ W @度。不过要是在移动端个人倾向于将引导用户作出选择的按钮放在右边,更有利于用户点击(特殊人群这里需要除外)。

有时候为了防止用户误操作,我们( V q U } R x ? %会将确认操作的按钮放在左边,通过助力设计让用户再次确认。所以,一方面我们要结合操作系统的习惯,另一方面也要结合用户习惯,将按钮放在最合适的位置,便于用户操作。

想让按钮设计更精致?收下这20条超实用的技巧

想让按钮设计更精致?收下这20条超实用的技巧

小结

作为设计师来说,对每一个细小的元素进行深入思考和总结,才能让我们设计出更好的解决方案。一枚小小的按钮设计,其背后也有很多需要探索的东西,本文为大家总结了 20 条经验,相信还有更多值得梳理的细节,期待更多设计伙伴去挖掘。

文中观点为日常设计经验总结,可结合实际情况选择性运用,希望可以带给大家更多思考。

给TA打赏
共{{data.count}}人
人已打赏
教程分享

实战案例!如何在短时间内,提出有效的设计方案?

2021-1-10 5:47:45

教程分享

新手来看!写给设计小白的色彩基础指南

2021-1-10 7:04:30

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索