Material Design——Sheets: bottom

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

Material Design链接:Material Design——Sheets: bottom

底部表单是包含附加内容的界面,固定在屏幕底部。

一、用法

底部表单是主要用于移动的辅助界面。

它们主要由两种类型:

· 标准底部表单显示补充屏幕主要内容的内容,当用户与主要内容交互时,它们仍然是可见的。

· 模态底部表单是一种替代的内联菜单或简单的对话框在移动,为更长的描述,和图标提供空间,为了与基本内容进行交互,必须将它们排除在外。

标准底部表单:用户可以与底部页和屏幕内容的其余部分进行交互;模态底部表单:用户必须与模态表单进行交互或取消。  

△ 原则

· 支持 底部表单包含补充屏幕主UI区域的内容

· 灵活的 底部表单可以显示各种各样的内容和布局

· 人类环境改造学的 在移动设备上,底部表单很容易触及


二、分析

1.Sheet

2.Contents

3.Scrim (Modal only)

△ 表单

底部工作表固定在屏幕的底部边缘,并出现在其他UI元素的前面,它们在移动设备上是全宽度的,在平板电脑或桌面上可以是嵌入式的,也可以是全宽度的。

Right:底片固定在屏幕的底部边缘;Wrong:不要从屏幕边缘嵌入底片的所有侧面,这会使它很难看到,并让它与其他组件(如snackbar)混淆。
桌面上的标准底。片插图

△ 内容

底部表单可以显示各种各样的内容和布局,从菜单项(在列表和网格布局中)到根据布局网格布局的补充内容。

当工作表被拖到视图中时,最初出现在屏幕边缘下面的底部工作表的内容可以变得可见。

左:模态底部工作表中的操作菜单(在列表中);右:应用程序菜单(在网格布局中)在模态底部页中。
左:这个标准表单中的位置信息最初延伸到屏幕边缘以下,它可以被拖进视野 ;右: 此音乐播放器已完全可见,以显示在播放机下面的轨道列表。


三、行为

△ 可见

· 初始状态

当底片最初出现在屏幕上时,它们可能包含延伸到屏幕底部以下的内容,他们可以被滑动或拖上去成为全屏,根据内容,底部页也可以通过点击其表面或扩展图标成为全屏。

· 全屏

当全屏时,底部页可以在内部滚动,以显示更多的内容,他们显示一个顶部的应用程序条,它可以提升滚动。

在顶部的应用程序栏中,全屏标准底部页包含一个折叠图标,该图标将工作表返回到其初始位置。全屏幕模式下的工作表包含一个解散图标,它可以将工作表完全从视图中删除。

左:部分可见的底部表单可以拖到全屏视图和内部滚动;右:在一个全高度模态底部表单中包含一个关闭的允许性,以排除该页。


四、标准底部表单

△ 用法

标准底片与屏幕的主UI区域共存,允许同时查看和与两个区域交互。当主UI区域中的内容经常被滚动或平移时,它们通常用于使功能或次要内容在屏幕上可见。

左:标准底部表单可以包含在屏幕下方继续的补充内容,例如地图上的位置信息 ;右:使用标准底部表单来保存音乐应用程序中的媒体控制等重要功能。

△ 行为

· 互动

当用户与主UI区域或工作表本身交互时,标准底部工作表仍在屏幕上。它们的默认高度为8dp,允许主UI区域后面的内容滚动或平移,并允许工作表在全屏时暂时覆盖主UI区域。在全屏高度,它们应该在应用程序栏中包含一个折叠图标,以返回到它们的初始位置。

左: 标准底片高于主ui区域,因此其可见度不受摇摄或滚动的影响;右:当用户浏览可用的音乐时,这个标准底片中的音乐播放器仍然在屏幕上。

△ 位置

移动设备上标准底片的内容可以移动到较大屏幕尺寸的侧板上,给出额外的水平空间。

在移动设备上,由于屏幕宽度有限,此地图的位置信息显示在标准底片中。  
在桌面上,由于屏幕宽度大于屏幕高度,此地图的位置信息显示在辅助页中。


五、模态底部表单

△ 用法

模态底部表单提供了一组选择,同时阻止与屏幕其余部分的交互,它们是移动上的内联菜单和简单对话框的替代,为内容、图标和操作提供了更多的空间。

模态底部表单仅用于移动应用程序。

左:模态底片可以用来代替菜单来显示额外的屏幕操作 ;右:使用模态底部工作表提供到另一个应用程序的深度链接。

△ 行为

· 底层与分割线

模态底片的默认高度为16 dp,这个高度允许它们出现在大多数UI元素之上,并允许它们在整个UI前面被拉起,以显示更多选项。

模态底部表单会导致其背后的所有内容和UI元素显示一个SRIM,这表明它们不会响应用户交互。点击底层界面或者底部表单来关闭视图。

Right:使用带有模态底部工作表的可见文本通知用户,他们不能与屏幕的其余部分交互;Wrong:不要用看不见的纸条作为模态底片,这可能会误导用户与屏幕其他部分交互的能力。

· 可见度

为了提供对其顶部动作的初始访问,模态底片的初始垂直位置被限制在屏幕高度的50%。

然后可以将超过屏幕高度的50%的模态底片拉过整个屏幕,在内部滚动以访问它们剩余的项。

Right:有几个项目的模态表单打开时是完全可见的;Wrong:不要在打开时用全屏幕制作高底部表单,这使得移动设备上的用户立即无法获得最高的内容。

· 控制

当用户操作(如点击按钮或溢出图标)触发时,会出现模式底部表单。他们可以通过下列方式被取消:

1.点击底部工作表中的菜单项或操作

2.单击底部界面

3.关闭底部表单

4.如果可用的话,在底部表单的顶部应用程序栏中设置关闭按钮

左: 点击划线会使模态底部表单关闭;右:通过滑动一个模态底部表单可以关闭这个表单。 

△ 位置

模态表单在小屏幕非常有效。

在较大屏幕上,使用菜单或对话框创建与触发UI元素的清晰的表单。

一种在移动(1)上使用底部表单的溢出菜单和在桌面(2)上使用内联菜单。



END.THANKS FOR YOUR READING~

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

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

推荐阅读更多精彩内容

  • 1、通过CocoaPods安装项目名称项目信息 AFNetworking网络请求组件 FMDB本地数据库组件 SD...
    阳明先生_X自主阅读 16,002评论 3 119
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 172,698评论 25 708
  • 一 你不会知道 四季兴衰枯荣 皆是因你而生的喜怒哀乐 二 躲在一颗花蕊里 听它说一生的幸福 四季万物曾来过都是恩泽...
    陌诺流年阅读 633评论 65 58
  • 大路朝天各一边, 东边大水西边干。 世间万物用相对, 相交相反又相连。 遥望银河隔两岸, 牛郎织女难相见。 又看吕...
    祝你开心每一天阅读 200评论 0 1
  • 越長大越懼怕過年 曾經那麼期待的節日 現在卻是那麼抗拒 流年已逝 把那些美好就放在那裡 以後所擁有的應該不會再有超...
    筱雨寒煙阅读 321评论 0 0