网站制作经由事变中的视察与总结，我发明很多新人交互设计师和产品职员，在画线框图时都会忽略一些重要内容，导致和视觉设计师的沟通本钱增高、返工增加、事变效力降落、设计质量降落等重要功效。为了办理这些功效，一方面需要加强沟通，另外一方面还需要多站在视觉的角度斟酌线框图的设计，使巨匠的配合更默契。
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/