2023年6月20日发(作者：)

「整理」Web端设计规范-列表样式最近在设计后台系统，关于表单样式的设计看了很多⽂章，为了⽅便后续在产品设计过程中可以更⾼效率⾼质量的进⾏设计⼯作，现结合⾃⼰在实际的设计过程中总结的⼀些常见的列表样式。1.基础型列表基础列表场景：基础型列表没有多余的线条与⾊块，纯⽂字的排版，整个页⾯⼲净，但阅读效率不佳，⽤户容易产⽣视觉混乱，使⽤场景少。2.线条型列表线型列表场景：数据之间有明显的划分，易于进⾏数据之间的对⽐，单⼀⽹格内可承载多⾏信息，阅读效率有所提升，适⽤余信息量⼤且需要展⽰数据量的场景。3.斑马型列表斑马列表场景：斑马型列表⽤⾊块区分列表，⽤于数据的平铺展⽰，但纵向占⽤空间较⼤，数据不易过多，过多时容易造成⽤户的审美疲劳，出现横向滚动条从⽽降低⽤户操作的易⽤性。4.卡⽚式列表卡⽚式列表场景：卡⽚式列表与背景⾊呈现块状，每个横向的列表更加独⽴，纵向占⽤空间⼤，不适合列表过多的系统，若纵向列表之间需排序，可考虑使⽤。5.展开式列表展开式列表场景：信息量过多时，有选择性的部分信息隐藏起来，点击后可下拉查看。以上列表不包含综合型列表。在设计中遇到的问题总结归纳⼏点：尽量避免横向内容过多，当内容过多时会产⽣横向滚动条，滚动条造成⽤户操作的不易性。信息⽆法完整显⽰造成阅读效率低，拉动滚动条寻找执⾏操作按钮，导致操作流程增加，整个产品的易⽤性降低。让表头始终呈现在屏幕内，冻结表头⽆论页⾯怎么移动表头始终属于置顶位置，⽤户通过移动滚动条将表头移出⽤户视线时，⽤户很容易迷失，⽆法判断当前列表中数据的含义。固定表头⽆论滚动条怎么移动⽤户都可直观的看到数据的含义，提升⽤户体验。若在⽆法固定表头的情况下，也可将纵向数据量固定不出现滚动条，⽤页数进⾏翻页浏览。让界⾯看起来美观，美观的界⾯⽐那些看起来不太美观的界⾯更直观，清晰、美观的列表界⾯可提升产品的可⽤性。后台系统界⾯逻辑复杂，内容繁多，容易令⽤户感到枯燥。在设计中，通过字体、icon、⾊彩等清晰展⽰业务内容，增加⽤户的愉悦感，提升⽤户体验。以上内容是关于近期表单样式设计的总结，经验有限，免不了有些浅显。总之作为ui设计师要学习的东西还很多，⽆论⾯对怎样错综复杂的项⽬，我们都要为产品体验负责，思考每个设计的细节。

2023年6月20日发(作者：)

「整理」Web端设计规范-列表样式最近在设计后台系统，关于表单样式的设计看了很多⽂章，为了⽅便后续在产品设计过程中可以更⾼效率⾼质量的进⾏设计⼯作，现结合⾃⼰在实际的设计过程中总结的⼀些常见的列表样式。1.基础型列表基础列表场景：基础型列表没有多余的线条与⾊块，纯⽂字的排版，整个页⾯⼲净，但阅读效率不佳，⽤户容易产⽣视觉混乱，使⽤场景少。2.线条型列表线型列表场景：数据之间有明显的划分，易于进⾏数据之间的对⽐，单⼀⽹格内可承载多⾏信息，阅读效率有所提升，适⽤余信息量⼤且需要展⽰数据量的场景。3.斑马型列表斑马列表场景：斑马型列表⽤⾊块区分列表，⽤于数据的平铺展⽰，但纵向占⽤空间较⼤，数据不易过多，过多时容易造成⽤户的审美疲劳，出现横向滚动条从⽽降低⽤户操作的易⽤性。4.卡⽚式列表卡⽚式列表场景：卡⽚式列表与背景⾊呈现块状，每个横向的列表更加独⽴，纵向占⽤空间⼤，不适合列表过多的系统，若纵向列表之间需排序，可考虑使⽤。5.展开式列表展开式列表场景：信息量过多时，有选择性的部分信息隐藏起来，点击后可下拉查看。以上列表不包含综合型列表。在设计中遇到的问题总结归纳⼏点：尽量避免横向内容过多，当内容过多时会产⽣横向滚动条，滚动条造成⽤户操作的不易性。信息⽆法完整显⽰造成阅读效率低，拉动滚动条寻找执⾏操作按钮，导致操作流程增加，整个产品的易⽤性降低。让表头始终呈现在屏幕内，冻结表头⽆论页⾯怎么移动表头始终属于置顶位置，⽤户通过移动滚动条将表头移出⽤户视线时，⽤户很容易迷失，⽆法判断当前列表中数据的含义。固定表头⽆论滚动条怎么移动⽤户都可直观的看到数据的含义，提升⽤户体验。若在⽆法固定表头的情况下，也可将纵向数据量固定不出现滚动条，⽤页数进⾏翻页浏览。让界⾯看起来美观，美观的界⾯⽐那些看起来不太美观的界⾯更直观，清晰、美观的列表界⾯可提升产品的可⽤性。后台系统界⾯逻辑复杂，内容繁多，容易令⽤户感到枯燥。在设计中，通过字体、icon、⾊彩等清晰展⽰业务内容，增加⽤户的愉悦感，提升⽤户体验。以上内容是关于近期表单样式设计的总结，经验有限，免不了有些浅显。总之作为ui设计师要学习的东西还很多，⽆论⾯对怎样错综复杂的项⽬，我们都要为产品体验负责，思考每个设计的细节。