圆角按钮_按钮设计精进

本文探讨了按钮设计的重要原则,强调了圆角按钮的友好性和易识别性。内容涵盖按钮的突出性、形状选择、间距对齐、尺寸考量、图标对齐和边缘平衡等方面,旨在帮助设计师创造更好的用户体验。
摘要由CSDN通过智能技术生成

d70136ec1a63850abf9a04c75510afb9.png

作者:Michal Malewicz

译者:Matrix

审稿:afang

原文链接:

https://uxdesign.cc/design-better-buttons-a5c90a113280

文章由交译所成员翻译,如需转载,请先申请授权。

译文如下:

debed0dd05dc0d6e34bd28df52953c1f.png

按钮是触发它所描述功能的可交互元素。如果一个按钮上写着“保存”,点它十有八九会有类似保存操作。按钮也是所有电子产品上最重要的交互元素之一。按钮能够触发购买、下载、发送和很多其他重要操作。数字按钮也沿袭自真实世界中比如电视遥控、录像机或者游戏手柄上的实体按钮。

最重要的须知

按钮得看起来像按钮设计按钮最重要的法则就是要使按钮足够突出,以免按钮和其他元素混淆。

9419048a6547a29e3beacdb4dd0f12ab.png

从按钮中逐步移除元素,按钮的功能也开始消融丢失。它变成了装饰或者说文本,失去可操作的特性。

熟悉的=好的

我们习惯于和行为有自然关联的特定形状和形式。按钮看起来和我们认为有关联的行为越相似,设计越成功。这就是为什么选择一个矩形(或者一个圆角矩形)作为按钮是最安全的。

a4edf9cb6e1be8d8863d7bd19a451a17.png

这个元素会被立即识别为一个按钮

其他形状和形式对用户就未必有这样的可识别性。需谨慎使用他们,尽量在你产品的常规风格需要与众不同时才使用。其他形状和形式(三角形、圆形、自由形态)对用户就未必有这样的可识别性。需谨慎使用他们,尽量在你产品的常规风格需要与众不同时才使用。

d479e8824e55c5ddffe9612a2862310f.png

需要花费更多时间才能被识别的可点击元素

按钮分解

按钮设计需熟记每个元素并妥善选择。使用品牌手册作为基准,思考哪种按钮能够匹配品牌并和界面很好相容。

6215e08c6916afd22481900849310507.png

你应该使用网格基本数值用来设置内外边距。以上图为例,左侧内边距为两倍上下内边距,这是种增加可读性的安全做法。

间距和对齐

不规则间距按钮是所有界面都会遇到最普遍的问题之一。务必再三确认按钮标签是否水平和竖直居中。如果要十分确定,请建立规范。

377c91295f4f0cdf7d688eb7cd437972.png

除了基于网格的方法,使用大写字母W确定边距也是一个稳妥的办法。如果按钮标签4个边距都至少1 x W,那就没问题。为了提高可读性,水平边距留出2 x W更好。

23f00ca20346f75b70a09be7cef7e7ab.png

别忘了按钮之间安全间距。如果界面上有很多按钮,保证各个按钮外边距不重叠比较稳妥。

f3595e99822dfc1f2137b44edd361831.png

合理的尺寸

桌面和移动端的按钮都应该有它们的最小尺寸。如果按钮太小,就会导致按钮难以用手指或鼠标点击。这会导致给用户带来困扰,用户甚至会直接卸载你的APP。在移动端,最好把44 x 44 pt作为所有可交互元素的最小尺寸。

71fff72921525404a91841ad7a82ab83.png

移动端上的按钮尺寸在50左右最佳。如果是基于光标的设备,32 x 32也是可行的。牢记即使在桌面端,更大按钮也依然代表它使用起来更容易。

良好的实践

重要的按钮也会搭配有图标。一个“结账”可以通过一个购物篮或购物车图标快速识别,但是只在与文字“结账”同时出现时有效。

c32cfee70473282dd66a4dd78ed51df9.png

一个合适的箭头或“>”放在按钮标签后,能更强地传达信息。更强制地去引导用户点击并“继续”。如果你要强化CTA,这个办法就很有效。

42d278eb123a507f955762d2f213114b.png

相较扁平的按钮,有阴影的按钮会更有可点击性、更快被识别。加个微妙的阴影可以使按钮在背景中更为突出。

1b6919715adf4128d71503226a02b12e.png

圆角

圆角按钮会看起来比尖角按钮更友好和积极。同时,圆角按钮周围的内容设计难度剧增。如果文本标签在按钮上方与按钮保持左对齐,那么按钮的圆角越大,文本标签和按钮视觉上越不协调。这让按钮感觉看起来同时有两个左边距。

52b33534f2e537e23fc3d73d08bf1616.png

图标对齐

合适的图标对齐是按钮设计中最难的事之一。大多数情况下,字重和图标尺寸是直接相关,它们的关系也是特有的。但是依然有个简单有效的法则适用于大多数情况。

371ac2adf8f99a80aa6eb8d51261d225.png

根据按钮圆角半径画个圆,或者根据按钮高度画个方块。在它内部,再画个小的来放置图标。大的形状和小的之间的内边距应该有和标签文字高度相同。然后就可以把图标放到小的形状里。在有图标的情况下,最好保持图标高度和文字高度一致,可以对比文本线宽和单字宽,然后使它们匹配度越高效果越好

边缘平衡

在使用圆角矩形按钮时,需要注意去调整圆角和其他界面元素的比例来确定使用多大的圆角。都使用相同的圆角半径会使得外边距不平衡。

747c0c95424e5ffda83ffc551d148358.png

对话框边距也是一样,就像左边距和底边距。因此,处理起外边缘会更舒服和快速。

ed389fecb8f85846e8aff80aef10d1fe.png

对话框按钮和背景之间的左边距和底边距过大(左)、过小(右)。这让对话框边缘太过突出,夺取了按钮本身的关注度。

总结

当你创建一级、二级、三级按钮时,谨记每次去检查一系列因素。甚至小的不统一或者不对齐会降低交互质量。按钮交互和点击都影响重大。

谨记:

  • 把按钮设计的像按钮
  • 保证标签和按钮水平、竖直居中
  • 保证按钮有充足内边距
  • 为图标选择正确的大小和对齐关系
  • 根据按钮的使用环境设置合适的圆角半径
  • 检查按钮圆角半径是否与其他元素契合
  • 选择合适尺寸。按钮越大,用起来越简单。桌面端同理。

·END·

文章由交译所成员翻译,如需转载,请先申请授权。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值