Material Design —卡片(Cards)

自上次参加完回音分享会后,我下定决心要洗心革面乖乖打基础,于是开启了这个part,争取两个月不间断更新,写完Material Design与iOS中的组件(顺便学学英语),以便今后在使用的时候完全不虚

卡片(Cards)

Material Design链接:卡片

卡片

卡片是更详细信息的入口点的一张材料。

卡片可能包含照片,文字和关于单个主题的链接。 他们可能会展示包含不同尺寸元素的内容,例如带有可变长度标题的照片。

卡片集合是同一个平面上的多个卡片的布局形式。

用法

卡片展示的是由不同尺寸或不同支持的动作的元素组成的内容。

支持的手势

滑动(swipe)

拾取并移动(Pick-up-and-move)

相关组件

网格列表(Grid lists)

对于开发者

Android卡片

聚合卡片(Polymer cards)


用法

卡片能方便地展示不同元素组成的内容。 它们也非常适合展示尺寸或支持操作变化的元素,例如带有可变长度标题的照片。

卡片集合是共面的,或同一平面上的卡片布局。

何时使用

显示以下内容时使用卡布局:

·作为一个集合,包含多种数据类型,如图像,视频和文本

·不需要直接比较(用户不直接比较图像或文本)

·支持高度可变长度的内容,例如评论

·包含可交互式内容,例如+1按钮或评论

·在网格列表中,但需要显示更多内容来补充图像

左:卡片有圆角、能有多个操作、可关闭/重现    右:是tile而不是卡片,无圆角、最多两个操作
左:快速可浏览列表,适合展示无操作的同类内容    右:阻碍了快速浏览,且这些内容不能关闭
左:网格tile以干净轻量方式展示图片库    右:卡片不适合展示同类内容

内容

卡片为联系更紧密的信息和视图提供上下文和入口点,其内容和数量可能会有很大差异。 卡片集合内的卡片可以包含一个唯一的数据组,例如带有动作的清单,带有动作的笔记以及带有照片的笔记。

不要让卡片上带有过多无用的信息或操作。

内容层次

使用卡内的层次结构来引导用户注意最重要的信息。 例如,将主要内容放置在卡的顶部,或使用排版来强调最重要的内容。

图像可以强化卡片中的其他内容。 但是,它们在卡内的大小和位置取决于图像是主要内容还是用于补充卡片上的其他内容。

背景图像

当文字放置在纯色背景上时,文字清晰度最高,且文字对比度足够高。 放置在图像背景上的文本应该保留文本的易读性。

左:不同布局的卡片    右:排版方式能突出重点内容
左:不同内容与布局的卡片集合    右:不同布局与不同内容层次的卡片集合

行为

卡片具有恒定的宽度和可变的高度。最大高度限于平台上可用空间的高度,但可以暂时扩大(例如,显示评论)。

卡片不会翻转以显示背面的信息。

支持的手势

卡片手势应始终在卡片集合中实施。

支持的手势包括:

滑动手势(swipe gesture)可以在每张卡片上使用。限制视图内的轻扫手势,使其不会彼此重叠。例如,可滑动的卡片不应该包含可滑动的图像,以便在滑动时只发生一次动作。

如果用户对集合内的卡进行分类很重要,则可以使用拾取并移动手势(pick-up-and-move gesture)。但要考虑筛选或排序是否会更好地组织内容。

卡片集合的筛选和分类

卡片收藏可按照日期,文件大小,字母顺序或其他参数进行排序或筛选。

集合中的第一个项目位于左上角

顺序从左到右,从上到下进行

从左到右,从上到下

滚动

卡片集合只能垂直滚动。

超过最大卡片高度的卡片内容会被省略,内部不会滚动,但可以扩展卡片。 一旦展开,卡片可能会超过视图的最大高度。 在这种情况下,卡片将随卡片集合一起滚动。

左:卡片可留有展开入口    右:手机端不要在卡片内放置可滚动区域,会存在两条很难分开的滚动条
pc端卡片可展开和内部滚动

卡片聚焦

当遍历卡片上的焦点时,在移动到下一张卡片之前访问所有可聚焦元素。

对于依赖焦点遍历进行导航(手柄和键盘)的页面,卡片应具有主要操作或打开包含主要和补充操作的新视图。

选择操作
扩展的补充文本变得可见,然后聚焦放在补充的行动上

操作

卡中的主要动作通常是卡本身。

在集合中,根据内容类型和预期结果的不同,补充操作可能因卡片而异。 例如,播放视频相对于打开一本书。 在集合中的卡片中,始终展示操作。

补充操作

使用图标,文本和UI控件(通常放置在卡的底部)明确调出卡内的补充操作。

除了溢出菜单之外,补充操作限制为两个操作。

UI控件

与主内容内联放置的UI控件(如滑块)可以修改主内容的视图。 例如,可以选择日期的滑块,评分内容的星星,或选择日期范围的分段按钮。

溢出菜单(可选)

溢出菜单通常放置在卡的右上角。但当能改善内容布局和易读性时,则可以将其放置在右下角。

注意不要让溢出菜单负荷的操作太多。

其他操作

强烈建议不要在文本内容中使用内联链接。

虽然卡片可以支持多种动作,UI控件和溢出菜单,但请使用限制,并记住卡片是进入更复杂和详细信息的入口点。


内容块

卡可以使用内容块构建,其中包括:

·可选标题

·主要标题

·富媒体

·支持文本

·操作

这些内容块可以组织起来以促进不同类型的内容。 例如,可以通过增加排版时的尺寸来强调数字。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,937评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,503评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,712评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,668评论 1 276
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,677评论 5 366
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,601评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,975评论 3 396
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,637评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,881评论 1 298
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,621评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,710评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,387评论 4 319
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,971评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,947评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,189评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 44,805评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,449评论 2 342

推荐阅读更多精彩内容