Web后台的列表页设计规范

    列表页是网页端最常见的页面类型之一，尤其是B端后台，它承接了导航页和详情页的中间页面。列表页看似简单，实际上涉及到很多规范。

网页版的列表页一般是由列表+分页+搜索组成。

下面总结一些自己在工作中遇到的列表页设计问题。

一、列表项数量

• 列表项数量不要太多，否则一屏很难展示全部，并且有可能挤压到其他项的数值。在设计的过程中，要站在用户的角度去思考用户想看到哪些字段，而不是一股脑的全部展示给用户。

• 当出现列表字段无法取舍的时候，可以在设计上做一些小心思，比如将多余的字段隐藏起来，用户可以自己决定是否要展示出来。

二、列表项的宽度

• 在实际开发过程中，开发为了省事，设置所有的列表项的宽度是一样的。如果列表项比较少，而且字段值的字符数不多，是可以这样设置的。

  
  

• 但是如果列表项比较多，而且字符数不固定，有可能超长的情况，这时候就不能设置所有的宽度都一样，而应该根据列表的具体情况进行相应的调整，才能保证列表的整体视觉效果。

  
  

• 如果列表项的字符出现较多的字符，一行展示不完，可以使用鼠标悬浮的时候用toast显示全部内容。
  

三、列表项的对齐

• 列表项默认是靠左对齐，如果列表项的比较少而且字符数也不多进行居中对齐。如果字符值比较参差不齐，只用居中对齐就会比较丑。

  
  

• 列表的标题和字段值的对齐方式要保持一致，不要一个居中一个左对齐这种奇葩方式

四、每页条数

• 默认展示N条数据，超过则分页显示。N一般是10、15、20。列表的底部最好展示每页的条数方便用户理解。

  
  

• 显示当前列表的总页码，总页码=总条数/每月条数的结果取整+1，如无余数则不+1。

五、搜索规范

搜索后进入详情页，返回列表依然保留原先筛选筛选条件。比如搜索具体时间区间的用户数量，然后查看详情，返回该页面的时候依然是这些搜索结果，不需要用户重新搜索。