看似简单的线框图设计，这7个要点必须知道！

在里，我们将研究设计中最简单、因而常常被低估的活动之一，即线框图设计。了解什么是线框图，为什么需要设计它们以及如何充分利用线框图。

什么是线框图？

线框图，也称为页示意图或屏幕蓝图，是展示网站或品框架视觉指南：

• 设计：线框图在考虑户需求的情况在页面上布置容和功。
• 开发：添加视觉设计和内容前，在开发过程早期使用线框来立页基本结构。

线框图的要目标是向团队和利益相者展示产将包含的页面和组件，及这些元素之间的相互作。

为什么需要设计线框图？

1. 帮助队评估和完善工作范围

线框图允许计快速创建产品的视觉表现，方便后期修改；

帮助设计师向团队展示应程序具有的页面元素和控件，及有元素如何进行交互。

2. 让队所有成员参产品设计

线框图的使用允许计和开发人员在早期阶段共同参讨论计，在开始进行视觉计之前就提供反馈和更改建议。

这样有助于使设计过程快速迭代，避免必要的浪。

3. 方便快速演示

从户和利益相关者那获得快速反馈是计过程的重要组成部。

设计过程中，经会遇到需求的来变。有了线框图，可使这个过程更有效，修改原修改线框图需要更多的时间和精。

4. 进行户测试

线框图可帮助设计师从潜在户那里获得有值的反馈。同时浏览线框读取规范要快得多，还有助于减小与预期效果的差异。

线框图实际应用

为了获得最好的结果，为一步的 UI 打坚实的基础，需要遵循几个简单的规则：

1. 颜色的使

如果在线框图中使丰富的配色，可会分散观者的注意，并使更变得更困难。

但在某些情况，使颜色突显示特定组件是合的。例如，可将红色于错误状态，将蓝色于注释等。

2. 使用简的组件

线框图并不包含全面计和详细说的组件。相反它应该计的相对简，让队成员更容易识别。

为组件添细致的阴影、粗细描边将大量的时间和精，却是很实。

3. 保持一致性

在所有线框图中，类似的组件必须起来相同。如果相同的组件起来不同，开发人员可能会质疑它的功能是否相同，甚至会因为计不同而增加估算间。

在处线框图时，记住一个简单的规则：保持一致，避免成混淆。

4. 使用真实内容

会常UI/UX计没有在线框图上添加真正的内容，而是重复使用同一些文本。这是少有计识的普遍错误。

内容真实否会响下来的计。如果使用不真实的内容，UI计中文本的数量多少和排布方式都要再调整。

真实容给线框图增值，更好地解释上。

5. 使注释

设计中可会遇到某些解决方案无法直观地说明的情况，例如某些控件背后的逻辑，因此开发人员可会对它们有疑问。

在这情况下，可以提供注释来解释其背后逻辑。这样，你团队会理解你解决案，你不需要花时再讨论它们。

6. 线框图程

线框图应该择低保真还是保真，没有严格的规定，取决于项目的具体要求。

硅谷知名作家埃里克·莱认为，如不能带来价值不需要做额工作，从基础做起，然后根据需要添加细节。

7. 将线框图延伸到交互原中

在使同产时，有一些简单而通的交互，有一些交互相当复杂。

在线框图不足以说明复杂性情况下，可以将线框图扩展到交互原型，而不必写冗长注释并花大量时进解释。

总结

将线框图结合到设计过程中，为我们：

• 帮助队获得更确的项目估算；
• 有团队成员参与设计流程，避免影响开发过程的错误；
• 提前客户、利益相关者进演示，以尽快获反馈，节省开发不良解决案时。

注作者微信公众号：「Clip设计夹」