使用线框的好处

已发表: 2012-03-16

线框作为原始创意思想和最终产品之间的桥梁。 将线框视为建筑物的建筑蓝图,您就会明白为什么它是几乎所有开发项目中的关键工具。 事实是,在不使用蓝图的情况下建造体面、结构合理的建筑是不可想象的,没有理智的房地产开发商会与不使用蓝图的建筑公司合作。 考虑到线框的大量好处,你应该忽略它们,后果自负。

同样,软件和 Web 开发等项目也依赖线框来直观地表示设想的产品或产品组件。 这是因为线框在传达给定系统(例如网站或软件应用程序)中的组件、流程和各种关系方面比其他任何东西都要好得多。 如果没有线框,可能会出现以下任何不利情况:

  • 利益相关者计划和制定项目战略的阶段将不必要地受到阻碍或延迟。
  • 当使用系统组件时,开发人员将无法考虑所有预期结果。
  • 布局不佳的接口会导致大量的修改成本。

这些是称职的项目经理和专业开发人员坚持将线框集成到开发过程中的一些原因。

线框解释

在其基本形式中,线框可以像手动绘制的图表一样简单,提供系统或过程的可视化表示。 只要所有关键元素都被表示出来,视觉细节就不需要很广泛。 因此,线框通常被称为骨架或轮廓。 在另一个极端,有线框图软件能够生成所设想的产品或应用程序的高度详细的近似值。

A wire-frame example with many website elements

线框示例(点击查看大图)

线框构成了创建网站和最终软件的基础。 它们让您了解网页空间、元素定位和网站导航。 UI 模型是该过程的下一个阶段,它们为您提供最终产品中要使用的颜色、字体和图像的想法。 使用 Creately,您还可以绘制线框并创建相应的 UI 模型。 这多合一的解决方案使它成为一个非常方便的工具。

UI Mock-up done using Creately

使用 Creately 完成的带有颜色、字体和支持图像的 UI 模型

线框的好处

无论是手动绘制还是使用高级协作服务创建,线框都有助于创建可供所有利益相关者(经理、设计师、开发人员、客户和用户)使用的产品模型,以调整、重新布局或重新设计不同的系统元素更有效率。

这就是使用线框的优点。 更具体地说,主要有以下三个好处:

  1. 首先,线框使制作完整的系统模型变得容易。 根据客户规范,可以轻松创建顶级 UI 模型,然后客户和开发人员都可以将其用作集成细节、功能和其他增强功能的基础。 在开发过程的早期,线框可以用作测试和反馈的平台,从而可以轻松地改进产品。 例如,如果有一个线框来显示其他显示元素(如图像、框架、按钮和文本链接)的位置和性质,那么文案撰稿人应该如何制作和显示网站文案会更容易辨别。 同时,客户可以使用 UI 模型根据他们的品牌或企业形象进行改进。
  2. 其次,线框图使开发人员更容易组织和建立系统或产品组件之间的关系。 例如,在移动应用程序中,用户与按钮或其他交互元素的交互产生的屏幕转换可以很容易地绘制和完善。 例如,当点击这个或那个元素时,就会播放这个动画。 这听起来很简单,但交互性和导航通常决定了新产品的成败。 伟大的产品是那些高度直观并能准确预测用户行为的产品。 在没有线框的情况下,系统不同组件之间的关系很难可视化,这增加了发布交互性设计不佳的产品的风险。

    A wire-frame of a mobile application

    移动应用程序的简单线框

  3. 最后,线框提供了一种更具成本效益的更改方式。 通过首先创建线框,与立即创建网页等实际产品相比,开发人员最终节省了时间、金钱和精力。 这是 Creately 的在线服务等图表应用程序所提供的价值。 通过鼓励计划产品的所有利益相关者之间的密切协调,所有必要的功能都可以通过协作构建的线框更轻松、更快速地集成。 这有效地避免了如果开发团队绕过线框阶段可能会出现的代价高昂的修改。

结论

显然,线框图已经成为发展过程中的关键阶段。 也就是说,最初的产品或系统设计在经过利益相关者审查后几乎总是需要进行各种更改。 例如,一旦提交网站模型以供审查,雇用网站开发机构的客户肯定会要求进行调整。 试想一下,如果开发了实际的网页并且客户需要进行重大改造,那会浪费多少开发时间。 当使用线框时,实施更改根本不会受到伤害,因为无论如何还没有开发出真正的产品。 它还有助于节省时间,尤其是在开发团队时间紧迫的情况下。 与一些开发人员最初的看法相反,立即开发实际产品不会使事情变得更容易或更快,原因很简单,变更请求是不可避免的。 通过创建线框,可以在开发阶段的早期检测和解决问题、问题或挑战。

鉴于这些线框的好处,线框应该在开发开始时进行,并且应该涉及客户和产品开发人员的协作努力。 通过这种方式,客户对产品的设想可以很容易地通过开发人员的技术和创意投入转化为现实。 可以肯定的是,线框并不完美,仅仅是因为它们并非如此。 相反,它们可能是将产品提炼成完美的最具成本效益的方法。

参考

  • 什么是线框图? 发布在体验解决方案网站上
  • Boagworld 网站上发布的 7 大线框奇观
  • 45royale inc 上发表的线框图的重要性。 网站
  • Brad Shorr 在六次修订网站上发表的《线框设计的好处》