按钮是UI设计中最重要的交互元素之一。UI按钮设计能够引导用户根据特定的命令完成预期的交互反馈。自互联网诞生以来,按钮设计经历了漫长的发展路,如何才能将UI按钮自然地融入到设计整体中呢?为了更好地提升用户交互体验,本篇文章,我们将结合UI按钮设计中可识别性、可交互性及清晰的引导性三大基本原则,一起来探讨UI按钮设计的小方法。

UI按钮设计素材

免费按钮设计素材

1. UI按钮设计的可识别性

UI按钮作为一个交互元素,如果不易识别,用户就无法按照预期进行交互,这个UI按钮设计就是失败的。如何让用户一眼就看出这玩意儿是个按钮?很简单,在可点击元素上使用合适的视觉样式,提醒人们该元素是可点击的即可。

UI按钮设计的可识别性与它的六大基本属性(颜色、形状、字体、大小、投影和留白)息息相关。最常见也最基础的UI按钮设计方法就是用一个矩形边框(形状)将按钮文本(字体)包围起来,在这基础上,设计师结合界面整体风格调整边框和文本的(颜色、投影、留白),最后再结合用户浏览习惯和界面排版布局,调整按钮的(大小)和位置。

设计提示:研究表明,按钮的最小命中区域为7毫米×7毫米,更为适中的尺寸是APP的按钮设计不要小于10毫米。此外,相比于方角,圆角更能将浏览者的注意力吸引到元素的内容上。

按钮

2. UI按钮设计的可交互性

点击按钮,一般会进行下一步、确定、以及完成等等恰当的反馈,UI按钮设计必须有反馈,不然用户不知道交互是否成功,用户总是期待得到反馈的,当用户摸不着头脑时,就会失去耐心而离开网站或应用程序。尤其是在外卖或电商等需要用户支付的网站/应用程序中,当用户在走完一个流程的时候,我们需要告知用户需要等待的时间,使用户提前知晓结果,让用户对自己的操作有心理预期,增加安全感。

设计提示:UI按钮除了有默认按钮,还会有悬停状态/点击状态/禁用状态等多种交互形式。设计师在设计按钮时,需要兼顾按钮设计的所有状态,由于不同状态间的按钮通常只有细微的差别,如果一个个重新做,会耗费很多时间,而且当基本状态调整时,很难做到所有状态同步更新。

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

UI按钮设计

紫色按钮组件集

3. UI按钮设计的引导性

合理的UI按钮设计,要具备良好的引导性,使用户能正确明白按钮的操作功能。当界面出现多个按钮时,按钮不仅需要与页面上的其他元素区分开来,还需要彼此区分,让主要按钮更加突出

如下图 Pixso资源社区 服装电商类APP 所示,在登录页面,【登录】按钮和【注册】按钮使用不同的颜色,形成较强的对比度,引导用户进行登录。而在商品详情页页面【立即购买】按钮的尺寸明显比【加入购物车】按钮设计要大,更能吸引用户注意力,引导用户消费,除此之外,较为次要的【购物车】和【收藏】按钮则仅以图标显示,置于右上角。

按钮设计

推荐使用专业的UI设计软件Pixso

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

UI按钮