ch
English
线框和模型都支持产品开发，帮助设计团队创造迷人的用户体验。但是，线框图侧重于高级设计概念的基本布局和用户流程，而模型则展示了最终产品的视觉设计。
继续阅读以了解更多信息：
什么是线框图以及线框图的主要优点
什么是模型，以及它如何帮助您的网站和产品设计过程
何时使用模型与线框——以及方便的 Figma 模板来帮助您入门
什么是线框？
线框是一个基本的低保真蓝图，它捕获了网页或应用程序屏幕的早期想法。低保真线框是简单的设计，通常是黑白或带有占位符内容的灰度。这有助于设计和产品团队将注意力集中在基本的用户旅程问题上，例如：
什么样的屏幕可以帮助目标受众完成用户流程中的任务？
用户在每个屏幕上需要哪些信息才能继续前进？
为用户组织页面内容的最佳方式是什么？
线框图的 4 个主要优点
线框图支持设计过程早期阶段的探索。用户体验设计团队可以使用线框来：
协调利益相关者。线框图鼓励与战略家、产品经理和开发团队在高层结构、信息架构、用户流程和 UI 设计方面进行协作。
加快产品设计速度。线框很容易制作——无需打磨。设计团队可以快速启动它们以了解基本功能和用户交互。
创建以用户为中心的设计。用户测试线框图可以帮助设计人员找到最能满足受众需求的方向。
发现潜在的问题。线框图可以帮助团队及早发现问题，避免数字产品最终设计中出现代价高昂的错误。
3 线框图最佳实践
通过以下线框图最佳实践改进您的产品开发流程：
选择低保真度进行用户测试和利益相关者反馈。省略高保真设计元素，让观众专注于您所呈现的伟大想法。
选择高保真度来向客户展示和讲述。需要让客户或投资者同意您的设计方向吗？展示高保真线框图，帮助他们可视化成品。
创造它们，然后让它们走。使用早期线框图生成输入。一旦获得利益相关者或用户的反馈，请将其放在一边。继续进行下一次迭代。
什么是模型？
模型是最终产品的高度抛光或高保真视觉表示。模型注重形式，而不是功能。它们包括用户界面和视觉元素的静态渲染，包括按钮、颜色、图像、图标、文本、版式和字体。在开发开始之前，使用它们来审查最终产品的 UI 和视觉设计。
模型如何帮助完善设计
您可以使用模型通过以下方式为最终产品选择最佳的视觉外观：
可行的利益相关者反馈和支持。模型可以帮助团队成员、用户和投资者更好地了解成品的外观。这有助于设计团队获得清晰有用的反馈。
快速且简单的迭代。修改模型很简单，因为它们不需要任何代码来构建。
视觉设计的一致性。您的模型是在产品开发过程中保持一致的品牌视觉设计的首选资源。
模拟专业技巧
无论您是要创建新的移动应用程序还是重新设计公司博客，都可以应用以下技巧来获得更好的模型：
在构建之前进行头脑风暴。在制作模型之前勾勒出设计理念。线框图的输入也可以帮助塑造你的模型。
牢记可用性。应用用户熟悉的 UI 模式。尽可能简化用户体验。
在模型中重复使用 UI 和设计元素，以节省时间并保持一致性。
线框图与模型一览
查看线框图和模型的比较：
线框
结构和流程。线框图概述了基本的页面层次结构、组织和流程。
保真度低。设计师使用简单的黑白（或灰色）线框来表示和测试高级设计概念。注意：对于利益相关者或投资者的演示，更高保真度的线框和/或模型可以为您的设计构建更强有力的案例。
发现阶段。使用线框图从内部团队生成早期反馈并帮助设定设计方向。
模型
视觉设计。模型是静态渲染，显示最终产品或网页设计的外观，减去功能。
高保真度。模型代表真实的网页或屏幕。它们包括接近最终版本、颜色、排版、字体等。
设计阶段。在开始高保真原型制作或将最终设计交给开发人员之前，使用模型来验证产品的视觉设计。
figma" class="css-1l3n6fv" style="box-sizing: inherit; cursor: var(--cursorText); margin: 32px 0px 16px; line-height: 1.45; font-size: var(--h3-fs); letter-spacing: var(--h3-ls); position: relative; color: rgb(40, 40, 40); font-family: __whyte_5bb98a, __whyte_Fallback_5bb98a, sans-serif; text-wrap: wrap; background-color: rgb(255, 255, 255);">使用 Figma 构建更好的线框图和模型
无论您是创建线框还是模型，都可以使用figma.net.cn/lm2/3383.html">FigJam 的在线协作白板开始集思广益设计想法。
对于线框，请从Figma 的在线线框工具和预制线框套件开始。
对于模型，您可以在 Figma 中构建您的设计系统，然后使用Figma 的设计工具来制作它们。
