网站建设通过工作中的察看与总结，我发现不少新人交互设计师与商品职员，在画线框图时都会忽视一些要紧内容，致使和视觉设计师的交流本钱增高、返工增多、工作效率降低、设计水平降低等要紧问题。为知道决这类问题，一方面需要加大交流，其次还需要多站在视觉的角度考虑线框图的设计，使大伙的配合更默契。
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 cosplayts 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.1、通过明暗对比表达以前，我是如此画线框图的，如此能很明确的展示各模块元素之间的布局关系。然后我会告诉视觉，这类模块或元素之间的优先级关系是什么样的。但头疼的是，当界面元素非常复杂的时候，视觉就很难一一记住了，这时就需要反复的交流，视觉在这个过程中也很痛苦，常常是改的头都大了但还是有错误。
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.2、不用截图与颜色
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......"3、标记第一屏高度
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.4、严格遵守栅格规范
Strictly comply with the grid code不少商品职员或新人交互设计师都很容易忽视这一点，没根据栅格规范来布局，如此容易致使的结果就是：视觉设计师在根据栅格排版时，发目前交互稿中能排下的内容，在视觉稿中排不下了，如此就还要返回去改交互稿，或是修改需要内容。影响效率不说，可能还会干扰最后的水平。所以在制作原型时，必须要注意这一点，同时也要保证交互稿中的字号、间距尽可能符合视觉需要，以免给视觉导致非必须的困扰。但建议在确定栅格布局时，肯定提前和视觉交流商量好，以免影响视觉的发挥。
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 , 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.5、适当的布局及间距
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. . Here is the same, suggestions in determining the interface layout, advance and visual communication to discuss, give the reasonable visual display space.6、表达了解UI逻辑
Clearly UI logic当设计一个内容元素较多、逻辑层级较复杂的页面时，为了防止混乱，大家需要提前整理一下这类内容，以保证文字、链接、操作等内容的样式符合它们所代表的要紧程度，并把各种复杂的状况归类成有限的几种形式，以给用户一个适当的视觉引导。
When designing a content element, the logic level more complex page , 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. 主色调和点缀色最后由视觉设计师确定，在交互稿中有所示意即可。通过这类细致的分类，可以保证最后的字号及颜色符合逻辑，而不会给视觉设计师导致非必须的困扰。
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 .7、知道视觉趋势时刻关注一些视觉趋势，能够帮助大家在审美上和视觉设计师站在较为一致的立场上，使大伙的交流愈加顺畅。从上图可以看出，现在的视觉趋势大致如下：1、渐变降低，视觉风格更平面化。
2、通过空隙和留白来分割地区，而不是用线。
3、布局更规整。
4、文字间距变大。
5、蓝色链接降低，黑色文字降低，灰色文字居多。
6、圆角降低，直角增多。
7、色块的叠加非常时尚。
本文发布于公司网站设计服务商http://www.sino-web.net/
版权所有：建站宝盒
转载注明来源：
网站建设时注意的几个问题
本文版权网址：
http://www.wcxywh.com/baoting/20250219/339.html
