DIV CSS 佈局教程網

當代的網頁視覺設計由最初的信息堆砌到後來的圖形化、抽象化，更到今天的信息視覺化，經歷了3個迥然不同而又相互遞進的過程。目前，除了一些藝術或個人網站，其他絕大部分的網站都以信息的准確傳遞為視覺設計的主要目的。
　　信息以文字、圖片、色塊為主要的載體，經過編排在浏覽器裡對用戶展示，這要求網站構成的絕大部份必須是能清晰閱讀的文字和准確無誤的圖片。
　　同其他種類的視覺設計一樣，信息為主的網站視覺設計需要遵循一些基本的美術規則，運用一些簡單有效的美術手段來達成。下面我們來談一下這些具體的方法論。
　　高傲的空間
　　—————————————————
　　讓浏覽更高效
　　在滿篇都基本由文字、色塊組成的信息裡，要讓用戶順利的浏覽、輕松地操作，是一件值得反復推敲的工作，通常，國內的很多設計師都會羨慕以字母為文字的國家的設計師，因為網頁設計中，能使用的中文最小的像素字體只能是12Px的宋體，最大的像素字體則14-18px，超過這個范疇的像素字體，就幾乎不能辨認，或很不美觀，而字母組成的內容則不限，可以更小到9Px甚至8Px依然能夠輕松分辨，這給信息的設計留下了很大的操作空間，
　　那麼中文狀態下的我們，怎麼有效地設計信息?
　　第一，色彩法，用灰度的色彩使字體看起來視覺上更小，而重要的內容則用深色、純度較高的顏色，使之更顯得大。在大段內容文字下面間或賦予底色以淺淺的色彩，能有效增強文字可讀性，而主體文字的顏色一般不用系統默認的純黑色#000,對於白底來說那是一種非常刺目的顏色，並且容易使空間看起來擁擠局促。
　　第二，編排法，其實也是排版的基本方法，即把最重要的大號文字與輔助性的最小文字排在一起，通過對比劃分彼此的區別，彰顯各自的特性。
　　另外，當文字成行、並且長短不一時，我們必須把文字看成錯落有致的"線";而當文字較多，成塊面地展示，我們可以當作與線相對的"面"，保持線和面的視覺劃分和編排，有利於空間的分配。
　　第三，掌控間距和邊距,通常情況下，內容外圍的距離大於內容之間的距離，內容的區塊之間的距離大於內容本身的間隙，這樣使內容看起來更緊湊、有序，也使眼睛有足夠的休息空間，不至於感覺擁擠疲憊。
　　調整主要內容文字的間距和行距，盡量不用系統默認的距離，"怎麼樣在不同的字母組合之中改變空格的長度, 還有怎麼樣才能作出最棒的印刷式樣。那是一種科學永遠不能捕捉到的、美麗的、真實的藝術精妙, 那實在是太美妙了。——喬布斯。"所以，不用對什麼黃金分割之類的數據太在意，真實的藝術永遠比技術高深的多，這需要我們長期的藝術修行，不斷提升自己的審美品位。
　　apple的專屬字體在任何地方運用時，都會注重間距和行距，因此能夠獨特而有活力。
　　讓眼睛更舒適
　　留白是國畫中的手法，國畫"計白當黑"其實是對空間的整體考慮。其實很多失敗的網頁設計，就是敗在對"白"這個空間的忽視上。一個頁面上沒有充分的、刻意的留白，就無法讓用戶輕松閱讀、無法讓信息有效傳遞，也就不是一個好設計。
　　當一個頁面必須呈現大段不可刪除的文字、圖片時，保證可讀性是一大難題，這時我們就需要相機行事、變相留白，在色彩傾向上調整，拉開明暗對比，比如說讓大片圍繞標題文字顏色變灰變淺，是凸顯標題的有效辦法。
　　讓空間高傲起來
　　空間和色彩一樣，對於設計師來說是設計的基本元素，必須牢牢地掌握運用這種特殊元素的主動權。
　　要想設計顯得純淨、高雅、精致，乃至擁有禅意的設計，對空白要珍惜又寵愛，不是必須的動作，請勿驚動空白這種富有意境的空間。
從重型卡車網站man,到美國銀行，再到一度喧囂的彩票網站，白色的空間始終在牢牢控制著整個頁面。
　　沉默的色彩
　　—————————————————
　　色彩——模擬眼動儀
大量信息為主題的網頁中，如果網頁為畫布，文字和色塊就是顏料，一些海量用戶的工具性網站，產品和技術人員為了加載速度和節省下載節點，你幾乎被剝奪了運用圖片的權利。因此，對這類網站來說，顏色和文字就是圖片，網頁的最終效果，要靠設計師經營顏色和文字來達到視覺的美麗和浏覽順序的引導。
　　kmart網站中色彩的運用分析，運用色彩來引導用戶的浏覽，同時也表達出網站的商業思路。
　　文字的顏色
　　我們通常賦予文字色彩時，是以文字的重要性來劃分，最重要的文字給予最深、最鮮明的顏色，其他的文字也按重要程度，從色彩明度與純度推移，賦予從深到淺、從鮮艷到灰白的顏色。
　　在大量文字編排時，運用文字顏色的面積也時我們要考慮的方面，通常，為了保持脈絡清晰，我們會賦予標題或重要文字等小面積、關鍵性內容以深、鮮的顏色，而大面積的一般性文字則用深灰#333,或#666等灰度顏色。#333因為含有少量白色的成分，因此它在白色底上不會很對比強烈，同時由於它是絕大部分仍是黑色組成，因此，又能保證辨認清晰。此 類的顏色其實很多，在運用時加以合理分配，會使整個網頁看起來清晰而用舒適。
　　當然我們也要注意到，當一個顏色運用的越多，在頁面上的影響力就越弱。例如花旗銀行的網站，本來鮮明的藍色非常跳躍，但是當其大量運用時，在頁面上的鮮明程度就不如深藍色，更不如logo邊的紅色了，但是這樣的鮮明的搭配之所以也很簡潔漂亮，除了因有大量白色作底，另一起重要作用的是鮮明的區塊設計。
　　區塊顏色
在支付、銀行類網頁設計中，色塊設計有時幾乎是調節章節模塊的必用手法，如果要求統一風格、托出文字的話，色塊一般采用底明度、低純度的的色彩;有時頁面信息很多而平淡，這時我們會運用很小的色塊或色調，來引導用戶的視線，這類的色塊一般都用很鮮艷明快的純色。
　　Google wallet 用區塊色彩來引導用戶視線，營造舒適的、豐富的視覺體驗。
　　色彩對比
　　如果色塊的任務是區分和調節視覺的美觀，則可以用高純度、低明度的色塊組合，這樣的組合不會很跳躍、刺目，反而容易產生韻律感，使畫面顯得缤紛多姿。
　　digg用危險的對比色來設計網站，但因為明度的降低，反而很鮮明漂亮。
　　色彩的分布比例
　　在大多數文字信息設計中，如果想使頁面看起來舒適、精美，控制文字的色彩比例是必須要考慮的事情，一般來說，可以用5%的鮮明色彩來凸顯及其重要的文字，如金額數目等，用60%左右較高明度的色彩(如深灰)來賦予重點內容文字，用15%左右中低明度的色彩賦予必要的輔助文字，其余20%的配額為最低明度色彩(如淺灰)留給非必要的輔助文字，這個比例的好處是層次分明、重點突出，最末的低明度文字其實被設計成一塊淺淺的圖形化的色塊，從而幫浏覽者梳理了浏覽次序，減輕了大段文字帶來的心理壓力。
　　man.de和美國銀行的色彩分布
　　巨大的細節
　　—————————————————
　　支付的細節
　　談到細節，我們可先從財付通、支付寶這類以個人賬戶信息為主的網站來談起，財付通因為重點發力在第三方支付渠道上，因此信息的明晰和支付的便捷是合作的基礎，設計上也要求簡潔明快，突出功能性，從而使得頁面設計的比較保守、拘謹。而支付寶對淘寶的依賴明顯，從淘寶傳導過來的設計思維非常明顯，要求支付手段的多樣性、商品和應用的豐富性突出的表現在頁面設計上，顯得更充實和琳琅滿目，也因此很多頁面有過頭的花俏且略顯漫無重點。設計上的簡潔和豐富是2 家走的2條線路，不過隨著行業的發展，業務的拓展，他們也又有向對方屬性靠近的趨向。雙方本來是本質相同的企業這也不出所料，所以在對待頁面視覺的細節上，也許才各有設計的空間。
　　對比產生精美
　　在設計中，如果沒有反復的比較，就不可能有精彩的細節，細節之所以細，在於其即難以覺察，卻又纖毫畢現，這時設計師需要經過n種方案來甄別其細微的視覺差別
　　1px精彩的變異
　　當07年iphone橫空出世時，其精美的ui令無數設計師傾倒，精確到1px的icon也使眾多品牌設計望塵莫及，apple往往善於用1px制造出投影、凹凸、高亮等惟妙惟肖的立體效果，在網頁設計上，apple也用其精致的手法影響了整整一代的網站設計。
　　值得重視的是，這種細致入微的刻畫手法需要爐火純青的設計技巧掌握設計尺度，稍不留神就會使你的設計變得僵硬呆板、失去活力，就像工場裡批量生產的油畫，抑或高精度照相機的產物，很多設計就是這種難以言表的匠氣的代表，這類設計往往為了寫實而寫實，使設計往往削弱了原本所需的信息傳遞能力。
　　其實apple在新系統lion上的回歸和nokia的n9在icon設計上的轉型，也說明了設計回歸信息表達的重要趨向。
　　apple在新系統lion上把原本復雜的圖標改成協調的灰色簡化圖標，nokia的n9在icon設計上從原本笨拙的機器味圖標，轉變成簡潔明快、易於辨認的彩色漸變底色+白色剪影的圖標，並發展了圖標的弧度使之區別於apple的圓角方形，形成了自己的風格。
　　vi的延展
　　保持網站視覺統一、獨特的另一方法是保證企業vi在設計中的廣泛應用，特別是企業標准色在網頁中的延展，各種明度的色階和文字顏色的組合設計可以保證網站整體的獨特性和可識別性，wallmart、tesco在網頁設計中延展了其標准色，使網站統一、清晰， wallmart 甚至連商品中電視屏幕都改成藍色。由於色彩運用的恰當，網站清晰美觀，誰說商城網站就一定要暖色系?
　　綜上所敘，大多是一些基本的美術設計方法和手段在網站視覺設計中的基礎運用，只要我們在設計中留心網絡技術與傳統美術審美的相互聯系，我們一定能發現更多更好的其他設計手法，使我們的作品更易於信息的准確傳遞，更像我們的藝術作品一樣精美、獨特。