垂直列表(纵向罗列多个条目)——最基本的列表形式
垂直列表.png
注意:
- 用户的阅读顺序是从左往右,从上往下,所以垂直列表基本上都是左对齐的样式
- 条目详细度与页面展示条数之间的平衡
垂直列表的基本样式.png
其他例如时间轴形式
时间轴形式.png
对话框形式
对话框形式.png
轮播面板(横向罗列)
大图展示型
大图展示型.png
小图展示型 能够罗列更多的展示项目
小图展示型.png
注意:
- 需要指示器来提示用户,标识屏幕外面还有内容
网格列表
网格列表(一般都是展示图片或者一点点的文字说明)例如照片类的展示都是网格列表
网格列表的变种——瀑布流 常见一些图片展示类的网站,例如花瓣和loft、pinerest
当三种表格应用到导航时
当三种列表同时应用到导航时.png
垂直列表导航特色:
简单清晰、易于理解、冷静高效、快速定位
最常见于APP的二级导航或者多级导航,例如微信的发现界面。
作为一级导航时的注意点:
- 适合功能层级比较浅,且功能间切换不频繁的APP
轮播导航(看起来比较高大上)
例如lofter的发现界面就是轮播导航的形式
特点:隐藏其余导航选项,保证页面简洁,让用户在同一时间只专注于一个目标,并且往往会配合大图或者大背景,获得较好的体验感。
不足:
- 用户很难跳转到非相邻的导航选项,所以比奥适合选项比较少且不频繁切换的APP中,又或者是浏览体验式的APP中
宫格导航
例如手机的主界面,功能更佳扁平化,可以充分利用整个界面。