网站制作经由过程使命中的观测与总结，我发明很多新人交互规划师和产品职员，在画线框图时都会忽视一些重要内容，导致和视觉规划师的不异本钱增高、返工增加、使命效力降落、规划质量降落等重要标题问题。为了办理这些标题问题，一方面需求加强不异，另外一方面还需求多站在视觉的角度思量线框图的规划，使巨匠的配合更默契。
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、色块的叠加很风行。
本文宣布于尚品中国企业网站制作效劳商http://www.sino-web.net/