基礎(chǔ)網(wǎng)站視覺設(shè)計

在現(xiàn)代生活中，有一些基本的想法根深蒂固，以致我們很難發(fā)現(xiàn)它們的普遍性并且熟視無睹?！澳K和程序”的概念-樣式重 復(fù)的規(guī)則構(gòu)建塊，當結(jié)合在一起時會創(chuàng)造出一個有序的整體一對我們的信 息時代的生活的滲透度要遠高于其對我們的祖先在由Eli Whitney等制造業(yè)發(fā)明家發(fā)起的工業(yè)革命時代的生活的滲透度。

隨著工業(yè)世界變得越來越復(fù)雜，19 世紀中期的文檔設(shè)計者們開始將模塊程序應(yīng)用到報紙、產(chǎn)品目錄、財務(wù)會計以及其他的出版物中，現(xiàn)代頁面樣式誕生了。在20世紀早期，Bauhaus 設(shè)計師們采用視覺邏輯元素-一這是由Gestalt知覺心理學(xué)家發(fā)現(xiàn)的，那些德國和瑞士設(shè)計師創(chuàng)造了現(xiàn)代圖形設(shè)計)。

圖形設(shè)計的主要目的在于:

●創(chuàng)建個清晰的視覺對比層級， 這樣就可以一 眼看清什么是重要的 以及什么是次要的。

●為頁面定義功能區(qū)。

●對相關(guān)的頁面元素進行分組，這樣就可以看清內(nèi)容的結(jié)構(gòu)。

●一個簡單的頁面網(wǎng)格可以確立離散的功能區(qū)域，適度的負空間(negative space)定義了頁面的圖形背景關(guān)系。使用頁面樣式的常見原則來設(shè)計頁面，用戶可以輕易地預(yù)測主要內(nèi)容和功能元素的位置。

●擁擠的頁面會因為創(chuàng)建了視覺紋理的模糊區(qū)域而讓頁面的圖形背景關(guān)系變得混亂，其對比少而無法吸引瀏覽者的眼球，地標過少會不利于用戶理解內(nèi)容組織結(jié)構(gòu)。

●擁擠的元素同時也造成了1 + 1=3的效果，增加了視覺混亂。

●在為菜單列表、內(nèi)容列表、頁面標題圖形以及其他設(shè)計元素設(shè)計HTML和CSS時，要時常考慮在頁面，上創(chuàng)建的圖形的間距、分組、相似性以及整體視覺邏輯，這樣才能容易地提供清晰的結(jié)構(gòu)，而不是讓人感覺混亂的細節(jié)。

相近以及統(tǒng)一-的連貫性是頁面設(shè)計中功效最強大的Gestalt原則；在定義區(qū)城中經(jīng)過分類的元素是內(nèi)容模塊和“分塊”網(wǎng)絡(luò)內(nèi)容的基礎(chǔ)，以便輕松瀏覽。一個組織良好且內(nèi)容分類清晰的頁面，用戶一眼看去便可知道內(nèi)容是如何組織的，它建立起了內(nèi)容模塊單元，進而組成了貫穿整個網(wǎng)站的各頁面的可預(yù)見模式示。

一致性

創(chuàng)建一個用來處理文本和圖形的布局網(wǎng)格和樣式，然后一直使用該樣式來創(chuàng)建貫穿網(wǎng)站頁面的節(jié)奏和一致性。重復(fù)并不會令人厭煩；重復(fù)讓你的網(wǎng)站擁有了一致的圖形形象，它創(chuàng)建并加強了顯著的“空間”感，網(wǎng)站會讓人過目難忘。布局和導(dǎo)航采用一致性的方式，會讓用戶快速適應(yīng)網(wǎng)站的設(shè)計并能自信地預(yù)測網(wǎng)頁信息的位置以及導(dǎo)航控件的位置。

如果選擇了一個圖形主題，那么請將其貫穿于整個網(wǎng)站。Hiram 學(xué)院網(wǎng)站首頁橫幅廣告為網(wǎng)站設(shè)立了圖形主題，并引人了獨特的版式以及一系列導(dǎo)航標簽。注意版式和導(dǎo)航主題是如何傳遞到內(nèi)部的橫幅廣告的。在瀏覽整個網(wǎng)站時，你不會產(chǎn)生“這是誰的網(wǎng)站”的困惑。

對比

圖形設(shè)計的主要任務(wù)是創(chuàng)建一個強有力的、一致的視覺層級效果，其中，重要元素會突顯，內(nèi)容也是以邏輯且可預(yù)測的方式進行組織的。圖形設(shè)計是對視覺信息的管理，使用頁面設(shè)計工具、版式以及插圖來引導(dǎo)讀者進行頁面瀏覽。讀者首先會把頁面看成是圖形和顏色的聚集體，包含著前景元素與背景的對比。然后，他們開始挑選特定信息，首先從現(xiàn)有的圖形開始，并且在這之后，他們才會開始分析更難的文本媒介并開始閱讀單個的詞語和段落。

整體的圖形平衡和頁面的組織對吸引讀者閱讀網(wǎng)站內(nèi)容至關(guān)緊要。一個全是文本的頁面會因為其毫無差別的灰色而將讀者拒之門外，這樣的網(wǎng)頁沒有對信息架構(gòu)的明顯提示。一個設(shè)計不精或者充斥著過于醒目的圖形或版式的頁面，也會導(dǎo)致用戶喪失尋求實效性內(nèi)容的興趣。你需要通過利用恰當?shù)南噜徫铩⒎纸M、圖形背景關(guān)系以及標題對比中的變化，達到使用視覺對比吸引讀者眼球并提供一個清晰的架構(gòu)之間的平衡。視覺平衡和適當性對預(yù)期的觀眾而言，是成功的設(shè)計決定的關(guān)鍵。對普通觀眾而言，最有效的設(shè)計就是使用相對小的圖形來實現(xiàn)文本和鏈接之間的謹慎平衡。這些頁面不僅能夠快速下載，而且還擁有非常實質(zhì)的圖形效果。

1.版式中的顏色和對比

顏色和對比是通用可用性的關(guān)鍵組成部分。文本的可讀性取決于讀者區(qū)分字體和背景的能力。顏色變化主要取決于明亮度和飽和度。白色背景上的黑色文本擁有最強的對比度，這是因為黑色沒有明亮度而白色是全明度。色調(diào)也是一個因素，諸如藍色和黃色這樣的互補的顏色，會產(chǎn)生最強的對比。確保顏色選擇不會讓讀者難于區(qū)分文字和背景。同時，千萬不要忘記差不多有10%的男性讀者在區(qū)分精細的紅綠色陰影時有一定困難。

2.對比的可變性

使用移動設(shè)備顯示的網(wǎng)頁，通常會因移動環(huán)境而做出讓步:小屏幕，小字號，缺乏理想的屏幕分辨率和顏色，如果在戶外環(huán)境下，陽光或其他照明設(shè)備所發(fā)出的光還會降低網(wǎng)頁的可讀性。實際上，很多的便攜式電腦的顯示屏并不能顯示很好的顏色差別或明暗度差別，通過電腦投影儀看到的頁面上的顏色通常也會變淡。請使用不同的設(shè)備和便攜式電腦，并在不同的環(huán)境中檢測你的設(shè)計，尤其是當你使用微妙的顏色來定義重要的頁面功能或內(nèi)容的時候?？偟膩碚f，最好采用一個更有效、高對比度的版式顏色方案。

3.避免過度對比

水平標尺、修飾性圖形項目符號、顯著的圖標，以及其他視覺標識，都擁有各自的特殊場合的用途，不過每一-樣都要盡量地少用(如果真要用的話)以避免出現(xiàn)不調(diào)和及混亂的樣式。圖形強調(diào)工具十分強大，應(yīng)當只是少量使用以獲取大的效果。過度使用圖形加強效果將產(chǎn)生“小丑褲子”(過猶不及)的效果，即所有的一切都是那么炫耀，反而沒有任何重點可言了。

從大自然中挑選出來的顏色調(diào)板幾乎是絕對可靠的顏色協(xié)調(diào)的向?qū)В绕涫钱斈悴⒎且粋€受過訓(xùn)練的圖形設(shè)計師的時候。微妙的、不飽和度的顏色是背景或次要元素的好選擇。避免使用醒目的、高飽和度的紅色、黃色、藍色，除非在針對最需要加強的區(qū)域，但即便是這時也應(yīng)謹慎使用。

空白區(qū)域

現(xiàn)今，我們擁有更大的顯示屏以及更為復(fù)雜的圖形界面，因此你的網(wǎng)頁很可能會與很多其他窗口和桌面元素共享.個顯示屏。 請使用空白區(qū)域以避免讓瀏覽器窗口的邊緣擠滿了頁面內(nèi)容的重要元素。在固定寬度的布局中，可以考慮將頁面德存在瀏覽器窗口的中央。如果你的頁面寬度合理，這種方法將會讓你的頁面看上去有視覺放松的效果，即便是在一個擁擠的電腦顯示屏上，如圖7-13a所示。對“彈性的”布局而言，可以考慮使用90% ~ 95%的屏幕大小的頁面來取代100%的全屏頁面，讓頁面功能區(qū)域周圍留些背景以達到視 覺放松的效果，避免與瀏覽窗口外的元肅相互作用產(chǎn)生不成功的“1+ 1=3”的效果。

有助于將頁面內(nèi)容從顯示屏上的其他程序和窗口的“嘈雜聲”中隔離出來所有的圖形設(shè)計從根本上而言都是對空白區(qū)域(頁面上所有圖形元素后面的背景)的管理。要想理解圖形設(shè)計，你需要去領(lǐng)會，頁面元素周圍的背景區(qū)域是與頁面上任何圖形元素一樣有效且重要的設(shè)計部分。將頁面上的空白區(qū)域填滿就好比抽空了一個房間的所有氧氣一這或許是對空間的一一種有效應(yīng)用方式，但毫無疑問這是很難讓人習(xí)慣的。

樣式

不要想著為你的網(wǎng)站開發(fā)一個“樣式”，在引人另一網(wǎng)站或是印刷品的圖形元素來裝飾你的頁面時也要謹慎。在對內(nèi)容和頁面布局進行一致和恰當?shù)奶幚頃r，網(wǎng)站的圖形和編輯樣式也應(yīng)隨著這一自然的過程有所演變。多使用傳統(tǒng)而非古怪的風(fēng)格，絕不要讓框架壓倒了內(nèi)容，并記住最好的樣式就是讀者永遠不會注意到的樣式一每樣?xùn)|西都讓人感覺那么有邏輯且舒服(甚至是漂亮)，而笨手笨腳的設(shè)計絕不會讓用戶擁有這樣的體驗。

簡單

所有用戶都會受益于清晰且致的網(wǎng)站設(shè)計，而對某些用戶而言這至關(guān)重要。對于那些缺乏空間線索，使用徹底不同且需要針對每個站點重新學(xué)習(xí)的導(dǎo)航方式，有視覺障礙的用戶會很容易產(chǎn)生混亂或者在網(wǎng)頁中迷失。對那些在認知上有缺陷的人而言，諸如記憶或?qū)W習(xí)有障礙的人，這一難度會被放大很多倍。

當前標題：基礎(chǔ)網(wǎng)站視覺設(shè)計
網(wǎng)頁網(wǎng)址：http://www.bm7419.com/news27/71277.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供虛擬主機、動態(tài)網(wǎng)站、全網(wǎng)營銷推廣、微信小程序、網(wǎng)站設(shè)計、軟件開發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)