Material Design——Sheets: side

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

Material Design链接:Material Design——Sheets: side

侧板是包含附加内容的界面, 它们固定在屏幕的左或右边缘。

一、用法

侧边栏是主要用于平板和桌面的辅助表面。

它们有两种类型

· 标准侧边栏

标准的侧边栏显示补充屏幕主要内容的内容,当用户与主要内容交互时,它们仍然可见。

· 模态侧板

由于屏幕尺寸有限,模态侧边栏被用在移动设备上而不是标准侧边栏上,它们可以显示与标准侧边栏相同类型的内容,但必须排除这些内容,以便与底层内容交互。

· 标准使用包括

1.显示影响屏幕主要内容(如过滤器)的操作列表

2.显示补充内容和特性

桌面的这个标准侧边栏包含控制主UI区域中显示的文件的过滤器。
由于屏幕空间有限,在移动设备上使用模态侧边栏而不是标准侧边栏。

△ 原则

· 支持 侧边栏包含补充屏幕主要UI区域的内容

· 灵活 侧边栏显示各种各样的内容和布局

· 上下文的 侧边栏可以根据屏幕大小或用户需要可见或隐藏,它们通常在移动设备上成为底部界面


二、分析

1. Sheet2. Content3. Scrim (Modal only)

△ 表单

侧板固定在屏幕的左右边缘,它们的宽度是固定的,通常跨越屏幕的高度,。它们的大小取决于如何将应用程序的布局细分为UI区域。

沿着屏幕的左右边缘放置侧边栏。
不要从屏幕边缘完全插入侧边栏,这使得工作表的位置和滚动行为不清楚,同时模糊了主要内容。

△ 内容

侧页可以显示各种各样的内容和布局,从动作列表到表格布局中的补充内容。

关于标准侧边栏中的照片的原数据。
模态侧边栏中的筛选器列表

三、行为

△ 滚动

侧边栏可以垂直滚动,与UI的其余部分无关。这允许它们在滚动页面时保持滚动位置和内容,反之亦然。

侧边栏不能水平滚动。

Right:当内容超过屏幕高度时,侧边栏可以在内部垂直滚动;Wrong:不要在侧边栏或布局中允许水平滚动,否则就意味着水平滚动。一个侧边栏的狭窄宽度留下有限的空间,以充分看到项目。

三、位置

△ 屏幕大小

在移动设备上使用模态的侧边栏,由于屏幕宽度有限,可以成为平板电脑和台式机上的标准侧边栏,反之亦然。

该应用程序的过滤器放在桌面(1)的标准侧边栏上,由于屏幕宽度有限(2),在移动设备上成为模态。

△ 与导航的抽屉

侧边栏应该放置在侧导航抽屉的另一侧,以避免妨碍UI或造成对表功能的混淆。

导航抽屉以从左到右的语言锚定在左边屏幕边缘,以从右到左的语言锚定在右边。

在导航抽屉的相对边缘设置一个侧边栏。这个应用程序使用从左到右的布局,因此导航抽屉被放置在它的左边(1)和一个标准的侧板锚定在右边(2)。
不要把侧边栏(2)放在与导航抽屉(1)相同的屏幕边缘上,因为页面可能经常被一个上升的导航抽屉覆盖(或者混淆了导航本身)。


四、标准侧边栏

△ 用法

标准的侧边栏与屏幕的主要UI区域共存,允许查看和与两个表面交互,它们只在平板电脑和台式电脑上使用。

标准侧边栏为:

· 如果主UI区域经常被滚动或平移,则保持一个特性或内容在屏幕上

· 影响主区域的上下文操作,如过筛选器

· 支持信息或元数据,如位置或照片细节

· 可以在单个屏幕上完成的短任务,例如在购买之前配置选项或指定项目细节

△ 行为

· 打开与关闭

非永久性的标准侧边栏应该包括打开和关闭表的功能。

常见的开放启示包括在屏幕布局的顶部应用程序栏或按钮中的动作图标,虽然单个可视性可以用于切换工作表的打开与关闭,但是建议在工作表中单独使用关闭可视性。

△ 位置

· 高度

标准的侧边栏可以设置在与主要内容相同的高度,或放置在上面,在8dp。

它们的高度可以用来表示它们与内容的层次关系或影响布局网格中的行为。

· 共面高度

共面高程将纸张放置在与内容相同的高程上,表明两个表面是相关的,同等重要,共面图影响布局网格,缩小内容的可用区域。

· 以上内容

当标准侧边栏被提升到内容之上时,它可以表示层次意义,或者只是为了布局的目的,在别人面前升高的表面往往传达出对他们身后的人更重要或更强的控制力。它们不会影响布局网格,并且应该只用于临时可见的表,因为它们模糊了内容。

这个筛选表与主UI区域是共面的,表示它与内容的连接,并允许两个区域完全可见。
这张照片的元数据被提升到它的上方,以避免在页面打开和关闭时调整图像的大小。


五、模态侧边栏

△ 用法

模态侧边栏在阻塞与屏幕其余部分的交互时呈现内容。

在移动设备上,它们被用来代替标准的侧板,在较大的屏幕上,它们可以帮助用户将注意力集中在一个关键流程上,比如购物。

△ 行为

· 高度和底部界面

模态侧边栏默认高度为16dp,这个高度允许它们出现在所有UI元素上。

模态侧边栏将所有内容和UI元素放在scrim后面,表示它们不会响应用户交互。点击scrim,从视图上取消了模态侧边栏和scrim。

Right:一个可见的scrim通知用户不能与屏幕的其他部分交互;Wrong:不要用看不见的钱。这可能会误导用户与屏幕其余部分交互的能力。

· 控制

当用户操作触发模态侧页时,例如点击顶部应用程序栏中的按钮或操作图标,就会出现模态侧边栏,可通过以下方式解散:

· 点击底部面板

· 滑向被单的锚定边缘(左或右)

· 如果可以的话,在侧边栏的标题中使用一个闭合的可视性

左:轻敲scrim会解散一个模态侧板;右:模态侧边栏可以通过滑动到板的锚定边缘来消除。



END.THANKS FOR YOUR READING~

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

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

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 172,028评论 25 707
  • #我是一个可爱的搬砖工系列# 尝试对照英文翻译学习MD的组件设计,借此加深各种组件的应用~ Material De...
    轶子阅读 1,288评论 0 24
  • 告别 这世上,有很多告别,时间上的告别,空间上的告别,时间和空间上的生与死的告别。 我们会告别某些人,告别某些事,...
    竖心合阅读 372评论 0 0
  • 生活中,我们有时会犯以下三个错误: 一来,向糊涂人,说了明白话; 二来,试图和不靠谱的人做正经事; 三来,和无情的...
    北峰阅读 622评论 0 0
  • 破墨阅读 630评论 1 3