B端设计|标签管理(b端界面设计)

编辑导语:标签是什么?标签可以帮助我们对某类内容进行标识或定义,然而随着我们的业务场景越来越复杂,“标签”也需要进行“迭代”,以适应更多样化的实际场景。具体应该如何做标签管理,不如来看看作者基于实际业务问题上的总结。

B端设计|标签管理(b端界面设计)

随着管理平台的业务越来越复杂,场景的范围不断扩大,设计的细节内容也会不断放大,适应需求,应用到场景中,从单一的属性走向批量。走向批量那必然会暴露出一些问题。

这一篇目的是说明在复杂业务下的多种场景中,即使一个标签,也会被放大来看。且不再对设计细节具体设计展示,旨在提供一种方式。

此项整理是因为和产品的讨论,产品说遇到一个问题,关于业务复杂后标签管理问题。

百度百科对“标签”的定义是用来标志产品目标和分类或内容,便于查找和定位目标的工具,等更详细的表述。以个人在工作中的看法,标签就是对数据信息的分类标记,也会附带部分功能,比如对标签的删除。

一、在项目中发现了几种现象

  1. 结果数据表格中有多个不同的数据字段类型标签区分不明显;
  2. 标签样式不能满足需求更新后的更多复杂场景。

问题

标签需要制作区分不同场景的标签样式,以及多种类型标签同时出现。

简单来说就是对多场景中标签视觉样式进行定义,避免交叉场景中出现视觉干扰问题。

为了区分不同场景下应用的标签,对标签也需要进行分类设计,同时不同标签也会在某以场景下交叉出现,此时需要对标签进行不同设计。

二、标签应用的几个场景

  1. 常用于表格、列表的标签;
  2. 查询模块内的分类、数据细分筛选;
  3. 数据字段内的多个标记;
  4. 精确表意的数据内,图标代替字段标签。

三、标签场景类型

1. 状态标签:表格、列表

管理系统里最常用的标签类型。

1)列表状态标签

一般表述为当前数据相关的业务流转到一个阶段的标记。

B端设计|标签管理(b端界面设计)

2)卡片状态标签

在视觉表现上与列表状态区分,但所表达意思是同样的。根据数据内容以及功能要求,对布局的调整。

B端设计|标签管理(b端界面设计)

(文字处理后的内容)

2. 选择标签:查询模块、细分筛选

常用于查询筛选功能区,从大数据里查询需要的数据,需要精细筛选,精细筛选一种是搜索,另一种是关键字筛选,同电商平台那种。

B端设计|标签管理(b端界面设计)

3. 分类头部标记标签:数据结果(段落式、模板式)

数据内容的要求,没法像列表展示,所以段落式的表现形式,标记标签放置段首。

B端设计|标签管理(b端界面设计)B端设计|标签管理(b端界面设计)

4. 数据类标签:数据归类

这类标签出现的相对来说比较少,附带操作功能了。以下图为例,简单来说是将术语类归类到某个实体下。

B端设计|标签管理(b端界面设计)

5. 字段标记标签:多个分段数据信息标记及优先级

存在数据字段内的标签标记内容,此类字段最长长度有上限,所以在字段内允许显示。

B端设计|标签管理(b端界面设计)

亦如下图多种标签交叉显示,字段标签更好地显示数据的重点关键字。不同的字段标记样式,也是为了数据展示的优先级进行分层。

B端设计|标签管理(b端界面设计)

6. 图标标签:意符表意,图形化的可快速感知的标记

图标代替文字,一是在视觉上更容易识别区分,表意准确且直接;在空间利用上,减少空间占据。

B端设计|标签管理(b端界面设计)

上图中环形图比较准确直观的表达男女占比情况;下图中的“是”“否”用图标代替,并且用颜色作为区分,更突出。

B端设计|标签管理(b端界面设计)

7. 多种标签混合

图标、状态混合的标签在同一个数据场景里出现。

最后说一丢丢,勿以末小而不为,细枝末节也会影响使用。

本文由 @Ychen(啊呜計) 原创发布于人人都是产品经理,未经许可,禁止转载

题图来自Unsplash,基于 CC0 协议

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

(0)
上一篇 2022年6月16日 上午10:29
下一篇 2022年6月16日 上午10:31

相关推荐