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

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

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

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

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

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

一款产品无到有，产品经理需要做些什么？

在一个产品从无到有的过程中，要做好产品经理这个角色实在是不容易，除了大家都知道的写需求、写需求、写需求，要做的事多着呢。产品经理不是你眼中的只会找你麻烦，提要求..

查看详情 >

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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