Material Design——Cards

#我是一个可爱的搬砖工系列# 尝试对照英文翻译学习MD的组件设计,借此加深各种组件的应用~

Material Design链接:Material Design——Cards

卡片包含关于单个主题的内容和操作。

一、使用

卡片是在一个主题上显示内容和动作的界面。

它们应易于浏览,以获得相关和可采取操作的信息元素,如卡片上的文本和图像以明确的结构层次来展示。

· 包含 卡片可以识别为单个包含的单元

· 单独 一张卡片可以单独使用,而不依赖周围的元素作为背景

· 个体 一张卡片不能与另一卡片合并,也不能分成多张牌


二、分析

卡容器是卡中唯一必需的元素。这里显示的所有其他元素都是可选的。

卡片布局可以不同,以支持它们包含的内容类型。以下元素通常存在于该品种中。

1. Container 卡片容器容纳所有卡片元素,它们的大小取决于这些元素占用的空间,卡片高度由容器表示。

2. Thumbnail [optional] 卡片可以包括缩略图来显示头像、角标或图标。

3. Header text [optional] 标题文本可以包括诸如相册或文章的名称之类的内容。

4. Subhead [optional]  子标题文本可以包括文本元素,如文章字节行或标记位置。

5. Media [optional] 卡片可以包括各种媒体,包括照片,和图形,如天气图标。

6. Supporting text [optional] 支持文本包括文本,如文章摘要或餐馆描述。

7. Buttons [optional] 卡片可以包括操作按钮。

8. Icons [optional] 卡片可以包括操作按钮。


每一张卡片都是由内容块组成的。所有的块,作为一个整体,都与一个单独的主题或目的地有关。内容可以接受不同级别的强调,这取决于其层次结构。

卡片包含丰富的媒体、主标题、支持文本和操作。

△ 分割线

分割线可用于分离卡中的区域或指示可扩展的卡的区域。

使用嵌入分隔符(1),不运行卡的完整长度的分隔符,以分离相关内容。
可以展开的内容应该使用全宽度分隔符。


三、行为


△ 转换

卡片可以变换以显示更多内容。

卡片扩展到使用父-子转换填充整个屏幕。
展开卡片以显示信息。
卡片不会突然正反面翻转来显示信息。


△ 高度

在移动设备上,卡的默认高度是1DP,升高的高度是8DP。

用投影来增强卡片的展示。

在桌面和手机上,卡的静止高度可以是0 dp。他们悬停时上升到8DP。

0 dp的笔画有助于表示一张卡片。

△ 手势

手势应该在卡片集合中一致地实现。卡上常用的手势包括swipe, pick up and move, and scrolling(刷卡、拾取、移动和滚动)。

· Swipe(刷卡)

一次可以在一张卡上,在卡上的任何地方执行刷卡手势。

它可用于:

· 关闭卡片

· 更改卡片的状态(例如标记或存档)

同一时间内,对一张卡片只操作一个刷卡动作。
卡片不应包含像banner那样的翻页内容(如图像传送带或分页)。
刷卡手势也不应导致部分卡片与整体分离。

· Pick up and move(拾取、移动)

拾取和移动手势允许用户在多张卡片中移动和重新选择卡片。

当移动卡片时,增加它的高度(适当加投影)。
别把卡片移到其他卡片后面。
不要让卡片把其他元素挡开。当一张卡片被拿起时,它会出现在所有元素的前面(除了应用程序栏和导航)。

· Scrolling(滚动)

高于最大卡高的卡内容被截断,不滚动,但可以通过扩展卡的高度来显示。卡可以扩展到屏幕的最大高度,在这种情况下,卡在屏幕内滚动。

Right:在手机上,卡片可以扩展到显示更多的内容,在屏幕上滚动,卡片中的内容不会滚动;Wrong:在手机上,卡不能内部滚动,因为它可能导致两个滚动条被显示。
在桌面上,卡片内容可以在卡片中展开和滚动。


四、操作

· 直接操作

卡片的主要动作区域通常是卡片本身,通常,卡片用来展示屏幕内容下,其中一个主题详情。

卡片底部的补充文本和操作

· 补充操作

溢出菜单包含相关操作。它们通常放置在卡的右上角或右下角

溢出菜单通常位于卡的右上角或右下角。

UI控件

UI控件可以包含在卡中,以允许用户与卡的内容进行交互。UI控件的形式可以是滑块、对内容进行分级的星号、选项卡或按钮。

此卡包含可对内容进行评分的星号。
此卡在操作区域内包含选择选项卡。

· 附加操作

卡片可以支持多个操作,例如UI控件和溢出菜单。因为卡片是获取更详细信息的切入点,所以它们应该包含有限数量的操作。

Caution:卡片提供更可靠信息的入口。小心不要用多余的信息或行动过载卡片。

△ 焦点

当遍历卡上的焦点时,在移动到下一张卡之前访问每个焦点元素。

对于仅使用焦点遍历(使用D-pad和键盘)导航的用户,卡片应该有主操作或打开包含主操作和补充操作的新屏幕。

卡片的对焦遍历


五、卡片收藏

△ 用法

当多张卡片出现时,它们被组合成一个或多个集合。默认情况下,集合中的卡片是共面的,除非被拾起或拖动,否则它们有相同的静止高度。

△ 布局

组织卡片收集,使其易于使用。它们的布局影响着人们对它们的感知。

将卡片添加到集合时,第一项将自动定位在左上角。随后的卡片从左到右,从上到下排列。

· 可扫描的

若要使一组卡片可扫描,请将它们放置在一致的模式中。

Scannable cards

· 仪表盘

若要在屏幕上显示多个主题和功能,请使用仪表板式卡片集合。

仪表板式卡片收集

· 区别

要突出每张卡的个性、风格或新颖性,请使用带有非对称网格的卡片集合。

非对称网格中的卡片

△ 包含收藏

卡集合可以放在容器中,并在容器内滚动。

Right:卡集合可以在容器内水平滚动;Wrong:收集的容器不应该是卡片,容器的整个表面不应该是交互式的。

△ 筛选和排序

卡片收集可以通过多种方式进行筛选,包括按日期或字母顺序筛选。如果可以筛选集合,则筛选器必须应用于集合中的每一张卡。

筛选或排序选项应放置在卡片收集之外。



END.THANKS FOR YOUR READING~

如有不当,还请多多指教~

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

推荐阅读更多精彩内容

  • 长恨人心不如水,等闲平地起波澜。 时常困惑自己到底在干什么。 心灵鸡汤常常会告诉我们,人生苦短,且行且珍惜,要去走...
    佛语心阅读 532评论 0 0
  • 连续几天要下不下的雨今天终于来了一场痛快的,也好像压抑了几天的坏脾气来了一场爆发,结束之后就是清风拂面,心...
    黏玉米阅读 138评论 0 0
  • 【墨竹的菜园】0273——我们每个人内心都有两个“我”,一个是天使,一个是魔鬼。魔鬼受到情绪的控制,而天使是理智的...
    墨竹的菜园阅读 262评论 0 3
  • 基本原理是父容器的高度设置为0,超出部分overflow:hidden,在事件触发或者方法被调用的时候更改父元素的...
    liquan_醴泉阅读 3,160评论 0 0