如何设计重构纷繁复杂的列表?

8 评论 4985 浏览 5 收藏 7 分钟

中台设计经常会面临无数列表堆集,导致在页面切换时,找不到重点。那么如何保证美观易用的同时,又能让效益最大化,成本最小化呢?本文对此进行分析,希望对你有所帮助。

中台设计经常会面临无数列表堆集,导致在切换页面时,页面和页面的差异性不大,找不到重点,虽然完成了产品功能,但事实上,用户在使用时效率低下。

最近有个朋友正好和我提起,他准备推动下列表页升级。但是如果单个页面纯推,个人认为比较难,难点在于设计师的初衷在于提升页面的美观度,以此强化页面的强弱感,以提升体验。

而产品则会从成本和效益的出发考虑,如果投入的人力成本,没有带来未来可预期的效益。产品则大概率不会投入。

那么如何保证美观易用的同时,又能让效益最大化,成本最小化呢?

列表虽然信息捕获能力低,但是有它实用性,比如开发成本低,快速保证功能上线。然而如果每个页面都是列表,则页面可读性、系统易用度、体验度都会下降。

那么应该从哪些方面入手,既能节约开发成本,又能保证易用性和美观度呢?

针对列表设计多样化组件,提高复用率。

一、列表和卡片结合,从列表中筛选出有效信息,提高信息读取率

比如我们大部分列表都是复用ANT DESIGN,但是形式较为单一。可以将卡片和列表结合,比如在会员管理页面中,原本的页面是将大量信息,比如会员年龄、类别、消费等放在列表中,并没有对信息做设计,导致从列表中信息获取效率低。

此时便可以在列表上方设计卡片,将列表中有效信息提取出来,进行分组。例如90天内未活跃会员、本月生日会员、本月到期会员等,做数据概览卡片设计,这样在进入会员管理页面时,便可以有效提取信息,诊所运营人员便可以对本月生日会员设计对应诊所运营活动,对90天内未活跃会员,可进行诊所随访,离院关怀的同时又能提高复诊率。对本月到期会员,也可以及时提醒续费。

二、列表和图表结合,提高信息获取效率

例如在诊所运营活动期间,口腔诊所会举办爱牙、护士节等活动,诊所方面希望统计运营活动对新用户转化率以及营收等影响。

此时便可以将列表和图表进行结合。以时间轴排序,横向时间轴下对应的是诊所的运营活动排期,纵轴是新用户转化率,通过图表结合,就可以有效看到各个运营活动对新用户转化率的贡献。

三、将Table列表转化为卡片式列表,信息重组

在设计时,经常会发现首列是单列且较少的文字,但是其余列会有三行、四行等文字,此时用table列表便不再适用。卡片式列表在这里便是很好的应用。

例如诊所希望以家庭为单位对患者进行管理,以家庭为单位管理的同时,一方面对患者的疾病有更好的追溯,另一方面,家庭管理也能带来创意式运营活动,从而辐射更多新用户。

家庭列表如果原始的table列表,那么首列是户主,其余列是各个家庭成员,以及对应的电子病历,一列对多列查看信息的效率很低,也无法看到直观看到这个家庭带来的辐射影响(诊所对推荐用户有奖励,每个家庭也会统计推荐率)。

此时用卡片式列表,便可以清晰看到每一个家庭小单元的看诊情况,以及所带来的客流。

四、列表转化为看板页,整合有限资源

如果需要将有限的资源进行利用,那么看板页面就是不错的选择。比如手术室排期,大部分医生需要看到当前时段手术室的预约情况以及有无空闲,看板页都可以第一时间帮助医生捕捉到有效信息。

我们在设计的时候,看板的横向页面尽可能让给有限资源,比如手术室预约,则横向预约条可以是手术室,比如预约医生,横向页面尽可能是各个科室内医生,这样做是确保减少横向滚动,保证在各个浏览器下都能有不错的体验。

五、列表转化为进度表,实时查看进度

比如有些页面是审批页面,此时便可以将审批进度放在横向区域,对应各个进度表下是所有的项目。比如诊所发起运营活动前需要报备院长审批,此时便可以通过横向的“待审批”、“审批中”、“审批完成”有效获取活动的反馈。

再比如任务。患者通过小程序上传血糖指标,通过任务的形式,医生在后台收到了患者任务完成的提醒。此时便可以将任务分为待处理任务、已完成任务、逾期任务,医生便可以在任务列表页中清晰看到当前任务总览。

以上是个人在项目中的经验总结,希望能帮助到大家。

本文由 @灰研走B 原创发布于人人都是产品经理,未经许可,禁止转载

题图来自 Unsplash,基于 CC0 协议

该文观点仅代表作者本人,人人都是产品经理平台仅提供信息存储空间服务。

更多精彩内容,请关注人人都是产品经理微信公众号或下载App
海报
评论
评论请登录
  1. 建议加图表,考虑下用户体验

    来自广东 回复
  2. 你的星球名称搜不到呢

    来自上海 回复
  3. 要是能解释的同时放些图片案例就更好,简单几张就好,虽然知道你本身是想引流到知识星球

    来自北京 回复
    1. 好嘞 谢谢您的提议

      来自浙江 回复
  4. 这一篇读完感觉体验一般,然后看了下评论,案例放在知识星球……感觉体验比一般要再低半度

    来自江苏 回复
  5. 案例呢

    来自新疆 回复
    1. 案例拆解比较长,所以我都放在知识星球哈,如想查看更多的案例,可以移步我的知识星球“灰研走B”

      来自浙江 回复
  6. 案例呢

    来自新疆 回复