如何浪费时间、金钱和资源
考虑一下这个场景：我们设计一个应用程序或网站。我们投入一切-时间，金钱，努力。看起来很棒。我们释放它，但它是坦克。人们讨厌它。它令人困惑，令人沮丧，结果只包括糟糕的评论和安装。为什么？当事情发生如此严重的错误时，通常是因为以下原因：我们没有集思广益地思考足够多的想法，我们急忙投入到视觉设计上-我们没有创建线框-我们没有进行用户/可用性测试-我们没有收集足够多的反馈信息(或者根本没有收集到足够多的灾难)。
通过在一条路径上航行，而不考虑其他路径末端的情况，我们最终可能会到达错误的目的地，浪费宝贵的时间、金钱和资源。进入线框和快速成型的令人兴奋的世界。
什么是快速原型？
快速原型的设计过程是头脑风暴，草图，协作，创建线框模型，并使用创造性的能量来可视化尽可能多的想法。反馈和用户测试被用来废弃那些糟糕的想法，并确认最好的想法确实是…。最好的主意。我们的想法是引导一些/所有这些路径，看看它们的走向，但并不是很难回头。我们称它为快速原型，因为它是一个快速、快节奏、迭代的过程-我们用非常有限的时间和资源模拟了最基本的设计版本，构建得足够让用户能够可靠地进行测试。我们称之为低保真度原型。在那之后，我们重新投入，根据需要进行改进，每一轮都会增加一点保真度。最终，我们会得到一个高保真度的原型，直接达到高保真度通常是灾难性的。
从纸张原型开始
设计师经常使用纸原型，因为它是快速和容易的。这些草图可以是完全徒手的，或者我们可以使用所谓的UI模板或线框模板，如葡萄柚下面的例子所示。线框模板的好处是，我们可以把它们握在手中，更现实地体验我们的设计。
我们要解决什么问题？
现在视觉设计与我们无关，我们只能把我们的创造力集中在这个问题上。假设已经进行了用户研究，最显著的是，客户开发，我们设计这个应用程序或网站是因为用户需要它。他们为什么需要它？它解决了什么问题？素描从主要的用户流开始，并回答以下问题：“用户如何使用我们的应用程序或网站解决他们的问题？”现在，可以肯定的是，我们的隐私政策通常不会为用户的目标做出贡献，所以这不会包括在我们的流/故事板中。也许在站点地图中(稍后会出现)，但不是用户流。
如何逼近快速迭代
快速迭代应该是快速的，但非常有洞察力，最好的方法之一就是所谓的四步草图。这项活动通常发生在设计sprint的第2/周二，这是Google Ventures的杰克·克纳普发明的一种方法，用于通过快速迭代和用户测试快速验证想法。它遵循以下四个步骤(提示：记住用户的问题)：
第一步：记笔记20分钟，
步骤2：为20分钟勾勒一些粗略的想法，
步骤3：草图8变体最佳想法(8分钟，总计)
第4步：勾勒出整个解决方案的高保真3步故事板。
下面是安东尼·拉古恩的故事板草图。
尽早收集反馈，并经常收集反馈
即使在这个阶段，收集反馈(不一定来自用户，但至少从团队成员那里)可以提供有价值的见解。事实上，甲板上…的人手越多越好。集思广益在团队努力的时候效果最好，所以准备好一些便条，开始互相交谈吧！草图→反馈→草图→反馈！✍️
如何创建线框
线框只是我们设计的骨架(通常是无色的)。线框模型可以是草图，但也可以是数字化模型(不管怎样，它们的保真度仍然比较低)。它们可以描述一个用户流(如上面所示)，也可以演示整个站点地图和/或原型。线框是一种工具，而不是一步。设计师可以随心所欲地从素描切换到数字化-素描不一定意味着低保真度，而线框也不一定意味着更多细节。下面是埃迪·洛巴诺夫斯基(EddieLobanovskiy)的一幅相对详细的线框草图。
但是，话虽如此，在增加保真度时，草图变得更难维护、共享和重用，这时我们通常会开始使用线框工具，并开始更多地考虑整个应用程序或网站用户体验。简而言之，我们需要考虑可用性(使用这个设计有多容易？)、信息体系结构(信息结构有多好？以及站点地图(用户很容易导航并找到他们想要的内容吗？)，同样的概念也适用：迭代→反馈→迭代→反馈。
最佳线框工具
与其他类型的屏幕设计工具相比，线框工具有一些标准化的特性；毕竟，它们的设计只是为了实现一个目标：帮助我们迭代低保真度原型。尽管如此，它们确实有一些细微的区别。所有的线框工具都有一个现成UI组件库，可以帮助我们快速模拟应用程序和网站，大多数工具还配备了协作和用户测试功能，以帮助团队尽早从实际用户那里快速收集反馈和有用的见解。一些工具还提供了一些功能来帮助绘制流程图和用户流图。当涉及到低保真度模型的数字化时，这些是最好的线框工具：
Balsamiq
Balsamiq是一个专注于线框模型的快速原型工具，它允许UX/UI设计人员更快地迭代、用户早期测试，并使用他们的“素描”视觉美学创建Web和应用模型，这提醒我们要将视觉效果保存到以后。与其他线框工具相比，Balsamiq是轻量级的！
Axure
虽然Axure包含了许多与Balsamiq相同的线框UI组件，但Axure是数据驱动模型的更好选择，这使得它成为信息体系结构实验的理想选择。87%的财富100强公司不会错！总之-虽然速度不太快，但更强大。
OmniGraffle
OmniGraffing是一个具有图表功能的线框工具，它适合于在创建线框模型之前对用户流进行原型化和对信息体系结构进行实验。OmniGra显的界面使用了本地的MacOSUI组件，因此MacOS用户使用OmniGra显时会感觉非常自在。
Moqups
Moqups是一个在线模拟工具，但它不会让人感到不舒服，也不会让人觉得使用起来很尴尬。它非常通用，很像OmniGraffy，可以帮助设计师、经理和利益相关者使用用户流图表和快速原型。
Whimsical
异想天开是新的孩子在街区，虽然它已经吸引了特别的评论，如Shopify，Invision，微软和我们！异想天开是第一个真正掌握快速查找图标和可配置元素的线框工具。这是很容易看到异想天开的竞争巴尔萨米克在速度方面，后来的线。奖金：美丽的图表和流程图，就在盒子里。
UXPin
除了原型和线框工具之外，UXPin还包括设计系统、设计切换和UI设计工具，UXPin是设计人员的一种完整的UX解决方案。不幸的是，在一个基于网络的应用程序中有这么多的功能，使应用程序变得缓慢和令人沮丧，但是如果你有活力的话，它是一个强大的工具，认真的设计师。
Justinmind
JustinMind是线框和高保真度原型的理想平衡。它没有UXPin那么雄心勃勃，但在这一点上，使用起来更有效、更令人愉悦，它帮助设计师在一个应用程序中创建线框模型和UI设计。
其他线框工具
Picoco
MockFlow
Mockplus
Wireframe.cc
快速原型工具
虽然这些快速原型工具并不是严格意义上的线框图，但它是为低保真度和高保真度的原型设计而设计的，对于那些宁愿节省一些钱和/或将整个设计工作流程保持在单一订阅下的设计师来说非常有用。
Adobe XD
Adobe确实在UI设计领域实现了转变，引入了AdobeXD，包括UI设计、交互式原型设计，甚至设计切换功能。AdobeXD并不是一个严格意义上的线框工具，但它已经提供了线框UI工具包。
Sketch
在用户数量方面，素描是用户界面的第一大设计工具，在2015年超过Photoshop。这可以说是设计用户界面最快的方法之一，尽管在没有拖放UI组件的情况下，它在技术上并不是一种线框工具。草图对于快速原型化来说是一种史诗，但需要与Flinto、Practice、Marvel App或Origami相结合来实现原型交互，或者是用户图表的溢出。尽管如此，Sketch仍然是首选的。
尊敬的提及
首先，让我们首先说，这些工具是业内最好的工具之一。我们之所以只将它们包含在荣誉版中，是因为它们不是为线框设计而构建的，尽管这并不意味着它们不能用于这种设计。
Figma
Framer Studio
InVision Studio
三米工作室“大吉大利”小组的每周优质设计文章汉化计划03篇--《A Beginner’s Guide to Rapid Prototyping（快速原型入门指南）》。
Sidebar英文原文链接https://uxtricks.design/blogs/ux-design/wireframe-tools-and-rapid-prototyping/
