别再做线框图了（但可以从低保真度开始）

线框图绝对不会让工作量加倍，却只带来很少的好处，而且这个标题也不是在讽刺。

自用户体验（UX）出现以来，线框图一直存在。表面上看，设计师们都认为这一步非常关键，并且坚信这非常重要，在用户体验设计中，所有人都会做线框图，所以它一定很重要……是吧？

但随着时间的推移，我看到越来越多的人为线框图辩护，到这种程度，用户体验专家坚持认为，如果你跳过这一步，就是你没有尽到责任。如果你不做线框图，那你就一定是个糟糕的设计师，你应该感到惭愧！或者至少这是我在LinkedIn上看到的说法。

尽管线框图可以带来一些实际的益处，但我们必须问自己，这样的努力是否值得，并且这些益处是否可以通过其他方式得到。

我曾经是线框图的坚定支持者。从 UX 转向产品设计后，我从未后悔。线框图的理由大多只是华而不实的理由，没有人质疑背后的动机，问问我们为何要进行这些没有实际意义且浪费时间的工作。

我发誓到天，如果再有PM或BA让我更新线框图以匹配视觉设计，我会把他们从窗户扔出去！

理解线框图存在的原因，需要了解它们诞生的那个世界。当时，设计领域还处于初级阶段，我们使用的工具也需要改进。即使到了我2000年代中期才开始工作时，能接触到Visio就已经算幸运的了——更别提我就是从微软画图开始的！

这意味着，唯一真正设计界面的地方就是在那些并非专门为此设计的工具中，比如照片编辑工具如Photoshop或出版工具如InDesign，但是这样的修改管理却是一场噩梦。如果需要在一个拥有100个视图的导航中更新内容的话，系好安全带，准备好咖啡，这将是一个漫长而煎熬的夜晚。

因此，需要一个中间步骤来确定基本要素，即建立一个界面。布局大致确定，字体样式未定，内容仅作占位使用，而且需要更便宜且更容易改动。我们不必过于关注细节，而应更多地关注信息架构和交互。

就这样，线框自己出现了。

随着时间的推移，用户体验（UX）领域越来越多地为为什么原型图是流程中的一个必要步骤提供了理由。这主要发生在相关方和负责人不明白为什么要在一些糟糕的灰度草图上浪费那么多时间时，从他们的角度来看，这完全可以理解。原型图确实很重要，因为我们那时还没有更好的工具来处理那些需要反复调整的问题。

• 内容与功能的层级。
• 信息架构、用语和文案定义。
• 流程和交互序列。
• 快速测试新想法并用用户反馈进行验证。
• 避免利益相关者过于关注“视觉效果”而忽略了其他用户体验因素。

照片来自 Jason Goodman 和 Unsplash

我们把线框图和低保真画上了等号，但它们只是低保真设计的一个选择。

更具毒性的理由开始浮现——这不仅仅是美学上的视觉设计，而是更深层次的问题。做出任何看起来像“最终”设计的东西只会让利益相关者和用户感到困惑，并且会分散他们对定义交互、内容和信息架构等核心工作的注意力。关于后端工程师无法理解最终设计，只能理解线框图的神话也随之出现。我甚至听说一些UX设计师声称用户和利益相关者不懂视觉设计，只能看到线框图。

说来，我只见过用户对原型图需要澄清，从未出现过对视觉元素的这种情况的需要。至于相关人员，UX专家应该学习如何与他们交流，而不仅仅是只关注内容，而不是布局和颜色。

“我们不搞花里胡哨的设计！”UX设计师经常这么说！“我做的是实实在在的界面工作，而不是那些花里胡哨的UI。”

快进到如今——使用Photoshop进行视觉设计的时代早已过去，而UX和产品设计已经爆炸性增长。我们拥有的产品和服务已经多到数不清，而界面设计工具更是层出不穷。Figma，这个如今大家都不太喜欢的庞然大物，市值已经达到了数十亿美元。

这意味着我们用来绘制框架图的工具就是我们用来进行视觉设计的工具。选择Arial字体的速度和选择品牌字体的速度没有区别。选择交互模式中的品牌颜色与选择默认蓝色的速度没有快慢之分。无论布局一个灰度选项还是一个详细设计选项，你都同样快速。

而且我们还没有提到设计系统——线框图的优势在于推迟了视觉设计的选择，在你的公司已经投资数百万建立了一个已经为你考虑了所有这些问题的设计系统时，这种优势就消失了。_用线框图UI套件和直接用你现有的设计系统没有区别。_完全没有。不要再浪费时间了。

Serhii Khyzniak 的 “线框图 vs 视觉设计,” 是一个很好的例子，展示了这两个 deliverables （成果）如何越来越接近。

秘密：“UX”，即便到了视觉设计这一步，也永远不会定局,

有一种说法是线框图会得到利益相关者的认可，然后我们才会专注于视觉设计和审美选择。但请问自己——上次交互、内容块或功能集在“视觉设计阶段”没有被改动是什么时候？我做过的每一个有明确视觉设计阶段的项目，总是会对我的工作进行修改。我发誓，如果再有项目经理或业务分析师要求我更新线框图以匹配视觉设计，我一定会把他们从比喻中的窗户扔出去。

你喜欢低 fidelity 因为它让人们更容易理解和提供意见吗？还是说事实是它让其他人更难理解，而我们喜欢这一点，因为它让我们显示出我们的专业知识并避免批评？如果某个利益相关者对信息架构没有兴趣，更关心他们自己更擅长的事情，那你为什么要反对这一点呢？—— Sean Dexter，“线框图正在变得不那么重要，而这是一件好事”

因此，我们不再通过绘制草图来节省时间。然而，在担心应用程序的界面层之前，我们仍然需要专注于较低层次的决策。我们已经将草图等同于低保真度了，但其实它们只是低保真度的一个选项。

忠实是一个光谱，而不是一个具体的结果

我们需要把那种认为保真度是二元的想法从脑海中排除，而是应该将保真度视为在设计被加入待办事项列表之前不断提升的东西。保真度不是一个单独的步骤或你生成的某个产物，而是一个不断调整的关于你下一步应该优先处理什么的优先级。

没有找到合适的头图吗？没关系，可以用灰色区块来代替。不过，你可能还是应该找一张更好的图片。用占位内容来做设计从来都不是个好主意，即使这些内容之后会不断更新。使用占位内容来做设计从来都不是个好主意，即使这些内容之后会不断更新。

那么为什么线框还这么流行呢？

对于许多设计师来说，这只是关于如何设计UX界面的问题。在书《人人都能做线框图》中，有些话很耐人寻味：

“线框图是一种用来沟通用户界面想法的语言，它帮助开发人员、设计师、产品经理和利益相关者思考和理解网站或应用的大局结构而不被细节所困扰。”——安吉尔、巴纳德和卡尔森，《线框图人人适用》

为什么线框图仍然这么受欢迎？部分原因是它们保留了技术和精确性的外观。它们不仅看起来像蓝图或技术规范，而且对所有非最关键元素都毫不留情。

但考虑到从线框图到最终准备生产的成品可以有多大变化，这种精确度只是想象中的[为什么线框图正在变得过时]（https://medium.com/swlh/why-wireframes-are-becoming-obsolete-f603e987797d）。

这张照片由 Jason Goodman 在 Unsplash 网站上提供。

这里的难题在于，无论用户体验设计师是否愿意承认，原型图仍然是视觉设计。你仍然以视觉方式设计界面，只是将这些对用户体验至关重要的决策延后了。

• 你选择的依然是排版样式，只是线框样式。
• 你仍然在设计布局，只是没有考虑实际需求。
• 你仍然具体地划分元素，尽管坚持线框图可以调整。
• 你选择颜色时，即使其中80%是灰色，20%是“线框图蓝色”。

很多UX设计师在视觉设计师移动一个元素时仍然会激动不已。如果线框图仅仅涉及交互和内容，我们为何会因为一个链接的位置调整而反应过度呢？

视觉设计无法避免，也不是可选的——它对易用性、可学性以及认知负荷的影响与你的任何交互或信息架构选择一样重要。我怎么知道这一点呢？

忠实不是一步到位的步骤或你所完成的成果，但是不断调整下一步的工作重点。

因为线框图仍然是视觉设计的一种，只是比较懒的设计。这意味着要加倍工作。线框图虽然也是视觉设计，但不像其他视觉设计那么详细。

我有一篇文章解释为什么视觉设计和美学设计应该分开来看待，不过那篇文章还没写完。

通过将低保真度的设计从线框图中分离出来，作为设计师，我的工作效率提高了十倍。我通过减少低保真设计的工作量，更快地定义了界面需求，支持了一个由12名以上工程师用数月时间开发的任务列表。

有了这些选项，你只专注于线框图中最重要的部分，而不必用视觉元素来展示它们。这样不仅节省了大量时间，而且提高了质量。

以下是一些可以考虑替代绘制线框图的方法：

UX 状态概述
这是最基础的一种方法，我仍然会经常用它来快速工作。我设计的界面状态有哪些需求及其优先级是什么？
然后我把所有这些内容整理成一个基本大纲。我会移动内容，删除不需要的部分。我可以快速将它们链接起来形成流程，无需设计下拉菜单或按钮。

生成和迭代起来非常快，而且我不担心具体的界面怎么设计。

灰色涂黑
有时候，我需要估摸可以或应该为设计模式分配多少空间。但我直接用灰色涂黑来代替线框图。

用灰色块做占位是一种大致布局的方法。你放进去的所有东西都当作是FPO——这只是一个让你感觉可能需要的空间大小。

我经常在需要判断一个功能是否可以在单一状态下实现，或者是否需要跨越多个状态来设计时，会用到这些带有状态轮廓的情况。

可以将灰色区域视为设计师的大胆猜测（WAG）

设计系统
既然你们团队已经在使用设计系统了，为什么不能用它来制作线框图呢？

设计可以被视为“定稿”，一旦它们准备好放入待办事项列表，无论主要互动颜色是否已经定义或布局标准是否已经确立，都不会改变。

别太担心像素完美！你可以在工作中不断优化和完善设计。再次强调，保真度是一个范围，而不是一个固定的阶段，不是一步之遥。因为你不必先制作线框图，再将其转换到你的系统中，这样可以大大加快进度，而不是重复劳动。

如果你的团队已经有了一个已经建立好的设计系统，那么灰度线框图就更浪费时间了，因为视觉语言已经为你定好了。

白板绘制 / 纸巾草图
这是一种许多人都在进行的实践，但问题在于你们是在进行线框图设计之前进行这种实践，而不是用它来代替线框图设计。快速地把设计内容画到白板或纸上，别太小心翼翼，然后就开始设计吧。（更准确地反映了原文的意图和流程）

注意：不要将其与我认为比线框图还无用的设计方法——纸上原型混淆。尽量避免这种设计上的炫耀形式，这是个极具诱惑力的分心，会浪费你的时间和精力。它是极具诱惑力的分心，会耗费你的精力和时间。

很难找到我可以合法分享的白板照片。

UX 语法 / 概念语法
以下两种是更正式的页面状态概述的演变。虽然比 PSOs 更加正式，但它们能处理详细或复杂的问题或工作流程。丹尼尔·罗森伯格在他的书《UX 魔力（https://www.amazon.com/UX-Magic-Daniel-Rosenberg/dp/1708061614）》中详细讨论了 UX 语法，我非常推荐这本书。

哈维·阿拉贡在这篇文章中也写了一篇关于这个新工具为什么它如此有价值的文章：
你可以在以下链接找到这篇文章：https://uxdesign.cc/have-conceptual-grammars-finally-arrived-to-ux-design-26c088edc5d9

面向对象的 UX — OOUX
说实话，这是我最近特别喜欢的东西，我过去几年一直在极力推荐它。索菲亚·普拉特确实做了一件非常了不起的事情，我强烈推荐她的相关培训课程。OOUX 与概念语法有关，但更系统化且互惠。

OOX 在分解界面中每个模式的需求方面做得非常好，更重要的是，它还能清晰地展示这些模式之间的关系。这种视觉语言非常易于非设计师理解。如果你的干系人需要帮助专注于线框图或视觉设计方面，OOUX 出奇地有效，因为它剔除了界面中的所有可能引起困惑的元素。他们可以完全专注于优先级、层级和元素之间的关系。

ORCA 映射工具还可以帮助你简化针对相同信息或内容开发的模式数量，让项目更易于工程师们扩展和维护（据我经验，工程师们也很喜欢好的 ORCA 映射）。

欢迎来到与OOUX相关的所有内容的网站！这里包含了从培训到OOUX播客的各种资源和专家建议。
www.ooux.com](https://www.ooux.com/?source=post_page-----1e3e12b5cff0--------------------------------)

Timothée Goguely 有一个很棒的 figjam ORCA Map，非常适合初学者：https://www.figma.com/community/file/1120705007006600427/ooux

线框图设计确实曾经有用，但这并不表示它完全没有价值。然而，作为一个难以向利益相关者证明自身价值的设计师，我们必须要小心地利用时间，以及如何能更高效、更有成效。

现在不再是2004年，那时我们需要最终的最终的设计.psd文件。我们不再局限于使用Omnigraffle这样的工具。质疑线框图的常规做法，你可能会成为更好的设计师。我也是。