码迷,mamicode.com
首页 > 编程语言 > 详细

【Material Design视觉设计语言】UI组件设计(三):纸片

时间:2015-08-28 13:30:29      阅读:205      评论:0      收藏:0      [点我收藏+]

标签:

作者:郭孝星
微博:郭孝星的新浪微博
邮箱:allenwells@163.com
博客:http://blog.csdn.net/allenwells
Github:https://github.com/AllenWells

纸片(Chips)是一种小块的用来呈现复杂实体的块状视图(例如:日历的事件或联系人),它可以包含一张图片,一个短字符串或者被截取的字符串,或者是其它的一些与实体对象有关的简洁的信息。

Chips 可以非常方便的通过托拽来操作。通过按压动作可以触发悬浮卡片(或者是全屏视图)中的 Chip 对应实体的视图,或者是弹出与 Chip 实体相关的操作菜单。

一 联系人纸片

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

1.1 联系人纸片的关闭状态

联系人名字使用的字体为:Roboto,常规,14sp,如下图所示:

技术分享

1.2 联系人纸片的打开状态

当点击关闭状态下的联系人纸片视图,它就会展开并且显示出联系人的地址。

  • 默认状态下,最顶的联系方式被激活并选中

  • 联系人名字的字体为:Roboto,常规,16sp

  • 地址文本的字体为: Roboto,常规,14sp

当用户选择后,纸片视图被关闭,如下图所示:

技术分享

版权声明:当我们认真的去做一件事的时候,就能发现其中的无穷乐趣,丰富多彩的技术宛如路上的风景,边走边欣赏。

【Material Design视觉设计语言】UI组件设计(三):纸片

标签:

原文地址:http://blog.csdn.net/allenwells/article/details/48048229

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!