线框是在纸张或数字工具中创建的未来接口的低保真可视化。线框的目的是帮助设计师了解应如何在屏幕上放置内容和功能元素。

在本文中，我想分享8个技巧，以帮助您充分利用线框架。

1.在开始线帧之前绘制目标用户流程

在开始线框架之前，您需要清楚地了解需要设计多少屏幕以及用户如何与他们进行交互。当您拥有可以用作参考的用户流动时，形成这种理解要容易得多。可以使用简单对象（例如框和箭头）可视化流程。例如，在下面，您可以看到一个简单的用户流程以进行结帐体验。

如果您有兴趣了解有关用户流的更多信息，请查看此视频：

2.创建线框核心屏幕首先

选择对于用户流量最重要的屏幕。这将使您更容易迭代您的设计。

3。选择正确的保真度

保真度是您的视觉资产的现实主义水平。线框通常以低和中等保真度创建。betway娱乐官网低保真线框包含裸露的最小设计详细信息

而中等限制的betway娱乐官网线框看起来更像模型。

低保真线框can be good during the early phase of the design process — when you explore different design directions and want to visualize as many ideas as possible.

The medium-fidelity wireframe should be created when you want to dig deep into a particular solution. Medium-fidelity wireframes are also very useful during discussions with other designers and developers.

4。使用颜色引起注意

线框传统上是用黑白或灰色尺度创建的，但是可以使用一种或两种对比颜色来创建视觉口音，并将观众的注意力引向特定对象（例如“调用动作”按钮）。以下示例使用对比颜色突出显示交互式元素。

5。尝试to avoid dummy text in mid-fidelity wireframes

在设计过程的早期阶段，您的目标是创建一个清晰的视觉层次结构 - 具有清晰结构的布局。在此阶段，您不专注于内容；您必须考虑如何提出。但是，在创建一个不错的视觉层次结构之后，您应该开始使用将在产品中使用的实际副本更换占位符文本。

在此阶段，我们应该避免使用虚拟文本的原因 - Lorem Ipsum对会审查您的设计的人说太多。结果，当他们会查看线框时，他们可以轻松地误解您的设计。

6.创建可单击的线框

线框是静态设计工件。虽然可以将设计作为单个屏幕的集合运送，但最好从它们中创建流程，甚至可以创建可点击版本的线框。可单击的线框使团队可以轻松了解场景的详细信息 - 它们使您可以整体考虑产品功能。例如，在通过流程时，您可能会注意到，您需要在某些屏幕之间引入中间状态以创建平稳的旅程。

7.注释线框

As product designers, we need to provide context and communicate design decisions to team members and stakeholders. If you plan to present a wireframe to the team, it’s always better to include annotations. Annotations help create context and quickly deliver key ideas. Just make sure you use short-to-point annotations. If you need to discuss the concept in more detail (say, you need to write a paragraph of text), it’s better to do it in design documentation, not on wireframes.

8.使用线框套件

请勿从头开始创建中心线框。使用特殊的线框套件来加快过程。这是您应该尝试的两个套件：

• 无花果线框套件。带有基本元素的免费UI套件，可帮助您设计线框。
• Platforma。Platforma的付费UI套件包括300多个屏幕。该套件可用于草图，无花果和Adobe XD。
• 电线。电线are two free wireframe UX kits for mobile and web. You will have 170 mobile templates, 90 web templates, and 240 components inside. The kits are avaible for Adobe XD.

最初出版在Babich.Biz

跟着我Twitter|Instagram|YouTube

想学习UX设计吗？

尝试uxcel。uxcelwill help you learn and improve your design skills with interactive UX courses and skill tests built specifically for professional designers. You will get专业年度订阅的折扣25％如果通过此链接加入。

这篇文章包含会员链接