网站制作通过工作中的观察与总结，我发现不少新人交互设计师以及产品人员，在画线框图时都会忽略一些重要内容，导致和视觉设计师的沟通成本增高、返工增多、工作效率下降、设计质量下降等重要问题。为了解决这些问题，一方面需要加强沟通，另一方面还需要多站在视觉的角度考虑线框图的设计，使大家的配合更默契。 Web site production through the observation in work and summarizing, I found a lot of new interaction designers and product, drawing a line in the diagram will ignore some important content, cause and designer communication costs increased, increased rework, decreased work efficiency, design quality degradation problem. In order to solve these problems, on the one hand the need to strengthen communication, on the other hand, also need to stand in the visual design perspective line diagram, make people more harmonious cooperation. 那么具体怎样做呢?以下就是我工作中积累的一些心得，希望对大家有所帮助。 So what can be done? The following is my some experience accumulated in the work, we hope to help. 一、通过明暗对比表达(Expression through the contrast of light and shade) 以前，我是这样画线框图的，这样能非常清晰的展示各模块元素之间的布局关系。然后我会告诉视觉，这些模块或元素之间的优先级关系是怎样的。但头疼的是，当界面元素很复杂的时候，视觉就难以一一记住了，这个时候就需要反复的沟通，视觉在这个过程中也非常的痛苦，经常是改的头都大了但还是有错误。 Previously, I was in such a wireframe, which can clearly show the relationship between each module layout elements. Then I'll tell the vision, the precedence relations between these modules or elements is what. The trouble is, when interface elements is very complex, it is difficult to remember the vision one one, this time on the need to repeatedly communication, vision in this process is very painful, often change the head all big but there are errors. 现在，我这样画线框图： Now, I do draw the line diagram: 加入了明暗对比之后，界面元素的重要级关系更直观，我们不再需要跑过去跟视觉说：这N个模块中这个最重要，那个其次…… 视觉的工作效率也大大的提高了。 After the contrast of light and shade, an important relationship between interface elements are more intuitive, we no longer need to run the past with visual said: this N module is the most important, the second...... Visual working efficiency is greatly improved. 但需要注意的是：深色并不意味着比浅色更重要，要看色块之间的对比关系。 But note that: the dark does not mean more important than light-colored, to see the relationship between contrast color. “全部商品分类”是非常重要的，在深色块上用了浅色，是希望把它突出出来，让人更容易注意到。但是视觉设计师有可能会误以为浅色代表不那么重要，这个一定要提前沟通好。 "All the classification of goods" is very important, the light in the dark blocks, is hoping to make it stand out, make people more likely to pay attention to. But the visual designer may mistakenly think that light represents not so important, this must communicate well in advance. 二、不使用截图与颜色 Do not use with color. 很多产品人员为了能更清楚的表现想法，拼凑各种竞品的截图，组成一个页面。这样做一来不规范，二来对视觉设计师也有一定的干扰。另外不太建议在线框图上使用色彩，这样同样会对视觉设计师造成不必要的干扰。如果真的有一些关于图案的想法，可以告诉视觉设计师需要营造什么样的氛围，达到什么效果，而不是直接告诉他“画几个铜钱飞出来的样子，配一个皇榜……” Many products to better performance ideas, piecing together the various competing products in the screenshot, consisting of a page. To do so is not standardized, and there were certain interference to the visual designer. Also don't recommend the use of color online on the diagram, it can also cause unnecessary interference to the visual designer. If there is something about the design idea, can tell visual designers need to build what kind of atmosphere, to achieve what effect, rather than directly told him "painting a few coins fly out of the way, with a list of the emperor......" 三、标记第一屏高度 Marking the first screen height 第一屏高度至关重要，最重要的内容、尤其是重要的操作按钮尽可能在第一屏内显示完全，不然会对转化率有较大的影响。第一屏高度在什么位置?在1024*768分辨率下，极限情况下可定为570px;如果不那么严格的话，第一屏高度也可以定为600px。在原型稿上标明即可，这样可以给视觉设计师一个参考。但不要为了保持第一屏高度而让内容过度拥挤，这样会给视觉设计师带来不小的麻烦。 The first screen height is very important, the most important content, especially important as completely as possible the operation buttons displayed on the first screen, or will have great influence on the conversion rate. The first screen height in what position? At the resolution of 1024*768, the limit case can be set to 570px; if not so strict, the first screen height also can be set to 600px. Can be shown in the prototype version, this can give a reference to the visual designer. But don't in ord