按钮在设计中充当着极为重要的角色,它可以装饰界面、体现层级并引导用户的操作,来看看设计师 Andrew Coyle 针对按钮设计提出的十一个重要的 Tips 吧!下次设计的时候,记得把这些要点运用起来,帮助你更好地优化设计作品中的细节。
01、一个按钮对应一种样式
网站或app中常常会有许多不同类型的按钮,通过盘点整理所有的按钮类型、操作方式及功能,并将相同作用的按钮进行归类,为每个类型的按钮设计同样的样式,可以避免用户在操作时产生混乱和误解,提升界面的统一性和体验。
常见的按钮类型:召唤按钮(CTA, call to action),主要按钮、次级按钮、第三级按钮、成功、危险(警告)、链接等。
02、为按钮的不同状态匹配视觉反馈
按钮的状态是多样的,包括悬停,点击和进行中,它们均可为用户提供视觉反馈。如果忽视了对按钮状态的设计,会令使用者在操作后产生疑惑。
03、对按钮类型进行区分
按钮之间应该通过运用不同的样式来进行层级的划分,最重要的、最能引导用户行为的按钮应该相较其他按钮更为突出,尤其是针对有特别意图的操作,更应该将按钮进行明显的区别。
04、按钮的视觉风格应该连贯
一个项目中按钮的视觉风格应该统一连贯,例如你使用了 4px 的圆角、并运用了渐变和投影,记得将这个风格套用在所有同类型的按钮上。(注:各大设计软件中的组件功能可以帮你快速且准确的达到这个要求)
05、按钮以外的元素 不应该看起来像按钮
运用了大圆角的矩形通常也作为标签等元素进行使用,如果你的设计中同时存在这两种元素,确保你为它们设计出了足够大的差异,从而避免用户混淆。
06、大小写保持一致
为同一类型的按钮统一文案的大小写,应该保持大小写的统一,可以是全大写、首字母大写或词首字母大写,在中文中,可以是标点符号的全半角,中英混排的空格,记得让它们时刻保持统一。
07、恰当的使用图标
左图中密集堆叠的按钮给人极强的压迫感,可以考虑用一种更细致的图标来替代厚重的的按钮,例如图中用星标表示了点赞或收藏。
08、避免过长的标签
冗长的标签会迫使用户思考,让操作变得复杂,除非涉及到必要或导致严重后果的操作(例如删除数据),否则应尽可能让标签文字变得精简。
09、文案应清晰地表达操作目的
单独的“是”“否”会让用户在某些情况下产生犹豫和猜测,特别是在进行一些不可逆操作时,直接在文案中写明对应操作的结果,更有助于传达每个按钮的功能。
10、在链接按钮间加入空隙
链接按钮往往因重要级不高而被忽视,确保链接按钮间加入了足够的空隙以进行分隔,并加入一定的悬浮效果,这会令它们更易于区分和辨识。
11、不要在文本中换行
在按钮中换行会降低其可阅读性,视觉上也更加繁复厚重,记得让你的按钮文字只占据一行的空间。