数据API 产品矩阵 案例 关于
掌握聚合最新动态了解行业最新趋势
API接口,开发服务,免费咨询服务

如何快速测试响应式布局?

给响应式布局做测试从来都不简单,事实上在寻找桌面、移动和平板设备的尺寸之间的那一个个布局 “断点” 一直都很麻烦。现在我们给大家准备了一个趁手的工具——Resizer

Resizer 是什么?

△使用 Resizer 很简单:输入您的网址就可以在各个尺寸下预览网站和演示项目。

作为数字产品的设计和开发人员,我们面临的最大挑战之一就是,如何在正确的时间为各种类型的用户提供正确的 UI。无论是通过手机还是 VR,使用手势还是鼠标,使用最新尖端设备还是古旧的 2G 设备,我们的职责是让所有人都能用上我们的产品。这个任务并不简单,没有任何一种设计解决方案能满足所有需求。

491-640.jpg.jpg

我们已经开始在布局断点、响应式网格、界面行为和用户界面模式等方面提供 Material Design 设计指导服务。Resizer 正是用来让您使用动态手段测试设计成果的工具。而且这个直观的工具能促进设计师、开发者和项目的利益相关方三者之间达成更加卓有成效的对话。

探索 UI 模式

492-640.jpg.jpg

屏幕尺寸的更改会导致特定元素的位移,这些改动可能会导致您需要根据情况选择不同的 UI 模式:显示、形变、分割、折行、扩展,等等。Resizer 帮助设计师和开发者以可视化的方式看清,哪种 UI 模式在哪种尺寸下是最适合采用的。我们已经准备好了几个演示文件,您可以在 Resizer 的地址栏里中找到它们:

Pesto 演示:

493-640.jpg.jpg

△ Pesto:现代化的烹饪应用,可以帮助您发现、分享、存储食谱。

食谱应用 Pesto 展示了一些较受欢迎的设计模式。它使用了基于屏幕大小自动进行流式布局的网格列表。应用栏中的图标会根据工具栏的高度变换。根据用户是在桌面端还是移动端查看应用,悬浮按钮 (FAB - "Floating Action Button") 会改变位置。

494-640.jpg.jpg

查看食谱的详细信息时,请尝试点击右上角的 “更多” 图标。请注意桌面设备这个操作会就近展开一个菜单,而在移动设备上则会在屏幕底部弹出菜单。

Shrine 演示:

495-640.jpg.jpg

△ Shrine:购物应用,目标用户为年轻人、DIY 制造爱好者以及喜爱独立小规模零售品的购物者。

Shrine 强调真正改变导航模式的重要性,而不是简单地基于屏幕尺寸或设备对各组件进行缩放。 Shrine 使用不同类型的响应式网格列表创造出顺畅的购物体验。选项卡展示了一个组件是如何转换为另一个组件的。您可以尝试使用 Resizer,看看它们是如何从大窗口变成小窗口,从平板电脑模式转换到手机模式的。

下一步:自己动手试试

围绕自适应 UI 制定合理的指导方针是一个持续的过程,我们一直努力在 Material Design 指导文件中提及这一点。Resizer 是动态地展示这些解决方案的工具,因此您可以将您的产品的 URL 粘贴到其中,看看您的产品在各种尺寸的屏幕上表现如何。

0.gif

原文来自:谷歌开发者

声明:所有来源为“聚合数据”的内容信息,未经本网许可,不得转载!如对内容有异议或投诉,请与我们联系。邮箱:marketing@think-land.com

掌握聚合最新动态了解行业最新趋势
API接口,开发服务,免费咨询服务
如何快速测试响应式布局?
发布:2017-02-13 11:20:17

给响应式布局做测试从来都不简单,事实上在寻找桌面、移动和平板设备的尺寸之间的那一个个布局 “断点” 一直都很麻烦。现在我们给大家准备了一个趁手的工具——Resizer

Resizer 是什么?

△使用 Resizer 很简单:输入您的网址就可以在各个尺寸下预览网站和演示项目。

作为数字产品的设计和开发人员,我们面临的最大挑战之一就是,如何在正确的时间为各种类型的用户提供正确的 UI。无论是通过手机还是 VR,使用手势还是鼠标,使用最新尖端设备还是古旧的 2G 设备,我们的职责是让所有人都能用上我们的产品。这个任务并不简单,没有任何一种设计解决方案能满足所有需求。

491-640.jpg.jpg

我们已经开始在布局断点、响应式网格、界面行为和用户界面模式等方面提供 Material Design 设计指导服务。Resizer 正是用来让您使用动态手段测试设计成果的工具。而且这个直观的工具能促进设计师、开发者和项目的利益相关方三者之间达成更加卓有成效的对话。

探索 UI 模式

492-640.jpg.jpg

屏幕尺寸的更改会导致特定元素的位移,这些改动可能会导致您需要根据情况选择不同的 UI 模式:显示、形变、分割、折行、扩展,等等。Resizer 帮助设计师和开发者以可视化的方式看清,哪种 UI 模式在哪种尺寸下是最适合采用的。我们已经准备好了几个演示文件,您可以在 Resizer 的地址栏里中找到它们:

Pesto 演示:

493-640.jpg.jpg

△ Pesto:现代化的烹饪应用,可以帮助您发现、分享、存储食谱。

食谱应用 Pesto 展示了一些较受欢迎的设计模式。它使用了基于屏幕大小自动进行流式布局的网格列表。应用栏中的图标会根据工具栏的高度变换。根据用户是在桌面端还是移动端查看应用,悬浮按钮 (FAB - "Floating Action Button") 会改变位置。

494-640.jpg.jpg

查看食谱的详细信息时,请尝试点击右上角的 “更多” 图标。请注意桌面设备这个操作会就近展开一个菜单,而在移动设备上则会在屏幕底部弹出菜单。

Shrine 演示:

495-640.jpg.jpg

△ Shrine:购物应用,目标用户为年轻人、DIY 制造爱好者以及喜爱独立小规模零售品的购物者。

Shrine 强调真正改变导航模式的重要性,而不是简单地基于屏幕尺寸或设备对各组件进行缩放。 Shrine 使用不同类型的响应式网格列表创造出顺畅的购物体验。选项卡展示了一个组件是如何转换为另一个组件的。您可以尝试使用 Resizer,看看它们是如何从大窗口变成小窗口,从平板电脑模式转换到手机模式的。

下一步:自己动手试试

围绕自适应 UI 制定合理的指导方针是一个持续的过程,我们一直努力在 Material Design 指导文件中提及这一点。Resizer 是动态地展示这些解决方案的工具,因此您可以将您的产品的 URL 粘贴到其中,看看您的产品在各种尺寸的屏幕上表现如何。

0.gif

原文来自:谷歌开发者

声明:所有来源为“聚合数据”的内容信息,未经本网许可,不得转载!如对内容有异议或投诉,请与我们联系。邮箱:marketing@think-land.com

选择想要的接口, 看看能免费获取多少次调用 选择(单选)或填写想要的接口
  • 短信API服务
  • 银行卡四元素检测[简]
  • 身份证实名认证
  • 手机状态查询
  • 三网手机实名制认证[简]
  • 身份证OCR识别
  • 证件识别
  • 企业工商信息
短信API服务
  • 短信API服务
  • 银行卡四元素检测[简]
  • 身份证实名认证
  • 手机状态查询
  • 三网手机实名制认证[简]
  • 身份证OCR识别
  • 证件识别
  • 企业工商信息
  • 确定
选择您的身份
请选择寻找接口的目的
预计每月调用量
请选择预计每月调用量
产品研发的阶段
请选择产品研发的阶段
×

前往领取
电话 0512-88869195
×
企业用户认证,
可获得1000次免费调用
注册登录 > 企业账户认证 > 领取接口包
企业用户认证领取接口包 立即领取
× 企业用户认证,
可获得1000次免费调用,立即领取>
数 据 驱 动 未 来
Data Drives The Future