隨著工業世界變得越來越復雜，19 世紀中期的文檔設計者們開始將模塊程序應用到報紙、產品目錄、財務會計以及其他的出版物中，現代頁面樣式誕生了。在20世紀早期，Bauhaus 設計師們采用視覺邏輯元素-一這是由Gestalt知覺心理學家發現的，那些德國和瑞士設計師創造了現代圖形設計)。
圖形設計的主要目的在于:
●創建個清晰的視覺對比層級， 這樣就可以一 眼看清什么是重要的 以及什么是次要的。
●為頁面定義功能區。
●對相關的頁面元素進行分組，這樣就可以看清內容的結構。
●一個簡單的頁面網格可以確立離散的功能區域，適度的負空間(negative space)定義了頁面的圖形背景關系。使用頁面樣式的常見原則來設計頁面，用戶可以輕易地預測主要內容和功能元素的位置。
●擁擠的頁面會因為創建了視覺紋理的模糊區域而讓頁面的圖形背景關系變得混亂，其對比少而無法吸引瀏覽者的眼球，地標過少會不利于用戶理解內容組織結構。
●擁擠的元素同時也造成了1 + 1=3的效果，增加了視覺混亂。
●在為菜單列表、內容列表、頁面標題圖形以及其他設計元素設計HTML和CSS時，要時常考慮在頁面，上創建的圖形的間距、分組、相似性以及整體視覺邏輯，這樣才能容易地提供清晰的結構，而不是讓人感覺混亂的細節。
相近以及統一-的連貫性是頁面設計中功效最強大的Gestalt原則；在定義區城中經過分類的元素是內容模塊和“分塊”網絡內容的基礎，以便輕松瀏覽。一個組織良好且內容分類清晰的頁面，用戶一眼看去便可知道內容是如何組織的，它建立起了內容模塊單元，進而組成了貫穿整個網站的各頁面的可預見模式示。
一致性
創建一個用來處理文本和圖形的布局網格和樣式，然后一直使用該樣式來創建貫穿網站頁面的節奏和一致性。重復并不會令人厭煩；重復讓你的網站擁有了一致的圖形形象，它創建并加強了顯著的“空間”感，網站會讓人過目難忘。布局和導航采用一致性的方式，會讓用戶快速適應網站的設計并能自信地預測網頁信息的位置以及導航控件的位置。
如果選擇了一個圖形主題，那么請將其貫穿于整個網站。Hiram 學院網站首頁橫幅廣告為網站設立了圖形主題，并引人了獨特的版式以及一系列導航標簽。注意版式和導航主題是如何傳遞到內部的橫幅廣告的。在瀏覽整個網站時，你不會產生“這是誰的網站”的困惑。
對比
圖形設計的主要任務是創建一個強有力的、一致的視覺層級效果，其中，重要元素會突顯，內容也是以邏輯且可預測的方式進行組織的。圖形設計是對視覺信息的管理，使用頁面設計工具、版式以及插圖來引導讀者進行頁面瀏覽。讀者首先會把頁面看成是圖形和顏色的聚集體，包含著前景元素與背景的對比。然后，他們開始挑選特定信息，首先從現有的圖形開始，并且在這之后，他們才會開始分析更難的文本媒介并開始閱讀單個的詞語和段落。
整體的圖形平衡和頁面的組織對吸引讀者閱讀網站內容至關緊要。一個全是文本的頁面會因為其毫無差別的灰色而將讀者拒之門外，這樣的網頁沒有對信息架構的明顯提示。一個設計不精或者充斥著過于醒目的圖形或版式的頁面，也會導致用戶喪失尋求實效性內容的興趣。你需要通過利用恰當的相鄰物、分組、圖形背景關系以及標題對比中的變化，達到使用視覺對比吸引讀者眼球并提供一個清晰的架構之間的平衡。視覺平衡和適當性對預期的觀眾而言，是成功的設計決定的關鍵。對普通觀眾而言，最有效的設計就是使用相對小的圖形來實現文本和鏈接之間的謹慎平衡。這些頁面不僅能夠快速下載，而且還擁有非常實質的圖形效果。
1.版式中的顏色和對比
顏色和對比是通用可用性的關鍵組成部分。文本的可讀性取決于讀者區分字體和背景的能力。顏色變化主要取決于明亮度和飽和度。白色背景上的黑色文本擁有最強的對比度，這是因為黑色沒有明亮度而白色是全明度。色調也是一個因素，諸如藍色和黃色這樣的互補的顏色，會產生最強的對比。確保顏色選擇不會讓讀者難于區分文字和背景。同時，千萬不要忘記差不多有10%的男性讀者在區分精細的紅綠色陰影時有一定困難。
2.對比的可變性
使用移動設備顯示的網頁，通常會因移動環境而做出讓步:小屏幕，小字號，缺乏理想的屏幕分辨率和顏色，如果在戶外環境下，陽光或其他照明設備所發出的光還會降低網頁的可讀性。實際上，很多的便攜式電腦的顯示屏并不能顯示很好的顏色差別或明暗度差別，通過電腦投影儀看到的頁面上的顏色通常也會變淡。請使用不同的設備和便攜式電腦，并在不同的環境中檢測你的設計，尤其是當你使用微妙的顏色來定義重要的頁面功能或內容的時候。總的來說，最好采用一個更有效、高對比度的版式顏色方案。
3.避免過度對比
水平標尺、修飾性圖形項目符號、顯著的圖標，以及其他視覺標識，都擁有各自的特殊場合的用途，不過每一-樣都要盡量地少用(如果真要用的話)以避免出現不調和及混亂的樣式。圖形強調工具十分強大，應當只是少量使用以獲取最大的效果。過度使用圖形加強效果將產生“小丑褲子”(過猶不及)的效果，即所有的一切都是那么炫耀，反而沒有任何重點可言了。
從大自然中挑選出來的顏色調板幾乎是絕對可靠的顏色協調的向導，尤其是當你并非一個受過訓練的圖形設計師的時候。微妙的、不飽和度的顏色是背景或次要元素的最佳選擇。避免使用醒目的、高飽和度的紅色、黃色、藍色，除非在針對最需要加強的區域，但即便是這時也應謹慎使用。
空白區域
現今，我們擁有更大的顯示屏以及更為復雜的圖形界面，因此你的網頁很可能會與很多其他窗口和桌面元素共享.個顯示屏。 請使用空白區域以避免讓瀏覽器窗口的邊緣擠滿了頁面內容的重要元素。在固定寬度的布局中，可以考慮將頁面德存在瀏覽器窗口的中央。如果你的頁面寬度合理，這種方法將會讓你的頁面看上去有視覺放松的效果，即便是在一個擁擠的電腦顯示屏上，如圖7-13a所示。對“彈性的”布局而言，可以考慮使用90% ~ 95%的屏幕大小的頁面來取代100%的全屏頁面，讓頁面功能區域周圍留些背景以達到視 覺放松的效果，避免與瀏覽窗口外的元肅相互作用產生不成功的“1+ 1=3”的效果。
有助于將頁面內容從顯示屏上的其他程序和窗口的“嘈雜聲”中隔離出來所有的圖形設計從根本上而言都是對空白區域(頁面上所有圖形元素后面的背景)的管理。要想理解圖形設計，你需要去領會，頁面元素周圍的背景區域是與頁面上任何圖形元素一樣有效且重要的設計部分。將頁面上的空白區域填滿就好比抽空了一個房間的所有氧氣一這或許是對空間的一一種有效應用方式，但毫無疑問這是很難讓人習慣的。
樣式
不要想著為你的網站開發一個“樣式”，在引人另一網站或是印刷品的圖形元素來裝飾你的頁面時也要謹慎。在對內容和頁面布局進行一致和恰當的處理時，網站的圖形和編輯樣式也應隨著這一自然的過程有所演變。多使用傳統而非古怪的風格，絕不要讓框架壓倒了內容，并記住最好的樣式就是讀者永遠不會注意到的樣式一每樣東西都讓人感覺那么有邏輯且舒服(甚至是漂亮)，而笨手笨腳的設計絕不會讓用戶擁有這樣的體驗。
簡單
所有用戶都會受益于清晰且致的網站設計，而對某些用戶而言這至關重要。對于那些缺乏空間線索，使用徹底不同且需要針對每個站點重新學習的導航方式，有視覺障礙的用戶會很容易產生混亂或者在網頁中迷失。對那些在認知上有缺陷的人而言，諸如記憶或學習有障礙的人，這一難度會被放大很多倍。
本文地址：http://m.murenxiang.com.cn//article/4326.html
