交互設計師畫(huà)網(wǎng)頁(yè)草圖容易忽略的幾件事發(fā)布者：本站     時(shí)間：2022-02-18 09:02:49

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

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

一、通過(guò)明暗對比表達

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

畫(huà)網(wǎng)頁(yè)草圖容易忽略的幾件事,PS教程,

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

畫(huà)網(wǎng)頁(yè)草圖容易忽略的幾件事,PS教程,

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

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

畫(huà)網(wǎng)頁(yè)草圖容易忽略的幾件事,PS教程,

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