响应式设计

创建能够在多个设备上工作的设计。

自适应设计会自动调整屏幕布局，以匹配正在使用的屏幕的功能。这使设计团队能够设计出可以跨多个设备（如台式机、平板电脑、手机等）无缝工作的产品。

响应式设计意味着设计一个在不同分辨率（如移动设备、平板电脑和桌面设备）上运行良好的应用程序。研究数据显示，移动流量正在显着增加，83%的用户可能会在移动和桌面设备上使用应用程序。同时，用户对这些应用程序在切换设备时不是很吸引人和可用性感到不满。

因此，无论使用何种设备，设计适用于各种情况的应用程序都非常重要。这也可以应用于适用于iPhone和iPad的本机移动应用程序。

移动优先方法

移动优先的方法意味着首先针对最小的屏幕进行设计，然后逐步提高。这是一种意识形态，即设计移动版本是最困难的事情，因为空间有限。由于空间有限，只会制作设计的基本功能，从而解决和设计主要的用户体验。一旦手机完成，设计更大的屏幕将更容易。这是创建响应式设计的最佳策略之一。

以下是响应式设计过程中要遵循的步骤：

第 1 步：内容清单

响应式设计的第一步是创建一个文档，其中包含应添加到应用程序的元素或信息组。然后根据信息的重要性对信息进行优先级排序，以确保在所有分辨率中预先捕获优先级信息。

步骤 2：定义断点

在响应式设计中，“断点”是设计和内容适应该特定分辨率的“点”。根据要扩展设计的平台（台式机、平板电脑、移动设备），相应地定义断点。下面显示了六 （6） 种最常用的屏幕尺寸;

还值得注意的是，用户可以横向查看应用程序（在移动设备或平板电脑上）。此外，桌面设备上的应用程序用户可能无法最大化窗口。因此，应优化设计以处理“中间”，而不仅仅是常见的屏幕尺寸。

步骤 3：定义布局（动态布局）

动态布局是指随着窗口大小的更改而更改屏幕布局的布局。这是通过使用百分比而不是固定像素宽度定义屏幕部分来实现的。此外，在决定布局时规划列比。可用于响应式设计的流体布局包括：

a. 主要是液体

这是大多数响应式应用程序中使用的流行流体布局之一。Mostly Fluid 是一种多列布局，可在大屏幕上引入更大的边距。随着屏幕尺寸的减小，流体网格会进行调整以显示最重要的信息，从而使其他信息垂直堆叠。下面给出了一个示例。

通常使用此模式，因为屏幕布局的核心结构可能不会在平板电脑中更改。但是，在移动设备中，由于屏幕尺寸较小，布局可能会发生重大变化。

b. 列放置

这是响应式设计中使用的另一种流行的多列布局。它从多列开始以获得更大的屏幕，然后随着屏幕变窄（在移动应用程序中）而删除每一列，从而慢慢减少到一列。下面给出了一个示例。

在此模式中，元素的大小几乎保持不变，这与元素大小可变的其他流体模式不同。

c. 布局移位器

这种类型的布局很少使用，因为布局根据屏幕尺寸变化超过 60%。在此方法中，布局将根据部分的重要性而变化，并首先显示主要信息。如果使用这种布局，设计师将有更多的工作要做。下面给出了一个示例。

d. 微小的调整

这种布局最适合简单且屏幕上数据较少的应用程序。对于具有如此简单的应用程序，多设备适配可能只是对字体大小和图像布局进行一些微小的调整。下面给出了一个示例。

e. 画布

外最后也是最受欢迎的流体布局是画布外。此布局利用屏幕外空间来保留内容或隐藏导航，直到较大的屏幕允许其可见或直到用户执行操作来查看它。此模式通常用于本机应用程序。下面给出了一个示例。

步骤 4：创建设计组件/元素

确保要创建的元素与屏幕尺寸一致且兼容。创建样式指南并定义文本大小和组件大小在不同分辨率下如何变化。有时，设计元素和功能必须适应不同的分辨率。元素还应具有足够的填充和白色间距，以确保存在适当的层次结构，并且不会感到拥挤或未对齐。

下面显示了跨不同屏幕分辨率的响应标头示例。

在此过程中可以响应的其他设计元素包括：

图像/视频分辨率可以根据屏幕尺寸逐渐降低。

文字大小

文本大小应根据设备进行更改，以使信息可读。

设计模式（和功能）

a. 考虑到空间，有时设计模式必须稍作改变（在表现和功能方面）。

b. 很少有设计组件可能不得不在响应式设计的功能上妥协。

三. 移动设备和平板电脑设备不支持“悬停”触发器，

而桌面设备支持。示例 — 号召性用语按钮在移动设备中没有“悬停”交互。

d. 当应用程序从 Web 切换到移动设备时，触摸目标将有所不同。由于屏幕很小，手机上的触摸目标将在 7-10 毫米之间。

对齐和间距

在“微小调整”和“列放置”等布局中，在切换到其他分辨率的同时调整对齐方式和间距。

步骤 5：在真实设备中进行测试

设计完成后，在真实设备（计算机，iPad和移动设备）上测试原型，以确保网站正常运行，没有任何可用性问题。

提示/最佳实践

根据客户需求确定应用程序内容的优先级。

使文本在不同平台上可访问。在任何给定的分辨率下，字体都不应太大或太小。

测试同一屏幕在不同分辨率下的设计元素的外观，并相应地定义每种分辨率的标准尺寸。

首先设计最小的视图（移动），您可以轻松缩放为更大的视图。

确保导航一致（标签）并在所有类型的设备上运行良好。

根据应用程序的内容和复杂性选择合适的布局。

确保无论屏幕分辨率如何，都能将元素的正确层次结构很好地传达给用户。

在真实设备上测试您的设计，并确定任何可访问性/可用性问题。

清单

布局在不同的分辨率下是灵活的。

设计元素（文本、图像、组件）是灵活的。

选择适当的布局。

确定不同分辨率的内容优先级。

定义适当的断点。

在真实设备上测试原型。

快速提问

对执行响应式设计时要遵循的步骤进行排序

定义设计的断点。

收集不同分辨率的内容并确定其优先级。

在真实设备中进行测试。

定义要使用的布局类型。

创建响应式设计组件

在下面的评论部分留下您的答案，并加入我们的社区，以获取有关UX设计的更多有趣讨论

HMI交互设计,网站U I设计公司,石家庄UI设计公司,UI外包公司,UI设计公司排名,人机交互设计公司