APP列表导航布局设计分析

一. 什么是列表导航

二. 列表导航的入口

a.从核心功能区进入

一般会放到核心功能区的最后一个功能里，展开之后是列表导航页。如下图：

缺点：当功能特别多的时候，全部分类可能会被翻页隐藏掉，从而被用户忽视。当页面用户沉浸页面时，不方便用户即时使用。

b.从底部导航栏进入

一般会将产品的分类放置于底部导航栏里，展开之后是列表导航，如下图：

c.从列表进入

一般会从首页的产品列表页进入产品筛选的列表导航页。如下图：

d.多层级点击进入

一般会从首页的某个分支功能进入，之后再从分支功能在进入产品分类的列表导航页。如下图：

三.列表导航的常见布局

a.页面左侧布局

1、文字列表

一般以文字的形式列表如下图：

一般以图/标签+文字的形式呈现，如下图：

b.页面右侧布局

1.列表布局

列表布局的特点是自上而下以列表的形式排列，如下图：

缺点：一排只能呈现一个内容，空间利用率较低。

呈宫格排列，一般一排以三个为佳，不宜过多，如下图：

缺点：内容过多时会引起眼花缭乱视觉疲劳，文字信息过多理解成本提高。

宫格排列，图文结合，一般以三个一排为佳，如下图：

缺点：适用范围小，不是所有的产品都适合用图文呈现。

布局形式不只是由单一的一种形式来呈现，而是多种方式组合呈现，页面布局可能由BANNER+核心功能区+加筛选区+其它功能推荐组成，在某些APP的设计上已经趋同于首页，功能已是越来越强大。如下图：

缺点：眼花缭乱，选择困难。

四. 总结

2、注意列表导航的入口设计，尽量避免用户在想找的时候反而找不到的情况出现，应设计的清晰、有层次且方便快捷。

3、注意筛选列表的布局样式，随着列表筛选功能越来越强大，列表筛选的样式也越来越丰富。有统一的样式，也有组合的样式。统一的样式更为规整、整洁让用户可以根据分类的目录快速找到自己的目标。而组合样式则有效的利用产品空间推出推荐功能，相当于另一个首页。这样设计既不影响用户查找分类又有利于帮助产品曝光。