• 
• 
• 
• 
• 
• 
• 

知識普及 ? Web頁面設(shè)計原則

Web頁面設(shè)計原則

奈薇建站網(wǎng) 于2010-01-04 20:11發(fā)表 閱讀次數(shù) 4913次

Web作為出版物的一種，同其他出版物如報紙，雜志等在設(shè)計上有許多共同之處，也要遵循一些設(shè)計的基本原則，不同之處在于每章提到的Web的“非所見即所得”特性和交互性。因此，熟悉一些設(shè)計的基本原則，再對Web的特殊性作一些考慮，便不難設(shè)計出美觀大方的頁面來。如果有美術(shù)設(shè)計基礎(chǔ)，對Web頁面的設(shè)計會很有幫助。如果不具備這方面的背景知識，那么下面的一些原則將會對有所幫助。 　　設(shè)計的3C原則 　　轉(zhuǎn)自：奈薇建站網(wǎng)（www.nev.cn） 　　所謂3C原則是指簡潔、一致性、好的對比度。Web頁面設(shè)計需要遵循這三條原則。 　　簡潔 　　設(shè)計并不再現(xiàn)具體的物象和特征，它要表達的是一定的意圖和要求，在適當?shù)沫h(huán)境里 為人們所理解和接受。它與繪圖有內(nèi)在聯(lián)系，但又不同于繪畫，它以滿足人們的實用和需求為目標，因而它比繪畫更單純，清晰和精確。頁面設(shè)計屬于設(shè)計的一種，同樣要求簡練，準確。 　　從人記憶能力角度來說，由于人的大腦一次最多可記憶五到七條信息，因此如果希望人們在看完你的Web后能留下印象，最好也應(yīng)該用一個簡單的關(guān)鍵詞語或圖像吸引他們的注意力，如天極網(wǎng)的的“YESKY”.，醒目易記。 　　保持簡潔的常用做法是使用一個醒目的標題，這個標題常常采用圖形來表示，但圖形同樣要求簡潔。另一種保持簡潔的做法是限制所用的字體和顏色的數(shù)目。一般每頁使用的字體不超過三種，一個頁面中使用的顏色少于256種。頁面上所有的元素都應(yīng)當有明確的含義和用途，不要試圖用無關(guān)的圖片把頁面裝點起來，初學者容易犯的一個錯誤是把頁面搞的花里呼哨，卻不能讓別人明白他到底要突出表達的是什么內(nèi)容，主題和意念。 　　一致性 　　一致性是表現(xiàn)一個丫點的獨特風格的重要手段之一。 　　要保持一致性，可以從頁面的排版下手，各個頁面使用相同的頁邊距，文本，圖形之間保持相同的間距；主要圖形，標題或符號旁邊留下相同的空白；如果在第一頁的頂部放置了公司標志，那么在其他各頁面都放上這一標志；如果使用圖標導(dǎo)航，則各個頁面應(yīng)當使用相同的圖標。 　　一致性還包括：頁面中的每個元素與整個頁面以及站點的色彩和風格上的一致性。所有的圖標都應(yīng)當彩相同的設(shè)計風格，比如全部采用圖象的線條剪輯畫或全部使用寫實的照片等。 　　另一個保持一致性的辦法是字體和顏色的使用。文字的顏色要同圖像的顏色保持一致并注意色彩搭配的和諧。一個站點通常只使用一到兩種標準色，為了保持顏色上的一致性，標準色一致或相近。比如，站點的主題色彩如果為紅色，可能就需要將鏈接的色彩也改為紅色。 　　對比度 　　使用對比是強調(diào)突出某些內(nèi)容的最有效的辦法之一。好的對比度使內(nèi)容更易于辨認和接受。實現(xiàn)對比的方法很多，最常用的是使用顏色的對比，比如，內(nèi)容提要和正文使用不同顏色的字體，內(nèi)容提要使用藍色，而正文采用黑色；也可以使用大的標題，也即是面積上的對比；還可以使用圖像現(xiàn)對比，題頭的圖像明確的向瀏覽者傳達本頁的主題，這里同樣需要注意的是鏈接的色彩，在設(shè)計頁面時我們常常會只注意到未被訪問的鏈接的色彩，而容易忽視訪問過的鏈接色彩將使得鏈接的文字難地辨認。 　　還有一種實現(xiàn)對比的方法是使用學體變化。在文字排版中，可以使用斜體和黑體實出關(guān)鍵內(nèi)容，但是注意不要濫用，否則就達不到應(yīng)有的強調(diào)效果。 　　使用對比的關(guān)鍵是強調(diào)突出關(guān)鍵內(nèi)容，以吸引瀏覽者，鼓勵他去發(fā)掘更深層次的內(nèi)容。 　　為了對3C原則上有直觀的認識，可以到————等優(yōu)秀的站點上看看，體會一下這些站點對簡潔，一致性和對度等原則的把握。 　　頁面設(shè)計要點 　　WebWebWeb上的內(nèi)容包羅萬象，版式豐富多彩，但無論怎樣的變化，好的Web站點總是有許多共同之處，例如： 　　精心組織的內(nèi)容； 　　格式美觀的正文； 　　和諧的色彩搭配； 　　較好的對比度，使得文字具有較強的可讀性； 　　生動背景圖案； 　　頁面元素大小適中，布局勻稱； 　　不同元素之間留有足夠空白，給人視覺上休息的機會； 　　各元素之間保持平衡； 　　文字準確無誤，無錯別字、無拼寫錯誤； 　　總的來說評價一個頁面設(shè)計的好壞基本上要考慮以下幾個方面的因素。 　　組織內(nèi)容 　　設(shè)計Web頁面時，所發(fā)布的材料必須經(jīng)過精心組織，比如說按邏輯、按時間順序或按地理位置等等進行組織，而且這種內(nèi)容組織應(yīng)當是易于理解的。 　　材料組織好后，下一步就是在Web頁面上布置文本、圖片等內(nèi)容，目的是引導(dǎo)瀏覽者在頁內(nèi)瀏覽。我們應(yīng)該控制頁面上的元素的放置順序和它們相互之間的空隙。比如，可以把與一段文字相關(guān)的圖形放在段落旁邊或嵌入段落中，但不要把與段落無關(guān)的圖形放在段落邊上，以免引起瀏覽者的誤解。把相關(guān)的內(nèi)容放在一起，而不相關(guān)的內(nèi)容用空白，水平線或其他圖形分隔開，最好是瀏覽者看完一頁之后可以選擇繼續(xù)讀下去或通過鏈接跳到其他合適的主題上去。 　　由于人們閱讀材料習慣于從左到右，從上到下進行，因此他們眼睛首先看到的是頁面的左上角，然后逐漸往下看。根據(jù)這一習慣。我們在組織內(nèi)容時可以把希望瀏覽者最先看到的內(nèi)容放在頁面的左上角和頁面頂部，如公司的標記，最新消息以及其他一些重要內(nèi)容等等；然后按重要性遞減的順序，由上而下放軒其他一些內(nèi)容。重要的內(nèi)容應(yīng)當是瀏覽者最容易發(fā)現(xiàn)，而不是放在很深 的鏈接之后的，頁面上的廣告為了達到宣傳效果，通常也放在頁面頂部顯著位置。在段落中不宜放入過多的鏈接，否則會引起瀏覽者瀏覽上的混亂，最好的辦法是按邏輯關(guān)系選擇放置，而不是隨便亂放。如果可能的話，應(yīng)該把鏈接放在一些相關(guān)的說明性文字旁邊。比如，在一列放置文本，在另一列放置鏈接。這樣就可以提示瀏覽者去使用這些鏈接。 　　設(shè)計時可用的一些元素 　　在確定Web站點的基本組織結(jié)構(gòu)之后，就可以著手設(shè)計頁面了。下面是設(shè)計時可供使用的一些元素： 　　文本格式化：Web本身對文本和字體的格式化能力并不強，在Web頁面中，可以指定文本尺寸、排列和其他的一些格式化屬性（序號列表和無序號列表），但建議不要改變這體而應(yīng)當使用缺省字體，以確保頁面的平以無關(guān)必畫面為瀏覽器是用本地機器上的字體顯示示頁面內(nèi)容的，你指定的字體在瀏覽者那里并不一定能夠找到，如果確實有必要少量使用某種特殊字體，可以把這些字畫在圖片上，然后將圖片插入到頁面中； 　　按鈕、圖標和其他導(dǎo)航工具，幫助瀏覽者在Web內(nèi)導(dǎo)航。 　　背景：給頁面添加背景，包括紋理填充、水印式背景和長條狀背景等等，可以使得頁面更加美觀，給瀏覽者留下深刻的映象； 　　圖形：可加入圖片、圖表和圖形等； 　　表格：用來顯示按行和列組織的信息，比如產(chǎn)品價格表，客戶名單等； 　　顏色：包括圖片的色彩、文本和背景的色彩等； 　　多媒體元素：包括聲音、動畫、視頻片斷、背說音樂等。 　　頁面布局：在頁面上放置文本、圖形等元素，在元素間添加橫線條，空白等，并用表格、杠架進行排版。 　　在后面的章節(jié)我們將陸續(xù)介紹這些元素的使用。 　　選擇文本和背景的色彩 　　色彩可以使頁面更加生動。首先，使用色彩可以產(chǎn)生強烈的視覺效果，使你的頁面在瀏覽者心中留下很深的映象；色彩還可以傳遞設(shè)計者的思想情感。但是必注意慎重的使用色彩，否則很可能弄巧成拙。濫用色彩容易造成視覺上的混亂。一般情況下不要過多的使用效果太強烈的色彩，對于大面積的文字來說，白底黑字或黑底白字總是最佳選擇。 　　通常還應(yīng)該選擇相近的色彩。多數(shù)的頁面背景為白色、黑色或灰色，其他一些次要的元素，如背景圖片、線條適宜采用不搶眼的色彩。在數(shù)量有限的情況下，只有少量精心選擇的元素為了突出強調(diào)的需要，才彩用明亮的色彩。在數(shù)量有奶的情況下，這引起彩色亮點會產(chǎn)生強烈的視覺沖擊，但如果用得太多了，就會形成一種均勻的噪聲，而達不到強調(diào)的效果。 　　在選擇背景和正文顏色時，最重要的一點是注意易讀性。實現(xiàn)易讀性的關(guān)鍵在于提供足夠的明暗對比。由于黑白之間有最強烈的對比度，因此大多數(shù)網(wǎng)頁都采用黑底折字顯示文本，但是，也不必拘泥于黑白兩色實現(xiàn)對比，可以選擇一對顏色，其中一個是亮的，一個量暗的，只要它們保持足夠的對比度，比如說，灰底黑字也是很好的選擇。 　　大面積的適宜采用低對比度。因此，對于大的形狀或粗體字最好采用低對比度的色彩組合。 　　除了亮度上的對比之外，還要考慮顏色上的對比?；パa色具有最強的顏色對比兩種有較強的色彩對比度的顏色組合在一起時，很難區(qū)分它們的邊界。顏色對比同樣可以產(chǎn)生強烈的視覺效果。運用強的色彩對比，可以制造緊張，激動等感覺。但是，在文本和它的背景之間不宜采用太強的顏色對比，否則文字看起來會顯示得模糊。特別是，文本切忌放在使用文字的互補色的背景上。 　　在選擇顏色時，還要注意冷暖色的部題。冷色調(diào)（藍、綠）會產(chǎn)生收縮感，而暖色調(diào)（紅、橙、黃）則有向前突出的感覺。深藍色和深綠色適合作為背景色，而明亮的黃色適合于那些希望引起注意的黃色。事實上，只要我們平時稍加觀察，就會發(fā)現(xiàn)許多商店的招牌，廣告或其他商業(yè)圖形展示都彩用深藍色背景加黃色文字，標記的組合。這種組合非常醒目，最適合商業(yè)領(lǐng)域使用。黑色和黃色也是另一種常用的顏色組合。 　　在Web面面上，大多采用明亮的背景色襯以深顏色的文字這樣的一種顏色組合。 　　除了色彩的對比、冷暖感覺之外，還需要考慮色彩帶給人心理上的感覺。比如，冷的顏色使人平靜，而暖色使人激動；強的色彩對比造成緊張感；暗的顏色給人以沉重感和壓迫感。亮的顏色給人輕松、開放的感覺。我們可以根據(jù)所要表達的主題，選擇合適的色彩。 　　色彩除了帶給人心理上的感覺之外，有些顏色實際上已經(jīng)有了社會意義。比如，紅色代表停止，綠色代表通行，灰色和深藍色代表保守，穩(wěn)重等。恰當運用色彩可以調(diào)動瀏覽者心理上的感受。比如，在許多飲食店中，采用汪藍色，給人輕松愉快的感覺，這同樣也適合于網(wǎng)頁，在網(wǎng)頁中使用顏色時，就要盡量使得色彩搭配與這些習俗相吻合。 　　考慮到大多數(shù)人使用256色顯示模式，因此一個頁面顯示的顏色不宜過多，連頁面內(nèi)的圖像在內(nèi)應(yīng)當控制在256色以內(nèi)。主題顏色通常只需要兩到三種，并采用一種標準色。 　　以下是使用色彩的一些建議： 　　對多數(shù)網(wǎng)頁特別是有大面積文字的網(wǎng)頁來說，應(yīng)采用白色或淺色的背景，如淺灰色、淡黃色、淺藍色或淺綠色，文字采用黑色或深顏色； 　　避免在淺色背景使用明亮顏色的文字，因為這樣文字會很難辨認； 　　深顏色背景上使用淺色的文字是一種很好的組合，但是如果不是特別需要，應(yīng)留作那些需要引起瀏覽者特別注意的小塊區(qū)域和場合，比如標題圖形等； 　　使用黑色背景許多時候顯得太沉重，可以考慮使用深灰色、深藍、粟色等； 　　轉(zhuǎn)自：奈薇建站網(wǎng)（www.nev.cn） 　　白色、淺灰色、淺藍色、淺綠色、淺褐色很適合作為深色背景上的文字顏色； 　　大的、粗體的文字比常規(guī)尺寸的文字更適合使用；交強的顏色，可考慮鮮紅色，橙色，明亮的藍色，但注意不要濫用。

Web頁面設(shè)計原則相關(guān)標簽：網(wǎng)站建設(shè)公司，網(wǎng)站優(yōu)化，網(wǎng)站制作，網(wǎng)站規(guī)劃

相關(guān)熱點推薦

為什么你的網(wǎng)站沒流量？ 網(wǎng)頁設(shè)計細節(jié)的根本所在 網(wǎng)頁設(shè)計靈感的起源地 真正價值的用戶體驗 從網(wǎng)站建站到推廣的路程 文案是網(wǎng)站的性格 什么是CSS＋DIV及 新手站長易犯的九大毛病 網(wǎng)頁設(shè)計中的文字運用 頁面規(guī)劃流程中怎么展示 域名的作用 網(wǎng)站建設(shè)之互動欄目的重 寬屏幕下的Web設(shè)計 網(wǎng)站推廣十大不可以 如何設(shè)計有效的布局？ 不對稱網(wǎng)頁設(shè)計頁面處理 企業(yè)建站的盈利模式及網(wǎng) 網(wǎng)站中的個性及風格設(shè)計 如何處理和把握網(wǎng)頁設(shè)計 網(wǎng)站設(shè)計中的導(dǎo)航理論與 發(fā)布網(wǎng)站改版時的3要3 網(wǎng)絡(luò)營銷、網(wǎng)站推廣軟文 微信為什么這么人在用 網(wǎng)頁切圖與SEO優(yōu)化 網(wǎng)頁設(shè)計師也該關(guān)注頁面 企業(yè)建站需要準備的資料 網(wǎng)頁文案設(shè)計淺談 網(wǎng)站建設(shè)與設(shè)計應(yīng)掌握的 23條使你的網(wǎng)站設(shè)計更 青島網(wǎng)站建設(shè)哪家好? 什么是網(wǎng)絡(luò)推廣？ 如何做網(wǎng)站專題設(shè)計 怎樣制作一個專業(yè)的網(wǎng)站 蘋果系統(tǒng)播放器 交互設(shè)計實用指南系列– 搜索引擎訪問網(wǎng)站返回碼 交換鏈接 友情鏈接的實際意義和考 搜索引擎友好的網(wǎng)站設(shè)計 用戶體驗與網(wǎng)頁界面設(shè)計

奈薇建站網(wǎng)青島網(wǎng)站建設(shè)公司/青島網(wǎng)站制作公司，專業(yè)提供"氣質(zhì)"型網(wǎng)站建設(shè)及精美網(wǎng)站制作服務(wù)，同時歡迎各地網(wǎng)站建設(shè)公司、網(wǎng)站制作公司代理我們的奈薇建站系統(tǒng)共同發(fā)展

熱點地區(qū)：青島網(wǎng)站建設(shè)價格 青島即墨網(wǎng)站制作公司 開發(fā)區(qū)信息港 山東在線門戶