網(wǎng)站制作通過(guò)工作中的觀察與總結(jié)，我發(fā)現(xiàn)不少新人交互設(shè)計(jì)師以及產(chǎn)品人員，在畫線框圖時(shí)都會(huì)忽略一些重要內(nèi)容，導(dǎo)致和視覺(jué)設(shè)計(jì)師的溝通成本增高、返工增多、工作效率下降、設(shè)計(jì)質(zhì)量下降等重要問(wèn)題。為了解決這些問(wèn)題，一方面需要加強(qiáng)溝通，另一方面還需要多站在視覺(jué)的角度考慮線框圖的設(shè)計(jì)，使大家的配合更默契。
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.

那么具體怎樣做呢?以下就是我工作中積累的一些心得，希望對(duì)大家有所幫助。
So what can be done? The following is my some experience accumulated in the work, we hope to help.

一、通過(guò)明暗對(duì)比表達(dá)(Expression through the contrast of light and shade)

以前，我是這樣畫線框圖的，這樣能非常清晰的展示各模塊元素之間的布局關(guān)系。然后我會(huì)告訴視覺(jué)，這些模塊或元素之間的優(yōu)先級(jí)關(guān)系是怎樣的。但頭疼的是，當(dāng)界面元素很復(fù)雜的時(shí)候，視覺(jué)就難以一一記住了，這個(gè)時(shí)候就需要反復(fù)的溝通，視覺(jué)在這個(gè)過(guò)程中也非常的痛苦，經(jīng)常是改的頭都大了但還是有錯(cuò)誤。
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.

現(xiàn)在，我這樣畫線框圖：
Now, I do draw the line diagram:

加入了明暗對(duì)比之后，界面元素的重要級(jí)關(guān)系更直觀，我們不再需要跑過(guò)去跟視覺(jué)說(shuō)：這N個(gè)模塊中這個(gè)最重要，那個(gè)其次…… 視覺(jué)的工作效率也大大的提高了。
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.

但需要注意的是：深色并不意味著比淺色更重要，要看色塊之間的對(duì)比關(guān)系。
But note that: the dark does not mean more important than light-colored, to see the relationship between contrast color.

“全部商品分類”是非常重要的，在深色塊上用了淺色，是希望把它突出出來(lái)，讓人更容易注意到。但是視覺(jué)設(shè)計(jì)師有可能會(huì)誤以為淺色代表不那么重要，這個(gè)一定要提前溝通好。
"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.

很多產(chǎn)品人員為了能更清楚的表現(xiàn)想法，拼湊各種競(jìng)品的截圖，組成一個(gè)頁(yè)面。這樣做一來(lái)不規(guī)范，二來(lái)對(duì)視覺(jué)設(shè)計(jì)師也有一定的干擾。另外不太建議在線框圖上使用色彩，這樣同樣會(huì)對(duì)視覺(jué)設(shè)計(jì)師造成不必要的干擾。如果真的有一些關(guān)于圖案的想法，可以告訴視覺(jué)設(shè)計(jì)師需要營(yíng)造什么樣的氛圍，達(dá)到什么效果，而不是直接告訴他“畫幾個(gè)銅錢飛出來(lái)的樣子，配一個(gè)皇榜……”
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......"

三、標(biāo)記第一屏高度
Marking the first screen height

第一屏高度至關(guān)重要，最重要的內(nèi)容、尤其是重要的操作按鈕盡可能在第一屏內(nèi)顯示完全，不然會(huì)對(duì)轉(zhuǎn)化率有較大的影響。第一屏高度在什么位置?在1024*768分辨率下，極限情況下可定為570px;如果不那么嚴(yán)格的話，第一屏高度也可以定為600px。在原型稿上標(biāo)明即可，這樣可以給視覺(jué)設(shè)計(jì)師一個(gè)參考。但不要為了保持第一屏高度而讓內(nèi)容過(guò)度擁擠，這樣會(huì)給視覺(jué)設(shè)計(jì)師帶來(lái)不小的麻煩。
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.

四、嚴(yán)格遵守柵格規(guī)范
Strictly comply with the grid code

很多產(chǎn)品人員或新人交互設(shè)計(jì)師都比較容易忽略這一點(diǎn)，沒(méi)有按照柵格規(guī)范來(lái)布局，這樣容易導(dǎo)致的結(jié)果就是：視覺(jué)設(shè)計(jì)師在按照柵格排版時(shí)，發(fā)現(xiàn)在交互稿中能排下的內(nèi)容，在視覺(jué)稿中排不下了，這樣就還得返回去改交互稿，或是修改需求內(nèi)容。影響效率不說(shuō)，可能還會(huì)影響最終的質(zhì)量。所以在制作原型時(shí)，一定要注意這一點(diǎn)，同時(shí)也要保證交互稿中的字號(hào)、間距盡量符合視覺(jué)要求(比如間距最小10像素等)，以免給視覺(jué)造成不必要的困擾。但建議在確定柵格布局時(shí)，一定提前和視覺(jué)溝通商量好，以免影響視覺(jué)的發(fā)揮。
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

很多產(chǎn)品人員完全不考慮布局標(biāo)準(zhǔn)及美觀程度，隨便就把想要的內(nèi)容堆到一起。這樣視覺(jué)就只能重新考慮布局，無(wú)形中耽誤了很多時(shí)間。另外就是前面提到的，不按照布局及間距標(biāo)準(zhǔn)畫線框圖，將很難準(zhǔn)確的計(jì)算第一屏高度及每個(gè)模塊的實(shí)際內(nèi)容量，導(dǎo)致視覺(jué)返工的幾率大大增加。(如下圖的這種就是一個(gè)不合格的反例)。這里也是一樣，建議在確定界面布局時(shí)，提前和視覺(jué)溝通商量，給視覺(jué)合理的發(fā)揮空間。
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.

六、表達(dá)清楚UI邏輯
Clearly UI logic

當(dāng)設(shè)計(jì)一個(gè)內(nèi)容元素較多、邏輯層級(jí)較復(fù)雜的頁(yè)面時(shí)(比如表單)，為了避免混亂，我們需要提前整理一下這些內(nèi)容，以保證文字、鏈接、操作等內(nèi)容的樣式符合它們所代表的重要程度，并把各種復(fù)雜的情況歸類成有限的幾種形式，以給用戶一個(gè)合理的視覺(jué)引導(dǎo)。(字號(hào)盡量控制在3-5種，根據(jù)情況匹配顏色)
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)

主色調(diào)和點(diǎn)綴色最終由視覺(jué)設(shè)計(jì)師確定，在交互稿中有所示意即可。通過(guò)這些細(xì)致的分類，可以保證最終的字號(hào)及顏色符合邏輯，而不會(huì)給視覺(jué)設(shè)計(jì)師造成不必要的困擾(視覺(jué)考慮更多的是美觀，而非令人頭疼的邏輯)。
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).

七、了解視覺(jué)趨勢(shì)

時(shí)刻關(guān)注一些視覺(jué)趨勢(shì)，有助于我們?cè)趯徝郎虾鸵曈X(jué)設(shè)計(jì)師站在較為一致的立場(chǎng)上，使大家的溝通更加順暢。

從上圖可以看出，目前的視覺(jué)趨勢(shì)大致如下：

1、漸變減少，視覺(jué)風(fēng)格更平面化。
2、通過(guò)空隙和留白來(lái)分割區(qū)域，而不是用線。
3、布局更規(guī)整。
4、文字間距變大。
5、藍(lán)色鏈接減少，黑色文字減少，灰色文字居多。
6、圓角減少，直角增多。
7、色塊的疊加很流行。
本文發(fā)布于尚品中國(guó)企業(yè)網(wǎng)站制作服務(wù)商http://www.londe303.com/