嗨!大家好呀,本期UI设计培训像素妹儿跟大家聊一聊我们在UI设计中经常用到的一个界面元素——按钮,大家都知道按钮很常见,也不可否认它具有一定的重要性,可是合理使用按钮,你可以做到吗?接下来我们就着这个话题聊一聊,小按钮的大学问~

简介:

按钮/Button

功能:确认命令、启动功能、开关选择……

分类:CTA按钮(鼓励性)、文字按钮(指示性)、归类按钮(类目)、幽灵按钮、悬浮按钮

按钮在UI设计中是不可或缺的元素之一,它们是用户交互的时候,和系统进行沟通交流的核心组件,也是最为常见的一种交互对象~

按钮设计的基本原则

1、保留按钮的本质

在用户对界面进行交互操作的时候,用户想要知道的是哪些可以点击,而哪些不可以,面对界面中的众多元素,用户在最初需要进行辨别和判断,而这个过程越长,可实用性就越差,因为在操作的过程中时间成本的消耗是无法弥补的,所以最直接有效的便是把按钮做到“按钮”的模样~

下面四个按钮的设计形式是用户较为熟悉的:

1、无圆角,带填充的按钮

2、有圆角,带填充的按钮

3、有圆角,带填充加投影的按钮

4、幽灵按钮

在这些按钮中,识别性最强的是带有投影的按钮,因其有一定的三维视觉效果,给用户的第一感觉是可以按压点击的~

2、合理布局按钮摆放的位置

用户对于页面交互其实是有基本的感知和期望的，也就是说用户对于按钮的位置是有个基本的认知的。不要让用户到处找按钮，它最好在用户所期望的位置出现。

尽可能使用传统的布局和标准的 UI 模式,所谓传统的布局也就是贴合用户经验的布局，用户在浏览的时候会对于这样「标准」的 UI 布局有明确的预期，在对的位置看到了对的按钮，整体更容易理解，自然也就可以轻松和界面进行交互了。想要确认设计的可用性，只需要观察用户在使用过程中是否会通过操作抵达你希望他们到达的位置，并且找到需要点击的按钮。

举个简单的例子,以我们常见与常用的加入购物车/立即支付为例,常见与常用的操作按钮多放在界面的右下方,这是因为,以“右惯手”人的基数为一定的要求,包括考虑到了用户的视觉流程与视觉落点。

3、按钮要准确反映功能

当按钮的文本标签上的内容太过于宽泛的时候,很容易被用户混淆与误解其内容,使得用户感到迷惑,每个标签的文本标签都应该尽量准确,简明直接地介绍清楚它的实际功能,用户想要知道的是在进行了交互与操作之后,相应的按钮会发生什么,举个简单的例子,如果我们不小心出发了一个删除按钮,报错信息如下:

在这个弹窗中,【OK】模糊的表达了其作用,却并没有说明按钮的作用,不论是[确定]还是[取消],都没有说清楚这个操作的真实含义,所以这两个按钮应该是「删除」和「取消」更加合适,并用红色的按钮做了操作的引导,增加该按钮的实际意义和发生时间的预想;

4、按钮的反馈要服从用户

在现实生活中,按钮的作用多用作触发某个物理事件的开关,它提供给人的反馈在有效空间里是真实存在的,而在界面中我们也需要一定的虚拟反馈和物理反馈,目前市面上的解决方案是,视觉、听觉与震感,这些微交互,是有效的告知用户,您所触发的按钮已执行命令或已完成,请勿重复操作,这个案例比如我们的手机支付,输入密码之后,支付成功需要有一个坚定的讯号为反馈,告知用户您已完成支付,毕竟金钱对于大众来讲是那么敏感~尤其是反馈状态,目的是让用户明白发生了什么,因为用户会按照真实生活建立基本认知,如果你的按钮反馈无效或反馈失误都会是用户感到落差,比如我们在卸载某款软件的时候,用户的初衷以及前面的多步操作都是为了卸载这款软件,可到最后执行命令按钮的时候,开发公司都会把卸载这一按钮“隐藏起来”,将其弱化并加上审问内心的文字介绍——“狠心卸载”,是用户觉得卸载了就成了狠心的人,想想都可爱~

5、按钮的形一定要会使用

在按钮设计的时候,我们需要根据整个界面的风格设定合适的按钮,我们常见的按钮的形状样式主要有三种:直角,微圆角,全圆角三种样式.

首先我们要了解几种样式的含义:

直角按钮的含义:严谨、力量、高端.适用于金融类、奢侈品类的产品中,让产品给人严谨安全、例如:MUJI

微圆角按钮的含义:稳定,中性,大众化,适用于用户跨度比较大的常规产品中,例如微信

全圆角按钮的含义:活泼、年轻、大众,多适用于儿童类、年轻化、娱乐类的、购物类的产品具有一定的亲和力;例如淘宝

6、按钮的颜色/尺寸很重要

按钮在屏幕显示的优先级离不开所占体积与色块面积,适当的调整按钮的大小可以有效的提升重要按钮的易识别性,引导用户进行点击,合理加大尺寸的同时,用对色也是一门学问,在按钮中多使用填充色的按钮,按钮可以使用对比色来引导用户对齐交互操作,简单来说就是让按钮更容易被用户注意到,通过色彩进行按钮的区分层级也是很重要的~

总结:

按钮设计在UI设计中扮演着重要的角色,它常不被大家重视,却是不可或缺的重要组成元素,按钮设计的真正大学问是无法探索完整的,所以本期就按钮设计较基本的设计原则为大家简单介绍一下按钮,在我们今后的工作中,也要充分考虑到按钮在产品或品牌中的影响力,作为设计师的我们就是要将细节之中的细节做到完美科学,赋予产品新的样貌与生命力~