美文网首页
Material Design学习笔记3——组件

Material Design学习笔记3——组件

作者: 三月不打烊 | 来源:发表于2015-11-20 20:33 被阅读0次

    1、Bottom Sheets

    底部动作条(Bottom Sheets)是一个从屏幕底部边缘向上滑出的一个面板,使用这种方式向用户呈现一组功能。

    可以是列表式的

    底部列表式动作条

    列表式规格

    列表式规格

    也可以是网格式的

    网格式底部动作条规格

    2、Buttons

    按钮有三种,分别是

    · 悬浮响应按钮(Floating action button), 点击后会产生墨水扩散效果的圆形按钮。

    悬浮响应按钮(FAB)

    · 浮动按钮(Raised button), 常见的方形纸片按钮,点击后会产生墨水扩散效果。

    浮动按钮

    · 扁平按钮(Flat button), 点击后产生墨水扩散效果,和浮动按钮的区别是没有浮起的效果。

    扁平按钮

    三种按钮的层级重要性如下,依次往下递减:

    使用按钮注意:

    * 对话框中使用扁平按钮。

    * 如果需要一个对用户持续可见的功能按钮,应该首先考虑使用悬浮响应按钮。

    * 建议只用一个悬浮按钮(FAB)

    * 不是每个屏幕都需要浮动操作按钮。一个悬浮按钮能够代表这个 App 中的主要操作。

    *  使用圆形图标(FAB);

    *  浮动按钮可以点击以其为基准弹出其它选项,但选项最多不超过6个

    *  悬浮按钮可以贴在纸片边缘或者接缝处,但不要贴在对话框、侧边抽屉和菜单的边缘 

    *  悬浮按钮不能被其他元素盖住,也不能挡住其他按钮,列表滚动至底部时,悬浮按钮应该隐藏,防止它挡住列表项

    *  悬浮按钮有两种尺寸:56x56dp/40x40dp  

    用浮动操作按钮进行积极的操作,如创建、收藏、分享、浏览和探索。

    可取的悬浮按钮

    避免用浮动操作按钮进行下面这些轻微破坏性操作:存档或删除、非特异性操作、警报或错误、限制性任务如剪切文本、控制应放在一个工具栏中,如音量控制或改变字体颜色等。

    不可取

    3、Cards

    卡片是包含一组特定数据集的纸片,数据集含有各种相关信息,例如,关于单一主题的照片,文本,和链接。卡片通常是通往更详细复杂信息的入口。

    卡片

    注意:

    * 卡片带圆角。

    * 卡片带多种操作。

    * 卡片可以忽略和重排。

    4、Chips

    Chips (我们暂时叫他纸片视图)是一种小块的用来呈现复杂实体的块,比如说日历的事件或联系人。它可以包含一张图片,一个短字符串(必要时可能被截取的字符串),或者是其它的一些与实体对象有关的简洁的信息。Chips 可以非常方便的通过托拽来操作。通过按压动作可以触发悬浮卡片(或者是全屏视图)中的 Chip 对应实体的视图,或者是弹出与 Chip 实体相关的操作菜单。

    纸片视图

    未完……

    相关文章

      网友评论

          本文标题:Material Design学习笔记3——组件

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