官术网_书友最值得收藏!

1.4 網頁設計

1.4.1 網頁風格設計

網頁的風格其實就是網頁給瀏覽者的一個整體形象,這個整體形象是由網頁的版面布局、色彩搭配、文字編排和設計、圖像的創意與設計、網頁的多媒體元素等因素來決定的。對于信息量大的網站來說,頁面的布局風格對網站影響較大。信息量小的網站,則可側重于網站獨特的元素(如有特色的導航,特別的布局設計,較大的插圖和背景等)。目前比較流行的網頁設計風格有以下一些類型。

1.全屏網頁設計

全屏網頁設計,利用精心挑選設計的漂亮背景,加上合理的頁面布局,視覺沖擊力大可很好地吸引觀者注意。通常頁面內的文字內容不會特別多(所出現的少量文字加上精美的排版將會變得更加吸引人),主要以圖片展示為主。雖然頁面精美,但是承載信息有限,通常個人網站和產品展示類網站使用此風格較多,而企業類的門戶網站則較少使用。

2.響應式網站設計

由于用戶都擁有多種終端:臺式計算機、筆記本、平板電腦、手機,頁面的設計與開發應當根據用戶行為以及設備環境(系統平臺、屏幕尺寸、屏幕定向等)進行相應的響應和調整。具體的實踐方式由多方面組成,包括彈性網格和布局、圖片、CSS media query的使用等。響應式網頁設計就是一個網站能夠兼容多個終端,而不需要為每個終端做一個特定的版本。這樣就可以不必為不斷到來的新設備做專門的版本設計和開發了。

3.扁平化設計

扁平化概念的核心意義是:去除冗余、厚重和繁雜的裝飾效果。具體表現在去掉了多余的透視、紋理、漸變以及能做出3D效果的元素,這樣可以讓“信息”本身重新作為核心被凸顯出來。同時在設計元素上,則強調了抽象、極簡和符號化。多數網站使用響應式設計來兼容平板電腦、手機等多平臺瀏覽,而使用扁平化網頁會更容易實現這些技術。

4.無限滾動模式(瀑布流)

當頁面內容信息很多時,某些網站設計沒有采用分頁方式,而是采用一種垂直瀑布流的方式布局。將那些內容垂直排布,當滾輪滾到頁面下方時,會自動加載新的內容,無須單擊換頁,用戶可以無縫閱覽。例如,在百度搜索圖片時,搜索到的圖片頁面就采取垂直瀑布流的方式顯示圖片。這種滾動頁面方式減少了分頁的數量,對于信息量大,每日更新數據快的網站可采用此方案。

1.4.2 網頁布局設計

網頁中加入了文字、圖片、動畫,怎樣才能合理地把這些元素整合起來,組成一個協調的頁面呢?布局就是以最適合瀏覽的方式將圖片、文字、動畫等元素排放在頁面的不同位置。布局時需要顧忌的事項很多,要注意字間距,文字、圖片的數量,顏色的搭配,還要考慮頁面留白等。

現在常見的布局類型有以下幾種。

1.“T”字型布局

所謂“T”結構,就是指頁面頂部為橫條網站標志+廣告條,下方左面為主菜單,右面顯示內容的布局,整體效果類似英文字母“T”,所以稱之為“T”字型布局。這是網頁設計中用得最廣泛的一種布局方式。這種布局的優點是頁面結構清晰,主次分明,是初學者最容易上手的布局方法。

2.“同”字型或“國”字型布局

所謂同字型布局就是指頁面頂部為“網站標志+廣告條+主菜單”或主菜單,下方左側為二級欄目條,右側為鏈接欄目條,屏幕中間顯示具體內容的布局。“國”字型布局是在“同”字型布局基礎上演化而來的,在保留“同”字型的同時,在頁面的下方增加一橫條狀的菜單或廣告。這種布局的優點是充分利用版面,頁面結構清晰,主次分明,信息量大,通常用于一些企業門戶網站或者大型網站布局。

3.標題正文型布局

這種布局的最上方是標題或廣告等內容,下面是正文。通常文章頁面或注冊頁面采用此種布局,其特點是簡潔明快,干擾信息少,較為正規。

4.“川”型布局

“川”型布局是將整個頁面在垂直方向分為三列,網站的內容按欄目分布在這三列中,可以最大限度地突出主頁的索引功能。“川”型布局和“國”型布局的主要區別是:把主內容區換成了各個二級頁面的鏈接,其中的不足是二級欄目比例不易配置平衡,色彩不易協調。

5.宣傳海報型布局

此類型是指頁面布局像一張宣傳海報,通常以一張精美的海報畫面為布局的主體,是一種具有藝術感和時尚感的網頁布局方式。這種類型基本上是出現在一些企業網站和個人網站的首頁,大部分為一些精美的平面設計結合一些小的動畫,放上幾個簡單的鏈接或者僅是一個“進入”的鏈接,甚至直接在首頁的圖片上做鏈接而沒有任何提示。

6.Flash型布局

Flash型布局是指網頁頁面以一個或多個Flash作為頁面主體的布局方式。在這種布局中,大部分甚至整個頁面都是Flash,頁面本身就是動態的,畫面一般比較絢麗、有趣。這種布局與宣傳海報型結構比較類似,不同的是由于Flash功能強大,頁面所表達的信息更豐富更詳盡。

7.框架型布局

框架型布局結構,常見的有左右框架型、上下框架型和綜合框架型。由于兼容性和美觀等因素,這種布局目前專業設計人員采用的已不多,不過在一些大型論壇上還是比較受青睞的,有些企業網站也有應用。

8.變化型

采用上述幾種布局的結合與變化,布局采用上、下、左、右結合的綜合型結構,再結合F1ash動畫,使頁面形式更加多樣,視覺沖擊力更強。

1.4.3 網頁色彩設計

色彩的搭配,能體現出一個網頁設計者的審美觀,也會直接影響瀏覽者的觀感,相同的顏色在不同的人看起來情緒反應可能是不同的,這與個人偏好有關,有時也與文化背景有關。無論是單個頁面的色彩搭配,還是整個網站的色彩設計,首先都會確定一個主色調,用以配合網頁的主題,其他的顏色輔以調節的作用。

1.需要了解的色彩知識

1)色彩的三要素

色相、亮度和飽和度是構成色彩的三要素。亮度也被稱作明度,它是指色彩的明暗程度。亮度越大色彩越亮,反之則顏色越暗。色相是指能夠比較確切地表示某種顏色色別的名稱,也可以理解為顏色的相貌,每一個顏色所特有的與其他顏色不相同的表象。飽和度是指顏色的純凈程度,飽和度越高顏色越鮮艷,也可以把飽和度看成是色調的鮮艷或灰暗程度。

黑、白、灰只有亮度的差別,沒有色相的變化,在配色中常常將這三種非彩色作為調和、隔離的因素來使用。

2)色彩的心理感受

不同的顏色會給瀏覽者不同的心理感受,當色彩在飽和度、透明度上略有變化時就會讓人產生不同的感覺。以綠色為例,黃綠色有青春、旺盛的視覺意境,而藍綠色則顯得幽寧、陰深。

色彩的冷暖感覺一般是由色相決定的。如火一樣會讓人產生溫暖感稱為暖色。暖色包含紅、橙、黃以及這三種顏色的變種,它們通常象征活力、激情和積極。在網頁設計中使用暖色以體現激情、快樂、熱忱和活力的主調。如水一般冷淡的顏色稱為冷色。冷色系包含綠色、藍色和紫色,相對暖色,強度要弱,通常給人的感覺是舒緩,放松,以及有一點兒冷淡。在網頁設計中使用冷色可以營造一種冷靜或專業的感覺。

如淘寶、唯品會等購物網站使用的是暖色系,傾向于讓人興奮的配色。而政府、一些企業網站則適合選擇冷靜一些的冷色系。

2.網頁的色彩搭配

網頁設計中最根本的原則是,無論你創造了一個多么耀眼的設計,其最終的作用是發揮出內容的核心位置。配色方案永遠不應該比它呈現的內容更加奪目,設計應該是輔助襯托作用,目的是幫助突出網站的內容。

配色方案有多種,可以根據網站主題進行配色。配色時通常將網頁中的色彩分為以下4部分。

(1)主色調:頁面色彩的主要色調、總趨勢,其他配色不能超過該主要色調的視覺影響。

(2)輔色調:僅次于主色調的視覺面積的輔助色,是烘托主色調、支持主色調、起到融合主色調效果的輔助色調。

(3)點睛色:在小范圍內點上強烈的顏色來突出主題效果,使頁面更加鮮明生動。

(4)背景色:襯托環抱整體的色調,協調、支配整體的作用。

網站的主色調有無數種顏色選擇,和繪畫一樣,應該遵守近實遠虛的原則。近就是網站要突出的內容,后面灰蒙蒙的遠景就是網頁背景。因此建議主色調選擇簡單又安全的顏色,如白色或淺灰色和深灰色的搭配文字背景。絕大部分大型網站,如京東、百度、騰訊等都采用了此類搭配方案。這種搭配對瀏覽者來說提高了內容的可讀性,并且把圖片突出在最前方。

在網頁白色或者灰色主色調的前提下,可選擇一種鮮艷的顏色來作為想要突出事物的輔色調,比如標題、菜單、LOGO標志等的色調。在上淘寶網購物時可發現,淘寶網選擇了橙色作為輔色調。

當然在制作一些有個性的網站時,上面的搭配感覺太過于寡淡,可以采用另一種搭配方案。把顏色分為非彩色與彩色兩類:非彩色指黑、白、灰,其他為彩色。搭配網頁顏色時主要內容文字用非彩色,邊框、背景、圖片等用彩色。這樣頁面整體不單調,看內容時也不會覺得眼花繚亂。

3.網頁配色的忌諱

(1)在進行網頁配色時,并不是色彩越多越好看,應該盡量控制在三種色彩以內。

(2)紅、黃、藍三原色視覺沖擊力最強,也較難搭配,大范圍使用要慎重。

(3)背景和前文的對比盡量要大,不要用花紋繁復的圖案作背景,以便突出主要文字內容。

1.4.4 網頁內容設計

網頁內容最主要由文字和圖片兩大要素構成,怎樣合理安排文字和圖片的大小、位置等是網頁布局的關鍵之一。

1.文字

文字是網頁設計的主體,對網頁中的文字進行整體設計,可以更好地表達信息,增強視覺效果。對于文字內容,要考慮兩點。一是簡潔、明了,能夠讓用戶讀得下去;二是把握文字的數量,文字太少,會顯得單調,文字多了,網頁就會顯得很乏味。

從網頁文字的可讀性來看,需要設計者考慮字體、字號、行距、間距、背景色與文字顏色對比等。

(1)字體、字號。長文本使用標準字體、字號。一般文字正文中文都采用宋體12px(像素)字體,標題或者是關鍵字可采用黑體14px,英文網頁一般用11px。

(2)行寬。一行文字過長,視線移動距離長,很難讓人注意到段落起點和終點,閱讀比較困難;如果一行文字過短,眼睛要不停來回掃視,破壞閱讀節奏。每一行文字的長度建議控制在35~45個字之間。

(3)行距。設置時應該注意到,過寬的行距會讓文字失去延續性,影響閱讀;而行距過窄,則容易出現跳行。網頁設計中,建議一般根據字體大小選1~1.5倍作為行間距,1.5~2倍作為段間距。

(4)對齊。排版中很重要的一個規范就是把應該對齊的地方對齊,比如每個段落行的位置對齊。通常情況下,建議在頁面上只使用一種文本對齊,盡量避免兩端對齊。

2.圖片

圖片的創意與設計在視覺上比文字更能吸引人的眼球,善用圖片可以更加生動、形象、直觀地表達網頁主題。在某些突出的位置,可以放置一些比較出彩的圖片,這樣既能達到美觀的效果,又能讓瀏覽者對網頁印象深刻,增強網頁的宣傳力、感染力。

使用圖片時要注意以下一些原則。

(1)圖片效果要清晰,在同質量下盡量選擇文件最小的圖片。對顏色細節要求小時選擇.GIF格式。如果圖片質量要求高則可選擇.PNG或者.JPG格式圖片。

(2)處理圖片素材時,適當裁剪圖片只保留與網頁相關部分。盡量將圖片在插入網頁前就調整為網頁所需大小,不要將大圖片插入網頁里再將圖片縮小,這樣會影響網頁下載速度。

(3)圖片內文字的裝飾不要過分花哨,否則會造成文字辨識不易。

(4)圖片運用要和諧。選擇大圖作網站背景時,圖片要與網站主題貼切,與網站定位保持一致,在顏色搭配方面,如果色彩與主題不夠融合的話,可以通過改變圖片的亮度、飽和度等來平衡網站的整體風格特色。

3.多媒體元素

為了讓網頁能更吸引人的注意,網頁中可放置音頻、動畫、視頻等,這些就是多媒體了。網頁中多媒體的動態效果能夠在很大程度上增加對瀏覽者的吸引力,但是在普通的網頁中放置過多的多媒體元素,會影響網頁打開速度。

1.4.5 網頁設計案例分析

下面以一個叫“樂山樂水”的旅游網站為例來分析一下,在制作網頁時應該怎樣應用這些網頁設計原則。“樂山樂水”網站首頁效果如圖1-1所示。

圖1-1 “樂山樂水”網站首頁效果圖

網站設計的步驟如下。

1.確定網站主題

網站的內容是展示中國四川樂山這個城市的旅游相關信息。網站命名為“樂山樂水”,生動貼切地描述了網站的主題:樂山的山山水水,旅游文化。

2.確定網站的布局風格

由于網站信息量較大,“樂山樂水”網站首頁采用了“同”字型布局風格。網頁自上而下分別是:網頁的LOGO標志、網站導航欄、Flash動畫效果的橫幅廣告、主要內容(左邊欄包括滾動效果的旅游新聞區域、友情鏈接區域,中間為景點推薦區域和旅游路線區域,右邊欄是樂山美食區域和樂山酒店區域)、版權說明區域。

3.網站的色彩搭配

“樂山樂水”網站的背景色為白色,主色調是綠色,輔色調是同色系調節了亮度、飽和度的果綠色,搭配點睛色橙色。這種搭配方式色彩調和統一,但是又有微妙的變化,讓網頁有了層次感,不再單調乏味。整個網頁給人的感覺自然、清新、別致。

4.首頁內容的設計

在網站的首頁中最吸引人目光的就是用三張樂山美景制作的Flash動畫效果。用這種方式來展示圖片更加引人入勝。

在左側邊欄的旅游新聞采用了滾動文字的動態效果,很容易吸引瀏覽者的目光,可以讓瀏覽者首先關注樂山旅游的相關動態。

網頁內文字數量適中,文字大小和間距恰當,不僅美觀,瀏覽者閱讀起來也清晰、流暢。如果只有文字網頁會顯得單調,在網頁中間的三張風景圖片起到了點睛作用。各子欄目中的小圖標應用讓網頁看上去更加生動活潑。

5.素材的應用

網頁里用到了Flash動畫素材、滾動文字效果、LOGO標志圖片、各子欄目和導航欄背景圖片等。圖片大小適中,動畫元素只用了一個,不僅讓頁面充滿動態美感,也沒有影響到網頁的下載速度。

網站設計時,不管是布局、內容還是配色,都應該突出網站的重點和特色。根據網站的風格來選擇布局類型,要貼合自己的主題來選擇內容,不要放一大堆信息,不管是否和主題相關。

主站蜘蛛池模板: 卢龙县| 安陆市| 西林县| 房产| 马鞍山市| 东明县| 洛扎县| 招远市| 景洪市| 南康市| 花莲县| 丰城市| 龙海市| 甘南县| 宿松县| 布拖县| 繁峙县| 克拉玛依市| 舒城县| 锡林郭勒盟| 临澧县| 岐山县| 库伦旗| 东台市| 蚌埠市| 陈巴尔虎旗| 奈曼旗| 延津县| 南乐县| 晋州市| 德化县| 安康市| 融水| 石柱| 高陵县| 福泉市| 新竹市| 孟州市| 县级市| 滕州市| 当雄县|