網(wǎng)站視覺設(shè)計中的信息傳達(dá)的作用以及方法介紹(圖文)

2024-08-30 08:34:45

字體：大中小

供稿：網(wǎng)友

當(dāng)代的網(wǎng)頁視覺設(shè)計由最初的信息堆砌到后來的圖形化、抽象化，更到今天的信息視覺化，經(jīng)歷了3個迥然不同而又相互遞進(jìn)的過程。目前，除了一些藝術(shù)或個人網(wǎng)站，其他絕大部分的網(wǎng)站都以信息的準(zhǔn)確傳遞為視覺設(shè)計的主要目的。
　　信息以文字、圖片、色塊為主要的載體，經(jīng)過編排在瀏覽器里對用戶展示，這要求網(wǎng)站構(gòu)成的絕大部份必須是能清晰閱讀的文字和準(zhǔn)確無誤的圖片。
　　同其他種類的視覺設(shè)計一樣，信息為主的網(wǎng)站視覺設(shè)計需要遵循一些基本的美術(shù)規(guī)則，運(yùn)用一些簡單有效的美術(shù)手段來達(dá)成。下面我們來談一下這些具體的方法論。
　　高傲的空間
　　—————————————————
　　讓瀏覽更高效
　　在滿篇都基本由文字、色塊組成的信息里，要讓用戶順利的瀏覽、輕松地操作，是一件值得反復(fù)推敲的工作，通常，國內(nèi)的很多設(shè)計師都會羨慕以字母為文字的國家的設(shè)計師，因?yàn)榫W(wǎng)頁設(shè)計中，能使用的中文最小的像素字體只能是12Px的宋體，最大的像素字體則14-18px，超過這個范疇的像素字體，就幾乎不能辨認(rèn)，或很不美觀，而字母組成的內(nèi)容則不限，可以更小到9Px甚至8Px依然能夠輕松分辨，這給信息的設(shè)計留下了很大的操作空間，
　　那么中文狀態(tài)下的我們，怎么有效地設(shè)計信息?
網(wǎng)站視覺設(shè)計中的信息傳達(dá) 武林網(wǎng)

　　第一，色彩法，用灰度的色彩使字體看起來視覺上更小，而重要的內(nèi)容則用深色、純度較高的顏色，使之更顯得大。在大段內(nèi)容文字下面間或賦予底色以淺淺的色彩，能有效增強(qiáng)文字可讀性，而主體文字的顏色一般不用系統(tǒng)默認(rèn)的純黑色#000,對于白底來說那是一種非常刺目的顏色，并且容易使空間看起來擁擠局促。

　　第二，編排法，其實(shí)也是排版的基本方法，即把最重要的大號文字與輔助性的最小文字排在一起，通過對比劃分彼此的區(qū)別，彰顯各自的特性。

　　另外，當(dāng)文字成行、并且長短不一時，我們必須把文字看成錯落有致的"線";而當(dāng)文字較多，成塊面地展示，我們可以當(dāng)作與線相對的"面"，保持線和面的視覺劃分和編排，有利于空間的分配。
　　第三，掌控間距和邊距,通常情況下，內(nèi)容外圍的距離大于內(nèi)容之間的距離，內(nèi)容的區(qū)塊之間的距離大于內(nèi)容本身的間隙，這樣使內(nèi)容看起來更緊湊、有序，也使眼睛有足夠的休息空間，不至于感覺擁擠疲憊。

　　調(diào)整主要內(nèi)容文字的間距和行距，盡量不用系統(tǒng)默認(rèn)的距離，"怎么樣在不同的字母組合之中改變空格的長度, 還有怎么樣才能作出最棒的印刷式樣。那是一種科學(xué)永遠(yuǎn)不能捕捉到的、美麗的、真實(shí)的藝術(shù)精妙, 那實(shí)在是太美妙了。——喬布斯。"所以，不用對什么黃金分割之類的數(shù)據(jù)太在意，真實(shí)的藝術(shù)永遠(yuǎn)比技術(shù)高深的多，這需要我們長期的藝術(shù)修行，不斷提升自己的審美品位。

　　apple的專屬字體在任何地方運(yùn)用時，都會注重間距和行距，因此能夠獨(dú)特而有活力。
　　讓眼睛更舒適
　　留白是國畫中的手法，國畫"計白當(dāng)黑"其實(shí)是對空間的整體考慮。其實(shí)很多失敗的網(wǎng)頁設(shè)計，就是敗在對"白"這個空間的忽視上。一個頁面上沒有充分的、刻意的留白，就無法讓用戶輕松閱讀、無法讓信息有效傳遞，也就不是一個好設(shè)計。

　　當(dāng)一個頁面必須呈現(xiàn)大段不可刪除的文字、圖片時，保證可讀性是一大難題，這時我們就需要相機(jī)行事、變相留白，在色彩傾向上調(diào)整，拉開明暗對比，比如說讓大片圍繞標(biāo)題文字顏色變灰變淺，是凸顯標(biāo)題的有效辦法。

　　讓空間高傲起來
　　空間和色彩一樣，對于設(shè)計師來說是設(shè)計的基本元素，必須牢牢地掌握運(yùn)用這種特殊元素的主動權(quán)。
　　要想設(shè)計顯得純凈、高雅、精致，乃至擁有禪意的設(shè)計，對空白要珍惜又寵愛，不是必須的動作，請勿驚動空白這種富有意境的空間。
從重型卡車網(wǎng)站man,到美國銀行，再到一度喧囂的彩票網(wǎng)站，白色的空間始終在牢牢控制著整個頁面。

　　沉默的色彩
　　—————————————————
　　色彩——模擬眼動儀
大量信息為主題的網(wǎng)頁中，如果網(wǎng)頁為畫布，文字和色塊就是顏料，一些海量用戶的工具性網(wǎng)站，產(chǎn)品和技術(shù)人員為了加載速度和節(jié)省下載節(jié)點(diǎn)，你幾乎被剝奪了運(yùn)用圖片的權(quán)利。因此，對這類網(wǎng)站來說，顏色和文字就是圖片，網(wǎng)頁的最終效果，要靠設(shè)計師經(jīng)營顏色和文字來達(dá)到視覺的美麗和瀏覽順序的引導(dǎo)。

　　kmart網(wǎng)站中色彩的運(yùn)用分析，運(yùn)用色彩來引導(dǎo)用戶的瀏覽，同時也表達(dá)出網(wǎng)站的商業(yè)思路。
　　文字的顏色
　　我們通常賦予文字色彩時，是以文字的重要性來劃分，最重要的文字給予最深、最鮮明的顏色，其他的文字也按重要程度，從色彩明度與純度推移，賦予從深到淺、從鮮艷到灰白的顏色。
　　在大量文字編排時，運(yùn)用文字顏色的面積也時我們要考慮的方面，通常，為了保持脈絡(luò)清晰，我們會賦予標(biāo)題或重要文字等小面積、關(guān)鍵性內(nèi)容以深、鮮的顏色，而大面積的一般性文字則用深灰#333,或#666等灰度顏色。#333因?yàn)楹猩倭堪咨某煞郑虼怂诎咨咨喜粫軐Ρ葟?qiáng)烈，同時由于它是絕大部分仍是黑色組成，因此，又能保證辨認(rèn)清晰。此類的顏色其實(shí)很多，在運(yùn)用時加以合理分配，會使整個網(wǎng)頁看起來清晰而用舒適。

　　當(dāng)然我們也要注意到，當(dāng)一個顏色運(yùn)用的越多，在頁面上的影響力就越弱。例如花旗銀行的網(wǎng)站，本來鮮明的藍(lán)色非常跳躍，但是當(dāng)其大量運(yùn)用時，在頁面上的鮮明程度就不如深藍(lán)色，更不如logo邊的紅色了，但是這樣的鮮明的搭配之所以也很簡潔漂亮，除了因有大量白色作底，另一起重要作用的是鮮明的區(qū)塊設(shè)計。

　　區(qū)塊顏色
在支付、銀行類網(wǎng)頁設(shè)計中，色塊設(shè)計有時幾乎是調(diào)節(jié)章節(jié)模塊的必用手法，如果要求統(tǒng)一風(fēng)格、托出文字的話，色塊一般采用底明度、低純度的的色彩;有時頁面信息很多而平淡，這時我們會運(yùn)用很小的色塊或色調(diào)，來引導(dǎo)用戶的視線，這類的色塊一般都用很鮮艷明快的純色。

　　Google wallet 用區(qū)塊色彩來引導(dǎo)用戶視線，營造舒適的、豐富的視覺體驗(yàn)。
　　色彩對比
　　如果色塊的任務(wù)是區(qū)分和調(diào)節(jié)視覺的美觀，則可以用高純度、低明度的色塊組合，這樣的組合不會很跳躍、刺目，反而容易產(chǎn)生韻律感，使畫面顯得繽紛多姿。

　　digg用危險的對比色來設(shè)計網(wǎng)站，但因?yàn)槊鞫鹊慕档停炊荃r明漂亮。
　　色彩的分布比例
　　在大多數(shù)文字信息設(shè)計中，如果想使頁面看起來舒適、精美，控制文字的色彩比例是必須要考慮的事情，一般來說，可以用5%的鮮明色彩來凸顯及其重要的文字，如金額數(shù)目等，用60%左右較高明度的色彩(如深灰)來賦予重點(diǎn)內(nèi)容文字，用15%左右中低明度的色彩賦予必要的輔助文字，其余20%的配額為最低明度色彩(如淺灰)留給非必要的輔助文字，這個比例的好處是層次分明、重點(diǎn)突出，最末的低明度文字其實(shí)被設(shè)計成一塊淺淺的圖形化的色塊，從而幫瀏覽者梳理了瀏覽次序，減輕了大段文字帶來的心理壓力。

　　man.de和美國銀行的色彩分布
　　巨大的細(xì)節(jié)
　　—————————————————
　　支付的細(xì)節(jié)
　　談到細(xì)節(jié)，我們可先從財付通、支付寶這類以個人賬戶信息為主的網(wǎng)站來談起，財付通因?yàn)橹攸c(diǎn)發(fā)力在第三方支付渠道上，因此信息的明晰和支付的便捷是合作的基礎(chǔ)，設(shè)計上也要求簡潔明快，突出功能性，從而使得頁面設(shè)計的比較保守、拘謹(jǐn)。而支付寶對淘寶的依賴明顯，從淘寶傳導(dǎo)過來的設(shè)計思維非常明顯，要求支付手段的多樣性、商品和應(yīng)用的豐富性突出的表現(xiàn)在頁面設(shè)計上，顯得更充實(shí)和琳瑯滿目，也因此很多頁面有過頭的花俏且略顯漫無重點(diǎn)。設(shè)計上的簡潔和豐富是2 家走的2條線路，不過隨著行業(yè)的發(fā)展，業(yè)務(wù)的拓展，他們也又有向?qū)Ψ綄傩钥拷内呄颉ｋp方本來是本質(zhì)相同的企業(yè)這也不出所料，所以在對待頁面視覺的細(xì)節(jié)上，也許才各有設(shè)計的空間。
　　對比產(chǎn)生精美
　　在設(shè)計中，如果沒有反復(fù)的比較，就不可能有精彩的細(xì)節(jié)，細(xì)節(jié)之所以細(xì)，在于其即難以覺察，卻又纖毫畢現(xiàn)，這時設(shè)計師需要經(jīng)過n種方案來甄別其細(xì)微的視覺差別
　　1px精彩的變異
　　當(dāng)07年iphone橫空出世時，其精美的ui令無數(shù)設(shè)計師傾倒，精確到1px的icon也使眾多品牌設(shè)計望塵莫及，apple往往善于用1px制造出投影、凹凸、高亮等惟妙惟肖的立體效果，在網(wǎng)頁設(shè)計上，apple也用其精致的手法影響了整整一代的網(wǎng)站設(shè)計。

　　值得重視的是，這種細(xì)致入微的刻畫手法需要爐火純青的設(shè)計技巧掌握設(shè)計尺度，稍不留神就會使你的設(shè)計變得僵硬呆板、失去活力，就像工場里批量生產(chǎn)的油畫，抑或高精度照相機(jī)的產(chǎn)物，很多設(shè)計就是這種難以言表的匠氣的代表，這類設(shè)計往往為了寫實(shí)而寫實(shí)，使設(shè)計往往削弱了原本所需的信息傳遞能力。
　　其實(shí)apple在新系統(tǒng)lion上的回歸和nokia的n9在icon設(shè)計上的轉(zhuǎn)型，也說明了設(shè)計回歸信息表達(dá)的重要趨向。

　　apple在新系統(tǒng)lion上把原本復(fù)雜的圖標(biāo)改成協(xié)調(diào)的灰色簡化圖標(biāo)，nokia的n9在icon設(shè)計上從原本笨拙的機(jī)器味圖標(biāo)，轉(zhuǎn)變成簡潔明快、易于辨認(rèn)的彩色漸變底色+白色剪影的圖標(biāo)，并發(fā)展了圖標(biāo)的弧度使之區(qū)別于apple的圓角方形，形成了自己的風(fēng)格。
　　vi的延展
　　保持網(wǎng)站視覺統(tǒng)一、獨(dú)特的另一方法是保證企業(yè)vi在設(shè)計中的廣泛應(yīng)用，特別是企業(yè)標(biāo)準(zhǔn)色在網(wǎng)頁中的延展，各種明度的色階和文字顏色的組合設(shè)計可以保證網(wǎng)站整體的獨(dú)特性和可識別性，wallmart、tesco在網(wǎng)頁設(shè)計中延展了其標(biāo)準(zhǔn)色，使網(wǎng)站統(tǒng)一、清晰， wallmart 甚至連商品中電視屏幕都改成藍(lán)色。由于色彩運(yùn)用的恰當(dāng)，網(wǎng)站清晰美觀，誰說商城網(wǎng)站就一定要暖色系?

　　綜上所敘，大多是一些基本的美術(shù)設(shè)計方法和手段在網(wǎng)站視覺設(shè)計中的基礎(chǔ)運(yùn)用，只要我們在設(shè)計中留心網(wǎng)絡(luò)技術(shù)與傳統(tǒng)美術(shù)審美的相互聯(lián)系，我們一定能發(fā)現(xiàn)更多更好的其他設(shè)計手法，使我們的作品更易于信息的準(zhǔn)確傳遞，更像我們的藝術(shù)作品一樣精美、獨(dú)特。

上一篇：如何設(shè)計出高質(zhì)量的網(wǎng)頁設(shè)計出高質(zhì)量網(wǎng)頁的心得(圖文)

下一篇：前端開發(fā)工程師和美工對于網(wǎng)站開發(fā)所掌握的知識的區(qū)別