2.4移动产品设计之列表

垂直列表(纵向罗列多个条目)——最基本的列表形式

垂直列表.png

注意:

  • 用户的阅读顺序是从左往右,从上往下,所以垂直列表基本上都是左对齐的样式
  • 条目详细度与页面展示条数之间的平衡
垂直列表的基本样式.png

其他例如时间轴形式


时间轴形式.png

对话框形式


对话框形式.png

轮播面板(横向罗列)

大图展示型


大图展示型.png

小图展示型 能够罗列更多的展示项目


小图展示型.png

注意:

  • 需要指示器来提示用户,标识屏幕外面还有内容

网格列表

网格列表(一般都是展示图片或者一点点的文字说明)例如照片类的展示都是网格列表
网格列表的变种——瀑布流 常见一些图片展示类的网站,例如花瓣和loft、pinerest

当三种表格应用到导航时

当三种列表同时应用到导航时.png

垂直列表导航特色:

简单清晰、易于理解、冷静高效、快速定位
最常见于APP的二级导航或者多级导航,例如微信的发现界面。

作为一级导航时的注意点:

  • 适合功能层级比较浅,且功能间切换不频繁的APP

轮播导航(看起来比较高大上)

例如lofter的发现界面就是轮播导航的形式
特点:隐藏其余导航选项,保证页面简洁,让用户在同一时间只专注于一个目标,并且往往会配合大图或者大背景,获得较好的体验感。
不足:

  • 用户很难跳转到非相邻的导航选项,所以比奥适合选项比较少且不频繁切换的APP中,又或者是浏览体验式的APP中

宫格导航

例如手机的主界面,功能更佳扁平化,可以充分利用整个界面。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 172,870评论 25 708
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,192评论 4 61
  • 前言:14年8月分享在500UXC的文章,时间长即失去了它的时效性,今转载至此。 年正如精良的设计一样,优秀的导航...
    钴蓝阅读 2,573评论 3 15
  • 阿曽,请原谅我的懦弱,我不敢念出你的全名,只得以这种方式称呼你。今天是我结束我们友情两年整的时间,我想你一定是恨我...
    莫岛行阅读 365评论 0 2
  • 11月25日本月第4周周六下午14:00~17:00紫瑜儿瑜伽会员开放日(会员可带家人朋友和孩子一起参加)。 具体...
    紫瑜儿阅读 229评论 0 0