- 新印象:解构UI界面设计
- 王铎
- 627字
- 2025-02-20 15:40:30
1.7 列表页
在使用软件搜索或点击分类查找后会出现结果页面。结果页面通常会以列表的形式来体现,包括单行列表和双行列表两种,展示的内容为“图片+名称+介绍”。另外,还可以用时间轴和图库的形式来设计列表页。列表页的设计虽然简单,但却困扰着不少设计师。总体而言,设计列表页时,需要遵循这些原则:留白空间要张弛有度,且要有亲疏之分;对齐的方式要规整;粗细元素的组合要有节奏感;需要重点突出的元素的颜色要明亮;列表的层次感要分明;在用虚实方式进行结合设计时,要保证实的对象在前,虚的对象在后。
1.7.1 单行列表
大多数消费类产品的结果页面都会以单行列表的形式进行展示,左边为图,右边为文字信息、评分和价格等,这样的展示方式易于用户阅读,如图1-19所示。图片能够诱导用户进行点击,文字则用来解释商品。

图1-19 单行列表页
1.7.2 双行列表
双行列表页的表现形式更加节省空间,每个卡片的排布方式为上面是图片下面是文字,可以让页面显得更为饱满,如图1-20所示。

图1-20 双行列表页
1.7.3 时间轴
为了加强内容的前后时间关系,通常会使用时间轴的方式来设计列表页,这样的表现形式能够更好地凸显每条信息之间的关系,让用户阅读起来更有条理性,如图1-21所示。时间轴列表页的展示方式为左边是时间轴上各节点,右边是与时间节点对应的内容。

图1-21 时间轴列表页
1.7.4 图库列表
图库列表页主要出现在相册或图片编辑类App中,其中相册的图库列表页有文档和图片平铺两种显示方式。为了让分布更为均匀规整,图片通常会采用正方形的形式进行排列,如图1-22所示。

图1-22 图库列表页