这篇文章最初于2018年10月15日发布，并于2020年7月26日最近更新。
由于任何值得盐的数字设计师都知道，创建一个顶级网站的网站无法挑选完美的色板和快活的字体。事实上，如果你剥离任何好网站或应用的表面，你会找到一个精心设计的线框把整个东西抱在一起。
使用线框开始设计流程有两个主要好处。首先，它将设计过程与UX分开。这意味着您可以客观地关注用户旅程，而不会分散颜色和字体。同样，在稍后在美学上工作时，你不会担心把握的地方和原因。
如果您正在与客户合作，Wireframes也是展示UX专业知识的好方法，并提前参与设计过程。
创造伟大的线框并不容易，每个人都需要一段时间的灵感。所以没有进一步的ADO，这里有一些我们最喜欢的线框示例，以唤起你的想象力。
1.简单，手绘线框
没有一种正确的方式开始。一些UX设计人员在纸上或白板上创建初始草图，而其他UX设计师则更喜欢直接转向数字化。
从素描线框开始意味着您可以在您有笔和纸的任何地方开始 - 无论是在一次会议期间还是在手机上与您的客户聊天时。这是一个非常简单，但有效的手绘，注释的内容线上的一个很好的例子蒂姆骑士。
2.低保真线
这是一个清晰的清晰榜样，了解启动网站的布局如何看。Valeria Pivovarova低保真设计清晰显示每个内容块。她让她的设计简单，确保网站尽可能响应。
3.用户旅程线框
这个网站wireframe示例乔纳森厘里诺显示个人投资组合的开始。内容和用户旅程都清楚地标记和组织 - 一个任务，肯定会在行下进一步节省时间。
4.具有多个搜索选项的线框
设计师基拉的网站样机显示了一个大胆的英雄，下面有几个搜索选项，加上预览，为用户尽可能简单地进行过滤。
我们喜欢如何在不影响风格的情况下使所有基本信息都能得到高度访问。
5.详细，手绘线框
有很多待脱离设计过程。用一个良好的古老的钢笔，纸张和统治者安顿下来，将注意到你的注意力集中在手头的任务上。这是逃避分散注意力的电子邮件或通知的好方法。
这个聪明的例子是由安德里·伊科克显示更详细的移动应用程序Wireframe Mockup草图。这一个是使用iPhone线框的金融应用程序。
6.高保真线
这个哦 - 如此的光滑的高保真线armamame示例JT格雷克使用白色空间的绑扎，在显示布局和型层次结构时提供当代，极简主义的感觉。
7.高保真互动线框
我们无法抵抗包括此高保真互动线框示例JT格雷克巧妙地使用简单的形状和溅的颜色来带来模型。
他说：“我们首先制造了低保控线的内容简介。这使我们能够确保整体讲故事是正确的，并匹配内容策略。现在，在这些高保真线上，我们正在制定更多关于布局和层次结构的决定。
“但是仍有更多的工作来肉体来肉体。这是一个令人难以置信的过程，因为它使我们能够分解无数的设计决策，通常通过不同的设计和保真度的不同阶段更长的时间慢。“
8.每个步骤的线框GIF
从低温到高保真完成。我们喜欢这个wireframe gifMarko Peric.，它显示了整个过程中的行动 - 从那些初始粗略内容草图，直到完全设计的应用网站，完整的照片，字体和颜色。证明一个精心设计的线框真的是一个很好的设计的秘诀。
9.预计划信息图表
Neomam Studios.在整合一个有很大信息图表的网站总是会注意到的很好。预先计划将可视化插入Wireframe将确保在某个位置中将它们与您的副本相结合时尽可能多地举起。
10.创建手机和桌面版本
通过不断发展的媒体实践，最常见的是，当您将线框放在一起时，它不会只是一个平台。布兰登戴维斯汇集了同时创建移动和桌面版本的一个很好的例子。这样做会确保每个版本都传达相同的信息，同时为每个版本利用最佳实践。
在这里，您可以看到一个与桌面线框配对的很棒的移动线程。
最后的想法
与所有创意项目一样，适当的准备创建稳定线框的关键。
在您甚至拿起铅笔或手写笔之前，请尽可能从客户端收集信息。将定义的方式设置为一个好主意衡量反馈涵盖您网站或应用程序的关键区域和功能。一旦您完成了列表，您就可以拿起工具。
最后，记得要选择Wireframe软件这使您可以轻松创建您可以与团队成员和客户共享的图表。他们将欣赏早期参与，最终与最终结果更快乐。
