網(wǎng)頁可視化設(shè)計(jì)與其說是科學(xué)，更像是一門藝術(shù)，但是它有著一些基本的要素，尺寸、色彩、布局、空間與風(fēng)格都能對(duì)于頁面效果有著顯著的影響。
好的網(wǎng)頁可視化設(shè)計(jì)不僅僅能影響網(wǎng)站流量與用戶決策，更能夠讓你的網(wǎng)站看起來十分美觀。網(wǎng)頁設(shè)計(jì)有其基本的美學(xué)原則，你可以從很多文藝復(fù)興大師的作品中找到靈感，但是網(wǎng)頁設(shè)計(jì)的首要目標(biāo)還是讓特定內(nèi)容更易讀、鼓勵(lì)用戶注冊(cè)登錄以及產(chǎn)生相應(yīng)的行為。網(wǎng)頁設(shè)計(jì)工作的出發(fā)點(diǎn)是改善用戶的使用體驗(yàn)，而不僅僅是表現(xiàn)美感。從基本上看，可視化設(shè)計(jì)就是找出哪些元素最能夠吸引用戶注意力。但是想要通過網(wǎng)頁設(shè)計(jì)達(dá)到這個(gè)效果卻不存在固定的模式。在下面我們要介紹 5 種網(wǎng)頁可視化設(shè)計(jì)中最為基本的元素，無論你的設(shè)計(jì)簡(jiǎn)約還是復(fù)雜，這些元素都是設(shè)計(jì)當(dāng)中最為必需的環(huán)節(jié)：船的大小決定了它在海里的運(yùn)動(dòng)方式，話糙理不糙。更大的圖標(biāo)看上去更為顯眼，不過并不代表著是更好的設(shè)計(jì)。簡(jiǎn)單來說就是你最為重要的頁面元素當(dāng)然應(yīng)該使用最大尺寸，但是涉及到細(xì)節(jié)部分，處理起來就復(fù)雜得多。費(fèi)茨定律的原則之一就是放大可點(diǎn)擊區(qū)域，目標(biāo)越大用戶就越容易點(diǎn)中。換句話說，使用大圖標(biāo)可以讓用戶更為輕松地點(diǎn)擊進(jìn)去，這一點(diǎn)在引導(dǎo)用戶瀏覽行為時(shí)非常管用。
當(dāng)然了，這并不是說你把「立即下載」圖標(biāo)簡(jiǎn)單地放大十倍就能有顯著效果，在網(wǎng)頁設(shè)計(jì)中讓各個(gè)元素之間形成微妙的和諧感才是關(guān)鍵。比如說上圖中的 Teye 網(wǎng)站，你認(rèn)為設(shè)計(jì)師最想要你在瀏覽過程中產(chǎn)生什么樣的互動(dòng)呢？網(wǎng)頁正中那個(gè)巨大的、可點(diǎn)擊的互動(dòng)式產(chǎn)品圖片毋庸置疑是最能吸引注意力的，這種效果完全來自它異乎尋常的尺寸。事實(shí)上，設(shè)計(jì)師甚至無需使用文字介紹去促使用戶與產(chǎn)品互動(dòng)，產(chǎn)品圖片具有對(duì)比性的顏色和尺寸已經(jīng)吸引了用戶用鼠標(biāo)去轉(zhuǎn)動(dòng)它。這種設(shè)計(jì)手法的結(jié)果就是讓用戶無需分心注意環(huán)繞產(chǎn)品圖片四周的小圖標(biāo)，當(dāng)你需要進(jìn)一步了解產(chǎn)品時(shí)，點(diǎn)擊這些小圖標(biāo)它們的尺寸會(huì)自動(dòng)放大，并且彈出詳細(xì)的產(chǎn)品介紹。除了吸引用戶點(diǎn)擊之外，圖標(biāo)尺寸大小對(duì)于網(wǎng)站的整體視覺效果也起著關(guān)鍵作用。依據(jù)圖標(biāo)尺寸大小，它們甚至可以影響人們?yōu)g覽網(wǎng)頁時(shí)從左到右、從上到下的閱讀習(xí)慣。此外，由于尺寸大小是一種相對(duì)的存在，因此使用大小對(duì)比也能達(dá)到一定效果。除了簡(jiǎn)單地把圖標(biāo)調(diào)大以外，你還可以通過縮小其他設(shè)計(jì)要素來營(yíng)造出顯著的視覺效果，這一招對(duì)于節(jié)省頁面空間相當(dāng)有用。尺寸大小還會(huì)影響到文字排版，主標(biāo)題、副標(biāo)題以及正文都應(yīng)該有所區(qū)分。
所有關(guān)于尺寸大小的原則都在上圖中體現(xiàn)得淋漓盡致。一眼看去你首先注意的就是巨大的 H 型公司 LOGO，然后是旁邊的「Nike Making」，它所使用的較大字號(hào)以及加粗效果使得其看上去十分顯眼。位于加粗字體下方的幾行文字使用了較小字號(hào)，因此它們不會(huì)分散瀏覽者針對(duì)主要元素的注意力。如果你對(duì)于該頁面足夠有興趣想要四處看看，就會(huì)注意到位于角落里的小 Logo 以及菜單目錄，甚至是位于頁面右邊的導(dǎo)航欄。這種可視化設(shè)計(jì)是很有借鑒意義的。首先，巨大的彩色 H 型 Logo 能夠抓住瀏覽者的眼球，然后你會(huì)看到旁邊具有對(duì)比效果的附有超鏈接的說明文字。視覺可視化設(shè)計(jì)引導(dǎo)出了用戶的瀏覽路徑，就像費(fèi)茨定律說的那樣，放大可點(diǎn)擊區(qū)域可以使得用戶更為輕松的點(diǎn)擊，加強(qiáng)互動(dòng)效果。讓瀏覽頁面的用戶最終點(diǎn)擊進(jìn)去進(jìn)一步了解產(chǎn)品，這就是設(shè)計(jì)師想要得到的效果。網(wǎng)頁設(shè)計(jì)中的色彩是經(jīng)過精心選擇的，即使是簡(jiǎn)單的黑白效果也有著諸多講究，色彩的運(yùn)用將會(huì)對(duì)于用戶的視覺體驗(yàn)產(chǎn)生不可忽視的影響。首先要知道的是每一種色彩都有其對(duì)應(yīng)的心理聯(lián)系，這一點(diǎn)我們?cè)诤芏辔恼轮卸加兴私狻３酥�，色彩本身也有其自己的吸引力層次，比如說黑色和紅色就更能引起注意，而淺黃色與奶油色就會(huì)讓人一眼掠過。色彩可以增強(qiáng)用戶的視覺體驗(yàn)，你還可以通過不同色彩之間的對(duì)比來制造反差。將兩種對(duì)比強(qiáng)烈的色彩組合在一起能夠比互補(bǔ)型色彩組合更惹人注目，比方說將黃色的圖標(biāo)放在藍(lán)色的背景圖上的顯眼效果會(huì)大大好于紅色圖標(biāo)與藍(lán)色背景的組合。
顯然，身為設(shè)計(jì)師與藝術(shù)總監(jiān)的 Vito Salvatore 深諳此道，上圖取自其個(gè)人主頁，很好地展示了他的設(shè)計(jì)功力。該圖在色彩的運(yùn)用方面將漫天飛舞的黃沙與深藍(lán)色天空形成了鮮明對(duì)比，達(dá)到了一種視覺上的動(dòng)態(tài)效果。而出于功能性的考慮，他選擇使用帶有鏈接的白色字體，在壯麗的背景圖襯托之下更顯優(yōu)雅。仔細(xì)觀察該圖你會(huì)發(fā)現(xiàn)棕褐色沙塵實(shí)際上與藍(lán)天形成了互補(bǔ)，你可以看到色輪。雖然這在照片中可能只是純粹的巧合，但是在審美上卻達(dá)到了一種平衡。揚(yáng)起的黃褐色沙塵創(chuàng)造了一種視覺運(yùn)動(dòng)路線，將你的目光指引到紅色的車身方向（也將你的視線帶往了白色文本所在位置）。當(dāng)我們解構(gòu)一個(gè)頁面設(shè)計(jì)之時(shí)，你能夠從中發(fā)現(xiàn)別人是如何運(yùn)用色彩、視覺效果、排版來將你的視線引導(dǎo)到整個(gè)頁面中最有價(jià)值的部分。網(wǎng)站頁面布局是用來引導(dǎo)瀏覽者視覺落腳點(diǎn)的最為直接的方式之一。為了引人注意，你可以將一個(gè)設(shè)計(jì)元素安放在頁面中最頂部位置。但是關(guān)于如何使用布局提升用戶注意力，可不僅僅是置頂操作能夠簡(jiǎn)單涵蓋的。影響頁面布局的主要因素就是像素大小。費(fèi)茨定律在網(wǎng)頁設(shè)計(jì)發(fā)方面的另一指導(dǎo)意義就是將可點(diǎn)擊圖標(biāo)放在鼠標(biāo)最易到達(dá)的位置。在網(wǎng)頁設(shè)計(jì)的實(shí)踐中，屏幕角落與四邊相比頁面中間的固定一點(diǎn)對(duì)于用戶來說更容易點(diǎn)擊。
雖然在設(shè)計(jì)網(wǎng)頁時(shí)你可能仍然會(huì)更加關(guān)注屏幕中心位置的排版，但是可點(diǎn)擊鏈接應(yīng)該一直位于最易點(diǎn)擊的角落與底部位置。當(dāng)頁面滾動(dòng)時(shí)其中心位置會(huì)隨之發(fā)生變化，但是網(wǎng)站 Logo、菜單目錄、聯(lián)系方式以及社交網(wǎng)站鏈接應(yīng)該一直位于它們的固定位置。你的頁面布局不僅會(huì)影響可視化效果，也會(huì)影響到可用性。格式塔原則顯示了人在觀察物體時(shí)有趨向于使不完整的形狀完整化的趨勢(shì)，因此在設(shè)計(jì)網(wǎng)頁時(shí)可以利用文字排版以及顏色來引導(dǎo)用戶的視線運(yùn)動(dòng)。網(wǎng)頁中的行列設(shè)計(jì)除了讓布局顯得井然有序之外，還能夠在行列末尾創(chuàng)造出一個(gè)安放廣告以及重要內(nèi)容的黃金地段。
如上圖所示，Huncwot 網(wǎng)站的主頁設(shè)計(jì)就使用了水平線布局，無論你停在哪個(gè)部分都會(huì)展示出動(dòng)畫效果。當(dāng)你決定采用何種頁面布局時(shí)，要牢記席克定律的要義——可選項(xiàng)越多，人們的決策過程越長(zhǎng)。是給予用戶更多選項(xiàng)還是將其限制于最精華內(nèi)容之中，你需要從中找到最佳平衡點(diǎn)。這種考慮會(huì)影響你對(duì)于頁面布局的選擇，因?yàn)槟慵炔幌Ｍ蠖蔚膬?nèi)容給用戶帶去負(fù)擔(dān)，但是又要提供足夠的信息讓用戶滿意。這種平衡感相當(dāng)微妙，但是對(duì)于頁面設(shè)計(jì)來說卻是必需的。如果你將一堆設(shè)計(jì)元素充斥于頁面之中，你的網(wǎng)頁看上去就會(huì)十分平庸，毫無設(shè)計(jì)感可言。空間與頁面布局息息相關(guān)，適當(dāng)?shù)倪\(yùn)用頁面空間能夠引導(dǎo)用戶的視覺路線，并且在一定的情況下還能夠起到解釋與闡述的功能。頁面空間主要通過這兩種方式發(fā)揮作用：間距與留白。對(duì)于網(wǎng)頁設(shè)計(jì)者來說間距是一個(gè)非常有力的工具，它可以僅僅通過視覺效果表達(dá)出一個(gè)設(shè)計(jì)元素的意義。早在 20 世紀(jì)早期，心理學(xué)家就發(fā)現(xiàn)了人類具有不需要學(xué)習(xí)的組織傾向，這種傾向使我們能夠在視覺環(huán)境中組織排列事物的位置，感受和知覺出環(huán)境的整體與連續(xù)，這就是在上文中我們提到的格式塔原則。
In Pieces 網(wǎng)站就很好地向我們展示了如何利用格式塔原則。與頁面中央圖像具有直接聯(lián)系的元素被安置在圖像下方，與該頁面相關(guān)的導(dǎo)航選項(xiàng)統(tǒng)一組合在頁面右側(cè)。而整個(gè)網(wǎng)站的導(dǎo)航欄則作為整體安排在頁面右方，其他相關(guān)鏈接則統(tǒng)一安放在頁面底部。同時(shí)還需要注意的是，該網(wǎng)頁在設(shè)計(jì)中將滾動(dòng)選項(xiàng)放在了頁面水平線上最為顯著的位置。讓我們?cè)谠賮砜纯淳W(wǎng)頁設(shè)計(jì)中如何運(yùn)用留白。設(shè)計(jì)新手通常會(huì)犯的一個(gè)錯(cuò)誤就是將網(wǎng)頁中的空白當(dāng)成是空白畫布一般，總想著去將其填滿，而沒有意識(shí)到留白本身就是一種設(shè)計(jì)工具。有經(jīng)驗(yàn)的設(shè)計(jì)師都明白網(wǎng)頁中展現(xiàn)的視覺元素越少，主要元素就愈發(fā)凸顯。在重要的元素之間適當(dāng)留白，可以讓它們始終處于用戶的視覺中心。Dmitry Fadeyev 針對(duì)頁面留白的設(shè)計(jì)方法進(jìn)行了研究，發(fā)現(xiàn)在段落與頁面邊緣適當(dāng)留白可以將用戶對(duì)網(wǎng)站的理解能力提升 20%。
Nua Bikes 就為我們展示了一個(gè)運(yùn)用留白的好例子。其頁面設(shè)計(jì)極致簡(jiǎn)約，也沒有能夠形成視覺對(duì)比的元素組合，該頁面設(shè)計(jì)將用戶所有目光都集中于最為重要的信息上——有自行車供出售。想要更多地了解頁面留白的魔力，我推薦你進(jìn)一步閱讀設(shè)計(jì)師 Mark Boulton 的相關(guān)文章，他在細(xì)節(jié)上剖析了留白手法的使用，展示了留白的積極與負(fù)面影響，還將留白分為了宏觀與微觀兩大種類。我們講述了這么多種網(wǎng)頁設(shè)計(jì)中所涉及的要素，并不是想讓人以為網(wǎng)頁設(shè)計(jì)是一種可以量化且方法唯一的實(shí)踐。設(shè)計(jì)師的個(gè)人風(fēng)格將在紋理、圖片以及圖標(biāo)的選擇中得以體現(xiàn)，這些都會(huì)影響網(wǎng)站的可視化效果，并且體現(xiàn)出你的個(gè)人審美品位。體現(xiàn)個(gè)人風(fēng)格最為強(qiáng)大的工具就是使用紋理，如果使用得當(dāng)，紋理在體現(xiàn)網(wǎng)站深度與烘托氛圍上能夠起到與尺寸及色彩同樣的效果。下圖就是一個(gè)最為清晰的例子：如果背景顏色單一，那么使用帶有紋理的圖標(biāo)會(huì)相當(dāng)顯眼；當(dāng)你使用了帶有紋理效果的背景圖時(shí)，頁面上不具有紋理效果的圖標(biāo)就會(huì)得以彰顯。
當(dāng)你瀏覽 Le Mystère de Grimouville 網(wǎng)站時(shí)，帶有紋理效果的標(biāo)題不僅僅能夠吸引注意力，還營(yíng)造出了一種復(fù)古的風(fēng)格。在該頁面中，主標(biāo)題的紋理、尺寸、位置統(tǒng)一發(fā)揮了作用，使得它和下方的重要性偏低的文本區(qū)分開來。該網(wǎng)頁設(shè)計(jì)中對(duì)于紋理的使用還創(chuàng)造出了一種神秘的氣息，這與該網(wǎng)站的主題相符合——它講訴了一個(gè)在過去四年中諾曼底 140 位居民遭遇的鬧鬼故事。
Jib Strategic 網(wǎng)站是一個(gè)與 Le Mystère de Grimouville 完全相反的例子，它在背景圖上使用了紋理效果，用以凸顯頁面上的內(nèi)容。該網(wǎng)站的設(shè)計(jì)不僅僅是抓住了用戶的目光，還打造出了一種木質(zhì)紋理的復(fù)古風(fēng)，但是頁面中所使用的新穎排版和可愛的圖像又讓它看上去相當(dāng)時(shí)尚。除了紋理之外，你所選擇的圖像以及圖形的風(fēng)格也會(huì)影響到頁面的視覺層次�；ㄇ蔚膱D標(biāo)設(shè)計(jì)與 Logo 能夠吸引注意力，同時(shí)也反映了設(shè)計(jì)者的特點(diǎn)。同樣，無論你的網(wǎng)站采取了何種布局與配色方案，豐富的圖片與設(shè)計(jì)感的圖標(biāo)都會(huì)抓住眼球。
在 Risotteria Melotti 的網(wǎng)頁設(shè)計(jì)中淡化了對(duì)于顏色的使用，但是它的內(nèi)容仍然具有吸引力——背景中那一道美味的菜肴看上去非�？煽凇Ｊ聦�(shí)上該網(wǎng)站對(duì)于紋理的使用并沒有使用傳統(tǒng)的格式、陰影以及圖像，它只是采用了內(nèi)容豐富的圖片去展示一個(gè)古樸的餐桌，僅僅如此我們已經(jīng)能從屏幕中感受到那種環(huán)境氛圍。這張照片被使用在了背景圖中，同時(shí)頁面上的圖標(biāo)也給我們留下了簡(jiǎn)潔明快的印象。在進(jìn)行可視化設(shè)計(jì)時(shí)不要低估人的創(chuàng)造力，他們有時(shí)候能夠打破常規(guī)，出奇制勝。但是在使用紋理的時(shí)候適度是非常關(guān)鍵的，切記過猶不及，大量堆砌的紋理只會(huì)讓你的網(wǎng)頁看上去俗氣老土。學(xué)會(huì)使用以上這些設(shè)計(jì)元素是一個(gè)網(wǎng)頁設(shè)計(jì)師的基本功，但是明白什么時(shí)候該用哪一種，乃至更進(jìn)一步組合使用這些元素，就需要對(duì)于這些技巧的熟練掌握。你在網(wǎng)頁設(shè)計(jì)中所使用的每一種元素都會(huì)互相融合，最終一起去爭(zhēng)奪視覺優(yōu)勢(shì)。即使你的設(shè)計(jì)是像素級(jí)別的，用戶在瀏覽網(wǎng)站時(shí)也會(huì)帶上他自己的偏好。使用T云云建站，可視化編輯，拖拉拽自由設(shè)計(jì)你的網(wǎng)頁，更有豐富模板滿足各行業(yè)建站需求。
