網站設計分析:畫線框圖容易忽略的幾件事

來源:互聯網
上載者:User

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

  那麼具體怎樣做呢?以下就是我工作中積累的一些心得,希望對大家有所協助。

   一、通過明暗對比表達

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

  現在,我這樣畫線框圖:

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

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

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

  修改前:

  修改後:

  二、不使用截圖與顏色

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

   三、標記第一屏高度

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

  四、嚴格遵守柵格規範

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

  五、合理的布局及間距

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

   六、表達清楚UI邏輯

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

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

  七、瞭解視覺趨勢

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

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

  •漸層減少,視覺風格更平面化

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

  •布局更規整

  •文字間距變大

  •藍色連結減少,黑色文字減少,灰色文字居多

  •圓角減少,直角增多

  •色塊的疊加很流行

  •去掉不必要的視覺元素

  ……

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

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

  快來試試吧。

相關文章

Cloud Intelligence Leading the Digital Future

Alibaba Cloud ACtivate Online Conference, Nov. 20th & 21st, 2019 (UTC+08)

Register Now >

Starter Package

SSD Cloud server and data transfer for only $2.50 a month

Get Started >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。