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