如何设计重构纷繁复杂的列表?
中台设计经常会面临无数列表堆集,导致在页面切换时,找不到重点。那么如何保证美观易用的同时,又能让效益最大化,成本最小化呢?本文对此进行分析,希望对你有所帮助。
中台设计经常会面临无数列表堆集,导致在切换页面时,页面和页面的差异性不大,找不到重点,虽然完成了产品功能,但事实上,用户在使用时效率低下。
最近有个朋友正好和我提起,他准备推动下列表页升级。但是如果单个页面纯推,个人认为比较难,难点在于设计师的初衷在于提升页面的美观度,以此强化页面的强弱感,以提升体验。
而产品则会从成本和效益的出发考虑,如果投入的人力成本,没有带来未来可预期的效益。产品则大概率不会投入。
那么如何保证美观易用的同时,又能让效益最大化,成本最小化呢?
列表虽然信息捕获能力低,但是有它实用性,比如开发成本低,快速保证功能上线。然而如果每个页面都是列表,则页面可读性、系统易用度、体验度都会下降。
那么应该从哪些方面入手,既能节约开发成本,又能保证易用性和美观度呢?
针对列表设计多样化组件,提高复用率。
一、列表和卡片结合,从列表中筛选出有效信息,提高信息读取率
比如我们大部分列表都是复用ANT DESIGN,但是形式较为单一。可以将卡片和列表结合,比如在会员管理页面中,原本的页面是将大量信息,比如会员年龄、类别、消费等放在列表中,并没有对信息做设计,导致从列表中信息获取效率低。
此时便可以在列表上方设计卡片,将列表中有效信息提取出来,进行分组。例如90天内未活跃会员、本月生日会员、本月到期会员等,做数据概览卡片设计,这样在进入会员管理页面时,便可以有效提取信息,诊所运营人员便可以对本月生日会员设计对应诊所运营活动,对90天内未活跃会员,可进行诊所随访,离院关怀的同时又能提高复诊率。对本月到期会员,也可以及时提醒续费。
二、列表和图表结合,提高信息获取效率
例如在诊所运营活动期间,口腔诊所会举办爱牙、护士节等活动,诊所方面希望统计运营活动对新用户转化率以及营收等影响。
此时便可以将列表和图表进行结合。以时间轴排序,横向时间轴下对应的是诊所的运营活动排期,纵轴是新用户转化率,通过图表结合,就可以有效看到各个运营活动对新用户转化率的贡献。
三、将Table列表转化为卡片式列表,信息重组
在设计时,经常会发现首列是单列且较少的文字,但是其余列会有三行、四行等文字,此时用table列表便不再适用。卡片式列表在这里便是很好的应用。
例如诊所希望以家庭为单位对患者进行管理,以家庭为单位管理的同时,一方面对患者的疾病有更好的追溯,另一方面,家庭管理也能带来创意式运营活动,从而辐射更多新用户。
家庭列表如果原始的table列表,那么首列是户主,其余列是各个家庭成员,以及对应的电子病历,一列对多列查看信息的效率很低,也无法看到直观看到这个家庭带来的辐射影响(诊所对推荐用户有奖励,每个家庭也会统计推荐率)。
此时用卡片式列表,便可以清晰看到每一个家庭小单元的看诊情况,以及所带来的客流。
四、列表转化为看板页,整合有限资源
如果需要将有限的资源进行利用,那么看板页面就是不错的选择。比如手术室排期,大部分医生需要看到当前时段手术室的预约情况以及有无空闲,看板页都可以第一时间帮助医生捕捉到有效信息。
我们在设计的时候,看板的横向页面尽可能让给有限资源,比如手术室预约,则横向预约条可以是手术室,比如预约医生,横向页面尽可能是各个科室内医生,这样做是确保减少横向滚动,保证在各个浏览器下都能有不错的体验。
五、列表转化为进度表,实时查看进度
比如有些页面是审批页面,此时便可以将审批进度放在横向区域,对应各个进度表下是所有的项目。比如诊所发起运营活动前需要报备院长审批,此时便可以通过横向的“待审批”、“审批中”、“审批完成”有效获取活动的反馈。
再比如任务。患者通过小程序上传血糖指标,通过任务的形式,医生在后台收到了患者任务完成的提醒。此时便可以将任务分为待处理任务、已完成任务、逾期任务,医生便可以在任务列表页中清晰看到当前任务总览。
以上是个人在项目中的经验总结,希望能帮助到大家。
本文由 @灰研走B 原创发布于人人都是产品经理,未经许可,禁止转载
题图来自 Unsplash,基于 CC0 协议
该文观点仅代表作者本人,人人都是产品经理平台仅提供信息存储空间服务。
建议加图表,考虑下用户体验
你的星球名称搜不到呢
要是能解释的同时放些图片案例就更好,简单几张就好,虽然知道你本身是想引流到知识星球
好嘞 谢谢您的提议
这一篇读完感觉体验一般,然后看了下评论,案例放在知识星球……感觉体验比一般要再低半度
案例呢
案例拆解比较长,所以我都放在知识星球哈,如想查看更多的案例,可以移步我的知识星球“灰研走B”
案例呢