談起網頁的優化這個問題很多人都沒有什麽概念,有很多的業内人士都對網頁優化一(yī)無所知(zhī)或者知(zhī)之甚少。說起對網頁優化的理解,我(wǒ)曾經去(qù)各大(dà)搜索引擎上搜索過 "網頁優化"一(yī)類的話(huà)題,結果都是介紹如何優化搜索引擎排名的文章,其實這隻是優化概念的一(yī)個組成部分(fēn),而網頁的優化工(gōng)作是由很多方面的優化組成的,作爲 一(yī)名優秀的網頁優化工(gōng)作人員(yuán)必須具備多方面的知(zhī)識,不僅僅要掌握網站設計制作技術(包括網站架構設計、網頁設計以及制作頁面編寫代碼等等);還要掌握很多 計算機其他方面的知(zhī)識(包括電子商(shāng)務、人機交互、易用性和一(yī)些相關的軟件知(zhī)識等等);甚至需要掌握心理學、商(shāng)業運作等相關知(zhī)識。
我(wǒ)認爲網頁的優化應該是由兩個方面組成的:1.技術優化,2.人文優化(這個分(fēn)類隻是我(wǒ)總結的,沒有人給出過具體(tǐ)定義)。技術優化指的是代碼的優化、目錄 結構的優化和針對搜索引擎的優化等等針對技術方面的優化工(gōng)作,一(yī)般都是看不見摸不着的但是會給用戶帶來不少方便也會給網站帶來更大(dà)的效益,技術優化有一(yī)定 的模式而且需要優化的東西也比較固定相對簡單一(yī)些隻是時間問題;人文優化指的是交互性優化、易用性優化等等針對用戶使用方面的優化工(gōng)作,這一(yī)部分(fēn)是網站用 戶看得見摸的着的東西,人文優化是最花經曆最困難的因爲我(wǒ)們要猜測使用者的心理。下(xià)面我(wǒ)就分(fēn)别對這兩個方面進行解釋。
1.技術優化:
技術優化主要分(fēn)爲代碼優化、目錄結構優化和針對搜索引擎的優化三個部分(fēn)。這一(yī)部分(fēn)的優化工(gōng)作主要是由網站開(kāi)發人員(yuán)測試提出方案完成的,而且有一(yī)定的規則,所以相對要簡單一(yī)些隻是時間問題。
(1)代碼優化:
代碼優化主要解決的問題就是頁面浏覽速度和适應性的問題。文字和圖片是構成頁面的兩個主要因素,所以我(wǒ)們的優化也要從文字和圖片開(kāi)始。文字我(wǒ)們在制作頁面 的時候基本上都是定義好的一(yī)般使用宋體(tǐ)和12px,随着代碼的标準化字體(tǐ)的樣式大(dà)小(xiǎo)等等的指定應該使用css樣式表來完成,而現在被廣泛應用的< h1 >< /h1 >、< font size=×× color=×× >< /font >等等标簽都是不标準的,也會慢(màn)慢(màn)被css取代,現在很多大(dà)型的網站包括各個門戶網站像是這樣不标準的問題還是廣泛存在幾乎每個頁面都會有,所以 css樣式表是我(wǒ)們在優化過程中(zhōng)應該注意檢查的問題(其實這個問題應該是在頁面制作的時候就解決的)。圖片問題主要存在size過大(dà)的問題,在這裏我(wǒ)們把 圖片的優化歸在代碼優化一(yī)部分(fēn)一(yī)起介紹而不另分(fēn)一(yī)類,是因爲圖片優化與代碼内容優化的目的是一(yī)樣的。網頁中(zhōng)一(yī)般應用兩種格式的圖片jpeg和gif,這兩 種圖片的應用很多人把握的并不是很好,jpeg适用于顔色比較多、構成比較複雜(zá)的圖片(比如一(yī)些照片、漸變顔色等等),gif适用于顔色比較少、構成比較 簡單的圖片(比如網站的logo、大(dà)的色塊構成的圖片等等)。Gif圖片尤其要注意導出的時候選擇顔色數目這樣也會達到很好的減小(xiǎo)尺寸的效果。對于一(yī)些比 較大(dà)的圖片我(wǒ)們還可以将它切割成比較小(xiǎo)的圖片進行拼接這樣也可以提高網頁的下(xià)載速度。減小(xiǎo)網頁size提高網頁下(xià)載速度還有一(yī)種簡易的方法就是使用一(yī)些網 頁減肥的小(xiǎo)工(gōng)具,我(wǒ)們可以去(qù)下(xià)載一(yī)些這樣的工(gōng)具他們可以使你的網頁縮小(xiǎo)20%~50%達到事半功倍的效果。表格是頁面最重要的排版方式,在浏覽器讀取網頁 代碼的時候,必須讀完一(yī)個完整的table才會顯示出來,
如果一(yī)個大(dà)的table裏邊含有很多小(xiǎo)的table那麽浏覽器會在讀完整個大(dà)的table才将整個的内容顯示出來。我(wǒ)們在浏覽一(yī)些頁面的時候經常會出現頁 面半天才會顯示出來,最後是在等不及了按了"停止"按鈕,頁面一(yī)下(xià)子顯示出來了,這就是在一(yī)些小(xiǎo)的table外(wài)邊嵌套了一(yī)個大(dà)的table,而小(xiǎo) table已經讀完了就是還沒讀完整個的table浏覽器不會顯示,這樣會大(dà)大(dà)減慢(màn)頁面浏覽速度。因此我(wǒ)們要盡量減少表格層次,盡量避免将一(yī)些小(xiǎo)的表格嵌 套在大(dà)的表格中(zhōng)間。還應該注意的是在使用dreamweaver制作網頁的時候經常會出現很多垃圾代碼,注意檢查删除一(yī)些沒有用的代碼。網頁的适應性就是 在不同系統、不同浏覽器和不同分(fēn)辨率的适應能力。要注意的是分(fēn)辨率,應該最低照顧到800×600的用戶(分(fēn)辨率800×600的顯示尺寸780× 428、分(fēn)辨率1024×768的顯示尺寸1007×600),所以頁面最寬不要超過780,一(yī)定不要讓用戶橫向拖頁面。
如果一(yī)個大(dà)的table裏邊含有很多小(xiǎo)的table那麽浏覽器會在讀完整個大(dà)的table才将整個的内容顯示出來。我(wǒ)們在浏覽一(yī)些頁面的時候經常會出現頁 面半天才會顯示出來,最後是在等不及了按了"停止"按鈕,頁面一(yī)下(xià)子顯示出來了,這就是在一(yī)些小(xiǎo)的table外(wài)邊嵌套了一(yī)個大(dà)的table,而小(xiǎo) table已經讀完了就是還沒讀完整個的table浏覽器不會顯示,這樣會大(dà)大(dà)減慢(màn)頁面浏覽速度。因此我(wǒ)們要盡量減少表格層次,盡量避免将一(yī)些小(xiǎo)的表格嵌 套在大(dà)的表格中(zhōng)間。還應該注意的是在使用dreamweaver制作網頁的時候經常會出現很多垃圾代碼,注意檢查删除一(yī)些沒有用的代碼。網頁的适應性就是 在不同系統、不同浏覽器和不同分(fēn)辨率的适應能力。要注意的是分(fēn)辨率,應該最低照顧到800×600的用戶(分(fēn)辨率800×600的顯示尺寸780× 428、分(fēn)辨率1024×768的顯示尺寸1007×600),所以頁面最寬不要超過780,一(yī)定不要讓用戶橫向拖頁面。
(2)目錄結構優化:
現在很多網站都将所有的頁面零散的放(fàng)在同一(yī)個文件夾下(xià)而沒有分(fēn)類,這樣做雖然可以但是會對以後的維護等工(gōng)作帶來很大(dà)的麻煩。我(wǒ)建議應該是建立一(yī)個大(dà)文件 夾,裏邊包括各個頻(pín)道的文件夾、網頁頁面圖片文件夾、網頁内容圖片文件夾等等一(yī)個一(yī)個的單獨類别的文件夾,使得在維護時候可以方便的找到每一(yī)個頁面的具體(tǐ) 位置。
(3)針對搜索引擎的優化:
搜索引擎優化是很多人都知(zhī)道的一(yī)種優化項目,也是完整的優化工(gōng)作必不可少的一(yī)個步驟。
"關鍵字"在搜索引擎這個話(huà)題裏是一(yī)個核心的字眼,幾乎所有的針對搜索引擎優化問題都是圍繞着"關鍵字"展開(kāi)的。有很多人盲目的追求在網頁中(zhōng)處處體(tǐ)現關鍵 字,覺得這樣就會更容易被搜索引擎搜到,其實這樣做并不一(yī)定合适。比如前一(yī)陣子流行過的"鬼影秘笈",方法就是用和網頁背景相同的顔色在頁面中(zhōng)隐藏了很多 關鍵字,很多人現在還在用這個方法,但是随着搜索引擎功能越來越強大(dà)這個方法已經不那麽好用了,甚至會起到反作用。"關鍵字"的體(tǐ)現要合理,比如我(wǒ)們可以 制作一(yī)個"網站導航"的頁面,網站導航頁面會淋漓盡緻的體(tǐ)現各個關鍵字,這個頁面不但方便用戶使用也會更容易的被搜索引擎找到起到事半功倍的作用。
随着搜索引擎都有了圖片搜索功能,網頁裏邊的圖片也是體(tǐ)現關鍵詞的好地方,在頁面裏邊加入圖片後千萬别忘記給圖片起一(yī)個"名字"(如:< IMG SRC="images.gif" WIDTH="100" HEIGHT="100" BORDER=0 ALT="圖片名稱" >)我(wǒ)們給圖片的名稱就可以是關鍵字。域名裏邊含有關鍵字也很重要,但是不宜過多,一(yī)般一(yī)個或者兩個最重要的就可以了,如果過多就會影響網站在搜索 引擎的排名而且不方便用戶記憶。子頁面的名稱也是一(yī)樣,現在很多網站的子頁面名稱就是關鍵字的堆砌,其實這樣會降低每個關鍵詞的出現機率,結果每個關鍵詞 都被打了折扣甚至被忽略适得其反。
在子頁面的命名上也有很大(dà)的學問,幾個關鍵詞構成了子頁面的名稱,但是這幾個關鍵詞用什麽連接呢?如果用分(fēn)隔符斷開(kāi)關鍵字那麽搜索引擎不會認爲他們是一(yī)個 一(yī)個的詞而會當他們是一(yī)個詞處理,但是有的分(fēn)隔符搜索引擎同樣認不出來,比如"_"和"-"在google裏邊下(xià)劃線"_"就不被接受,所以建議大(dà)家使用 "-"和空格(空格碼:%20),一(yī)般所有的搜索引擎都會接受。千萬不要用中(zhōng)文給頁面命名,頁面名稱、圖片名稱等等都要用英文字母(如:"首頁. html"或者"圖片.gif"一(yī)定要寫成"index.htm""image.gif" 等等)。
現在很多網頁雖然很好看但是并不實用,我(wǒ)們就拿現在很流行的跳轉頁面來說吧!現在很多企業網站都流行做一(yī)個跳轉頁面,或者是一(yī)段動感的flash或者是一(yī) 張漂亮的圖片,他們認爲這樣很漂亮特别能夠體(tǐ)現公司的形象,其實他們并不知(zhī)道這樣做非常影響搜索引擎搜索你的網站。
2.人文優化:
人文優化主要是交互、易用性和網站表現的優化。我(wǒ)曾經看過一(yī)本書(shū)是美國著名的優化大(dà)師斯蒂夫.克魯格寫的,他推崇的效果優化第一(yī)原則就是"别讓我(wǒ)動腦"。 也許這個概念看上去(qù)好像一(yī)點頭緒沒有,我(wǒ)第一(yī)次接觸這句話(huà)的時候也是有點暈,如果想要做到這一(yī)點那可是非常困難的。"别讓我(wǒ)動腦"這個概念在不同的人身上 有着不一(yī)樣的概念,這就回到了上邊所說的"人文優化是最花經曆最困難的因爲我(wǒ)們要猜測使用者的心理"這句話(huà)。人和人是不一(yī)樣的,每個人會因爲生(shēng)活的地域不 同有着文化差異,或者因爲受到的教育經曆不同有着理解問題的差異,或者是個人觀點和習慣的不同等等有着各種各樣的差異,我(wǒ)們要讓所有人都能夠理解我(wǒ)們的網 站能夠方便的使用網站達到他想要達到的目的這簡直是太難了,而人文優化要做的就是要把這些差異變爲統一(yī)。
各個網站都會有不同的目的,有電子商(shāng)務網站、企業的展示網站、個人站點等等。現在我(wǒ)們就以最最需要進行人文優化的電子商(shāng)務類型網站爲例研究人文優化的大(dà)概 過程。電子商(shāng)務網站這個概念很明确,就是要體(tǐ)現商(shāng)務,可以是網上購物(wù)的、可以是在線票務的、可以是網上的交易平台,總之就是讓用戶在網絡上實現商(shāng)務目的。 現在電子商(shāng)務網站大(dà)體(tǐ)會有兩個部分(fēn)B2B(商(shāng)家對商(shāng)家)、B2C(商(shāng)家對普通零散用戶),B2C是電子商(shāng)務網站設計的最高境界,如果能夠做出成功的B2C 網站那麽别的什麽企業展示網站或者B2B的商(shāng)務網站等等就都不算什麽了,原因也很簡單,就是因爲上邊所提過的人和人的差異。電子商(shāng)務網站有一(yī)個很重要的指 标就是"轉化率"(也就是上網浏覽網頁的浏覽者轉變爲顧客的比率)。這個概念也就是我(wǒ)們衡量一(yī)個電子商(shāng)務網站是否成功的重要指标,他也在優化過程中(zhōng)占有重 要地位。介紹完電子商(shāng)務的一(yī)些相關概念我(wǒ)們言歸正傳,當我(wǒ)們要對網站進行優化的時候,我(wǒ)們很快的就完成技術優化,因爲技術優化有特定的步驟需要優化的項目 也比較固定而且有據可依。
但是很多人不知(zhī)道人文優化該如何入手,其實也很簡單那就是"試用",一(yī)般試用會分(fēn)爲兩個部分(fēn):首先我(wǒ)們會自己試用一(yī)下(xià)對網站有一(yī)個大(dà)概的了解,然後我(wǒ)們需 要找一(yī)些普通用戶進行試用,在普通用戶試用過程中(zhōng)我(wǒ)們不會給予任何提示隻需要默默的觀察他們的操作步驟記錄每一(yī)個步驟的操作過程和所用時間了解他們的一(yī)些 想法。在"試用"以後我(wǒ)們就可以根據測試的結果分(fēn)析出需要修改的部分(fēn)。切記在試用過程中(zhōng)我(wǒ)們千萬不能給被測試的用戶任何提示盡量不要打擾他們。說回上邊提 到的"别讓我(wǒ)動腦"這個概念,其實這句話(huà)就表達了一(yī)個意思就是"簡單",使用簡單是一(yī)個電子商(shāng)務網站成功的基礎。"簡單"宗旨我(wǒ)們需要貫穿整個網站的每一(yī) 個部分(fēn)。
下(xià)邊我(wǒ)們按照"試用"流程分(fēn)析一(yī)下(xià)在優化過程中(zhōng)需要注意的問題。從登陸這個網站開(kāi)始,我(wǒ)們是不是能夠清楚的看到這個網站叫什麽名字?是幹什麽的?那裏是産 品的目錄?那裏是導航菜單?那裏是今天的重點推薦産品?那裏是折扣産品專區?這一(yī)連串的問号是針對電子商(shāng)務網站而言的,如果對于别的網站我(wǒ)們會考慮别的因 素,比如針對一(yī)個新聞頁面而言,我(wǒ)們就會考慮那裏是今天的頭條新聞?我(wǒ)要看昨天晚上中(zhōng)國隊足球賽的比分(fēn)和圖片在那裏?等等。這種測試并沒有特定的規範,任 何動作都是随機的都是我(wǒ)們突發的動作,所以這樣的測試不能像是那種商(shāng)場或者專賣店(diàn)等等地方的測試一(yī)樣給我(wǒ)們一(yī)個很長的表格讓我(wǒ)們去(qù)畫對勾畫杈子。一(yī)切測試 做的都要非常自然,隻有這樣我(wǒ)們才可以真正了解到用戶在使用過程中(zhōng)遇到的困難。我(wǒ)們有的時候也可以給被測試人一(yī)個題目讓他去(qù)完成,比如:讓他去(qù)網站上買一(yī) 張最新的大(dà)片DVD,或者然他們去(qù)查找一(yī)個最新的消息甚至是一(yī)條一(yī)個月以前的消息。整個測試都要在和諧的環境下(xià)進行,不要讓參與測試的人感到緊張,那樣會 大(dà)大(dà)降低測試結果的正确性。測試還需要根據經費(fèi)、網站規模等等情況制訂不同的方案。
下(xià)面是一(yī)個用戶浏覽一(yī)個網站的過程圖,這張圖有助于我(wǒ)們了解用戶浏覽網站的整個過程。我(wǒ)們可以根據這張圖列出的步驟細心觀察測試時候用戶在網站上完成一(yī)個 工(gōng)作時候在每一(yī)個步驟裏所用的時間、都做了些什麽,并記錄下(xià)來認真分(fēn)析這些數據,這些數據也是我(wǒ)們優化動作的依據。
我(wǒ)們先看一(yī)個大(dà)多數網站都會犯下(xià)的文字錯誤,文字是構成網頁的最重要的元素之一(yī),我(wǒ)們文字可以用文字的顔色、大(dà)小(xiǎo)和位置來區分(fēn)他們的重要性,分(fēn)爲标題、内 容等等。有很多網站的首頁進去(qù)我(wǒ)們一(yī)眼看到的是黑壓壓的一(yī)片文字,馬上我(wǒ)們會對這個網站都沒有好感。這就是我(wǒ)們國内很多網站都有的錯誤,網站會因不同的目 的有不同的設計方向,很多企業的領導者并不懂得設計,他們會去(qù)參考一(yī)些别人的網站來對設計者提出自己網站的設計要求和想法,這樣就會造成不管什麽方向的網 站感覺都一(yī)樣,從而失去(qù)了自己的主題。
比如現在我(wǒ)們去(qù)一(yī)些企業的網站,上去(qù)之後沒看到這個企業是幹什麽的,第一(yī)眼就是大(dà)片的企業新聞,這樣的大(dà)片新聞感覺企業網站變成了新聞網站。有人說了那我(wǒ) 們把企業介紹放(fàng)在首頁吧,這樣一(yī)上網站的首頁人家就看見我(wǒ)們公司是做什麽的了。看上去(qù)真是好主意,但是我(wǒ)們應該明确一(yī)點用戶是在"浏覽網頁"而不是在"閱 讀網頁",這樣大(dà)片的文字根本不會有人有興趣看,用戶隻會對自己感興趣的東西進行閱讀,其它基本上都是浏覽。
我(wǒ)們可以作一(yī)個簡單的試驗,現在你可以遞給你身邊的一(yī)個人一(yī)張報紙(zhǐ),讓他們看報紙(zhǐ),細心觀察一(yī)下(xià)他們怎麽看報紙(zhǐ),每一(yī)個人都會整個把報紙(zhǐ)翻一(yī)下(xià),起碼他會 看完一(yī)整版的标題然後開(kāi)始閱讀一(yī)個文章。絕對沒有人會拿起報紙(zhǐ)從左上角或者右下(xià)角開(kāi)始一(yī)個字一(yī)個字的閱讀報紙(zhǐ)。網站的好處就是在于"鏈接",我(wǒ)們可以充分(fēn) 的利用鏈接引導用戶閱讀他們感興趣的東西,或者引導他們閱讀我(wǒ)們希望他看見的東西。我(wǒ)們現在就可以去(qù)優化一(yī)下(xià)以前的網站了,去(qù)掉首頁大(dà)片的文字,根據需要 改成鏈接。
還有一(yī)個各個商(shāng)業網站都會犯下(xià)的錯誤,就是在讓客戶填寫注冊信息的時候需要必填的欄目太多。很多上網的人都有這樣的經曆,現在大(dà)多說商(shāng)務網站都會有注冊一(yī) 欄,如果注冊成爲會員(yuán)就會有什麽什麽樣的服務,很好我(wǒ)們進去(qù)注冊一(yī)下(xià)吧。點擊注冊按鈕,打開(kāi)頁面,好家夥怎麽要天那麽多條,還都是畫着紅色星号的必填!算 了還是不注冊了!一(yī)下(xià)子這個網站會因爲注冊少了很多顧客。
有的人沒被吓跑堅持填寫,好吧開(kāi)始填寫了用戶名、密碼、确認密碼……"身份證号碼"?"手機号碼"?一(yī)下(xià)子我(wǒ)們停住了,不填這些可以麽?但是畫着紅色星 号,算了我(wǒ)不想讓别人知(zhī)道這些信息,我(wǒ)也走吧,看看别的網站有沒有同樣的服務而且需要的信息少一(yī)點,盡管别的網站服務不好而且不如這個網站有名氣。這就是 很多人上網的經曆,很多網站的擁有者急于求成,想馬上控制到客戶的資(zī)料,他們會覺得這樣就會占到市場的先機。其實他們錯了,想一(yī)下(xià)我(wǒ)們先讓用戶都來使用我(wǒ) 們的網站慢(màn)慢(màn)的他們覺得我(wǒ)們這裏很安全而且服務很好就會有人想得到更多的服務,他們自然而然的就會注冊這些信息了。
但是我(wǒ)們在用戶還沒有了解這個網站的時候就把他們吓跑了我(wǒ)們就會徹底的失去(qù)這部分(fēn)用戶的,這樣給網站和企業帶來的損失要遠遠大(dà)于那些不管怎麽都會注冊的用 戶帶來的利益要大(dà)。所以當我(wǒ)們在優化過程中(zhōng)看到網站的注冊過程中(zhōng)有這些欄目的時候我(wǒ)們要建議他們把必填改爲自願填寫,而且在一(yī)些關鍵頁面裏邊添加一(yī)些關于 注冊客戶和普通客戶會享受不同待遇的提示,這樣會起到事半功倍的作用。
我(wǒ)們已經介紹了兩個關于人文優化的例子,由于這樣的例子很多我(wǒ)們也不一(yī)一(yī)列舉,要在實際的工(gōng)作中(zhōng)去(qù)總結。并不是最好看的網頁就是最好的網頁,實用性要比藝術性更重要。
上邊這些優化的問題适用于我(wǒ)們對一(yī)個已有的網站進行優化,如果我(wǒ)們要重新做一(yī)個新的網站,最好在初期就考慮一(yī)些這樣的問題,畢竟做任何事事先考慮要比事後 彌補強的多。這些緊緊是我(wǒ)自己的一(yī)些經驗總結和大(dà)家分(fēn)享,文章還有很多不足之處,希望大(dà)家多多提點!我(wǒ)的QQ:250596以後多多交流!希望大(dà)家都能夠 做出最棒的網站,提高中(zhōng)國網站設計制作行業在世界的地位!