這篇文章所說(shuō)的視覺(jué)元素是指：在一個(gè)網(wǎng)站中除去內(nèi)容(文本、圖片、視頻、音頻等）之外的一些元素。比如圖標(biāo)，背景色，以及背景圖案。
視覺(jué)元素的設(shè)計(jì)是配合產(chǎn)品的架構(gòu)意圖并且引導(dǎo)用戶交互
前文在聊到文字設(shè)計(jì)的時(shí)候，內(nèi)容本身的應(yīng)該是簡(jiǎn)潔、直接了當(dāng)。其實(shí)視覺(jué)元素同樣如此，好設(shè)計(jì)不會(huì)拖泥帶水，在版式設(shè)計(jì)中，我說(shuō)到很多時(shí)候可以利用留白來(lái)劃分位置感，比如我的博客主題，區(qū)塊直接的劃分完全使用留白+對(duì)齊。但是，對(duì)于大多數(shù)的網(wǎng)站來(lái)說(shuō)，頁(yè)面空間**，不可能有那么多“白”讓設(shè)計(jì)師揮霍，這時(shí)，我們就會(huì)利用圖標(biāo)，背景圖案、顏色來(lái)給予用戶位置感，傳遞產(chǎn)品架構(gòu)的邏輯關(guān)系。
圖中是華南理工大學(xué)的學(xué)生網(wǎng)站，整個(gè)網(wǎng)站的視覺(jué)可謂一馬平川，雖然在布局的劃分中，也用到了一些視覺(jué)元素，比如區(qū)塊中的小方塊圖標(biāo)，右側(cè)的綠色背景，但是效果非常不明顯。假設(shè)將綠色背景放在標(biāo)題文字下面，標(biāo)題文字反白并且加粗顯示，相信效果會(huì)好一些。多參看一下一些成熟的門(mén)戶網(wǎng)站在這方面設(shè)計(jì)的方法和手段。
視覺(jué)元素的一致性
很多設(shè)計(jì)師有個(gè)習(xí)慣，在做視覺(jué)的時(shí)候，會(huì)參看大量的“漂亮”網(wǎng)站或者該領(lǐng)域成功的網(wǎng)站，并且借鑒其中的一些視覺(jué)元素，但是往往這樣?xùn)|拼西湊的設(shè)計(jì)往往會(huì)影響細(xì)節(jié)體驗(yàn)。
中華玻璃網(wǎng)在視覺(jué)設(shè)計(jì)中大量借鑒了淘寶的設(shè)計(jì)風(fēng)格，向好的網(wǎng)站借鑒本身沒(méi)有錯(cuò)，但要把細(xì)節(jié)借鑒到位了，并且融合自己網(wǎng)站的定位。來(lái)看玻璃網(wǎng)中的圖標(biāo)，各種顏色、形狀非常地豐富。再看看淘寶是怎么做的：小圓角是整個(gè)網(wǎng)站的設(shè)計(jì)風(fēng)格，不**在頁(yè)面的模塊中用了圓角的設(shè)計(jì)，在圖標(biāo)的設(shè)計(jì)上，也都是圓形的設(shè)計(jì)，顏色也只用了主色調(diào)的橙色和灰色。借鑒本身不是壞事，但是要注意保持自己頁(yè)面風(fēng)格，品牌風(fēng)格的一致性。
那些多余的視覺(jué)元素
很多網(wǎng)站單純地為了“漂亮”而設(shè)計(jì)，比如在每個(gè)標(biāo)題前面都要帶個(gè)小圖標(biāo)，或者在按鈕里面加小圖標(biāo)。給每個(gè)模塊都加上一樣的背景顏色等等。
再比如麥田老師的螞蟻網(wǎng)，首頁(yè)中的那個(gè)背景圖案讓我就很費(fèi)解，更像是一個(gè)個(gè)人空間的模板而不是一個(gè)“平臺(tái)性”的網(wǎng)站。在頁(yè)面的布局上面，也讓人感覺(jué)不夠清晰，沒(méi)有層次感。
PS：漸漸地有些朋友發(fā)郵件讓我給貴站提建議，而且數(shù)量越來(lái)越多，不能一一作答，望見(jiàn)諒，而且有些網(wǎng)站連一些基本的視覺(jué)概念都沒(méi)有，問(wèn)題確實(shí)太多，不太好作答，希望這幾篇視覺(jué)設(shè)計(jì)的文章對(duì)大家有所幫助。還有的用table布局，建議改用div。
這系列文章也**代表我個(gè)人的一些觀點(diǎn)和經(jīng)驗(yàn)，希望能和設(shè)計(jì)師朋友一起討論。
網(wǎng)站中視覺(jué)元素的設(shè)計(jì)，謝謝圍觀。
