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

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

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

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

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

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

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

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

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

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

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

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

一致性

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

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

對(duì)比

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

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

1.版式中的顏色和對(duì)比

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

2.對(duì)比的可變性

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

3.避免過度對(duì)比

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

從大自然中挑選出來的顏色調(diào)板幾乎是絕對(duì)可靠的顏色協(xié)調(diào)的向?qū)?，尤其是?dāng)你并非一個(gè)受過訓(xùn)練的圖形設(shè)計(jì)師的時(shí)候。微妙的、不飽和度的顏色是背景或次要元素的好選擇。避免使用醒目的、高飽和度的紅色、黃色、藍(lán)色，除非在針對(duì)最需要加強(qiáng)的區(qū)域，但即便是這時(shí)也應(yīng)謹(jǐn)慎使用。

空白區(qū)域

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

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

樣式

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

簡(jiǎn)單

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

當(dāng)前題目：基礎(chǔ)網(wǎng)站視覺設(shè)計(jì)
URL鏈接：http://www.muchs.cn/news/71277.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供全網(wǎng)營銷推廣、用戶體驗(yàn)、虛擬主機(jī)、網(wǎng)站策劃、關(guān)鍵詞優(yōu)化、手機(jī)網(wǎng)站建設(shè)

廣告

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