用户体验设计是一门迷人的学科. 要做到这一点，从业者必须精通各种各样的主题和技能. 练习 以用户为中心的设计方法 并创建易于使用的产品, 为日常产品设计挑战提供创新解决方案, 用户体验实践者的技巧和理解涉及从基本绘图到叙事/旅程设计再到认知心理学的方方面面.

中使用了各种各样的工具，生成了工件，并揭示了发现 用户体验/ UI设计 过程，并且它们被捕获在各种文档甚至原型中. 我们最容易辨认的、最基本的人工制品是老式的线框.

线框图——通常是为快速评估而创建的单色设计骨架——很棒. 它们允许我们将来自许多不相关方的输入转换成每个人都可以查看的文档. Many different job functions evaluate wireframes; business analysts, 项目经理, 营销管理人员, 各种各样的设计师和开发者, 各种其他供应商和服务提供商——甚至是产品测试时的目标受众. 线框图让每个人都能看到他们的个人需求将如何得到解决，并让整个团队有机会在任何繁重的工作发生之前解决所有的问题.

这有利有弊, 但在某些情况下, 完全跳过线框图阶段是有意义的. 在发现后或准备原型时，在高保真水平上处理用户体验和视觉设计可以节省大量时间. 这将使其他人有机会同时评估产品的功能和外观, 从用户测试参与者到客户和同事.

让我们来看看为什么线框图有时会有问题, 跳过它们是有意义的, 以及如何适应 任何过程 到工作流.

线框图的问题

无论是在瀑布还是敏捷环境中, 典型的设计过程包括研究阶段, 定义, 形成概念, 原型设计, 测试, 部署以及与利益相关者一起审查的许多接触点.

让我们以线框图设计成为瓶颈的设计过程为例:

原因1:客户不明白他们看到的是什么

设计过程通常从对问题的某种研究开始. 案头研究, 利益相关者的采访, 用户访谈只是一些可以进行的活动，以获得更深入的了解. 之后的研究, 设计团队开始评估一些想法和概念，以便找到最佳解决方案.

当一个概念更加充实时, 设计团队通常会在评审会议上与客户分享一系列线框图.

问题是，线框图非常抽象.

它们描述的是某物 就像 东西，而不是东西 实际 将要建造的东西. 在这个阶段, 线框图将包含占位符图像和各种各样的tk(即将到来), FPOs(只供放置), 和tbd(待定)，如下面的例子.

可能有关于功能的细节, 业务需求, 错误处理会在一个巨大的注释列表中显示. 通常, 没有足够的时间来梳理这些细节, 所以客户只能自己看了.

在线框审查期间, 我们要求客户关注所描述的概念，并评估它是否能够解决业务和用户问题. 然而，我们仍然会遇到一些问题，对我们来说，这些问题似乎并不相关. 客户想知道线框是否是“最终副本”，或者他们是否可以看到在英雄图像中显示的照片的示例-或者另一个关于将在视觉设计中处理的问题, 界面原型设计, 或开发.

线框图对于客户甚至内部利益相关者来说可能过于抽象，无法有效地评估. 线框图告诉人们设计完成后会是什么样子, 但他们仍然需要做大量的脑力工作，才能在头脑中整合起来. 我们的客户可能是视觉思考者，也可能不是, 期望他们看一看蓝图，想象出一个成功的产品或网站，这可能太过了.

有一些客户特别要求审查带有注释的视觉设计，因为这对他们来说更容易将这些点联系起来, 进行深思熟虑的讨论并给出深思熟虑的反馈.

原因2:它们并不总是适合用户测试

希望, 一些用户测试已经被安排到设计过程中, 因为它是测试从整个概念的可行性到事务中显示的细节级别的所有内容的好方法.

测试这类东西的一个典型方法是制作原型.

线框图可以并且确实可以用于原型制作. 设计团队仅限于测试流程和功能, 因为它缺乏视觉设计层, 影响用户行为的视觉样式很容易被忽略.

这样做明智吗?? 用户体验、视觉和文案设计都是相互影响的. 在测试环境中很难将它们分开并隔离. 类似于科学研究, 单独测试一个函数的结果无法控制或预测它在实际环境中的表现.

有时候，把所有这些东西综合起来测试会更有效.

例如:多语言产品或服务. 这些语言可能有不同的语法, 字母, 字符宽度可能会影响整体设计.

此外，由于复制内容影响用户体验，翻译本身也可能影响用户体验.

例如, 我们有一个任务，我们被要求测试几个不同的信息架构，因为不同的概念需要用当地语言解释. 如果不测试UI中的实际副本，我们就不会发现对文案和翻译的影响.

我们发现用当地语言来描述类似的概念需要更多的单词, 我们将不得不改变按钮的大小和形状，以适应该语言所需的冗长措辞. 在测试UI中的实际视觉组件时，不需要关注文本问题, 我们不会发现按键需要占据手机屏幕的全部宽度, 是什么影响了我们的用户体验设计.

关键结论:从一开始就准备高保真的ui是有意义的, 特别是对于一个多语言的项目.

原因3:它们让开发者和QA陷入困境

在视觉设计阶段不可避免地会发生的事情是，所有东西都在移动. 堆叠的图像成为瓷砖. 居中的文本变为左对齐. 手风琴触发器图标是 + 和 -，但现在它们是两个v形.

这是正常的一部分 视觉设计 过程. 同样正常的是，任何视觉设计上的改变都不会反映在线框图上，因为线框图已经“签字”了.”

当所有视觉效果都通过后，便是时候将所有内容交给开发者了. 在大多数情况下, 他们会收到一套详细的, 带注释的线框图和一套漂亮的视觉设计以及风格指南. 现在，他们需要在这两份文件之间进行交叉参考，并将其变为现实.

这是设计过程真正失败的地方. 我们给开发人员提供了太多需要参考的文档，并让他们自己决定哪些信息优先. 这增加了支持电话和QA所需的时间, 自然会影响将产品或更新推向市场所需的时间.

为什么不直接给予 开发人员 一个 包含所有内容的准确文件? 大多数客户也会欣赏一份副本，作为工作的完整参考.

解决方法:跳过线框图

显然，有些时候完整的线框阶段是必要的，而有些时候则不是. 甚至有些时候，直接进入高保真度阶段完全胜过线框阶段.

如果下列任何一种情况属实，你可以考虑跳过线框阶段:

有可靠的参考资料.

看看现有的工作. 可能已经有详细的UI引用可用. 如果你正在对现有的网站进行更新或为现有的应用程序添加新功能, 看看当前的网站和应用程序，找到可以重用的模式和风格.

如果您能够访问现有工作的源文件，那就更好了. 一些特征和元素可能在翻译中丢失了, 可以这么说, 在开发过程中, 您可以参考源文件来了解应该如何实现该功能.

除了(或没有)现有的产品或站点之外, 检查是否有合适的样式指南或模式库. 客户可能已经支付了一些品牌和视觉设计工作, 这些资源可以在您的项目中再次使用.

尽可能多地使用你能找到的样式和模式，这样你的高保真输出将尽可能准确.

在此过程中，您已经安排了许多迭代原型和测试.

在数周的原型和测试中节省一些精力. 如果你第一次仔细设置你的文档，并巧妙地使用重复的样式, 模式, 和 符号, 您可以轻松地以高保真度进行增量更新，并将其发布到原型工作流程中. 不需要线框图.

作为一个很大的优点，你可以一石二鸟. 你可以获得视觉和UI反馈以及用户体验反馈，并一次性做出所有这些改变.

你的测试参与者都很死板.

就像你的客户和同事有时需要具体的例子一样, 你项目的目标受众也是如此.

最近的一份工作是让我为低文化水平的目标受众设计金融屏幕. 阅读理解并不是唯一的问题——抽象的概念往往很难理解. This target audience typically needed to discuss financial concepts using concrete examples; otherwise, 他们无法真正跟上谈话的节奏.

为了理解财务概念, 这些观众中的测试参与者需要感觉他们实际上是在交易. 为了了解产品是如何工作的, 它需要看起来和感觉起来像一个真正的应用程序.

对于这样的观众，忘记线框图吧! 你最终会花很多时间解释它们是什么——你的听众也不会把注意力集中在任务上, 也不知道他们对它们有什么感觉，因为他们无法在生活中使用如此陌生的东西.

你的客户时间和/或预算有限.

很少有时间、资源和预算都对你有利. 你经常会发现自己试图缩小范围和价格, 或者争先恐后地寻找可以省吃俭用的地方，同时还能为客户提供优质服务.

如果你的客户负担不起(或者不太可能购买)完整的用户体验检查, 我可以建议缩短线框图的时间吗? 如果需要，可以在内部创建一些，但要为客户保持项目的进展. 测试真实的、有形的设计，让你的客户对实际工作做出反应.

如何结束线框图阶段

这部分是相当主观的, 因为这取决于你的个人工作流程和客户的具体需求.

话虽如此, 这是一个过程“模板”，您可以首先尝试适应您的工作流程, 当你练习得更多的时候再调整一下.

第一步:从你通常的研究和发现过程开始.

面试, 野外观察, 案头研究, 竞争分析——无论你通常做什么(或计划做什么), 像平常一样完成这个阶段.

第二步:沿途画一些草图.

当你在做研究的时候, 您可能会得到一些有用的布局和模式的想法, 迷人的流, 诸如此类. 不管你平时怎么做，都要记录下来. 我喜欢在我的笔记本上画草图，并在旁边写笔记. 你可能更喜欢在白板上画草图，或者截取有趣的UI模式的截图. 只要能帮助你记住好主意，就去做.

第三步:准备高保真文档

打开选择的设计工具并正确设置文档. 选择一些画板大小，并开始创建可重复的形状、组和符号.

花点时间把品牌的调色板保存为单独的色板, 创建和组织类型样式, 制作标准的阴影和滤镜，你可以根据需要应用到所有的形状上.

花很多时间让你的符号恰到好处. 你可能有一个按钮，根据它的状态，可以有四种不同的颜色. 如果可以的话，使用符号覆盖，这样就可以根据需要轻松地应用不同的颜色和文本标签.

如果有任何自定义图标使用, 将它们保存为单独的符号在正方形画板上(或任何合适的形状). 这种方式, 这将很容易为您扩大和缩小，同时仍然保持适当的间距和对齐.

步骤4:开始设计.

你的第一轮可能会有点粗糙，因为你习惯了以这种方式工作，并看到你的风格指南在哪里有用(在哪里没用)。. 以及为尚未定义样式的模式创建解决方案, 预计要做相当多的调整，以获得所有的风格正确.

在整个过程中，要遵循良好的“复制方向”，或者如果你有的话，使用真正的副本. 不要写这样的标题:“页面标题在这里。.“给观众一种感觉 将 如果这是真的，就到这里来.

同样，不要创建一个名字列表，上面都写着约翰·史密斯，电话号码是555-1212. 使用随机列表生成器或插件生成不同的名称和数字, 或者创建您需要显示的任何数据集. 这似乎有些矫枉过正, 但它可以让你解决布局和字符宽度的问题, 并帮助你的观众理解这五个条目都是不同的.

第五步:知道何时停止设计.

有一些细节你不应该在这一点上关注，因为它们真的会花费太长时间. 也许是选择合适的形象去塑造一个英雄, 或者设计一个自定义图标来指示下载状态. 在这些情况下，您可能会选择使用占位符图像或图标，并在以后测试真实的图像或图标.

你得决定在这里什么是合适的, 因为这将取决于项目的目标, 以及你的进展有多顺利.

请注意，这可能取决于您的用户测试参与者需要什么，以便正确地评估工作. 对于我上面提到的低文化水平的目标受众，没有什么细节是过多的. 对于每个参与者, 我做了一个原型的变体，使用他们的真实姓名和电话号码，这样应用程序就真的感觉是“他们的”.“他们的假设越少，他们就越容易遵循，我的结果也就越好.

第六步:享受高质量的反馈和测试结果.

将您的设计发布到您选择的原型工具上，并将其带到现场进行测试. 你现在可以得到更多的反馈，而不仅仅是功能. 你可以发现潜在的视觉问题, 例如颜色对比或易读性问题, 你可以发现拷贝方向或翻译的问题. 你还可以梳理出用户对外观、感觉或品牌的正面或负面感受.

当你进入视觉设计阶段时，这些都是你可能会得到反馈的东西. 为什么不现在就得到所有的反馈呢? 一些关于视觉效果的反馈可能会直接影响用户体验, 反之亦然, 因此，如果可以的话，最好同时解决所有这些问题.

结束

毫无疑问，在很多情况下，完整的线框图阶段对于项目的成功是必要的. 复杂的设计, 就像一个响应式web应用程序, 需要一个单独的和专门的关注线框. 解决所有业务需求将节省时间和金钱, 线框阶段的边缘情况和错误处理, 如果一个完整的视觉层已经被构思和应用，效果会更好.

然而，在正确的情况下，直接使用高保真度可以改善你的流程:

• 改善利益相关者的反馈. 客户, 开发人员, 其他设计师, 来自目标受众的测试参与者可以确切地看到他们将得到什么, 使他们能够提供更高质量的反馈.
• 加快你的原型工作流程. 您的设计不仅可以立即进行测试, 你可以同时得到很多方面的反馈:用户体验, 复制, 还有视觉效果.
• 向客户和开发人员交付单个文档. 不需要交叉引用和检查各种文档来了解按钮应该如何工作. 这也是一个很好的方式，让你的客户与他们的内部利益相关者讨论工作，以获得更多的反馈.
• 节省时间和金钱. 这通常是一件好事!

下次当你有一个项目需要参考一些现有的设计材料时，可以尝试一下这种方法, 或者你的作品是高保真还是低保真会给你的观众带来很大的不同.