美文网首页
2.4移动产品设计之列表

2.4移动产品设计之列表

作者: 汤小花and小小花 | 来源:发表于2017-10-15 14:25 被阅读44次

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

垂直列表.png

注意:

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

其他例如时间轴形式


时间轴形式.png

对话框形式


对话框形式.png

轮播面板(横向罗列)

大图展示型


大图展示型.png

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


小图展示型.png

注意:

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

网格列表

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

当三种表格应用到导航时

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

垂直列表导航特色:

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

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

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

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

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

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

宫格导航

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

相关文章

  • 2.4移动产品设计之列表

    垂直列表(纵向罗列多个条目)——最基本的列表形式 注意: 用户的阅读顺序是从左往右,从上往下,所以垂直列表基本上都...

  • 移动产品设计模式-复盘2

    哈哈,亲爱的小伙伴,我们继续来开始移动产品设计的第二类--列表模式。 什么是列表模式?列表模式主要...

  • iOS移动产品APP界面设计规范

    一.概述 编写目的:编写iOS移动产品设计规范(以下简称“设计规范”)主要是为了规范化公司移动产品设计,将常用控件...

  • 第二章:API 的理解和使用-列表

    2.4 列表 列表(list)类型是用来存储多个有序的字符串,如下图所示,a、b、c、d、e五个元素从左到右组成了...

  • 产品阅读书籍推荐

    <-产品设计/交互/UED 写给大家看的设计书:入门经典 一目了然:Web和移动应用设计通识方法 瞬间之美:Web...

  • 2019-03-12

    ETA9870,5V-2.4A三合一移动电源充放电芯片,自动负载启动,带4 LED电量灯 强烈推荐2.4A充放电高...

  • 设计匠艺-第五十一期

    推酷诚意满满的设计周刊《设计匠艺》, 下面是内容列表,干货多多,也可以移步到官网进一步阅读。 产品之道 产品设计之...

  • 2.3 移动模式产品设计之导航

    标签是导航模式 当你的APP有几个主要任务,你觉得都非常重要并且他们之间的切换比较频繁,这种时候比较适合标签式的导...

  • 移动医疗产品设计之问诊咨询

    按照一般对移动医疗产品边界划分:诊前-诊中-诊后,问诊咨询是移动医疗产品承接预约挂号由诊前向诊中进行深入的产品。作...

  • 移动医疗产品设计之预约挂号

    引言 过去的2015年移动医疗强势来袭,诸多围绕患者、医生、医院或者以院前、院中、院后为主线的诸多应用逐步落地可谓...

网友评论

      本文标题:2.4移动产品设计之列表

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