在UI设计工作中，最简单也是最基本的设计就是线框图。说到这里，可能会有很多人不同意，不就是线框图，有什么难的?但实际上，想要掌握线框图设计技巧，还是需要学习很多设计技巧的。下面这篇文章会讲解线框图的定义、功能和设计技巧，一起来看看吧~

　　1、线框定义：

　　我们常说的线框图，其实就是一个页面的示意图，也可以称为屏幕蓝图。它的作用是展示网站或产品框架。在设计阶段，线框图通常用于在考虑用户需求的情况下在页面上布置内容和功能。从开发的角度来看，在开发过程的早期使用线框来建立页面的基本结构，然后再添加视觉设计和内容。最终，线框图的设计目标是向普通观众展示产品将包含哪些页面和组件，以及这些元素如何交互。

　　2、线框的作用

　　(1)帮助团队评估和完善工作范围。线框允许设计人员快速创建产品的视觉表示以供以后修订;线框还帮助设计人员向团队展示应用程序具有的页面元素和控件，以及所有元素如何交互。

　　(2)让团队的所有成员都参与到产品设计中。线框的使用让设计师和开发人员可以在早期共同参与讨论设计，在视觉设计开始之前提供反馈和建议更改。设计过程 需求经常来回变化，使用线框图可以让这个过程更有效率，修改原型比修改线框需要更多的时间和精力，这有助于使设计过程快速迭代，避免不必要的浪费。

　　(3) 进行用户测试。线框图可以帮助设计人员从潜在用户那里获得有价值的反馈。此外，浏览线框图比阅读规范要快得多，并且有助于减少性能差异。

　　3、线框图技巧

　　(1)正确使用颜色：如果在线框中使用丰富的配色方案，会分散查看者的注意力，使其更难更新。但在某些情况下，使用颜色突出某些组件是合理的。例如，您可以将红色用于错误状态，将蓝色用于注释等。

　　(2)使用简单的组件：线框不包含完全设计和详细的组件。相反，它们应该设计得相对简单，以便团队成员更容易识别。为组件添加微妙的阴影、厚度花费大量时间和精力，但不是很实用。

　　(3)风格一致：相似的组件必须在所有线框图中看起来都相同。如果相同的组件看起来不同，开发人员可能会质疑它们的功能是否相同，即使因为设计的原因估计时间会不时变化。使用线框时，请记住一个简单的设计提示，以保持一致并避免混淆。

　　(4)多使用注释：线框图设计中可能会出现一些解决方案解释不直观的情况，比如一些控件背后的逻辑，所以开发者可能会有疑问。这种情况下，注释可以提供解释其背后的逻辑。这样团队将理解您的解决方案，而您无需花时间讨论它们。

　　(5)将线框图扩展为交互原型：有一些简单通用的交互，有些在使用不同产品时相当复杂。如果线框图不足以说明复杂性，您可以将线框图扩展为交互无需编写冗长的评论和花费数小时解释即可制作原型。

　　这就是线框图设计技巧。以上这些你掌握了吗?当然，仅仅学习干货知识，可能很难熟练运用这些设计技巧。所以，你还是要在作品中多多练习，才能更好地把握线框设计的精髓!更多关于“UI培训”的问题，欢迎咨询千锋教育在线名师。千锋教育多年办学，课程大纲紧跟企业需求，更科学更严谨，每年培养泛IT人才近2万人。不论你是零基础还是想提升，都可以找到适合的班型，千锋教育随时欢迎你来试听。