专栏名称: 微交互
分享交互经验,提升产品用户体验。帮助您打造优秀产品。细节设计成就卓越产品。
目录
相关文章推荐
庞门正道  ·  包装还是要色计一下滴! ·  昨天  
庞门正道  ·  涨工资很难? ·  昨天  
字体设计  ·  感受下这位设计师字体设计创作过程 ·  3 天前  
超人的电话亭  ·  京东外卖的图标设计思路拆解 ·  2 天前  
科技日报  ·  成功封顶!国内首座,取得突破性进展 ·  2 天前  
科技日报  ·  成功封顶!国内首座,取得突破性进展 ·  2 天前  
51好读  ›  专栏  ›  微交互

从设计指南说起,详解Material Design体系组件

微交互  · 公众号  · 设计  · 2017-07-13 08:19

正文

请到「今天看啥」查看全文


联系人的纸片视图用于呈现联系人的信息。当用户在输入框(收件人一栏)中输入一个联系人的名字时,联系人纸片视图就会被触发,用于展示联系人的地址以供用户进行选择。而且联系人的纸片可以被直接添加到收件人一栏中去。

联系人的纸片视图主要用于帮助用户高效的选择正确的收件人。

提示框

定义:用于提示用户作一些决定,或者是完成某个任务时需要的一些其它额外的信息。 提示框可以是用一种 取消/确定 的简单应答模式,也可以是自定义布局的复杂模式,比如说一些文本设置或者是文本输入 。

用途:提示框最典型的应用场景是提示用户去做一个些被安排好的决定 ,而这些决定可能是当前任务的一部分或者是前至条件。 提示框可以用于告知用户具体的问题以便他们作用重要的决定(起到一个确认作用),或者是用于解释接下来的动作的重要性及后果(起到一个警示作用)。

提示框的内容是变化多样的。但是通常情况下由文本 和(或) 其它UI元素组成的,并且主要是用于聚焦于某个任务或者是某个步骤。

MD规范把警告框分成两种:有标题的和没有标题的。

标题:主要是用于简单描述下选择类型。它是可选的。

内容:主要是描述要作出一个什么样的决定 。

事件:主要是允许用户通过确认一个具体操作来继续下一步活动。

交互行为:触摸提示框外面的区域可以关闭提示框。

分割线

定义:主要用于管理和分隔列表和页面布局内的内容,以便让内容生成更好的视觉效果及空间感。示例中呈现的分隔线是一种弱规则,弱到不会去打扰到用户对内容的关注。

当在列表中没有像头像或者是图标之类的元素时,单靠空格并不足以用于区分每个数据项。这种情况下使用一个等屏宽(full-bleed)的分隔线就会帮助区别开每个数据项目,使其它看起来更独立和更有韵味。

分割线的类型:

1.等屏宽分隔线:等屏宽分隔线或以用于分隔列表中的每个数据项或者是页面布局中的不同类型的内容。

2.内凹分隔线:在有头像或者是图标元素,并且有关键字的标题列中,我们可以使用内凹分隔线。

3.子标题和分隔线:在使用分隔的子标题时,可以将分隔线置于子标题之上,可以加强子标题与内容关联度。

网格

定义:网格是一种标准列表视图的可选组件。

用法:网格列表最适合用于同类数据(homogeneous data type),典型的如图片,并且对可视化理解(visual comprehension )和相似数据类型的区别进行了优化。

如果卡片中的文本需要与其他主要内容有着足够显著的区别,可以考虑使用一个容器,比如列表(Lists)或者卡片(Cards)。这样可以优化文本显示、增强阅读理解的便利性;列表,增强阅读理解的便利性,尤其是在比较一组具有多种数据类型的数据时;卡片,用于不同格式的内容,比如带有不同长度标题的图片;用于不同类内容的数据集合中,比如具有图片、视频和图书的混合式数据集。

列表

定义:列表作为一个单一的连续元素来以垂直排列的方式显示多行条目。

列表最适合应用于显示同类的数据类型或者数据类型组(homogeneous data type or sets of data types),比如图片和文本,目标是区分多个数据类型数据或单一类型的数据特性,使得理解起来更加简单。

如果有超过三行的文本需要在列表中显示,换用卡片(cards)代替。

如果内容的主要区别来源于图片,换用网格列表(grid list)。

交互行为:

  • 滚动(列表只支持垂直滚动)

  • 在列表中,每个列表的滑动(swipe)动作应当是一致的。

  • 在操作正确时,可以被选中并且在列表中可以手动改变顺序。

  • 列表可以通过数据、文件大小、字母顺序或者其它参数来编程改变其顺序或者实现过滤。

列表控制

定义:对列表进行操作控制的组件。







请到「今天看啥」查看全文