畫線框圖容易忽略的幾件事

 　　一、通過明暗對比表達

　　以前，我是這樣畫線框圖的，這樣能非常清晰的展示各模塊元素之間的布局關系。然後我會告訴視覺，這些模塊或元素之間的優先級關系是怎樣的。但頭疼的是，當界面元素很復雜的時候，視覺就難以一一記住了，這個時候就需要反復的溝通，視覺在這個過程中也非常的痛苦，經常是改的頭都大了但還是有錯誤。

　　現在，我這樣畫線框圖：

　　加入了明暗對比之後，界面元素的重要級關系更直觀，我們不再需要跑過去跟視覺說：這N個模塊中這個最重要，那個其次…… 視覺的工作效率也大大的提高了。

　　但需要注意的是：深色並不意味著比淺色更重要，要看色塊之間的對比關系。比如下圖：

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

　　修改前：

　　修改後：

　　二、不使用截圖與顏色

　　很多產品人員為了能更清楚的表現想法，拼湊各種競品的截圖，組成一個頁面。這樣做一來不規范，二來對視覺設計師也有一定的干擾。另外不太建議在線框圖上使用色彩，這樣同樣會對視覺設計師造成不必要的干擾。如果真的有一些關於圖案的想法，可以告訴視覺設計師需要營造什麼樣的氛圍，達到什麼效果，而不是直接告訴他“畫幾個銅錢飛出來的樣子，配一個皇榜……”

　　三、標記第一屏高度

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

　　四、嚴格遵守柵格規范

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

　　五、合理的布局及間距

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

　　六、表達清楚UI邏輯

　　當設計一個內容元素較多、邏輯層級較復雜的頁面時(比如表單)，為了避免混亂，我們需要提前整理一下這些內容，以保證文字、鏈接、操作等內容的樣式符合它們所代表的重要程度，並把各種復雜的情況歸類成有限的幾種形式，以給用戶一個合理的視覺引導。(字號盡量控制在3-5種，根據情況匹配顏色)

　　主色調和點綴色最終由視覺設計師確定，在交互稿中有所示意即可。通過這些細致的分類，可以保證最終的字號及顏色符合邏輯，而不會給視覺設計師造成不必要的困擾(視覺考慮更多的是美觀，而非令人頭疼的邏輯)。

　　七、了解視覺趨勢

　　時刻關注一些視覺趨勢，有助於我們在審美上和視覺設計師站在較為一致的立場上，使大家的溝通更加順暢。

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

　　•漸變減少，視覺風格更平面化

　　•通過空隙和留白來分割區域，而不是用線

　　•布局更規整

　　•文字間距變大

　　•藍色鏈接減少，黑色文字減少，灰色文字居多

　　•圓角減少，直角增多

　　•色塊的疊加很流行

　　•去掉不必要的視覺元素

　　……

　　我們可以把這些發現應用在線框圖的設計中。

　　如果在繪制線框圖的時候，注意以上的幾點，我們會發現，和視覺設計師的溝通越來越暢通。當然我這裡說的溝通不一定是語言方面的，只要工作方法得當，即使不當面交流，你也會發現設計師更懂你的想法，而且往往一步就能到位，節省了大量的時間。