美文网首页
如何使用列表展示内容及充当导航?

如何使用列表展示内容及充当导航?

作者: Eureka_Gao | 来源:发表于2018-02-01 12:04 被阅读27次

    什么是列表?

    也就是表格,表格就是由若干的行与列所构成的一种有序的组织形式。

    行存在几个常见的同义词,如记录、k-元组、n-元组、矢量;列也有几个常见的同义词,如字段、参数、特性、属性 ------ 维基百科

    为什么需要列表?

    在产品设计中,需要用列表来组织内容,有些情况下,能够作为产品的导航。

    列表的几个常见类型

    垂直列表

    垂直列表的几个常见模式有:标准模式、 图文结合式、控制模式

    垂直列表的几个常见模式

    俩个特殊模式:时间轴模式、对框框模式


    时间轴模式、对框框模式
    轮播面板(横向展示的列表形式)

    大图展示(网易云音乐的轮播面板)
    小图展示(APP Store中的首页APP推荐)


    轮播面板
    网格列表(宫格列表)

    综合横向和纵向的列表形式

    几种列表的特性及使用注意点

    垂直列表

    优势: 用户较容易理解,易找到想要的目标
    劣势: 内容不够丰富,不适合图片等展示

    其他注意点:注意列表内容详细程度和数量之间的平衡。
    比如说饿了么的订单列表就可以显示数目少(用户只关心今天的订单),但显示内容较为丰富

    轮播面板

    需要指示器,提示用户有其他内容。大图轮播用圆点指示器,小图滑动显示下一条目的边缘部分

    网格面板

    适用于集中展示大量图片

    瀑布流(网格列表变种)

    适用于展示大量图片,比如lofter和花瓣中的相关页面

    使用列表作为导航的注意点

    综合具体产品需求,根据各类型导航特点选择对应的形式

    垂直列表导航

    简单清晰、易于理解、能够帮助快速定位,常见于二级导航,例如微信中的发现页
    不利于多级之间的切换

    轮播式导航

    高大上,隐藏其余导航选项、保证用户只专注于当前目标,配合大图背景、会获得较好的体验感(沉浸感)
    适用于选项比较少的导航,因为只能切换到相邻的选项

    宫格式导航(网格列表式导航)

    扁平化、充分利用整个页面,适用于二级导航

    相关文章

      网友评论

          本文标题:如何使用列表展示内容及充当导航?

          本文链接:https://www.haomeiwen.com/subject/lqkdzxtx.html