用心感受、用心体会、用心设计、用心反馈

作为设计师我们经常说到响应式设计，但是什么才是真正的响应式设计呢？有多少人知道，有多少人把这个东西做好了呢？今天这篇文章主要介绍的就是响应式设计，现如今响应式设计已经是常态了，我们从电脑转移到手机，然后在转移到各种移动设备上面，这是一个漫长的过程，现如今已经很成熟了，对于设计师来说我们在设计中要精益求精，把这方面的设计做的更好。

响应式网页设计已成为常态，但随着屏幕数量不断增加，为它们设计可能是一项重大挑战。

工作流程通常必须与我们设计的体验一样快地适应，那么多屏设计的最佳实践是什么？我们如何开始？我们如何解决关键问题？

我们一起坐下来寻找答案

“移动优先”总是有效吗？

当我们考虑多个屏幕时，起点应该始终是将要使用该产品的人。

我首先考虑我的客户是谁以及他们将如何体验我的网站或应用程序的内容。

我们设计的一切都基于对某人将如何以及在何处使用特定功能、他们的需求和预期结果的理解。一旦确定了这些关键任务和行为，工作流程和使用数据将决定哪些功能应该存在于哪些屏幕上。

我们通常采用“移动优先”的方法，或者至少是一种在早期就考虑到任何限制并允许他从长远来看节省时间的方法。在一个完美的世界中，始终采用“移动优先”策略会很棒。然而，根据项目的不同，它可以从移动设备或桌面设备开始。

例如，某些功能存在于Web 的应用程序中，稍后可能会推出到移动应用程序中，而其他功能，如移动支票存款，除了移动应用程序之外，不会出现在任何其他地方。

如果你不知道移动设备需要具备的关键功能，并且可以在网络/桌面版本上扩展它们，移动优先就可以很好地发挥作用。在处理企业应用程序时，有时从最大数量的数据和功能开始，构建它们并缩小移动使用的范围和功能是有意义的。

尽管我们遵循移动优先的一般准则，但在大多数情况下，我们必须将所有内容放入更大的画布中来布局概念。然后，我们可以通过隐藏或根本不向用户显示的方式，将不太重要的内容一一剪掉以适应更小的屏幕。

我们还首先定义了目标受众和主要观看内容的屏幕尺寸。然后向开发团队提供三个主要断点的设计，让他们了解所需的基本框架。

对于必须跨多个屏幕构建的功能，老吴建议寻找共同点以保持一致性。

我并不是说所有设备都需要完全一致，但是像信息架构这样的东西——了解如何找到某些特征和功能——应该是一致的。我总是从通用元素和核心功能开始，然后再关注屏幕特定的细微差别（如果有的话）。

在为内容和导航区域打下坚实的基础后，我喜欢快速调整其布局以适应其他目标屏幕尺寸。

我的第一个调整总是关于层次结构、布局和导航。对于较小的尺寸，你可能需要折叠导航选项或为你的内容选择更垂直的布局。当你的维度扩展时，你或许能够显示更多信息。在大多数情况下，这种转变并不剧烈，但重构你的设计布局可以使你的网站或应用程序的用户体验受益。”

然后 我们调整单个元素的大小以及样式，尤其是排版。

为了针对不同的屏幕调整设计，我们还建议创建网格和断点。在这时，将会有大量的迭代，但你可以使用各种工具来节省时间。

使用响应式调整大小和重复网格节省时间

网格复习：大厂设计师必备技能，UI 设计中网格最佳实践

Adobe XD 中的响应式调整大小是了解元素如何缩放到不同大小的一个很好的指标。它对按钮、卡片、导航元素和图像等内容特别有用。你仍然需要稍微调整一下，但响应式调整大小将为你完成大约 80% 的工作。

这块建议注意设置：如果文本框或图像等项目以你不希望的方式缩放，你可以手动设置和调整每个元素的锚定或对齐方式。

响应式调整大小与资产面板等其他功能相结合，使他能够快速启动并在多种屏幕尺寸上运行他的设计核心。它还确保你在进行设计更改时保持灵活性，并让它们跨布局无缝更新。

我发现响应式调整大小最好在设计过程的早期和经常使用。从一开始就定义 UI 缩放规则可以帮助你保持一致性并确保你的设计能够适应任何屏幕尺寸。

为了充分利用响应式调整大小，我们建议与整个组保持有条理，因为它们可以帮助定义画布上对象之间的关系（如下图所示）。

同时，重复网格是在大规模设计内容时保持一致的好方法。它允许你尝试新想法、试验你的设计并探索不同的颜色和布局选项。

将其用作任何内容密集型布局的基础，你可以快速从单列布局扩展到多列布局，同时无缝地重排你的内容。

在设计列表、表格和菜单时经常使用重复网格。只要重复显示的元素带有元数据，我就使用重复网格设计基本布局，然后根据需要更改文本或图像。当屏幕尺寸发生变化时，我通常会更改网格框架并修改间距和字体大小以适应屏幕尺寸。

测试，测试，再测试

无论你做什么，我都会建议对你的设计进行广泛的预览和测试。这是识别关键问题的最简单、最有效的方法。

在每个屏幕尺寸和断点处测试你的设计，看看它们的外观和功能如何。在与你的内部团队分享它们之前，请务必自己检查它们。

在整个设计过程中，我们不断测试任何重大更改，甚至只是很小的调整，使用 XD 的预览窗口或 XD 移动应用程序直接在设备上预览设计。在你可以直接测试之前，你不会知道 12px 的文本大小在 iPhone X 上会是什么样子。

一旦你对结果感到满意，就将你的设计展示在人们面前。

这将发现基本错误、不一致以及由于设计师的偏见或过于接近细节而可能遗漏的任何内容。

然后将你的设计开放给更大的内部团队进行测试。

XD 允许你的队友和跨职能合作伙伴在屏幕上发表评论。因为在与将使用该产品的实际人员一起测试设计之前，许多不同的人将能够查看并将任何发现或观察结果传达给设计师。它还可以识别在实际解决问题时可能遗漏的任何内容——这是一个比屏幕更大的问题！

因此，一如既往，答案是“视情况而定”。我们的流程可能会因项目而异，但至少我们现在拥有可以为我们节省大量时间的工具。他们可以帮助我们调整和调整我们的设计，并将为我们完成大部分工作。这意味着我们有更多时间在内部和外部与真人一起测试我们的设计，并相应地改进它们。因此，无论用户使用何种设备，我们都将拥有一款更受用户喜爱的更好产品。

·写在最后

这篇文章主要介绍的就是Adobe XD软件针对于响应式布局设计的便捷，以及响应式布局需要注意的一些点，大家如果还没有使用XD，可以在公众号后台回复：“软件”，获取软件下载链接，里面包含了安装教程，下一次制作响应式设计的时候，使用这个软件就更加便捷了。

各位，加油！！！

- THANKS -