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

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

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

什么是列表?

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

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

为什么需要列表?

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

列表的几个常见类型

垂直列表

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

垂直列表的几个常见模式

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


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

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


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

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

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

垂直列表

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

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

轮播面板

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

网格面板

适用于集中展示大量图片

瀑布流(网格列表变种)

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

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

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

垂直列表导航

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

轮播式导航

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

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

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

相关文章

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

    什么是列表? 也就是表格,表格就是由若干的行与列所构成的一种有序的组织形式。 行存在几个常见的同义词,如记录、k-...

  • 移动导航的基本模式(下)

    6.列表式导航 列表导航是手机和网页端十分常见的导航模式,主要用于展示文字信息,使用列表式导航的页面都十分干净,内...

  • task7

    问题1: 3种列表及嵌套无序列表一般用于导航菜单等,使用范围最广。有序列表用于排序 问题2:如何去除表前面的点或者...

  • Flutter 数据绑定, list刷新加载, 加载webVie

    前言 上篇文章介绍了展示列表的构建. 片尾预告了这篇文章的内容, 主要包括列表的刷新,加载, 导航跳转详情web页...

  • 课程导航(盒子模型)

    题目 1. 课程导航 需求说明 (1) . 使用标题标签实现课程导航标题,使用无序列表实现课程导航列表 (2) ....

  • 2019-02-28第3次 列表

    第3次 列表 知识点 会使用有序列表实现数据展示 会使用无序列表实现数据展示【重点】 会使用定义列表实现数据展示【...

  • TBScrollViewEmpty

    简介 我们往往会使用列表组件(UITableView or UICollectionView) 来展示App内容。...

  • 【编程日记】小程序ScrollView与自定义按钮的小坑

    关于小程序开发,我会们用到ScrollView展示列表,在使用小程序给定的底部导航按钮tabBar时候,上拉下拉正...

  • 第三次课 列表

    知识点 1.会使用有序列表实现数据展示 2.会使用无序列表实现数据展示【重点】 3.会使用定义列表实现数据展示【重...

  • h5加载占位符(Skeleton Screen)

    使用范围 Skeleton Screen适用于布局排版固定的内容区域,例如列表、文章、个人信息。 展示效果 展示代码

网友评论

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

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