百木园-与人分享,
就是让自己快乐。

B端设计|标签管理

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

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

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

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

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

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

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

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

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

    二、标签应用的几个场景

  • 常用于表格、列表的标签;
  • 查询模块内的分类、数据细分筛选;
  • 数据字段内的多个标记;
  • 精确表意的数据内,图标代替字段标签。
  • 三、标签场景类型

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

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

    1)列表状态标签

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

    B端设计|标签管理

    2)卡片状态标签

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

    B端设计|标签管理

    (文字处理后的内容)

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

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

    B端设计|标签管理

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

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

    B端设计|标签管理

    B端设计|标签管理

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

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

    B端设计|标签管理

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

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

    B端设计|标签管理

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

    B端设计|标签管理

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

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

    B端设计|标签管理

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

    B端设计|标签管理

    7. 多种标签混合

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

    B端设计|标签管理

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

    给作者点赞,鼓励TA抓紧创作!


    来源:http://www.woshipm.com/pd/5364643.html
    本站部分图文来源于网络,如有侵权请联系删除。

    未经允许不得转载:百木园 » B端设计|标签管理

    相关推荐

    • 暂无文章