专栏首页无原型不设计B端按钮设计指南

B端按钮设计指南

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

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

什么是B端产品?

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

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

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

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

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

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

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

按钮类型

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

主按钮(Primary Button)

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

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

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

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

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

图标按钮(Icon Button)

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

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

菜单按钮(Menu Button)

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

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

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

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

  • 行为召唤(Call To action,CTA)按钮的目的是通过设计诱导或激励用户点击,从而实现产品的诉求。此类按钮的设计在颜色、形状、样式上都需要突出,让人拥有点击的欲望。行为召唤按钮一般不会出现在B端产品的内部,但在官网或活动页面被广泛运用。
  • 悬浮按钮是Android规范中的一个控件,随着各平台规范的相互融合借鉴,iOS甚至网页端也经常回看到各种各样的悬浮按钮。在B端项目中,悬浮按钮有时会承担主按钮的功能,如创建、搜索等功能;同时也会作为辅助功能,如帮助或返回顶部等。
  • 危险按钮可以是主按钮之外的任意按钮类型,用来警告用户审慎考虑,且点击后通常需要二次确认,避免误操作。
  • 开关(Switch)按钮是两种相互对立状态间的切换,多用于功能的开启和关闭,一般操作后会即刻生效,多用于设置界面中。

设计细节

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

颜色

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

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

形状

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

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

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

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

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

状态

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

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

位置

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

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

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

需要注意的点

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

尽量使用常见的按钮设计

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

不要忘记间距

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

使用合理的文案

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

避免太多按钮

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

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

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

总结

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

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

文末福利

最后给大家赠送摹客专业版激活码【wenten】

领取即可全方位体验这款强大的高保真设计利器,同时支持在线交付Sketch/PS/XD/Axure/Figma设计稿,还可以享受7*12小时在线客服支持

点击兑换激活码 或 复制链接领取 https://www.mockplus.cn/get-idoc?hmsr=wenten

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 【To B管理端】图表设计指南

    前言 图表可形象展示统计数据的特征(如分类、趋势等),以“可视化”方式直观传达信息,帮助用户抓住重点。在管理端后台系统中,往往使用图表来呈现监控数据,便于运维...

    腾讯大讲堂
  • 交互设计控件之按钮设计

    一.主按钮和次按钮 ? 很多按钮是成对出现的,比如“确定”和“取消”。一般情况下,按钮会有主次之分,一个按钮是我们期望用户去做的,另一个按钮是在特殊情况下才去...

    前朝楚水
  • HTTP API 设计指南HTTP API 设计指南

    这篇指南介绍描述了 HTTP+JSON API 的一种设计模式,最初摘录整理自 Heroku 平台的 API 设计指引 Heroku 平台 API 指引。

    Originalee
  • IOS设计指南

    以前整理过一份关于关于《IOS应用提交时所需要的ICON》,之后IPhone 6/Plus出来,又多了二种尺寸,近期看到国外的一家网站上整理出比较全的尺寸,以及...

    meteoric
  • 单选按钮的用户体验设计

    单选按钮是表单系统的一个基本元素。它们被使用在当存在互斥的两个或多个选项列表而用户必须选择其中一个时。换句话说,点选某个尚未选中的单选按钮,之前的选择就会恢复成...

    前朝楚水
  • 为B端用户设计

    ? 一、为什么做ToB设计很难 1. 设计师不是目标用户 B端产品一般都是面向专业客户的,有着较高的业务门槛。以腾讯云为例,使用者大多是技术运维,设计师既不...

    腾讯大讲堂
  • RESTful API设计指南

    在RESTful架构中,每个网址代表一种资源(resource),所以网址中不能有动词,只能有名词,而且所用的名词往往与数据库的表格名对应。一般来说,数据库中的...

    lyb-geek
  • RESTful API 设计指南

    简介 REST(英文:Representational State Transfer,简称REST)描述了一个架构样式的网络系统,比如 web 应用程序。它首次...

    zhang_derek
  • RESTful API 设计指南

    网络应用程序,分为前端和后端两个部分。当前的发展趋势,就是前端设备层出不穷(手机、平板、桌面电脑、其他专用设备......)。 因此,必须有一种统一的机制,方便...

    ruanyf

扫码关注云+社区

领取腾讯云代金券