當(dāng)代的網(wǎng)頁視覺設(shè)計(jì)由最初的信息堆砌到后來的圖形化、抽象化，更到今天的信息視覺化，經(jīng)歷了3個(gè)迥然不同而又相互遞進(jìn)的過程。目前，除了一些藝術(shù)或個(gè)人網(wǎng)站，其他絕大部分的網(wǎng)站都以信息的準(zhǔn)確傳遞為視覺設(shè)計(jì)的主要目的。

信息以文字、圖片、色塊為主要的載體，經(jīng)過編排在瀏覽器里對用戶展示，這要求網(wǎng)站構(gòu)成的絕大部份必須是能清晰閱讀的文字和準(zhǔn)確無誤的圖片。

同其他種類的視覺設(shè)計(jì)一樣，信息為主的網(wǎng)站視覺設(shè)計(jì)需要遵循一些基本的美術(shù)規(guī)則，運(yùn)用一些簡單有效的美術(shù)手段來達(dá)成。下面我們來談一下這些具體的方法論。

高傲的空間

—————————————————

讓瀏覽更高效

在滿篇都基本由文字、色塊組成的信息里，要讓用戶順利的瀏覽、輕松地操作，是一件值得反復(fù)推敲的工作，通常，國內(nèi)的很多設(shè)計(jì)師都會(huì)羨慕以字母為文字的國家的設(shè)計(jì)師，因?yàn)榫W(wǎng)頁設(shè)計(jì)中，能使用的中文最小的像素字體只能是12Px的宋體，最大的像素字體則14-18px，超過這個(gè)范疇的像素字體，就幾乎不能辨認(rèn)，或很不美觀，而字母組成的內(nèi)容則不限，可以更小到9Px甚至8Px依然能夠輕松分辨，這給信息的設(shè)計(jì)留下了很大的操作空間，

那么中文狀態(tài)下的我們，怎么有效地設(shè)計(jì)信息？

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

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

另外，當(dāng)文字成行、并且長短不一時(shí)，我們必須把文字看成錯(cuò)落有致的“線”；而當(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)用時(shí)，都會(huì)注重間距和行距，因此能夠獨(dú)特而有活力。

讓眼睛更舒適

留白是國畫中的手法，國畫“計(jì)白當(dāng)黑”其實(shí)是對空間的整體考慮。其實(shí)很多失敗的網(wǎng)頁設(shè)計(jì)，就是敗在對“白”這個(gè)空間的忽視上。一個(gè)頁面上沒有充分的、刻意的留白，就無法讓用戶輕松閱讀、無法讓信息有效傳遞，也就不是一個(gè)好設(shè)計(jì)。

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

讓空間高傲起來

空間和色彩一樣，對于設(shè)計(jì)師來說是設(shè)計(jì)的基本元素，必須牢牢地掌握運(yùn)用這種特殊元素的主動(dòng)權(quán)。

要想設(shè)計(jì)顯得純凈、高雅、精致，乃至擁有禪意的設(shè)計(jì)，對空白要珍惜又寵愛，不是必須的動(dòng)作，請勿驚動(dòng)空白這種富有意境的空間。

從重型卡車網(wǎng)站man,到美國銀行，再到一度喧囂的彩票網(wǎng)站，白色的空間始終在牢牢控制著整個(gè)頁面。

沉默的色彩

—————————————————

色彩——模擬眼動(dòng)儀

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

kmart網(wǎng)站中色彩的運(yùn)用分析，運(yùn)用色彩來引導(dǎo)用戶的瀏覽，同時(shí)也表達(dá)出網(wǎng)站的商業(yè)思路。

文字的顏色

我們通常賦予文字色彩時(shí)，是以文字的重要性來劃分，最重要的文字給予最深、最鮮明的顏色，其他的文字也按重要程度，從色彩明度與純度推移，賦予從深到淺、從鮮艷到灰白的顏色。

在大量文字編排時(shí)，運(yùn)用文字顏色的面積也時(shí)我們要考慮的方面，通常，為了保持脈絡(luò)清晰，我們會(huì)賦予標(biāo)題或重要文字等小面積、關(guān)鍵性內(nèi)容以深、鮮的顏色，而大面積的一般性文字則用深灰＃333,或＃666等灰度顏色。＃333因?yàn)楹猩倭堪咨某煞?，因此它在白色底上不?huì)很對比強(qiáng)烈，同時(shí)由于它是絕大部分仍是黑色組成，因此，又能保證辨認(rèn)清晰。此 類的顏色其實(shí)很多，在運(yùn)用時(shí)加以合理分配，會(huì)使整個(gè)網(wǎng)頁看起來清晰而用舒適。

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

區(qū)塊顏色

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

Google wallet 用區(qū)塊色彩來引導(dǎo)用戶視線，營造舒適的、豐富的視覺體驗(yàn)。

色彩對比

如果色塊的任務(wù)是區(qū)分和調(diào)節(jié)視覺的美觀，則可以用高純度、低明度的色塊組合，這樣的組合不會(huì)很跳躍、刺目，反而容易產(chǎn)生韻律感，使畫面顯得繽紛多姿。

digg用危險(xiǎn)的對比色來設(shè)計(jì)網(wǎng)站，但因?yàn)槊鞫鹊慕档停炊荃r明漂亮。

色彩的分布比例

在大多數(shù)文字信息設(shè)計(jì)中，如果想使頁面看起來舒適、精美，控制文字的色彩比例是必須要考慮的事情，一般來說，可以用5％的鮮明色彩來凸顯及其重要的文字，如金額數(shù)目等，用60％左右較高明度的色彩（如深灰）來賦予重點(diǎn)內(nèi)容文字，用15％左右中低明度的色彩賦予必要的輔助文字，其余20％的配額為最低明度色彩（如淺灰）留給非必要的輔助文字，這個(gè)比例的好處是層次分明、重點(diǎn)突出，最末的低明度文字其實(shí)被設(shè)計(jì)成一塊淺淺的圖形化的色塊，從而幫瀏覽者梳理了瀏覽次序，減輕了大段文字帶來的心理壓力。

man.de和美國銀行的色彩分布

巨大的細(xì)節(jié)

—————————————————

支付的細(xì)節(jié)

談到細(xì)節(jié)，我們可先從財(cái)付通、支付寶這類以個(gè)人賬戶信息為主的網(wǎng)站來談起，財(cái)付通因?yàn)橹攸c(diǎn)發(fā)力在第三方支付渠道上，因此信息的明晰和支付的便捷是合作的基礎(chǔ)，設(shè)計(jì)上也要求簡潔明快，突出功能性，從而使得頁面設(shè)計(jì)的比較保守、拘謹(jǐn)。而支付寶對淘寶的依賴明顯，從淘寶傳導(dǎo)過來的設(shè)計(jì)思維非常明顯，要求支付手段的多樣性、商品和應(yīng)用的豐富性突出的表現(xiàn)在頁面設(shè)計(jì)上，顯得更充實(shí)和琳瑯滿目，也因此很多頁面有過頭的花俏且略顯漫無重點(diǎn)。設(shè)計(jì)上的簡潔和豐富是2家走的2條線路，不過隨著行業(yè)的發(fā)展，業(yè)務(wù)的拓展，他們也又有向?qū)Ψ綄傩钥拷内呄?。雙方本來是本質(zhì)相同的企業(yè)這也不出所料，所以在對待頁面視覺的細(xì)節(jié)上，也許才各有設(shè)計(jì)的空間。

對比產(chǎn)生精美

在設(shè)計(jì)中，如果沒有反復(fù)的比較，就不可能有精彩的細(xì)節(jié)，細(xì)節(jié)之所以細(xì)，在于其即難以覺察，卻又纖毫畢現(xiàn)，這時(shí)設(shè)計(jì)師需要經(jīng)過n種方案來甄別其細(xì)微的視覺差別

1px精彩的變異

當(dāng)07年iphone橫空出世時(shí)，其精美的ui令無數(shù)設(shè)計(jì)師傾倒，精確到1px的icon也使眾多品牌設(shè)計(jì)望塵莫及，apple往往善于用1px制造出投影、凹凸、高亮等惟妙惟肖的立體效果，在網(wǎng)頁設(shè)計(jì)上，apple也用其精致的手法影響了整整一代的網(wǎng)站設(shè)計(jì)。

值得重視的是，這種細(xì)致入微的刻畫手法需要爐火純青的設(shè)計(jì)技巧掌握設(shè)計(jì)尺度，稍不留神就會(huì)使你的設(shè)計(jì)變得僵硬呆板、失去活力，就像工場里批量生產(chǎn)的油畫，抑或高精度照相機(jī)的產(chǎn)物，很多設(shè)計(jì)就是這種難以言表的匠氣的代表，這類設(shè)計(jì)往往為了寫實(shí)而寫實(shí)，使設(shè)計(jì)往往削弱了原本所需的信息傳遞能力。

其實(shí)apple在新系統(tǒng)lion上的回歸和nokia的n9在icon設(shè)計(jì)上的轉(zhuǎn)型，也說明了設(shè)計(jì)回歸信息表達(dá)的重要趨向。

apple在新系統(tǒng)lion上把原本復(fù)雜的圖標(biāo)改成協(xié)調(diào)的灰色簡化圖標(biāo)，nokia的n9在icon設(shè)計(jì)上從原本笨拙的機(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è)計(jì)中的廣泛應(yīng)用，特別是企業(yè)標(biāo)準(zhǔn)色在網(wǎng)頁中的延展，各種明度的色階和文字顏色的組合設(shè)計(jì)可以保證網(wǎng)站整體的獨(dú)特性和可識別性，wallmart、tesco在網(wǎng)頁設(shè)計(jì)中延展了其標(biāo)準(zhǔn)色，使網(wǎng)站統(tǒng)一、清晰， wallmart 甚至連商品中電視屏幕都改成藍(lán)色。由于色彩運(yùn)用的恰當(dāng)，網(wǎng)站清晰美觀，誰說商城網(wǎng)站就一定要暖色系？

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

樂發(fā)網(wǎng)超市批發(fā)網(wǎng)提供超市貨源信息,超市采購進(jìn)貨渠道。超市進(jìn)貨網(wǎng)提供成都食品批發(fā),日用百貨批發(fā)信息、微信淘寶網(wǎng)店超市采購信息和超市加盟信息.打造國內(nèi)超市采購商與批發(fā)市場供應(yīng)廠商搭建網(wǎng)上批發(fā)市場平臺,是全國批發(fā)市場行業(yè)中電子商務(wù)權(quán)威性網(wǎng)站。

本文內(nèi)容整合網(wǎng)站：百度百科、知乎、淘寶平臺規(guī)則

本文來源： 信息的視覺表達(dá)式