网站制作根据工作上的观查与小结，我发现了许多新手交互设计师及其商品工作人员，在画原型图时都是会忽视一些关键內容，造成 和视觉设计师的沟通成本提高、返修增加、工作效能降低、设计方案品质降低等关键难题。为了更好地处理这种难题，一方面必须加强沟通，另一方面还必须多立在视觉效果的视角考虑到原型图的设计方案，使大伙儿的相互配合更心有灵犀。
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屏幕分辨率下，極限状况下可列入571080x;如果不那麼严苛得话，第一屏高宽比还可以列入601080x。在原形稿上标出就可以，那样能够 给视觉设计师一个参照。但不必为了更好地维持第一屏高宽比而让內容过多拥堵，那样会给视觉设计师产生很大的不便。
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 conve rsion rate. The first screen height in what position? At the resolution of 1024*768, the limit case can be set to 571080x; if not so strict, the first screen height also can be set to 601080x. 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.bjkuzhan.com">来源于申明：以上内容一部分(包括照片、文本)来自互联网，若有侵权行为，请立即与本网站联络（010-57218159）。
如没特殊注明，文章均为酷站科技原创,转载请注明来自http://www.bjkuzhan.com/jianzhanzhishi/3561.html