網(wǎng)頁視覺設(shè)計如何針對用戶有效表達(dá)信息

在日常工作中，我們經(jīng)常會遇到一些設(shè)計的很”漂亮”的圖片不被用戶認(rèn)可，點擊率很低，這時候我們會暗地里抱怨，可卻沒明白問題究竟出在哪？

網(wǎng)頁設(shè)計與平面設(shè)計究竟有啥區(qū)別，(圖趣觀點：簡單來講網(wǎng)頁設(shè)計注重整體，而平面設(shè)計注重局部。)我們主觀的為頁面添加元素的時候是否有章可循，博主以前曾是一名視覺設(shè)計菜鳥（現(xiàn)在也是），以自己的切身體會談?wù)勗赪eb頁面設(shè)計中的一些體會。

下面我們先看一個專題的banner：

第一眼看上去，畫面感好像還行，但細(xì)看后會發(fā)現(xiàn)整個畫面沒有一個視覺中心，這張圖片究竟想表達(dá)什么也沒有說清楚，看看上面的元素：女人，模特架，燈光，展廳，衣服。好像表達(dá)了很多，其實除了設(shè)計師本人知道這是衣服與配件專題的banner，其他人都一頭霧水。

那我們再看看同樣主題的banner：

畫面中心的”fashion apparel”告訴我們是賣時尚衣物的，圖片元素還告訴我們，這里賣衣服配飾，鞋，內(nèi)衣，泳帽等等。這個banner不僅表達(dá)了衣服與配件的主題，還直接告訴了我們種類的齊全。

通過這個例子我們會漸漸明白視覺設(shè)計的目的：視覺設(shè)計的本質(zhì)是為了更好的傳達(dá)信息。

傳達(dá)信息的表現(xiàn)形式：

那么究竟怎樣才能通過設(shè)計把需求信息出色的表達(dá)出來，這里面學(xué)問很多，我就談一談自己的理解：

1.產(chǎn)品風(fēng)格 在做設(shè)計之前，我們先要搞清楚服務(wù)的對象是誰，每個人群的認(rèn)知度不同，設(shè)計風(fēng)格也要根據(jù)人群的認(rèn)知度而調(diào)整，說簡單點就是要先根據(jù)目標(biāo)人群確定設(shè)計風(fēng)格。

下面我們再看看一組banner：

兩者的區(qū)別在于字體發(fā)生了變化，但傳達(dá)出的產(chǎn)品氣質(zhì)卻大相徑庭。”領(lǐng)動”是一個商務(wù)產(chǎn)品，但這個 banner的字體顯然不能表達(dá)商務(wù)人士干凈利索的做事風(fēng)格，對產(chǎn)品的信任感自然就會降低，信任感缺失，表達(dá)的文案也就沒有了任何意義。

所以，設(shè)計的風(fēng)格要去迎合訪問者的喜好。打個比方，粉色肯定不能用在軍事網(wǎng)站，紅色也不能作為醫(yī)療網(wǎng)站的主色調(diào) 。 產(chǎn)品的視覺氣質(zhì)就是一種信息的表達(dá)。

2.還原物件真實感

什么叫物件真實感？我們先看下面的圖片

上圖是iBooks的界面。美觀的內(nèi)容形式，富有真實感，利用熟悉的木質(zhì)書架UI使用戶感到在體驗上的自然。

產(chǎn)品的界面是訪客熟悉了解產(chǎn)品的主要途徑，當(dāng)產(chǎn)品的界面接近真實世界時，用戶的學(xué)習(xí)成本越低，產(chǎn)品的易用性就會提高。再看一組太陽能主題banner：

對比兩個banner，拋開一些細(xì)節(jié)的推敲，第二張圖片傳達(dá)的信息明顯比第一張要通俗易懂，設(shè)計師不能夠主觀的代表用戶的審美認(rèn)知能力，還原物件的真實情感，呈現(xiàn)最真實的產(chǎn)品圖片，是一種很直接的信息表達(dá)方法。