咨询电话:400-810-1418服务与监督电话:400-810-1418转接2
  • 相关推荐
  • 2021年UI/UX设计趋势前瞻
  • 如何设计出漂亮的模糊效果背景?
  • 如何做好分类导航设计?
  • Figma都有哪些好用的快捷键?
  • 圣诞节专题怎么做?掌握这篇干货就够了!
  • 教你如何快速制作弹跳加载动画
  • B端产品按钮设计技巧

    发布时间:2021-01-06 09:36:47

    近两年互联网人口红利殆尽,获客成本明显提高,C端整体突飞猛进式的增长基本结束。与此同时,互联网开始赋能传统行业,企业对互联网服务需求逐年提升。今年疫情冲击之下,“新基建”迅速成为坊间热词,B端产品借势迎来了井喷式增长,也让许多设计师小伙伴有了入局B端的机会 。

    0.png

    然而对许多初级或者没有B端经验的设计师来说,B端产品设计总是让人感到头疼:功能太多,规范太多,产品和设计的争议也非常大,而且网上的参考资料相较C端也是少得可怜。设计师只能在工作中自己总结经验。这里笔者就分享有关B端产品按钮设计技巧,希望能给大家带来一些帮助。

    什么是B端产品?

    谈到按钮设计前,先简单说说B端产品。

    B端产品主要面向的是企业客户以及内部员工使用,比如OA、ERP、CRM等,一般除了目标用户,其他用户很难接触到。B端产品的设计通常需要结合具体的业务场景,功能和逻辑往往比较复杂,且用户通常需要长时间沉浸使用,因此要求界面设计层级清晰,布局简洁高效。

    1.png

    B端按钮设计通常存在三方面的复杂性:

    按钮数量多:B端产品几乎所有页面都会有按钮,甚至同时有多个按钮。对层级感和美观度的要求都很高;

    应用场景多:按钮需要适应B端产品的多种业务场景,包括登录界面、表单、弹窗、信息提示框等;且每个场景出现的形式都不尽相同,需要对每种场景严格规范才不至于使用混乱;

    出现形式多:按钮通常具有正常、聚焦、悬停等多种状态,需要保证用户能够及时发现并获得准确的反馈效果。

    要想解决这些问题,我们需要了解按钮的主要类型和设计细节,以便在各类情况下灵活运用。

    按钮类型

    2.png

    按钮主要包括主按钮、次按钮、文字按钮、图标按钮、菜单按钮、图标+文字按钮6大类。

    主按钮(Primary Button)

    3.jpg

    主按钮顾名思义承载当前页面的核心功能,通常为新建、保存、确定这一类的正向操作。由于重要性高,要让用户一眼就能看见,往往设计的比较醒目。另外主按钮在页面中不宜安排的过多,否则容易相互干扰;而且只有最重要的功能才适合设计为主按钮,因此并非所有页面都需要有主按钮。

    次按钮/标准按钮(Default Button)

    次按钮也叫标准按钮,是页面中出现频率最高的按钮类型。一般来说,只要不是需要被强调的核心功能,都可以作为次按钮的形式出现。由于出现的次数较多,次按钮往往不宜设计的过于抢眼,通常采用文字+边框或者文字+浅色背景的形式。

    文字按钮/链接(Text Button/Link)

    文字按钮类似次按钮,也是页面中大量出现的按钮类型。由于只以文字形式出现,视觉上层级较弱,可以和次按钮区分一定的层级关系,通常在列表设计中被大量使用。

    图标按钮(Icon Button)

    图标按钮相较其他按钮体积较小,因此布局的灵活性很高。且图标形式给了设计师更多表现的空间,是B端设计中最容易出彩的部分,许多B端产品都通过精心设计的图标按钮传递产品调性和品牌感。

    由于没有文字元素,图标按钮容易出现用户理解上的偏差。为避免这一情况,需要在设计时做好用户测试,测试该图标是否符合用户视觉预期。或者当用户Hover时显示Tooltips提示按钮含义,帮助用户理解。

    4.png

    菜单按钮(Menu Button)

    菜单按钮可以理解为一般按钮的集合,即将多个相关功能合并在一起,通过点击按钮以下拉菜单的形式出现。菜单按钮可以有效减少界面按钮冗杂的问题,提高界面使用效率。

    图标+文字按钮(Icon add Button)

    一般指主按钮中加入图标,为了进一步突出主按钮的视觉层级,也有增加美观度提高用户点击欲望的作用。

    除了以上介绍的6种主要按钮类型外,还可以依据功能类型将按钮分为行为召唤按钮、悬浮按钮、标签按钮、危险按钮和开关按钮。

    行为召唤(Call To action,CTA)按钮的目的是通过设计诱导或激励用户点击,从而实现产品的诉求。此类按钮的设计在颜色、形状、样式上都需要突出,让人拥有点击的欲望。行为召唤按钮一般不会出现在B端产品的内部,但在官网或活动页面被广泛运用。

    5.png

    悬浮按钮是Android规范中的一个控件,随着各平台规范的相互融合借鉴,iOS甚至网页端也经常回看到各种各样的悬浮按钮。在B端项目中,悬浮按钮有时会承担主按钮的功能,如创建、搜索等功能;同时也会作为辅助功能,如帮助或返回顶部等。

    6.png

    危险按钮可以是主按钮之外的任意按钮类型,用来警告用户审慎考虑,且点击后通常需要二次确认,避免误操作。

    开关(Switch)按钮是两种相互对立状态间的切换,多用于功能的开启和关闭,一般操作后会即刻生效,多用于设置界面中。

    设计细节

    除了上面总结的6种主要按钮类型,要设计出一个好用的按钮,还需要重视一些细节,例如颜色、形状、状态、位置等。

    颜色

    颜色是最容易感知到的对比方式,不同的颜色会给用户不一样的心理预期。B端产品的用色一般以理性、严肃的基调为主,其中蓝色最为常见。如选用其他色彩可适当调低饱和度,以降低长时间使用造成的视觉疲劳感。

    7.png

    在设计时,还要将颜色分为主题色、强调色和辅助色,以适应不同按钮层级。主题色即产品主色,产品主色的设定直接影响产品气质和直观感受,也是产品直接对外的形象。主题色要根据产品特性、用户使用场景、产品定位等进行选取,尽量做好色彩的延伸性,可支持换肤。主题色的应用场景包括操作状态、按钮色、可操作图标等;强调色多用于需要拉开主次关系的次按钮中,一般采用主题色的对比色彩或者邻近色;辅助色用于提示其他场景,比如成功、失败、警告、无效等。

    形状

    在设计按钮时,需要根据整个界面风格设计适合的形状,主要有直角、小圆角、全圆角、异形四种样式。

    8.png

    ●直角的含义:严谨、力量、高端。属于B端产品最常用的类型,给人严谨、安全、高端的感觉。

    ●小圆角的含义:稳定、中性。在B端产品中也经常出现。

    ●全圆角的含义:活泼、年轻、安全。适用于儿童类、年轻类、娱乐类、购物类产品中,提升亲和力,拉近用户的距离。

    ●异形按钮的含义:不稳定、活泼、另类。适用于需要用户做出选择的场景中。

    状态

    在部分界面设计中需要考虑按钮的状态设计,从而让用户获得清晰流畅的操作反馈。B端完整的系统按钮可以分为:正常状态(Normal)、聚焦状态(Focus)、悬停状态(Hover)、点击状态(Active)、加载状态(Loading)、禁用状态(Disabled)。

    9.png

    一般来说,正常状态(包括加载状态)展示的是产品的主色;聚焦状态仅限桌面端,代表系统光标所在位置,一般用背景色或添加醒目的描边表示;悬停状态通常叠加20%左右的白色或添加阴影,表现按钮向用户方向靠近的效果;点击状态在正常状态的基础上叠加15%的黑色,产生被按下的感觉;禁用状态则一般用灰色或者将正常状态的透明度降低至30%左右。

    位置

    位置的选择一般对主按钮较为重要,在设计时要以引导用户、方便用户点击为目的。

    根据尼尔森团队眼动追踪研究结果发现,用户通常以F型和Z型模式浏览页面,其中Z型浏览模式较为普遍,F型浏览模式通常为新闻平台、博客等以文字为主的页面。

    由此可知页面的左上方通常为用户视觉的起点,右上方次之。我们可以将主功能按钮放置于用户最容易注意到的位置,相反较为低频的按钮则可以安排在其他位置,符合用户的阅读习惯。

    需要注意的点

    在了解了按钮的常见类型和设计细节后,已经可以设计出符合规范的按钮了。除此之外,还有以下几点需要注意:

    尽量使用常见的按钮设计

    B端产品的功能较多,意味着会有大量按钮同时出现在页面中,用户在使用时需要立即知道什么是可点击的。如果按钮因样式特殊而无法被用户第一时间看到,就是失败的按钮设计。

    不要忘记间距

    不仅按钮本身的样式很重要,其附近的间距大小也会影响用户发现和理解按钮的成本。所以留足间距才是明智的选择。

    使用合理的文案

    按钮文案需要清楚的说明其功能,减少用户操作时的困惑。有时还能通过对用户行为的预测,为其提供意想不到的惊喜效果。

    10.webp.jpg

    避免太多按钮

    正如前文提到的,按钮太多是B端产品常见的问题。满屏的按钮会让用户感到困惑,使用效率低下。我们可以尝试将同类型功能折叠为菜单按钮,或者根据重要程度以不同形式的按钮展示,尽量降低视觉的疲劳感。

    提供互动的视觉或听觉反馈

    当用户点击按钮时,给予适当的视觉或听觉反馈会极大地提升用户的使用体验,提升产品的品质感。

    总结

    以上就是关于B端按钮设计的全部分享了,不管是做 C 端产品还是 B 端产品,都是为了实现用户的需求、帮用户解决问题。刚接触B端产品的时候,最希望能把产品做的炫酷、美观,工作中慢慢地发现项目的背后思考更为重要,产出的设计成果也应该有理有据、支撑整个设计体系。

    此外,B端设计师可以把更多的精力投入到沉淀行业知识、研究产品架构、梳理交互方式和创新视觉表现上,辅助业务挖掘,从趋于相同的表象中找到产品独有的闪光点,从而切实解决问题和实现价值。

    原文地址:摹客(公众号)

    作者:XingYang