网站制作通过工作中的观察与总结，我发现不少新人交互设计师以及产品人员，在画线框图时都会忽略一些重要内容，导致和视觉设计师的沟通成本增高、返工增多、工作效率下降、设计质量下降等重要问题。为了解决这些问题，一方面需要加强沟通，另一方面还需要多站在视觉的角度考虑线框图的设计，使大家的配合更默契。
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 order to keep the first screen height and make the content of overcrowding, this will give a visual designer to bring not the small trouble.

四、严格遵守栅格规范
Strictly comply with the grid code

很多产品人员或新人交互设计师都比较容易忽略这一点，没有按照栅格规范来布局，这样容易导致的结果就是：视觉设计师在按照栅格排版时，发现在交互稿中能排下的内容，在视觉稿中排不下了，这样就还得返回去改交互稿，或是修改需求内容。影响效率不说，可能还会影响最终的质量。所以在制作原型时，一定要注意这一点，同时也要保证交互稿中的字号、间距尽量符合视觉要求(比如间距最小10像素等)，以免给视觉造成不必要的困扰。但建议在确定栅格布局时，一定提前和视觉沟通商量好，以免影响视觉的发挥。
A lot of products or new interaction designers are relatively easy to overlook this point, not to the layout according to the grid, so easily lead to the result is: the visual designer in accordance with grid layout, found in the interactive release can arrange the content, in the visual is not in, so you have to return to the modified interaction draft, or modify a content. Influence of efficiency is not said, may also affect the final quality. So in the prototype, we must pay attention to this point, but also to ensure interactive draft font size in the distance as far as possible, in line with the visual requirements (such as minimum distance between the 10 pixel), so as to avoid unnecessary trouble caused to the vision. But the proposal in determining the grid layout, must advance and visual communication to discuss the good, so as not to affect the visual display.

五、合理的布局及间距
The reasonable layout and spacing

很多产品人员完全不考虑布局标准及美观程度，随便就把想要的内容堆到一起。这样视觉就只能重新考虑布局，无形中耽误了很多时间。另外就是前面提到的，不按照布局及间距标准画线框图，将很难准确的计算第一屏高度及每个模块的实际内容量，导致视觉返工的几率大大增加。(如下图的这种就是一个不合格的反例)。这里也是一样，建议在确定界面布局时，提前和视觉沟通商量，给视觉合理的发挥空间。
Many products personnel without considering the layout of standard and aesthetic level, just getting things together. This vision will have to reconsider the layout, wasted a lot of time imperceptibly. In addition to the previously mentioned, not in accordance with the layout and spacing standard painting line drawing, will be very difficult to calculate the first screen height and each module accurately the capacity, greatly increased the risk of vision rework. (like the image below. This is not a qualified negative). Here is the same, suggestions in determining the interface layout, advance and visual communication to discuss, give the reasonable visual display space.

六、表达清楚UI逻辑
Clearly UI logic

当设计一个内容元素较多、逻辑层级较复杂的页面时(比如表单)，为了避免混乱，我们需要提前整理一下这些内容，以保证文字、链接、操作等内容的样式符合它们所代表的重要程度，并把各种复杂的情况归类成有限的几种形式，以给用户一个合理的视觉引导。(字号尽量控制在3-5种，根据情况匹配颜色)
When designing a content element, the logic level more complex page (such as form), in order to avoid confusion, we need to sort out the content in advance, to ensure that the text, links, operation and other content style consistent with how important they represent, and the classification of each kind of complex situation to some form of limited, to give the user a reasonable visual guide. (size to control in the 3-5, matching the color depending on the situation)

主色调和点缀色最终由视觉设计师确定，在交互稿中有所示意即可。通过这些细致的分类，可以保证最终的字号及颜色符合逻辑，而不会给视觉设计师造成不必要的困扰(视觉考虑更多的是美观，而非令人头疼的逻辑)。
The main color and decorative color ultimately determined by visual designers, to show in the interactive version. Through these detailed classification, can guarantee the size and color of the final accord with logic, and not to the visual designer cause unnecessary distress (vision is considered more attractive, not troubling logic).

七、了解视觉趋势

时刻关注一些视觉趋势，有助于我们在审美上和视觉设计师站在较为一致的立场上，使大家的沟通更加顺畅。

从上图可以看出，目前的视觉趋势大致如下：

1、渐变减少，视觉风格更平面化。
2、通过空隙和留白来分割区域，而不是用线。
3、布局更规整。
4、文字间距变大。
5、蓝色链接减少，黑色文字减少，灰色文字居多。
6、圆角减少，直角增多。
7、色块的叠加很流行。
本文发布于中欧体育 中国企业网站制作服务商//mkt0398.com/