如何设计一款 ToB 的 APP 界面?

发布时间:2023-01-11 16:18:44

ToB 是指面向企业的模式。它的全称是 "To Business",与另一种常见的 BtoB(Business to Business)模式不同,BtoB 指的是企业与企业之间进行商务活动。相反,我们在日常生活中经常使用的 APP 大多数都属于 ToC(To Consumer)模式,即面向消费者的模式。跟随本期设计教程中,我们将系统学习如何设计一款 ToB 的 APP 界面。

B端界面设计

1、ToB 是什么?

面对的群体

ToB 产品面向的是整个企业团队,这些企业通常拥有复杂的业务流程和强烈的个性化需求。因此,在设计 ToB 产品时,应该注重用户体验和个性化。同时,企业团队还希望 ToB 产品能够提供优秀的服务和合作能力,并满足其定制化需求。

产品形态

ToB 产品的主要目的是解决企业的各种需求,这些需求可能涉及各种行业,包括自定义的 OA 系统、ERP 系统、CRM 系统、医疗系统等等。与 ToC 产品相比,ToB 产品的功能和形态通常更为复杂,并且与日常生活的关联性较弱。

侧重点

对于 ToB 产品而言,决策权通常集中在企业管理层。管理层最终决定是否采购该产品。但是,实际使用 ToB 产品的可能是公司职员或其他特定人群。通常,要想使用 ToB 产品,需要进行培训和学习。由于 ToB 产品的采购通常会涉及投入大量的资金和员工学习成本,因此企业对 ToB 产品的更换意愿相对较低。因此,ToB 产品的核心重点在于为企业带来效益,即能够提升企业的效率、降低成本、创造收益,从而为企业创造更多的价值。

使用场景

大多数 ToB 产品使用场景都是比较简单的,用户都是在在办公场景下使用产品。

业务形态

ToB 的产品在功能上会拆分出各个部分,每一个流程对应不同的使用角色,并且对于各个角色,对应的功能都是重要的。而且,ToB 产品大多属于扁平化的功能。

2、To B 端界面设计教程

To B 端界面主要结构分析

文章:文章内容和相关的功能按钮

时间轴:时间和校对内容

板式

创建 750*1624px 的画板 (快捷键:F),创建标题「数据中心」。

可直接使用提供的模板。

文本字体都是使用「HarmonyOS Sans SC」。

功能项

文本字体,「常规、字号 28 」,填充 65% 的黑色。

绘制时间和架构功能图标,选中态颜色 #106AFF,未选中态颜色 #999999 。

文章

标题文本,「中等、字号 40、行高 60 」,填充 85% 的黑色。

次级文本,「常规、字号 24 」,填充 45% 的黑色。·正文文本,「常规、字号 32、行高 54 」,填充 65% 的黑色。

可插入图片作为配图。

底部导航

创建操作按钮作为本页面的功能项。

根据各功能点的特性,采用按钮颜色和样式的不同,来区分功能项。

蒙板

创建 750*1340px 的矩形,填充 40% 的黑色。

弹窗

创建 750*836px 的矩形,填充白色。

创建 20*20px 的圆形,添加大小为 5 的描边,填充 #106AFF。

创建 330px 的线段,填充 #106AFF,选择高级设置里选择样式中的虚线,数值为 4 。

时间轴

日期文本,「中等、字号 28 」,填充 85% 的黑色。

时间文本,「常规、字号 28 」,填充 45% 的黑色。

姓名文本,「中等、字号 24 」,填充 85% 的黑色。

修改文本,「中等、字号 24 」,填充 #666666。

创建 36*36px 的圆形,填充图片作为头像。

以上就是To B 端界面设计教程的全部内容,看完之后,可以使用即时设计,一起跟着教程自己做一个潮流插画吧!