域名频道资讯站
我们一直在努力制造惊吓

如何设计出更好的按钮?


本文列举了如何设计出更好的按钮的七个要点,希望能给你带来思考与启发。

如何设计出更好的按钮?

按钮是触发它所描述功能的可交互元素。如果一个按钮上写着“保存”,点它十有八九会有类似保存操作。按钮也是所有电子产品上最重要的交互元素之一。

按钮能够触发购买、下载、发送和很多其他重要操作。数字按钮也沿袭自真实世界中比如电视遥控、录像机或者游戏手柄上的实体按钮。

如何设计出更好的按钮?

最重要的须知:按钮得看起来像按钮

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

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

熟悉的=好的

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

如何设计出更好的按钮?

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

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

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

如何设计出更好的按钮?

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

按钮分解

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

如何设计出更好的按钮?

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

间距和对齐

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

如何设计出更好的按钮?

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

如何设计出更好的按钮?

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

如何设计出更好的按钮?

合理的尺寸

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

如何设计出更好的按钮?

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

良好的实践

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

如何设计出更好的按钮?

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

如何设计出更好的按钮?

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

如何设计出更好的按钮?

圆角

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

如何设计出更好的按钮?

图标对齐

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

如何设计出更好的按钮?

根据按钮圆角半径画个圆,或者根据按钮高度画个方块。在它内部,再画个小的来放置图标。大的形状和小的之间的内边距应该有和标签文字高度相同。然后就可以把图标放到小的形状里。

在有图标的情况下,最好保持图标高度和文字高度一致,可以对比文本线宽和单字宽,然后使它们匹配度越高效果越好

边缘平衡

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

如何设计出更好的按钮?

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

如何设计出更好的按钮?

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

总结

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

谨记:

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

 

作者:Michal Malewicz

原文链接:https://uxdesign.cc/design-better-buttons-a5c90a113280

译者:Matrix,公众号:交译所

本文素材来自互联网

赞(0)
分享到: 更多 (0)

中国专业的网站域名及网站空间提供商

买域名买空间