线框图是一个网站图形化的骨架，引导一个页面的内容及概念，能够帮助设计师和客户讨论具体的网站层次和导向。一个简单的线框图只需要使用线条、方框和灰阶色彩填充，黑白色的布局整体呈现为低保真设计图，主要呈现主体信息群，勾勒结构和布局，表达用户交互界面的主视觉和描述

那为什么要做线框图呢？线框图对于产品的作用就如同建筑蓝图，在项目的初始阶段规定好产品各方面的细节，作为整体项目说明。也因为绘制起来简单、快速，它也经常用于非正式场合，比如团队内部交流。但并不能作为用户测试的材料。

下面我们看一下如何画好线框图，通过工作中的观察与总结，我发现不少新人交互设计师以及产品人员在画线框图时，都会忽略一些重要的内容，导致视觉设计师的沟通成本增高，返工增多，工作效率下降，设计质量下降等重要问题。为了解决这些问题，一方面是需要加强沟通，而另一方面就是多应该站在设计的角度上考虑先光图的问题。

下面我们通过以下几点来说一下。

第一点、就是通过明暗对比表达。以前我告诉视觉这些模块和元素之间的优先级关系是怎样的，但是界面元素很复杂的时候，视觉就会忘记一些事情，很难一一的记住，这时候就需要反复的沟通。视觉在这个过程中也非常的痛苦，需要经常的修改，但还是有错误的地方。

第二点、就是不要使用截图与颜色，很多产品人员为了能够清楚地表达想法，拼凑各种精品的截图组成一个页面，这样做一是不规范，第二是对视觉设计师也有一定的干扰，另外不太建议在画线框图上使用色彩，这样同样会给视觉设计师造成不必要的困扰。 如果真的一些图案需要一些加入一些图案想法，我觉得可以告诉世界设计师需要营造一个什么样的氛围，而达到什么样的结果，这样设计师会根据你的需求自己设计。

第三、就是标记第一屏的高度。第一屏高度至关重要，尤其是重要的操作按钮尽可能都放在第一屏内显示完全。不然对转化率有较大的影响。 这样是给设计师一个参考。但是不要为了保持第一屏高度而让内容过度的拥挤，这样会给视觉设计师带来不小的麻烦。

第四点、就是严格遵守栅格规范，很多产品人员或新人交互设计师都比较容易忽略这一点，没有按照栅格规范来布局，这样会导致的结果就是视觉设计师在按照栅格排版时，发现了交互稿中能排下的内容，在设计稿中排不下，这样就还得回去返工改稿，影响效率不说，可能还会影响最终的质量。所以在制作原型时一定要注意这一点，保证交互稿中的字号间距，尽量符合视觉要求，以免给视觉造成不必要的困扰。 但建议在设定栅格布局时，一定要提前和视觉设计沟通好，以免影响视觉的发挥。

第五点、就是合理的布局。清楚UI逻辑关系，很多产品人员完全不考虑布局标准及美观程度，随便就把想要的内容堆到一起，这样视觉就只能重新考虑布局，无形中耽误了很多时间。当涉及一个内容元素比较多，逻辑层级复杂的页面时，为了避免混乱，我们需要提前整理一下这些文字内容，链接操作等，把各种复杂的情况归类，给用户一个合理的视觉引导。轻松画好先框图，我们就应该注意以上的几点内容。