網(wǎng)站制作通過工作中的觀察與總結(jié)，我發(fā)現(xiàn)不少新人交互設(shè)計(jì)師以及產(chǎn)品人員，在畫線框圖時(shí)都會忽略一些重要內(nèi)容，導(dǎo)致和視覺設(shè)計(jì)師的溝通成本增高、返工增多、工作效率下降、設(shè)計(jì)質(zhì)量下降等重要問題。為了解決這些問題，一方面需要加強(qiáng)溝通，另一方面還需要多站在視覺的角度考慮線框圖的設(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.
那么具體怎樣做呢?以下就是我工作中積累的一些心得，希望對大家有所幫助。
So what can be done? The following is my some experience accumulated in the work, we hope to help.
一、通過明暗對比表達(dá)(Expression through the contrast of light and shade)
以前，我是這樣畫線框圖的，這樣能非常清晰的展示各模塊元素之間的布局關(guān)系。然后我會告訴視覺，這些模塊或元素之間的優(yōu)先級關(guān)系是怎樣的。但頭疼的是，當(dāng)界面元素很復(fù)雜的時(shí)候，視覺就難以一一記住了，這個(gè)時(shí)候就需要反復(fù)的溝通，視覺在這個(gè)過程中也非常的痛苦，經(jīng)常是改的頭都大了但還是有錯誤。
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:
加入了明暗對比之后，界面元素的重要級關(guān)系更直觀，我們不再需要跑過去跟視覺說：這N個(gè)模塊中這個(gè)最重要，那個(gè)其次…… 視覺的工作效率也大大的提高了。
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.
但需要注意的是：深色并不意味著比淺色更重要，要看色塊之間的對比關(guān)系。
But note that: the dark does not mean more important than light-colored, to see the relationship between contrast color.
“全部商品分類”是非常重要的，在深色塊上用了淺色，是希望把它突出出來，讓人更容易注意到。但是視覺設(shè)計(jì)師有可能會誤以為淺色代表不那么重要，這個(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)想法，拼湊各種競品的截圖，組成一個(gè)頁面。這樣做一來不規(guī)范，二來對視覺設(shè)計(jì)師也有一定的干擾。另外不太建議在線框圖上使用色彩，這樣同樣會對視覺設(shè)計(jì)師造成不必要的干擾。如果真的有一些關(guān)于圖案的想法，可以告訴視覺設(shè)計(jì)師需要營造什么樣的氛圍，達(dá)到什么效果，而不是直接告訴他“畫幾個(gè)銅錢飛出來的樣子，配一個(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)顯示完全，不然會對轉(zhuǎn)化率有較大的影響。第一屏高度在什么位置?在1024*768分辨率下，極限情況下可定為570px;如果不那么嚴(yán)格的話，第一屏高度也可以定為600px。在原型稿上標(biāo)明即可，這樣可以給視覺設(shè)計(jì)師一個(gè)參考。但不要為了保持第一屏高度而讓內(nèi)容過度擁擠，這樣會給視覺設(shè)計(jì)師帶來不小的麻煩。
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)，沒有按照柵格規(guī)范來布局，這樣容易導(dǎo)致的結(jié)果就是：視覺設(shè)計(jì)師在按照柵格排版時(shí)，發(fā)現(xiàn)在交互稿中能排下的內(nèi)容，在視覺稿中排不下了，這樣就還得返回去改交互稿，或是修改需求內(nèi)容。影響效率不說，可能還會影響最終的質(zhì)量。所以在制作原型時(shí)，一定要注意這一點(diǎn)，同時(shí)也要保證交互稿中的字號、間距盡量符合視覺要求(比如間距最小10像素等)，以免給視覺造成不必要的困擾。但建議在確定柵格布局時(shí)，一定提前和視覺溝通商量好，以免影響視覺的發(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)容堆到一起。這樣視覺就只能重新考慮布局，無形中耽誤了很多時(shí)間。另外就是前面提到的，不按照布局及間距標(biāo)準(zhǔn)畫線框圖，將很難準(zhǔn)確的計(jì)算第一屏高度及每個(gè)模塊的實(shí)際內(nèi)容量，導(dǎo)致視覺返工的幾率大大增加。(如下圖的這種就是一個(gè)不合格的反例)。這里也是一樣，建議在確定界面布局時(shí)，提前和視覺溝通商量，給視覺合理的發(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)容元素較多、邏輯層級較復(fù)雜的頁面時(shí)(比如表單)，為了避免混亂，我們需要提前整理一下這些內(nèi)容，以保證文字、鏈接、操作等內(nèi)容的樣式符合它們所代表的重要程度，并把各種復(fù)雜的情況歸類成有限的幾種形式，以給用戶一個(gè)合理的視覺引導(dǎ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)綴色最終由視覺設(shè)計(jì)師確定，在交互稿中有所示意即可。通過這些細(xì)致的分類，可以保證最終的字號及顏色符合邏輯，而不會給視覺設(shè)計(jì)師造成不必要的困擾(視覺考慮更多的是美觀，而非令人頭疼的邏輯)。
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).
七、了解視覺趨勢
時(shí)刻關(guān)注一些視覺趨勢，有助于我們在審美上和視覺設(shè)計(jì)師站在較為一致的立場上，使大家的溝通更加順暢。
從上圖可以看出，目前的視覺趨勢大致如下：
1、漸變減少，視覺風(fēng)格更平面化。
2、通過空隙和留白來分割區(qū)域，而不是用線。
3、布局更規(guī)整。
4、文字間距變大。
5、藍(lán)色鏈接減少，黑色文字減少，灰色文字居多。
6、圓角減少，直角增多。
7、色塊的疊加很流行。
本文發(fā)布于創(chuàng)新互聯(lián)企業(yè)網(wǎng)站制作服務(wù)商http://www.rwnh.cn/