响应式设计线框图

考虑到有多少人在他们的移动设备上访问网络，响应式设计不是可选的。网站需要在各种设备上看起来不错——台式机、笔记本电脑、平板电脑和智能手机。线框图是创建响应式设计的关键步骤。

响应式线框是一组具有不同布局的线框，用于相同的设计：

•  展示 Web 内容如何适应不同的网格宽度

•  帮助定义页面结构

• 展示内容如何与不同的布局一起使用

响应式线框为跨多种设备工作的网站奠定了基础。为了创建它们，我们从简单的草图开始。

什么是响应式设计

响应式设计是对一个直到最近才出现的问题的解决方案——如何使设计在不同的设备类型和尺寸上看起来不错。到 2021 年，移动用户仅占全球互联网用户的一半多一点。但大多数人使用几种不同的设备——台式机、笔记本电脑、平板电脑和智能手机。

响应式设计使用相同的代码为所有设备提供服务。浏览器检测屏幕尺寸、平台和方向，并选择使用代码的哪些部分来适应该设备类型。流体网格、灵活的图像和媒体查询是三个技术要素。因此，所有用户都能获得出色的用户体验——无论他们是从桌面还是小屏幕手机浏览您的网站。

识别您的内容

从内容分析开始。内容是用户访问网站的目的，我们的工作是帮助他们找到所需的信息。要创建网站线框系统，重要的是要确定您的网站将提供哪些内容。

例如，如果您正在设计一个电子商务网站，您可能需要以下类型的页面：

• 主页

• 产品类别

• 产品详情页面

• 购物车页面

• 订单确认页面

这些页面中的每一个都有自己的内容，并且需要自己的布局。因此，下一步是为每种类型的页面确定必填和可选的内容部分。

例如，对于主页，您可以考虑页眉、全局导航、英雄横幅、页脚等部分。

定义用户流

在您决定每个页面上应该包含哪些内容之后，开始创建用户流。这将帮助您定义交互场景并衡量内容在上下文中的重要性。从用户的角度考虑您的内容。您的访问者将如何与内容互动？

绘制目标用户流程——用户为实现特定目标而采取的一系列步骤。用户流程将帮助您了解需要创建哪些线框以及应如何连接它们。之后，勾勒出核心屏幕。

接下来，您可以开始为每种类型的页面定义响应式线框模板的基础。模板应指定其中的内容区域。在处理模板时，寻找可重用的元素（组件和设计模式）。在许多情况下，可以定义可在许多页面上重复使用的容器。例如，网站经常在不同页面上重复使用相同的页眉和页脚

选择网格

灵活的网格是响应式设计的基础元素。使用网格对齐元素有助于建立视觉层次结构。网格设计在所有设备上看起来都是一致的，并且组织良好。

设计从一定数量的列开始——通常为 12。这个数字非常受欢迎，因为它可以分成 2、3、4 和 6 列，允许对称或不对称设计。列宽不变。相反，在此特定布局中，列数从台式机上的 12 调整为平板电脑上的 8 和移动设备上的 4。

有许多不同的布局可供探索，而不仅仅是 12 列网格。您选择的类型将取决于产品类型、内容和技术限制。通常，大多数网格的列宽为 60–80 像素。选择适合您的列宽是最重要的决定，因为它是内容宽度的主要决定因素。

决定你的目标屏幕和布局

选择网格布局后，定义屏幕尺寸。如果你设计一个网站，你至少需要考虑三种类型的屏幕：台式机、手机和平板电脑。其他需要考虑的因素是产品的内容和目标受众的设备偏好。

Bootstrap 或 Foundation 等 Web 框架具有默认的响应式网格。例如，Bootstrap 的平板纵向模式宽度为 768px，而智能手机最大宽度为 480px。如果您使用设计工具，您可以通过单击并设置尺寸来自定义断点。但是，一旦您开始将设计从图形设计工具转换为浏览器，就会使用 CSS 媒体查询设置断点。

识别内容区域

下一步是识别内容区域。它将帮助您为之前在第 1 步和第 2 步中定义的每种类型的页面创建清晰的视觉层次结构。在这个阶段，不要专注于内容本身。相反，请考虑如何安排它以进行快速扫描。根据您希望用户处理信息的方式来规划布局，并从在画布上绘制框开始。

对于您定义的每种类型的响应式线框模板，您需要创建区域图。区域是指示将出现在页面上的内容和组件类型的框和标签。这些图表显示了页面上的内容区域和功能元素。

添加内容和 UI 元素

当您对视觉层次结构感到满意时，开始用内容和 UI 元素填充区域。目标是以允许快速扫描的方式排列元素。将重点放在要呈现给用户的信息的顺序上。人们从上到下，从左到右扫描网页。F 形图案适用于桌面和移动屏幕因此，您可以通过重新排列框的大小和位置来改进扫描。

此时避免添加颜色和选择字体。目标是查看布局是否最适合内容。添加真实文本和图像后，您可能会发现布局效果不佳。不要犹豫改变它并寻找更好的方式来呈现信息。此外，请记住检查您的 UI 在不同屏幕尺寸上的外观，并在需要时进行调整。

遵循移动优先的心态，从您的设计的移动版本开始。在您在那里创建了良好的视觉层次结构之后，转到另一个屏幕维度。

仅线框关键屏幕

无需布置每一个视图——只需布置关键屏幕即可。Wireframes 的目的是为您提供足够的信息，以便您做出决定并开始构建。这在对响应式布局进行线框设计时尤其重要。在确定什么可行之后，您可以开始构建真实的东西并使用代码中的真实数据。

与团队和客户分享您的线框图

与您的团队共享响应式线框有几个好处。首先，它更容易想象最终设计的外观。其次，它允许在各种屏幕尺寸和分辨率上测试布局。

完成线框图后，与开发人员和客户共享它们。定期的设计师-开发者协作对于您的设计工作流程至关重要。线框让开发人员清楚地了解他们需要编码的元素。有时他们甚至可以重用某些线框工具的代码。对于客户而言，确保他们理解并同意内容优先级至关重要。

给每个屏幕一个参考编号，以使讨论更容易。

以上内容为转载