恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
以字段映射为例,带你了解B端页面该如何设计!
83.7°
2022-10-20 原创文章 经验/观点 举报 24689 52 190 0

做B端的同学,在工作中常会遇到这样几个问题:

不知道如何分析需求,原型怎么画就怎么设计

评审的时候说不出为什么这样设计

想优化产品,但是没思路

拿到产品原型,不知如何下手

设计稿总是改来改去

 

该如何提升呢?

 

这篇文章我将用实际的案例和大家分享,如何去解决这些问题。问题解决之前,我们先了解为什么会出现这些问题,主要有三个原因:

 

1、对业务不了解

2、对需求不清晰

3、B端设计经验少

 

下面我以B端数据平台中常见的字段映射为例,和大家分享如何快速了解业务;如何进行需求梳理;如何进行方案设计。 


第一,如何快速了解业务


调研在设计工作流程中是重要的一环,他很大程度的决定了我们设计的可用性、易用性、客户满意度等,但是对于一般公司来说,并没有专门的UX岗、调研人员,这些工作基本都需要UE/UI的同学来做。

然而,现在很多团队都采用敏捷的开发方式,一般2周就需要迭代一次,因此,界面设计一般会前置在需求设计阶段,并且要求在需求评审时,必须交互一定量的设计稿,以供技术开发。

因此这就要求设计师必须能在短时间设计出一个可用性、易用性、客户满意度较好的设计方案。这就导致一些设计师没有太多时间思考,拿着原型就直接设计,久而久之就习惯了这种舒适圈。

如何在短时间内做出一个较好的设计方案呢?下面我以字段映射为例,和大家详细分享我的分析流程。


1、提前和PM了解下个迭代需要

 

建议在PM原型阶段就可以询问下个迭代要做什么,利用空余时间提前了解业务,快速的体验下相关竞品,实在体验不了的产品,就去查看下他的产品文档,视频介绍等,一些大平台在B站一般都有相关的讲解,也可以去看看,帮助理解。

具体怎么找资料,这里我就不献丑了,和大家分享下我收集了哪些资料:一些竞品的截图和语雀整理的《阿里云、AWS数据同步对比》。

 

 

以上这些内容看着多,由于针对性比较强,只花了三个晚上就收集好了,资料我放在文末,大家有需求可以自取。


2、对竞品进行分析


体验完竞品后,我大概了解什么是字段映射,为什么要做字段映射,各竞品关于数据同步、字段映射的设计流程和方案,完整的流程可直接看产品文档。

通过了解的深入,我发现字段映射可以抽象为设计模式中的一对一匹配,针对一对一匹配我们很自然想到连线法、拖拽法,但是他们显然都有很明显的缺点。 

连线法:当连线过多,会变得很乱,同时数据量大时,如果要从第一个连接最后一个,交互就会很难操作。


拖拽法:也可叫拖拽交换法,他的操作难度,大家可以看下面一个小学教具——汉诺塔。目标是将左边柱子上的圆盘,移动到右边柱子上,要求只能一个一个的移动,同时要求大的不能压小的,中间的柱子可以借用,其难度大家来感受下~

 

有没有更好的解决方案呢?于是找到了Hozin关于《一对一匹配方案》的详细讲解,主要包括:连线法、拖拽法、预设匹配。

什么是预设匹配,Hozin说了几种交互方式,这里我们选择一列固定另外一列选择的方式,如果冲突就单独列出冲突列表。

 

相比连线法和拖拽交换法,该方案大大降低了连接的成本。确定采用预设匹配的方案后,我们继续结合竞品来分析。分析内容见上篇文章《【B端】字段映射如计?别被大厂方案禁锢了》大家可以参考。

最后将分析结果和PM、技术讨论,确定该方式比连线方式合适,最后采用了预设匹配的方案。 


第二、如何进行需求梳理


需求出来后,就需要对产品的具体需求进行梳理,以确定该方案是否易用,拓展性如何。下面继续用案例和大家详细讲解。


字段映射原始需求:


新建同步任务界面中,选择数据来源和数据去向后,指定源表和目标表的字段映射关系,配置好后,任务将根据映射关系,将源表字段写入目标表对应的字段中(简单来说就是将业务数据库中的表,同步或采集云端数据库中的表来,形成元数据,便于数据的管理)。


功能说明:

1、支持同名映射、同行映射、清除映射

2、当源表字段类型和目标表类型不一致时,暂时以目标表字段为准

3、支持添加常量

脱敏后的虚拟需求

 

以上需求看上去很简单,但是我们之前做了竞品分析,就知道这个里面有很多问题原型没有交代清楚,比如: 

1、源表字段排列顺序和目标表一致吗?

2、默认是否保留原表字段顺序?

3、默认是否直接将同名进行匹配

4、字段量大概有多少?

5、当源表字段数量大于目标表时,多余字段如何处理?

6、当源表字段数量少于目标表时,目标中同步为null,还是不写入数据?

7、必填校验:有连接才能提交吗,未连接是否能提交?

8、源表字段类型和目标表字段类型不一致时,是否能提交?

9、源表字段名和目标表字段名不一致时,是否能提交?

10、数据都是系统带出吗?可编辑吗?


对于以上疑问,及时和PM继续讨论直到需求清晰,通过讨论,最后将需求落实如下:

1、支持同名映射、同行映射、清除映射,支持添加常量

2、源表字段排列顺序和目标表可能一致,可能不一致,业务要求保留原字段顺序。

3、默认可不进行连接

4、字段数量不定

5、不管源表字段数量大于还是少于目标表,多余字段都不映射

6、必填校验;排重校验

7、字段类型不一致时,可提交,技术直接转换类型

8、字段名可以不一致

9、字段不可编辑,仅添加的常量可编辑

10、点击添加常量,可输入赋值内容、字段类型、描述

11、点击同名映射,可以根据名称建立相应的映射关系

12、点击清除全部,可清除全部的映射关系 


第三、如何进行方案设计


需求确定好后,就可以进行方案设计了,在需求梳理阶段我们已经确定了采用预设匹配方案,但是具体该方案能否覆盖所有的交互场景,还未全部印证,因此PM让我先尝试,实在不行就用连线方案保底。

因此我快速做了一个demo草图进行验证,确定了预设匹配的方案,能够覆盖所有的交互,同时拓展性也较好,解决了连线乱,拖拽不方便的问题,同时重新匹配的操作也较为简单,如下: 

PS:大家看到中间的连线是一根假线,没有任何功能,目的是为了让用户快速的知道他们的关系。

拿着demo和PM、技术讨论后,我们都觉得没问题后,接下来就进入简单的画图阶段,风格直接继承平台整体风格即可,效果根据界面实际情况调整即可,首先画出整体操作流程(该案例以MySql数据库同步为例,其他的数据库类型不在本文复盘范围):

 

基础流程:将业务表中的表数据,直接同步到云端对应的数据表中


1、默认状态:

1)保留源表、目标表原始字段展现顺序

2) 以源表字段为基准展示对应行

 

2、点击同名映射:

1)点击同名映射,系统自动以左侧为基准,将同名字段选中

2)并且将同名匹配字段前置,未匹配的字段后置

 

3、选择映射字段:

1)继续选择未匹配的字段

2)下拉框不做联动,保留目标表原始字段顺序,可重复选择

3)选择后自动带出字段类型和描述

4)点击清除映射,批量清除映射关系;

4)hover到下拉框可清空

 

4、展示效果:

1)实时对字段进行重复校验(用户可直接选择匹配,对于重复的字段,操作完后在重新选择即可,大大减少了匹配难度)

 

5、新增常量:

1)点击新增常量,用户可自动设置常量字段名、类型、描述,常量支持删除

 

特殊情况:


1、当源表字段多于目标表字段如何处理? 

1)源表字段全部展现,以源表字段为基础,未选择字段不同步

 

2、当源表字段少于目标字段如何处理?

1)源表字段全部展现,以源表字段为基础,仅对应同步6个字段,目标表中未连接字段为null

 

3、如何适配?

1)当数据量大时,列表最多展现10条数据,多余部分滚动展现(适配大家根据实际情况考虑即可)

 

4、完成交互细节,制作交互说明文档

1)界面完成后,在整体检查看还有什么交互细节需要设计,将其制作出来,比如各种hover状态,确认状态等。

2)将上述我们考虑的交互,整理到一个设计文档中,形成交互说明,便于技术查看,减少沟通成本。

 

PS:如果你离技术比较近,直接口诉即可,我一般时间不足时,直接和技术口述,一些小的细节会做一个交互说明。


第四、划重点


本篇文章以B端数据平台中常见的字段映射为例,和大家分享如何快速了解业务;如何进行需求梳理;如何进行方案设计。

 

1、如何快速了解业务?

1)提前和PM了解下个迭代需要

2)对竞品截图进行分析

 

2、如何进行需求梳理?

1)和PM沟通,直至需求清晰在做设计

2)考虑可能的设计方案,和PM讨论,前期尽量确定好设计方案,以及保底方案

 

3、如何进行方案设计?

1)根据确定方案,快速产出demo,验证该方案是否能覆盖所有场景

2)方案设计时,尽量把交互状态都考虑完善,形成交互说明

 

关注海盐社公众号回复数据平台竞品,免费获取竞品的截图和语雀整理的《阿里云、AWS数据同步对比》

 

资料参考:

一对一匹配解题思路

https://mp.weixin.qq.com/s/ad7uot6DHFXRt3Ug9FGYsQ

大数据开发治理平台DataWorks

https://help.aliyun.com/document_detail/137743.html


Powered by Froala Editor

微信公众号:设计早8点

更新:2022-10-20

收藏

52人已收藏

风筝KK

微信公众号:设计早8点

  • 39

    作品

  • 5367

    粉丝

  • 59

    关注

  • 【B端】字段映射如何设计?别被大厂方案禁锢了
  • 小团队有必要建立完善的设计体系吗?
  • 如何提升B端界面的精致度,做到这两点就够了!
  • 如何提高B端表单操作效率,这里有7个技巧!
相关标签

    猜你喜欢

      2022-10-20 原创文章 经验/观点 举报 24689 52 190 0

      以字段映射为例,带你了解B端页面该如何设计!

      83.7°

      你确定要举报以字段映射为例,带你了解B端页面该如何设计!

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2022年10月20日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      190
      52
      0

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录