响应式UI相关

Material Design 中的响应式布局可以适配任何尺寸的屏幕。这个 UI 指南包括:用于确保布局一致性的弹性网格,在不同的屏幕上内容的断点细节,以及应用从小屏幕到大屏幕如何缩放的说明。

断点

为了获得最佳用户体验,Material Design 应该为以下断点适配布局:480、600、840、960、1280、1440、以及 1600dp。

  1. 布局中的摘要和详细信息视图
  • 布局宽度小于 600dp 时,可以使用单级的内容层次(可以是摘要或详细信息,但两者不能同时显示)填满屏幕。
  • 布局宽度超过 600dp 时,可以同时放置两级内容层次(可以同时显示摘要和详细信息)。
  1. 最大屏幕宽度

布局宽度超过 1600dp 时,可以让布局宽度一直增加,直到达到最大宽度。此时,网格可以执行以下的某一项:

  • 变成居中对齐,在内容区域两侧增加外边距
  • 保持左对齐,同时不断增加内容右侧外边距
  • 内容宽度继续增加,同时展示出更多额外的内容
断点系统
不同屏幕、设备和方向下,列和宽度的规范

界面行为

当屏幕大小改变时,UI 会使用下列特定的行为来适配屏幕。


可见性

宽度

模式

出现
  • 在小屏幕中隐藏的 UI元素,随着屏幕可用空间的增加,可能会出现;
  • 侧边栏这样的元素可能会变得可见;
  • 一个简单的 UI 可能会出现更多强大或复杂的选项;
  • 在小屏幕上,只有点击某个元素才会出现的内容,当屏幕上有更多可用空间时,可能会默认显示。
变形

-一个 UI 元素可以从一种格式变形成另一种格式;
-侧边栏导航可能变形成 Tab 选项卡;
-列表可能变形成网格列表;
-菜单可能变形成工具栏中的图标。

重排

-UI 可以重排到可用空间中;
-来自单列格式的元素可以重新排列成多种组合来填满内容区;
-水平 Tab 选项卡可以重排成垂直列表;
-元素可以基于新屏幕的比例或设备方向在组件内部重排。

扩展

-UI 可能扩展成更大的区域;
-内容卡片可以扩展来填充新的空间;
-对话框可以根据内容或特定的增量按比例扩展。

位移

-UI 组件可能会移动到更合适的位置;
-小屏幕上的底部卡片可能会作为菜单重新定位;
-浮动操作按钮(FAB)可以移动到相对其他元素更显眼的位置。

本文摘选于:
https://www.mdui.org/design/layout/responsive-ui.html

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 1、通过CocoaPods安装项目名称项目信息 AFNetworking网络请求组件 FMDB本地数据库组件 SD...
    阳明AI阅读 16,039评论 3 119
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,680评论 1 92
  • 钥匙 同题诗 我把自己 尝试到折断 也没能打开 你紧锁的心 我躺在你的心里 这样近又那样远 我的世界都是你 而在你...
    苹果红阅读 1,592评论 3 1
  • 用了七年苦心孤诣的书写,却得到一纸凌乱不堪的残言,像极了城市里明明灭灭的霓虹灯,语焉不详。 在寻你的时光的脉络中,...
    阿炽阅读 1,560评论 0 0