排列五重号走势图:Material Design Component behavior 组件的适配

幸运糖 APP设计 580浏览

体彩排列五和值走势图 www.tztre.tw 这是一个翻译系列,原文是谷歌18年所出的材料设计指南(文末有链接),强大的材料设计将带我们一起深入了解UI设计中的所有规范。每周会更新数篇,一共百余篇,欢迎关注哦。

 

目录

定位术语
组件宽度
响应式模式

以下指南描述了组件在网格和断点之间的行为方式。

 

定位术语

UI元素在每个断点范围内以不同的方式运行。

描述

可以使用以下术语描述网格中UI元素,组件和界面的位置:

表格内容标注:

描述 定义
上方,下方 一个元素的y轴位置
前方,后方
?一个元素的z轴位置
左,右,居中 一个元素的x轴位置
顶部,底部 某元素相对于容器或者屏幕边缘的y轴位置
垂直居中
某元素的x和y轴上位置都位于容器或屏幕的中心
粘性定位 跟随UI滚动并锁定在滚动位置上的某个点
浮动 固定在滚动内容前面的元素位置

 

组件宽度

组件宽度可以在多个屏幕尺寸中保持不变,或者可以根据布局而改变。 组件宽度可以是:

  1. 固定的
  2. 流式的

 

由于固定宽度元素在布局改变期间保持其宽度,因此它们的位置可以更改以适应新布局。 他们的位置可以是:

  1. 推出的
  2. 覆盖的

 

固定的

当元素是固定宽度时,即使屏幕尺寸改变,元素的宽度也保持不变。

此按钮组件保持固定在右边距。

 

流式的

当元素是流式宽度时,其宽度随着屏幕尺寸的变化而扩展和收缩。

??
此按钮在右侧两列内流式缩放。

 

如果容器太窄而不能以较小的宽度显示元素和填充,请不要在流式组件上使用容器。

??


当流式组件跨越宽屏幕中的多个列时要小心。 某些组件(如按钮)可能会在较大的屏幕宽度上显得过分强调。

推出的
当布局和屏幕尺寸发生变化时,可以从原始位置推动组件。 组件宽度保持不变,但其水平位置变化,向左或向右移动。 当发生这种情况时,如果被推离屏幕,它可能会被屏幕边缘部分遮挡。
??
导航抽屉将内容区域推离屏幕。

 

覆盖的

当UI改变时,组件可以被其他元素覆盖而被遮挡。 当组件覆盖时,其宽度和位置保持不变。
??
内容UI区域被导航UI区域覆盖。

 

响应式模式

组件可以根据屏幕尺寸和设备类型调整其尺寸,使用以下模式。 这些尺寸调整可包括:

  1. 使用不同组件以更好地适应空间
  2. 改变组件的可见性以适应更小的空间
  3. 改变输入的方法
    随着屏幕空间增加,可以应用以上响应式模式。

 

出现
当在特定的断点处有额外的空间可用时,因较小屏幕而隐藏的部分UI部分可能会出现
??
当屏幕尺寸增加时,诸如侧面导航栏之类的元素可能会变得可见。

??
一个简单的UI可能会出现更多强大或复杂的选项。

??
在小屏幕上,只有点击某个元素才会出现的内容,当屏幕上有更多可用空间时,可能会默认显示。

 

变形
一个组件可以在特定的断点处从一种格式转换为另一种格式。
??
侧面导航栏可能变形为更大屏幕上的tab选项卡。

??
列表可能变形为更大屏幕上的图像列表。

??
菜单项可能变形为更大屏幕上工具栏中的图标。

 

分隔
当更多屏幕空间可见时,多个层级内容的用户界面可以显示所有的层级内容。 UI元素被划分到这些新的可用空间中。

??
侧面导航,列表内容和详细内容在更大的视图中被分隔开了。

??
tab选项卡的同级内容在较大屏幕上的同一视图中被分隔排列。

 

重排
UI可以改变其布局并重排到新的可用空间中。
??
单列格式的元素可以重新排列在更大的屏幕上,形成多种组合来填满内容区域。
??


水平tab选项卡可以在较大的屏幕上重排为垂直列表。

??
元素可以基于新的屏幕比例或设备方向在组件内重排。

 

扩展
UI可能扩展成更大的空间。
??
卡片可以扩展来填充新的和更大的空间。
??


对话框可以根据内容或特定的增量按比例扩展。

 

位移

UI组件可能会移动到更合适的位置。
??
小屏幕上的底部卡片可能重新定位为较大屏幕上的菜单。

??
浮动操作按钮(FAB)可以移动到在更大屏幕上的相对于其他UI元素的更可见的位置。

 

原文地址:Material Design

译者:糖糖

 

转载请注明:体彩排列五和值走势图 » Material Design Component behavior 组件的适配

登录收藏
 
你可能喜欢的:
10个小时挣10000元?如何用UI组件提高工作效率10个小时挣10000元?如何用UI组件提高工作效率
关于动效落地,我们可以做的更多关于动效落地,我们可以做的更多
表单为什么总是看起来简单,做起来很难?表单为什么总是看起来简单,做起来很难?
手把手教你打造交互作品集手把手教你打造交互作品集
一看就会一做就废,产品列表样式试试这样思考!一看就会一做就废,产品列表样式试试这样思考!
看看你的手机键盘,隐藏了多少设计细节?看看你的手机键盘,隐藏了多少设计细节?
原来折叠屏是这样设计适配的(附案例实战)原来折叠屏是这样设计适配的(附案例实战)
测试产品可用性的关键技巧——启发式评估测试产品可用性的关键技巧——启发式评估
Apple 的设计哲学 · UI 篇Apple 的设计哲学 · UI 篇
为什么它总是能让你的界面变得不精致为什么它总是能让你的界面变得不精致
?