按钮是最常用的UI元素之一,UI按钮看起来很简单,但在设计的过程中,有许多细节和原则需要注意。通常,UI按钮设计会搭配具有号召性的用语来使用,提示用户如何进行交互以及操作可能会导致的结果如何改进UI按钮设计,使人们更容易理解按钮的用途,以便他们能够更放心地进行点击呢?这是UI设计师常常需要思考的课题。尤其是在电子商务类的网站或应用程序中,UI按钮是提高转化率的关键机会,UI按钮设计不可马虎。

UI按钮设计

1. 按钮尺寸

UI按钮设计结构以以下七个元素为中心,这七个元素也是我们在创建UI按钮的过程中需要注意的细节点所在:①拐角半径、②颜色或渐变、③向左和向右填充、④顶部和底部填充、⑤外缘(安全空间)、⑥文本大小和粗细、⑦阴影

UI按钮设计的大小会影响用户查找按钮并识别其用途的能力。当UI按钮设计得太小时,会导致用户点击困难,需要多次点击或是容易点击错误,让人感到严重沮丧。研究发现,按钮的最小命中区域为7毫米×7毫米,更为适中的尺寸是APP的按钮设计不要小于10毫米。

UI按钮设计尺寸

2. 按钮颜色

UI按钮的颜色可能会对转化产生重大影响,但在设计UI按钮时,没有“完美”的颜色选择规律可供使用。按钮的突出性、独特性是与其在界面中的位置以及界面的整体风格想关联的。使用“抓眼”的颜色是一种非常流行的UI按钮设计技巧,从明亮的颜色到带有简单渐变的按钮,改变按钮的颜色可能是帮助人们促成设计交互的最简单方法之一。

如下图Pixso资源社区的线下活动购票平台设计素材中购票页面的【确认付款】按钮颜色,采用了亮眼的橙色,能一下子吸引用户的注意力。

线下活动购票平台设计素材

3. 按钮数量

在界面上放置大量的UI按钮并不是一个明智的选择,提供太多的选择容易让用户增添选择的压力,更好的做法是为用户提供合乎逻辑的操作选择推荐,并在界面拥有多个按钮时,确保主按钮的设计更突出,与其他UI按钮设计明确区分开来。

如下图Pixso资源社区中的服装电商类App设计界面,将【立即购买】和【登录】按钮明确的以颜色和尺寸大小区分开来,从而吸引用户点击。

服装电商类App设计

4. 按钮状态

每个UI按钮的状态都必须具有清晰的特征,以将其与其他状态以及周围的背景区分开来。为UI按钮设计选择的状态类型,将取决于你正在设计的UI以及用户的目标。以下是6种常见的按钮状态:

  • 正常:这是默认按钮状态,用于传达按钮是否已启用并可用于交互。

  • 焦点:焦点状态对于辅助功能至关重要。当访问者使用“tab”或其他输入法导航UI时,处于此状态的按钮将突出显示。在许多情况下,焦点状态将显示为按钮周围的浅蓝色轮廓,但会因不同的浏览器而异。

  • 悬停:当用户将光标放在屏幕上的按钮上时,该按钮将进入悬停状态。悬停状态特定于网页设计,因为移动设备通常不支持悬停功能。

  • 活动:活动状态用于“单击”或点击按钮。它显示用户已点击该按钮,并且可能类似于“按下”按钮的外观。

  • 进度/正在加载:如果未立即执行操作,则进度/加载状态会告知网站或应用正在努力完成所需的操作。

  • 已禁用:禁用状态表示按钮当前不可用于交互。如果进程正在加载,它可能会阻止操作并禁用按钮。禁用按钮状态还可以指示你网站上需要成员资格、帐户或升级才能使用的操作。此状态应与工具提示配对,该工具提示可解释按钮被禁用的原因。

值得一提的是,Pixso自带的组件变体功能,可以通过按钮组件状态间的切换,更高效地管理和复用按钮组件。将相似的组件建立【组件变体】统一放置管理,在相同的母版下的副件可以单独设置样式,并不会影响与母版之前的关联,简化组件库,也更容易找到所需要的东西,具体创建教程可点击参阅Pixso超详细创建组件和样式指南

UI按钮设计组件样式库

5. 按钮意图

如果UI按钮设计的文本标签模棱两可,会妨碍用户操作或导致出现错误,因此,清晰、直接的意图传达是UI按钮设计的首要任务。如下图Pixso资源社区的在线医疗线上问诊App,在诊断结果页面以“保存诊断结果”的文本提示,明确告诉用户他们接下来会得到什么,用户会感觉即贴心又方便。

在线医疗线上问诊App

推荐使用在线协作设计工具Pixso

以上就是今天的分享,如何把UI按钮设计得更精准巧妙,是UI设计师们需要不断探索的问题,希望本文分享的UI按钮设计细节和思考可以帮助你避开问题,把UI按钮设计做到更好。当然掌握设计技巧的最好方法是勤练习和多实践,而专业的设计需要交由专业的设计工具来完成Pixso作为国内新一代在线协作UI/UX设计工具,设计功能非常强大,跨平台的协同、文件实时云同步以及强大的绘图与标注功能,打通产品、设计到研发的工作链路,还有海量免费设计资源、各种高效插件供你选择,话不多说,打开Pixso工作台,开始UI按钮设计吧!