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

那么具體怎樣做呢?以下就是我工作中積累的一些心得，希望對(duì)大家有所幫助。

一、通過(guò)明暗對(duì)比表達(dá)

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

現(xiàn)在，我這樣畫線框圖：

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

但需要注意的是：深色并不意味著比淺色更重要，要看色塊之間的對(duì)比關(guān)系。

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

二、不使用截圖與顏色

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

三、標(biāo)記第一屏高度

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

四、嚴(yán)格遵守柵格規(guī)范

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

五、合理的布局及間距

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

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

當(dāng)設(shè)計(jì)一個(gè)內(nèi)容元素較多、邏輯層級(jí)較復(fù)雜的頁(yè)面時(shí)(比如表單)，為了避免混亂，我們需要提前整理一下這些內(nèi)容，以保證文字、鏈接、操作等內(nèi)容的樣式符合它們所代表的重要程度，并把各種復(fù)雜的情況歸類成有限的幾種形式，以給用戶一個(gè)合理的視覺引導(dǎo)。(字號(hào)盡量控制在3-5種，根據(jù)情況匹配顏色) 主色調(diào)和點(diǎn)綴色最終由視覺設(shè)計(jì)師確定，在交互稿中有所示意即可。通過(guò)這些細(xì)致的分類，可以保證最終的字號(hào)及顏色符合邏輯，而不會(huì)給視覺設(shè)計(jì)師造成不必要的困擾(視覺考慮更多的是美觀，而非令人頭疼的邏輯)。

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

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

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

?漸變減少，視覺風(fēng)格更平面化

?通過(guò)空隙和留白來(lái)分割區(qū)域，而不是用線

?布局更規(guī)整

?文字間距變大

?藍(lán)色鏈接減少，黑色文字減少，灰色文字居多

?圓角減少，直角增多

?色塊的疊加很流行

?去掉不必要的視覺元素

我們可以把這些發(fā)現(xiàn)應(yīng)用在線框圖的設(shè)計(jì)中。

如果在繪制線框圖的時(shí)候，注意以上的幾點(diǎn)，我們會(huì)發(fā)現(xiàn)，和視覺設(shè)計(jì)師的溝通越來(lái)越暢通。當(dāng)然我這里說(shuō)的溝通不一定是語(yǔ)言方面的，只要工作方法得當(dāng)，即使不當(dāng)面交流，你也會(huì)發(fā)現(xiàn)設(shè)計(jì)師更懂你的想法，而且往往一步就能到位，節(jié)省了大量的時(shí)間。

本文來(lái)源于成都網(wǎng)站建設(shè)公司與成都網(wǎng)站設(shè)計(jì)制作公司-創(chuàng)新互聯(lián)成都公司！

分享名稱：畫線框圖容易忽略的幾件事
URL分享：http://www.rwnh.cn/news36/318036.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供響應(yīng)式網(wǎng)站、搜索引擎優(yōu)化、服務(wù)器托管、外貿(mào)建站、品牌網(wǎng)站制作、面包屑導(dǎo)航

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)