網站制作通過工作中的觀察與總結，我發現不少新人交互設計師以及產品人員，在畫線框圖時都會忽略一些重要內容，導致和視覺設計師的溝通成本增高、返工增多、工作效率下降、設計質量下降等重要問題。為了解決這些問題，一方面需要加強溝通，另一方面還需要多站在視覺的角度考慮線框圖的設計，使大家的配合更默契。
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://tcggg.cn/