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

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

提交需求

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

0/20
0/200

设计大赛

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

提交完成
感谢您对UI中国的支持和信赖!
如何对一个B端产品小功能设计改版?
0.0°
2020-10-18 原创文章 经验/观点 举报 1337 6 3 10

在B端产品设计中,会存在众多各种各样的列表,这些列表可能承载着巨大的信息量,有的甚至有几十列和上千条数据。

而一屏能显示的内容非常有限,怎么让用户快速地查看需要的信息呢?这个时候“列表设置”功能就显得尤为重要了,今天的分享也正是对这一功能的设计改版。接下来我将通过六个部分来阐述整个改版过程。



复杂的B端列表



一:明确需求与改版目标

在做设计之前,首先一定要明确需求,吃透需求,还原用户的真实使用场景。我将列表设置的需求总结为两点:1.查看需要的信息,隐藏不需要的信息 2.调整表头(列标题)顺序以方便查看。

下图是我们系统现有的列表设置功能,这两种设计都是通过勾选/取消勾选的方式来显示/隐藏表头,第一种不支持调整表头顺序,第二种可以通过拖动右边的“三”来调整表头顺序,但当表头数量多的时候,用户想把靠后的表头前移操作成本非常大。


系统现有的列表设置



二:竞品分析

在明确了需求后,我对这一功能进行了竞品分析。B端产品不像C端产品那样竞品遍地都是,且可以随意体验,所以,平时多体验、多记录就能帮我们节省大量的时间。在体验了几个竞品的列表设置功能后,我还体验了几个频道定制功能的交互体验,包括PC端和移动端,因为频道定制功能与列表设置有一定的相似性。


上图是目前B端产品列表设置最常见的设置方法,与前面说的第二种方式类似,通过勾选的方式来显示,拖动整行调整顺序。


这种是体验比较好的一种方式,每个表头以标签的样式展示,点击标签显示或隐藏表头,拖动标签调整顺序。


腾讯新闻网页端-导航设置


这是腾讯新闻网页端的频道定制功能,也是用标签的样式展示所有频道,已添加的导航鼠标移入时会显示删除图标,同时可以向下拖动移除;未添加的导航可以向“我的导航”部分拖动来添加,直接点击也会视为添加并跳转到该频道主页。



腾讯体育-频道设置


今日头条-频道设置

在移动端的频道定制,如腾讯体育和今日头条,点击右上角的 “+” 即可添加频道,而要移除频道则需先点击“编辑”或长按标签进入编辑状态,他们希望用户更多的去添加频道。同时对于我的频道可通过拖动调整顺序。


三:初步方案

通过对这些竞品的优劣势总结,我初步的两个方案都选定了以标签的样式来排列表头。虽然列表的样式在调整顺序时前后关系更为直观,但用标签的样式占用空间较少,用户在一般在一屏便能看到所有的表头,且在需要大范围调整顺序的场景下操作也更为便捷。同时我对系统现有的表头字数进行了调研,发现表头字数绝大多数都在5个字以内,在字数不多的时候展示的视觉效果也是没问题的。


方案一

方案一:

表头按默认顺序排列,勾选即显示,拖动调整顺序。

优势:通过勾选添加(显示)与不显示较为直观,操作简单易于理解;

劣势:选中状态下的表头视觉上太重,当有大量表头为选  中状态时视觉噪点过多;用户的视觉焦点会更多的在蓝色的 “ √ ” 上而不是表头名称;



方案二

方案二:

虚线框内的表头为显示的表头,点击可移除,拖动可调整顺序,拖动到下方视为移除;未显示的表头显示在下方,点击可添加为已显示,拖动到虚线框内也视为添加。


优势:已显示和未显示的表头分开,便于查看,且噪点较少;当用户添加的同时需要调整它的顺序时(常见场景),可减少用户操作;

劣势:操作不够直观,学习成本较大,开发成本较大;


经过综合考虑和讨论后,最终选择了在方案二的基础上进行进一步优化。因为对于方案一,显示和未显示的表头未进行位置上的区分,如果减轻选中表头的视觉样式,那么用户分辨表头状态就会变得困难,难以寻找视觉的平衡点。


四:方案优化

方案二优化的主要目标是在保证体验的情况下减少用户的学习成本,尽可能直观。那么,如何让用户更好地理解界面呢?最简单的方法就是通过文字来说明。


方案优化

在这次优化中,我将已显示表头和未显示表头通过标题隔开,让用户清晰地知道表头的状态,同时在已显示表头标签上增加了删除按钮,点击 “ × ” 即将表头移动到未显示区域,让用户快速明白如何操作。

但是,优化后的方案对于向下拖动移除、向上拖动显示的交互仍然未给予足够的引导,而再通过增加文字进行引导就会让页面内容过多,视觉上会大大减分,这种情况下又该怎样去引导用户呢?带着对这个问题的思考,我再一次进行了优化,最后得出的方案如下图:


最终方案

在最终方案中,我将已显示表头和未显示表头用分割线分开,删除了“未显示表头”这一不太必要的字段,并用“拖动到上方显示,拖动到下方不显示”来引导用户进行操作,同时用户也能通过 “ × ” 和 “ + ” 图标进行快速移除或添加。


五:设计输出

在完成了主要部分的设计后,还需要考虑一些极端情况及其他的特殊问题。例如已显示表头区域的最小高度是多少?这个弹窗的最大高度是多少?内容超出最大高度后如何显示?更改的设置数据是保存在本地浏览器、个人账号还是所有账号?这些问题在交付给开发的设计文档里都需要表示清楚。


超出最大高度后的显示


六:总结

本文是我的一次设计复盘,讲述了 “列表设置”这一功能从明确需求、竞品分析、初步方案设计、方案优化到最后输出方案的整个设计过程,以用户体验为基础,从交互、视觉等多方面寻找最优解。如果这篇文章对你有些许的帮助或者带来了一些启发,不要忘了点击下方的“赞”或者“在看”支持哦!


Powered by Froala Editor

更新:2020-10-18

收藏

6人已收藏

UIYA体验设计

WWW.UIYA.CN

  • 3

    作品

  • 89

    粉丝

  • 6

    关注

  • 【新拟态UI教程】打造超炫酷新拟态风格界面
  • 创作灵感告急!看完这些作品真的大开眼界

    猜你喜欢

      2020-10-18 原创文章 经验/观点 举报 1337 6 3 10

      如何对一个B端产品小功能设计改版?

      0.0°

      你确定要举报如何对一个B端产品小功能设计改版?

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

      0/200

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

      点击上传附件

      对谁可见:

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

      您确认要推荐?

      该作品发布时间:2020年10月17日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      3
      6
      10

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

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

      登录

      手机号

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

      登录
      第三方账号登录