目录
线框图的目的是什么？
线框图旨在创建应用或网站布局外观的初始示例。如果您见过建筑蓝图，那么线框图对网站的作用也类似。公司使用线框图是为了让每个人都知道他们网站或应用设计的目标方向。
创建线框图后，参与项目的人员将寻找潜在的改进领域。线框图到位后，团队通常会开始设计原型。
测试和迭代：测试不同的线框图并获得关于哪些有效、哪些无效的反馈。只有这样做了，才能进一步推进网页设计流程。
线框图和原型之间有什么区别？
线框图是网站布局的静态示例；原型往往更具流动性，并展示用户如何与应用或网站互动。
原型比线框图更接近发布阶段。企业不是勾勒基本细节，而是利用原型来识别用户体验差距。
线框图中包含什么？
通常，您会在线框图中看到以下组件：
- 布局： 线框图显示文本、视觉效果、页眉、页脚、导航菜单和徽标在网站或应用程序上的显示位置。
- 导航： 线框图应显示用户如何在网站或应用程序的各个部分之间导航。
- 内容放置： 设计人员必须显示内容（例如文本和图形）在页面上的显示位置。
- 功能： 按钮、链接、表单和小部件应显示在线框图中。
如何制作线框图？
可以使用笔和纸制作线框图，这对于非常早期的设计来说可能是一个值得考虑的选择。但是，如果您正在进行更大规模的网站品牌重塑，则应该考虑专门用于创建线框图的软件。您还需要考虑线框图的专业外观，以及您可能需要的功能（例如协作）。
选择合适的工具：线框图工具有免费和付费两种选择，您应该根据成本和功能进行研究。如果可能，请使用免费试用版。
线框图有哪些不同类型？
您通常会看到三种线框图类型：
- 低保真度： 基本草图。
- 中等保真度： 比基本草图更详细，但仍不是最终产品。
- 高保真度： 几乎与最终网站或应用程序设计的预期一致。
不要过度复杂化：从简单的草图构建，而不是一开始就做大，然后再试图降低复杂性。
线框图在用户体验 (UX) 中的重要性如何？
线框图是原型和最终设计的先决条件。团队应该使用它来确保他们的网站和应用程序易于导航；跳过 网站原型 可能会损害用户体验。
公司还应该使用线框图来了解用户的旅程，并注意可能存在问题的地方。
收集反馈：从你的目标受众那里获得反馈并征求建议。
线框图有哪些好处？
团队使用线框图的原因包括：
节省时间和金钱： 企业应该使用线框图及早发现问题，以免在项目中投入更多时间和金钱。
尽早获得宝贵的反馈： 潜在客户和项目利益相关者应该就如何改进网站或应用程序提供建议。
优先考虑功能： 使用线框图时，您应该考虑哪些方面最重要，并使这些方面更清晰。
弥合设计与开发之间的差距： 线框图是设计师在网页/应用程序设计活动中遵循的蓝图，他们在制作原型和最终版本时都应遵循此布局。
线框图如何改进网页设计流程？
以下是您在设计流程中需要线框图的一些原因：
鼓励协作： 项目中的每个人（设计师、开发人员等）都应该讨论线框图，并就需要包含的内容提供想法。获取用户反馈并考虑客户的意见是其中的一部分。
提供可视化路线图： 开发人员和设计师应该在项目的后期使用线框图。
帮助及早发现并解决潜在问题： 使用线框图来查找潜在的 用户体验瓶颈 并进行必要的调整。
在哪里可以找到线框图工具和资源？
您应该寻找一系列免费和付费的线框图工具。以下是一些示例：
- Figma： 项目干系人之间的实时编辑和反馈；Adobe 曾试图在 2023 年收购 Figma，但未能成功，Figma 仍然保持独立。
- Sketch： 基于矢量的线框图。
- Balsamiq： 线框图设计和可视化。
- Adobe XD： Adobe 的旗舰线框图工具，功能丰富，但需要一定的学习曲线。
利用资源：查看 YouTube 和博客上的内容，并考虑参加在线课程。
制作线框图时有哪些常见错误需要避免？
是的，您应该避免所有这些：
完全跳过线框图阶段： 在进入原型设计阶段之前完成线框图流程，以便项目更顺利地进行。
过早地进行过于详细的设计： 线框图只是一个框架；在原型中添加视觉效果、文本等。
没有获得团队的反馈： 从参与项目的每个人那里获得反馈并分享您的设计。
不迭代线框图： 测试并迭代你的线框图，并思考你的团队和目标受众认为哪些方面可以改进。
总结
团队应该在以下情况下使用线框图 开发网站，你需要在做任何其他事情之前创建这些。在线框图布局中显示你希望元素出现的位置，并征求目标受众的反馈。考虑你需要一个在线工具，还是一支笔和一张纸就可以。参考本指南的提示并开始你的第一个线框图；请注意，它一开始并不完美。
