頁面設計原則

2021-08-04 06:54:57 字數 4465 閱讀 6888

頁面設計原則

web作為出版物的一種,同其他出版物如報紙,雜誌等在設計上有許多共同之處,也要遵循一些設計的基本原則,不同之處在於每章提到的web的「非所見即所得」特性和互動性。因此,熟悉一些設計的基本原則,再對web的特殊性作一些考慮,便不難設計出美觀大方的頁面來。如果有美術設計基礎,對web頁面的設計會很有幫助。如果不具備這方面的背景知識,那麼下面的一些原則將會對有所幫助。

設計的3c原則

所謂3c原則是指簡潔、一致性、好的對比度。web頁面設計需要遵循這三條原則。

簡潔設計並不再現具體的物象和特徵,它要表達的是一定的意圖和要求,在適當的環境裡 為人們所理解和接受。它與繪圖有內在聯絡,但又不同於繪畫,它以滿足人們的實用和需求為目標,因而它比繪畫更單純,清晰和精確。頁面設計屬於設計的一種,同樣要求簡練,準確。

保持簡潔的常用做法是使用乙個醒目的標題,這個標題常常採用圖形來表示,但圖形同樣要求簡潔。另一種保持簡潔的做法是限制所用的字型和顏色的數目。一般每頁使用的字型不超過三種,乙個頁面中使用的顏色少於256種。頁面上所有的元素都應當有明確的含義和用途,不要試圖用無關的把頁面裝點起來,初學者容易犯的乙個錯誤是把頁面搞的花裡呼哨,卻不能讓別人明白他到底要突出表達的是什麼內容,主題和意念。

一致性一致性是表現乙個丫點的獨特風格的重要手段之一。

要保持一致性,可以從頁面的排版下手,各個頁面使用相同的頁邊距,文字,圖形之間保持相同的間距;主要圖形,標題或符號旁邊留下相同的空白;如果在第一頁的頂部放置了公司標誌,那麼在其他各頁面都放上這一標誌;如果使用圖示導航,則各個頁面應當使用相同的圖示。

一致性還包括:頁面中的每個元素與整個頁面以及站點的色彩和風格上的一致性。所有的圖示都應當彩相同的設計風格,比如全部採用圖象的線條剪輯畫或全部使用寫實的**等。

另乙個保持一致性的辦法是字型和顏色的使用。文字的顏色要同影象的顏色保持一致並注意色彩搭配的和諧。乙個站點通常只使用一到兩種標準色,為了保持顏色上的一致性,標準色一致或相近。比如,站點的主題色彩如果為紅色,可能就需要將鏈結的色彩也改為紅色。

對比度使用對比是強調突出某些內容的最有效的辦法之一。好的對比度使內容更易於辨認和接受。實現對比的方法很多,最常用的是使用顏色的對比,比如,內容提要和正文使用不同顏色的字型,內容提要使用藍色,而正文採用黑色;也可以使用大的標題,也即是面積上的對比;還可以使用影象現對比,題頭的影象明確的向瀏覽者傳達本頁的主題,這裡同樣需要注意的是鏈結的色彩,在設計頁面時我們常常會只注意到未被訪問的鏈結的色彩,而容易忽視訪問過的鏈結色彩將使得鏈結的文字難地辨認。

還有一種實現對比的方法是使用學體變化。在文字排版中,可以使用斜體和黑體實出關鍵內容,但是注意不要濫用,否則就達不到應有的強調效果。

使用對比的關鍵是強調突出關鍵內容,以吸引瀏覽者,鼓勵他去發掘更深層次的內容。

為了對3c原則上有直觀的認識,可以到————等優秀的站點上看看,體會一下這些站點對簡潔,一致性和對度等原則的把握。

頁面設計要點

webwebweb上的內容包羅永珍,版式豐富多彩,但無論怎樣的變化,好的web站點總是有許多共同之處,例如:

精心組織的內容;

格式美觀的正文;

和諧的色彩搭配;

較好的對比度,使得文字具有較強的可讀性;

生動背景圖案;

頁面元素大小適中,布局勻稱;

不同元素之間留有足夠空白,給人視覺上休息的機會;

各元素之間保持平衡;

文字準確無誤,無錯別字、無拼寫錯誤;

總的來說評價乙個頁面設計的好壞基本上要考慮以下幾個方面的因素。

組織內容

設計web頁面時,所發布的材料必須經過精心組織,比如說按邏輯、按時間順序或按地理位置等等進行組織,而且這種內容組織應當是易於理解的。

材料組織好後,下一步就是在web頁面上布置文字、等內容,目的是引導瀏覽者在頁內瀏覽。我們應該控制頁面上的元素的放置順序和它們相互之間的空隙。比如,可以把與一段文字相關的圖形放在段落旁邊或嵌入段落中,但不要把與段落無關的圖形放在段落邊上,以免引起瀏覽者的誤解。把相關的內容放在一起,而不相關的內容用空白,水平線或其他圖形分隔開,最好是瀏覽者看完一頁之後可以選擇繼續讀下去或通過鏈結跳到其他合適的主題上去。

由於人們閱讀材料習慣於從左到右,從上到下進行,因此他們眼睛首先看到的是頁面的左上角,然後逐漸往下看。根據這一習慣。我們在組織內容時可以把希望瀏覽者最先看到的內容放在頁面的左上角和頁面頂部,如公司的標記,最新訊息以及其他一些重要內容等等;然後按重要性遞減的順序,由上而下放軒其他一些內容。重要的內容應當是瀏覽者最容易發現,而不是放在很深 的鏈結之後的,頁面上的廣告為了達到宣傳效果,通常也放在頁面頂部顯著位置。在段落中不宜放入過多的鏈結,否則會引起瀏覽者瀏覽上的混亂,最好的辦法是按邏輯關係選擇放置,而不是隨便亂放。如果可能的話,應該把鏈結放在一些相關的說明性文字旁邊。比如,在一列放置文字,在另一列放置鏈結。這樣就可以提示瀏覽者去使用這些鏈結。

設計時可用的一些元素

在確定web站點的基本組織結構之後,就可以著手設計頁面了。下面是設計時可供使用的一些元素:

文字格式化:web本身對文字和字型的格式化能力並不強,在web頁面中,可以指定文字尺寸、排列和其他的一些格式化屬性(序號列表和無序號列表),但建議不要改變這體而應當使用預設字型,以確保頁面的平以無關必畫面為瀏覽器是用本地機器上的字型顯示示頁面內容的,你指定的字型在瀏覽者那裡並不一定能夠找到,如果確實有必要少量使用某種特殊字型,可以把這些字畫在上,然後將插入到頁面中;

按鈕、圖示和其他導航工具,幫助瀏覽者在web內導航。

背景:給頁面新增背景,包括紋理填充、水印式背景和長條狀背景等等,可以使得頁面更加美觀,給瀏覽者留下深刻的映象;

**:用來顯示按行和列組織的資訊,比如產品**表,客戶名單等;

頁面布局:在頁面上放置文字、圖形等元素,在元素間新增橫線條,空白等,並用**、槓架進行排版。

在後面的章節我們將陸續介紹這些元素的使用。

選擇文字和背景的色彩

色彩可以使頁面更加生動。首先,使用色彩可以產生強烈的視覺效果,使你的頁面在瀏覽者心中留下很深的映象;色彩還可以傳遞設計者的思想情感。但是必注意慎重的使用色彩,否則很可能弄巧成拙。濫用色彩容易造成視覺上的混亂。一般情況下不要過多的使用效果太強烈的色彩,對於大面積的文字來說,白底黑字或黑底白字總是最佳選擇。

通常還應該選擇相近的色彩。多數的頁面背景為白色、黑色或灰色,其他一些次要的元素,如背景、線條適宜採用不搶眼的色彩。在數量有限的情況下,只有少量精心選擇的元素為了突出強調的需要,才彩用明亮的色彩。在數量有奶的情況下,這引起彩色亮點會產生強烈的視覺衝擊,但如果用得太多了,就會形成一種均勻的雜訊,而達不到強調的效果。

在選擇背景和正文顏色時,最重要的一點是注意易讀性。實現易讀性的關鍵在於提供足夠的明暗對比。由於黑白之間有最強烈的對比度,因此大多數網頁都採用黑底折字顯示文字,但是,也不必拘泥於黑白兩色實現對比,可以選擇一對顏色,其中乙個是亮的,乙個量暗的,只要它們保持足夠的對比度,比如說,灰底黑字也是很好的選擇。

大面積的適宜採用低對比度。因此,對於大的形狀或粗體字最好採用低對比度的色彩組合。

除了亮度上的對比之外,還要考慮顏色上的對比。互補色具有最強的顏色對比兩種有較強的色彩對比度的顏色組合在一起時,很難區分它們的邊界。顏色對比同樣可以產生強烈的視覺效果。運用強的色彩對比,可以製造緊張,激動等感覺。但是,在文字和它的背景之間不宜採用太強的顏色對比,否則文字看起來會顯示得模糊。特別是,文字切忌放在使用文字的互補色的背景上。

在選擇顏色時,還要注意冷暖色的部題。冷色調(藍、綠)會產生收縮感,而暖色調(紅、橙、黃)則有向前突出的感覺。深藍色和深綠色適合作為背景色,而明亮的黃色適合於那些希望引起注意的黃色。事實上,只要我們平時稍加觀察,就會發現許多商店的招牌,廣告或其他商業圖形展示都彩用深藍色背景加黃色文字,標記的組合。這種組合非常醒目,最適合商業領域使用。黑色和黃色也是另一種常用的顏色組合。

在web面面上,大多採用明亮的背景色襯以深顏色的文字這樣的一種顏色組合。

除了色彩的對比、冷暖感覺之外,還需要考慮色彩帶給人心理上的感覺。比如,冷的顏色使人平靜,而暖色使人激動;強的色彩對比造成緊張感;暗的顏色給人以沉重感和壓迫感。亮的顏色給人輕鬆、開放的感覺。我們可以根據所要表達的主題,選擇合適的色彩。

色彩除了帶給人心理上的感覺之外,有些顏色實際上已經有了社會意義。比如,紅色代表停止,綠色代表通行,灰色和深藍色代表保守,穩重等。恰當運用色彩可以調動瀏覽者心理上的感受。比如,在許多飲食店中,採用汪藍色,給人輕鬆愉快的感覺,這同樣也適合於網頁,在網頁中使用顏色時,就要盡量使得色彩搭配與這些習俗相吻合。

考慮到大多數人使用256色顯示模式,因此乙個頁面顯示的顏色不宜過多,連頁面內的影象在內應當控制在256色以內。主題顏色通常只需要兩到三種,並採用一種標準色。

以下是使用色彩的一些建議:

對多數網頁特別是有大面積文字的網頁來說,應採用白色或淺色的背景,如淺灰色、淡黃色、淺藍色或淺綠色,文字採用黑色或深顏色;

避免在淺色背景使用明亮顏色的文字,因為這樣文字會很難辨認;

深顏色背景上使用淺色的文字是一種很好的組合,但是如果不是特別需要,應留作那些需要引起瀏覽者特別注意的小塊區域和場合,比如標題圖形等;

使用黑色背景許多時候顯得太沉重,可以考慮使用深灰色、深藍、粟色等;

白色、淺灰色、淺藍色、淺綠色、淺褐色很適合作為深色背景上的文字顏色;

大的、粗體的文字比常規尺寸的文字更適合使用;交強的顏色,可考慮鮮紅色,橙色,明亮的藍色,但注意不要濫用。

設計原則與思想 設計原則

如何理解單一職責原則 srp solid原則並非單純的1個原則,而是由5個設計原則組成,他們分別是 單一職責原則,開閉原則,裡式替換原則,介面隔離原則和依賴反轉原則,依次對應solid中的s,o,l,i,d這五個英文本母 單一職責原則的英文是single responsibility princip...

設計原則 開閉原則

開閉原則的含義是對擴充套件開放,對修改關閉。意思就是在遇到新的需求或者變動的時候,提倡對原 擴充套件使其滿足新的需求,不提倡修改原 來達到目的。乙個專案不可能在開發完畢後就一成不變了,它總會有新的需求或者對老的需求進行更新。這樣就要盡可能的遵從設計原則中的開閉原則,這個原則告訴我們,要盡量避免對原 ...

設計原則 開閉原則

怎樣的 改動才能被定義為 擴充套件 怎樣的 改動才定義為 修改 怎樣才算滿足或者違反開閉原則?修改 意味著違反開閉原則嗎?開閉原則是最難理解,也是最難掌握,同時也是最有用的一條原則。這條原則並不是看幾篇文章,理解了其概念就能掌握和靈活應用的。要想深入理解,掌握這條原則,需要大量的實戰。開閉原則,英文...