UI/UX设计基础知识：什么是网页线框图？

网站线框图通俗来讲就是网站框架的草图，是网站设计师根据网页设计标准将客户需求图形化的一种展现形式。线框图又叫原型、框架图，它是网站设计方案的重要组成部分，是网站策划、项目经理的最后交付文档，通常是最直观、有效的设计呈现形式。

线框图是产品设计的低保真呈现方式。它有三个简单直接而明确的目标：

1、呈现信息群主体

2、勾勒出结构和布局

3、用户交互界面的主视觉和描述

正确地创建了线框图之后，它将作为产品的骨干而存在。

它就像一幢建筑的蓝图一样，将细节规定地明明白白。

线框图的视觉特性

线框的视觉特性局限性非常明显。通常设计师会只需要使用线条、方框和灰阶色彩填充（不同灰阶标明不同层次）就可以完成。

简单的矢量线框图

一个简单的线框图最终需要包含的内容有图片、视频、文本这些东西。所以，通常情况下，被省略的地方会用占位符来标明，而图片通常被带斜线的线框来替代，文本会按照排版，用一些标识性的文字所替代。

线框图的优势

线框图的制作是快速而廉价的，特别是当你使用诸如Mockplus、Balsamiq、Axure这样的软件来制作的时候。当然，线框图也理当是在设计之初就使用这些工具来制作。

比起创建一个完整细致高保真的线框图，搜集反馈信息来得更加重要。为什么这么说呢？

一般而言，大家更注重软件的功能、信息架构、用户体验、用户交互流程图、可用性，这些东西，而不是考虑这些因素的美学特征。同时，在这种情况下，根据需求进行修改也无需涉及代码调整和图形编辑。

交互式线框图

有的时候，设计师喜欢提高线框图的保真度而强调用户界面的某些方面的重要性，以及展示和快速测试、各种视觉元素之间相互作用的合理性。用以解决这些问题的方案就是使用交互式线框图，也叫做可点击式线框图。

创建这种更加复杂的线框图你就需要用Mockplus了，它可以用来制作线框图和原型设计。互动式线框图可能是用来向开发团队和客户最合适的演示工具了。当你碰上客户的经典问题”如果我点击这个按钮会发什么什么”的时候，你所需要做的就是在互动式线框图中按下那个按钮。”就是这样”，你只需要这样回答。的确，这种方式令人印象深刻，引人入胜。

谨慎展示线框图

当你需要展示的对象是一个彻头彻尾的门外汉的时候，你就要小心了。他可能是你的客户，也可能是参与合作的某个非技术背景主管，他们并不知道，线框图和最终的产品可能看起来毫无关系。所以，他们有可能并不能很快地明白两者的内在联系和运作方式，是否要演示，如何演示，一定要拿捏好这其中的度。