App列表设计6要素

应用软件的列表很难设计，因为它不是简单的美工问题，而是复杂的业务布局。我们从超兔App列表的优化设计过程，总结出App列表设计的6要素：

●方块化（框架对齐）

对齐是设计的基本原则之一。在列表设计中，文字、按钮、图片等成组元素的对齐，让人在视觉上有种安稳感。除了常规的元素需要对齐外，布局也需要满足这一点。骨架屏展示页面的大致结构，可以明显看出列表框架有没有做到对齐。选品、订单明细的布局，使用框架的对齐，可以明显提升内容的整体感。

但是，我们发现用户上传产品图后，还是会出现图片无法对齐的情况。这其实是白背景导致（如图1所示）。

有2种解决方法：1.产品图尽量不使用白背景；2.如果用户一定要上传白色背景的图片，通过加上一个边框，形成方块结构，也能做到对齐。（如图2所示）

●标签化

时下比较火的淘宝、京东、美团等App，列表中使用了大量的标签。这些标签的设计，对于业务侧用户的使用场景挖掘，找到符合用户预期的机会点有重大意义。

标签在商务当中，重点作用于表现状态和一些核心内容，根据属性做划分可以综合为5类：产品属性类；优惠类；宝贝所属大类；营销场景类；榜单类。在超兔列表中，针对产品属性做了标签化的设计，例如，产品的【SKU】、【批次】、【产品编号】【单位】等字段，标签内容简短清晰，信息更加聚焦，更具识别性。（如图3所示）

●线性分割法

App列表显示的局限性，导致设计中需要不断解决：怎么把纷乱的数据清晰化。方块化、标签化之后，还要用到线性分割法。在excel表格、网页中，有足够的版面撑起字段名、字段值。而在手机端，如果将数据以同样的方式呈现，只会非常凌乱。所以要实现在没有字段名的情况下，用户只看数据，也有一个清晰的感知。

当信息条目复杂度较低时，使用留白分割，视觉上也能很清爽。超兔列表中，【品名】【型号】字段之间就使用的空格。不过，随着产品业务数据复杂度的加深，留白分割效果不明显，只有引入线性分割，信息层次才会更清晰且屏效高。超兔列表中，产品的【SKU】【批次】【产品编号】字段之间，以及【明细自定义】字段之间，均使用竖向分割线做区分。（如图4所示）

●颜色

色彩可以给人很强的视觉冲击。规范统一的色彩搭配，可以提高产品视觉的规范性和一致性。超兔列表以中性色（黑、白、灰）为主，应用到文字、背景、边框、分割等场景中。颜色的克制使用，呈现给用户的是更干净的列表，有利于信息的传递。

另外，不同的颜色带给人不同的情绪，【明细折扣】使用红色，会传递给用户更积极的情绪；在整个页面中也更突出。

●动态数据的视觉兼容性

平面设计中多采用“空间留白”，丰富的文字和图形信息保留足够的呼吸空间，可以增加视觉上的舒适感。App列表设计的难点在于：数据量的动态、不固定。有的字段数据很多，有的字段数据很少，甚至没有。

比如说，超兔有的客户不会用到产品的自定义功能，那么明细自定义字段一整块数据都不会显示。这就需要解决，当横向分割线下面没有数据时，如何将【未交付数量】字段做呈现？超兔订单明细列表，对部分字段与完整字段的显示效果都做了设计。

●业务相似性归集

如何呈现丰富且清晰的数据？通过业务的相似性归集达成一致性，可以帮助用户快速识别数据之间的关联性，降低用户的学习成本。超兔列表根据数据的重要程度做业务归集，自上而下划分出6个区域：

①　【品名】【型号】是用户确定产品的关键，使用大号黑色字体，最醒目；

②　【SKU】【批次】【产品编号】体现产品细节，使用灰色、小一号字体；

③　【订单明细备注】字段内容使用灰色边框；

④　【单价】【税金】【明细金额】【订单明细数量】等关键数值，也是醒目的大号黑色字体；【明细折扣】特别使用红色；

⑤　【产品明细自定义】的数据，被横向分割线单独区分开来。

⑥　【未交付数量】使用灰色小字体。（如图5所示）