下： 尽管 Illustrator 不是真正的

响应式工具，但它的画板使您能够从移动优先的方法开始，并使用预设或可自定义的断点快速构建桌面版本。 其可定制的网格可实现设计的一致性。 它允许您通过单击并设置尺寸来为线框创建精确尺寸的框。 如果您更喜欢使用 Photoshop 来制作保真度更高的模型，则可以从 Illustrator 中复制并粘贴内容线框来设置基础。 注意：如果您更喜欢在响应式线框图或原型设计时使用代码，请随时跳到底部的“后续步骤”部分以获取其他有用的资源。 主体：120+ 原生 React UI 组件与 Next.js 完全兼容 尝试 KENDOREACT 内容线框的移动优先方法在这个简短的教程中，我们将使用 Illustrator 作为移动优先方法的一部分，以便将我们的注意力集中在最重要的内容上。我们将创建五个视。

口来为响应式内容线框奠定基础。 1. 创建文档在 Illustrator 中，创建五个具有以下宽度和高度（以像素为单位）的新文档：（根据您使用的 Illustrator 版本，您还可以在同一文档中创建不同的画板。） UXPin工具界面截图 工具界面。来源：Adobe Illustrator）（查看大图） 2. 创建 Whatsapp 号码列表 容器在 320 像素宽的文档中，制作七个无衬里的框，并填充中性灰色。 UXPin工具界面截图 工具界面。（来源：Adobe Illustrator）（查看大图） 3. 创建标签将文本放在每个框上 - 按降序排列：页眉、主视频、视频 02、视频 03、视频 04、视频 05 和页脚。我使用白色文本与相对较暗的框形成对比。 UXPin工具界面截图 工具界面。（来源：Adobe Illustrator）（查看大图） 4. 调整框的大小使主视频框比其他视频框稍大，以表明其。



优先级。如有必要，缩小页眉和页脚 -但保持它们的全宽。 UXPin工具界面截图 工具界面。（来源：Adobe Illustrator）（查看大图） 5. 复制框现在您已经有了它们的相对尺寸和标签，将框复制到其他文档或画板。 根据需要调整它们的大小，并记住这些框是近似值。它们代表内容的存在，而不是内容的精确大小或间距。 UXPin工具界面截图 工具界面。（来源：Adobe Illustrator）（查看大图） 下一步内容参考线框的创建并没有什么大的揭示或其他令人兴奋的事情。 它们适合内容库存和低保真线框之间的工作流程。这是因为他们的目的只是建立一个信息层次结构，如果涉及客户，则让他们更多地考虑内容和信息流的概念，而不是实际内容本身。 整个过程更像是“怎么样……”对话，而不是“如何……”一旦每。