直播中
當(dāng)然,這里有太多的不確定因素影響網(wǎng)頁(yè)最后呈現(xiàn)的結(jié)果。首先,計(jì)算機(jī)的顯示器有不同的分辨率和顯示質(zhì)量,其次,運(yùn)行著各種各樣的操作系統(tǒng),使用著不通版本的WEB瀏覽器 ,不同INTERNET連接方式和各種速度的MODEM。我們不能想當(dāng)然的去武斷地判定瀏覽者的喜好。我們還是花點(diǎn)時(shí)間來(lái)測(cè)試頁(yè)面,這樣可以讓每一個(gè)訪問(wèn)者感到愉快。然而,遺憾的是我們沒有辦法為每一個(gè)訪問(wèn)者來(lái)優(yōu)化頁(yè)面,但是下面講述的幾個(gè)步驟將有助于您保證大多數(shù)訪問(wèn)者的瀏覽效果。
1、確定受眾。
一般的來(lái)說(shuō),絕大多數(shù)普通受眾圖形,插件,applets和其它有關(guān)的高級(jí)Web瀏覽器特性。對(duì)我們來(lái)說(shuō),頁(yè)面的實(shí)用可能比漂亮更重要,對(duì)于用戶來(lái)說(shuō),沒有什么比頁(yè)面能夠快速下載更重要了,簡(jiǎn)而言之,精簡(jiǎn)你的站點(diǎn),這是一條最佳的捷徑。
波士頓一位圖形設(shè)計(jì)者兼美術(shù)講師說(shuō):"你必須考慮什么,這一切都應(yīng)該來(lái)自自于你的觀眾"!
為了讓每個(gè)人滿意,一個(gè)站點(diǎn)的實(shí)用比漂亮更加重要。并且首先,它必須能夠快速的被用戶端的較老版本的瀏覽器快速解釋。簡(jiǎn)化你的站點(diǎn),然而,那未必是最好的辦法。
考慮一下站點(diǎn)訪問(wèn)者的操作系統(tǒng),監(jiān)視器,瀏覽器,和的連接類型。然后,想想理論上他們需要從你的站點(diǎn)獲得什么?他們是想獲得連接還是需要實(shí)際的內(nèi)容?如果是普通的站點(diǎn)是否會(huì)失望,是否需要為瀏覽下載特別的插件。有一個(gè)竅門就是沒有必要為每一個(gè)人優(yōu)化你的站點(diǎn),要滿足每一個(gè)訪問(wèn)者顯然不可能,你必須為訪問(wèn)者采取適當(dāng)?shù)募夹g(shù)。
2、不要依賴圖形。
就站點(diǎn)設(shè)計(jì)而言,的確能夠通過(guò)成功的圖形設(shè)計(jì)招徠或者丟失訪問(wèn)者。并非所有的訪問(wèn)者可以完全看到圖片,某些人為了加快存取網(wǎng)絡(luò)的速度已經(jīng)關(guān)閉了瀏覽器端的圖形。簡(jiǎn)而言之,圖形并不能正確的在客戶端加載。
然而,圖形經(jīng)常被用來(lái)作為導(dǎo)航按鈕。舉例來(lái)說(shuō),訪問(wèn)者經(jīng)常按向左的箭頭返回上一頁(yè),或者一個(gè)包含問(wèn)號(hào)的圖形可以得到更多的信息,或者按公司的標(biāo)志(LOGO)會(huì)告訴用戶公司的地址和電話號(hào)碼。圖形映射(IMAGE MAP)允許你按圖像的不同區(qū)域連接到不同的地方,這個(gè)經(jīng)常被用來(lái)用作站點(diǎn)地圖,你給訪問(wèn)者提供站點(diǎn)內(nèi)容指引。但是如果你僅僅通過(guò)圖片來(lái)提供站點(diǎn)導(dǎo)航的話,某些訪問(wèn)者將不能完全或者正確的離開你的站點(diǎn)。
總是告訴用戶你的站點(diǎn)需要什么樣類型的技術(shù)才能正確瀏覽你的網(wǎng)站是一個(gè)非常愚笨的方法。如果訪問(wèn)者需要安裝插件才能處理,如果你僅僅給出一個(gè)連接讓訪問(wèn)者去下載。這個(gè)自認(rèn)為非??岬捻?yè)面對(duì)用戶來(lái)說(shuō)根本不是什么幽默的事情,這是和用戶的期待所恰恰相反的。至于為什么恰恰相反,希望你能反思一下,如果是你,你會(huì)為了瀏覽一個(gè)你根本不知道什么樣的站點(diǎn)而去下載一堆你不知道的插件么?
如何解決這個(gè)矛盾呢?你可能想到的解決方法有二種:一個(gè)是單純的文本,另外就是完全的圖形方式。其實(shí)不然。如果你使用一個(gè)圖形映射的方式給內(nèi)容列表,可以在該頁(yè)的最后使用一個(gè)純文本方式的表格來(lái)處理,這樣會(huì)好很多。如果使用圖形按鈕,最好還是包括簡(jiǎn)單的導(dǎo)航文字提示。
大多數(shù)的時(shí)候,通常我們要養(yǎng)成使用"ALT"標(biāo)記的習(xí)慣,這樣當(dāng)圖形未能正確顯示的時(shí)候可用預(yù)備的文本替代顯示。這樣,用戶至少可以看到關(guān)于這個(gè)圖形的表述,便知道這個(gè)圖形究竟意味著什么。舉例來(lái)說(shuō)某個(gè)圖象標(biāo)記的預(yù)備文本就可以這樣寫:
< IMG SRC="Cat.gif" ALT="一只憂郁的貓!">
使用"ALT"標(biāo)記也有另外一個(gè)好處。文字將顯示在圖象的上面,這樣會(huì)給用戶造成一個(gè)頁(yè)面快說(shuō)引導(dǎo)的感覺。[page]
3、保持頁(yè)面小巧。
這個(gè)小節(jié)我們談?wù)摰氖顷P(guān)于圖形的處理。最好的方法是我們呼吁廣大的讀者保持讓圖形文件的尺寸盡量的小。即使是那些僥幸擁有快速Internet連接的用戶,他們不會(huì)抱怨說(shuō)你的站點(diǎn)加載速度太快。
第一個(gè)基本原則是讓每一個(gè)圖形文件的尺寸小于30KB。這絕對(duì)不是一個(gè)壞的建議。更"極端"的某些頁(yè)面設(shè)計(jì)專家說(shuō),保持整個(gè)頁(yè)面的尺寸大概在30KB, 40KB左右(也就是包含圖形和文本以及其它多媒體對(duì)象之后的整個(gè)頁(yè)面)才是比較合適的。并忠告我們"千萬(wàn)不要使用非常大的頁(yè)面"。
要保持頁(yè)面尺寸小巧,花些時(shí)間來(lái)處理一下圖形,在保證圖形質(zhì)量的情況下使用盡量高的壓縮比例,讓圖形盡量的小。
另外,讓圖形使用較少的色彩也是一個(gè)讓圖形盡量小的辦法。使用單調(diào)的顏色比使用梯度的顏色要好。使用梯度顏色可以在瀏覽器端快速填充顏色調(diào)色板供客戶端顯示。此外,減少圖形的色彩深度進(jìn)而可以使用較少的色彩樹也是可以的。
如果你需要提供較大的圖象和多媒體文件,盡量不要插入頁(yè)面里面,提供一個(gè)連接就可以了。這樣,如果使用快速的連接點(diǎn)擊圖象就可以立刻看到,低速的連接不看圖象也可以看到他最關(guān)心的內(nèi)容,瀏覽感覺上沒有什么延遲是最好的。
4、不要假設(shè)用戶的顯示器和分辨率大小。
一個(gè)常見的錯(cuò)誤的是好多的網(wǎng)頁(yè)設(shè)計(jì)師都認(rèn)為訪問(wèn)者都有一個(gè)他們一樣顯示效果良好的大屏幕顯示器。按照目前的狀況,你可以為你的站點(diǎn)優(yōu)化設(shè)計(jì)為標(biāo)準(zhǔn)的800×600分辨率,這是現(xiàn)在主流顯示器的的默認(rèn)顯示分辨率。
搜索引擎,比如Excite,我們可以發(fā)現(xiàn)一些為增加大量用戶訪問(wèn)量的好主意。舉例來(lái)說(shuō),多使用表格單元格顏色填充。該頁(yè)的網(wǎng)頁(yè)設(shè)計(jì)師為該網(wǎng)頁(yè)添加了背景色,這樣用戶就不會(huì)在感覺上覺得下載頁(yè)面耗費(fèi)的時(shí)間過(guò)多。另外,大多數(shù)的顯示器只能顯示256色,而不是設(shè)計(jì)師所使用的真彩上百萬(wàn)種顏色設(shè)置。瀏覽器能顯示的顏色在瀏覽器"安全色彩范圍",即256色以內(nèi)。后面我們將詳細(xì)討論這個(gè)問(wèn)題。
5、小心使用插件(plug-ins)和Applets。
突出交互性或者多媒體特性的站點(diǎn)通常使用plug-ins和applets。Plug-ins是Web瀏覽器功能的擴(kuò)展。瀏覽者如果安裝了Plug-ins,他們就能夠運(yùn)行不同類型的文件,比如動(dòng)畫,視頻和音頻。Applets是小的程序片斷或者是工具,經(jīng)常用Java語(yǔ)言編寫,可以借助諸如瀏覽器這樣的大型程序完成一些有用的功能。
雖然plug-ins和applets能大大增強(qiáng)站點(diǎn)的交互性和多媒體性能,但是對(duì)于一些較老配置的機(jī)器來(lái)說(shuō),這無(wú)疑又是一個(gè)多余的功能。舉例來(lái)說(shuō),Java applets僅能工作在32位的操作系統(tǒng)下,Windows 3.x就行不通(雖然現(xiàn)在很少有人使用了)。另外,plug-ins需要花費(fèi)時(shí)間下載安裝,但并不是每一個(gè)用戶都能熟練的完成下載后安裝這樣一個(gè)過(guò)程。不熟練的用戶安裝plug-ins的時(shí)候可能會(huì)遇到故障,不熟練的用戶不需要這樣的煩惱。
如果你判斷你的受眾可以安裝plug-ins和applets,你必須要在相關(guān)的部分提示用戶,下載plug-ins和applets的時(shí)間和地址,并且安裝過(guò)程中需要注意哪些方面的內(nèi)容。這樣可以方便用戶的使用。如果是非常重要的信息,建議你提供一個(gè)可用的如純文本型的可用信息,以方便那些確實(shí)無(wú)法安裝plug-ins和applets的訪問(wèn)者。
6、僅僅在需要的時(shí)候使用幀(FRAME)。
使用幀可以把一個(gè)瀏覽器分成幾個(gè)不同的窗口,對(duì)于站點(diǎn)的結(jié)構(gòu)的把握是一個(gè)不錯(cuò)的方法。但是,你還是必須知道,還是有人在使用不支持幀的瀏覽器。在你開始打算設(shè)計(jì)一個(gè)幀的時(shí)候,你該仔細(xì)的考慮考慮你是否的確真的需要。經(jīng)常,你這樣的需求可以通過(guò)表格來(lái)組織站點(diǎn)的結(jié)構(gòu)。當(dāng)然,有些特別特別老的瀏覽器的確連表格也不支持。哎,這樣說(shuō)來(lái),我們似乎真的是沒有辦法了。
如果你必須使用幀,設(shè)法為還在使用那些古董瀏覽器的用戶提供其它的解決辦法。最壞的打算就是,如果真的沒有辦法解決,給這些用戶一些道歉的信息,不要讓他們感覺到你忽視了他們的存在。[page]
7、不要忘記Web瀏覽器。
你應(yīng)該知道,最終的瀏覽者有很多的方法可以控制網(wǎng)頁(yè)在客戶端瀏覽器的顯示效果(包括字體大小,顏色等等),不過(guò)從市場(chǎng)占有率來(lái)看,網(wǎng)景公司的航海家(Navigator)相比微軟公司的探險(xiǎn)家(Internet Explorer)的份額正逐漸減小。
對(duì)一個(gè)指定的站點(diǎn)來(lái)說(shuō),如果考慮到某些訪問(wèn)者不喜歡使用圖形方式的導(dǎo)航條,測(cè)試的時(shí)候你就需要關(guān)閉圖形顯示。所以,在制作的時(shí)候,你就必須要考慮到大部分(不是全部,當(dāng)是至少應(yīng)該考慮到導(dǎo)航條圖形)的圖形必須要使用文字提示,這樣即使在瀏覽者客戶端不顯示導(dǎo)航圖片的時(shí)候還有文字給予適當(dāng)?shù)奶崾?,這樣的感覺,會(huì)好很多,至少面對(duì)無(wú)法顯示圖形的紅叉而言,這樣的文字提示就給人以友好的感覺二不至于無(wú)所適從。
事實(shí)上,微軟公司出品的WEB探險(xiǎn)家和美國(guó)Netscape公司航海家已經(jīng)有越來(lái)越多的相似之處了,其實(shí),早在一年前,他們之間的兼容已經(jīng)不是一個(gè)大問(wèn)題了。但是在細(xì)節(jié)上還是有區(qū)別的,某些在某個(gè)瀏覽器看上去的效果用另外一個(gè)瀏覽器看就完全不是那么一回事了。你可以理解這些差別,但是你無(wú)法支配他,不同的瀏覽器看上去就是不同,就象不同的人眼里的某個(gè)人各自會(huì)有不同的印象一樣。你所需要的,就是知道他們存在差別,你應(yīng)該盡量的去避免使用導(dǎo)致巨大差別的代碼或者方法。
好消息是,這二個(gè)瀏覽器都可以免費(fèi)下載,對(duì)用戶來(lái)說(shuō),完全可以嘗試用二個(gè)瀏覽器去看看你的站點(diǎn)有什么不同的瀏覽感受,選擇的權(quán)利在于瀏覽者,而你作為站點(diǎn)設(shè)計(jì)者,要做的只是去傾聽瀏覽者可能的反饋。壞消息就是,你不能控制訪問(wèn)者使用什么樣的瀏覽器,或者額外的去改變?yōu)g覽器窗口的大小,設(shè)置字體類型、顏色和大小。你能作的就是當(dāng)訪問(wèn)者不能訪問(wèn)某些部分的時(shí)候建議他們使用什么樣的配置,怎么樣看你的站點(diǎn),這樣他們就可以使用默認(rèn)的設(shè)置或者你建議的瀏覽器。
8、保持蘋果和PC格式兼容。
很多的頁(yè)面在蘋果環(huán)境中設(shè)計(jì)而瀏覽者使用的確是PC。對(duì)大部分頁(yè)面來(lái)說(shuō),這個(gè)理由。實(shí)際上,瀏覽器比操作系統(tǒng)更多的影響站點(diǎn)的瀏覽效果。有一個(gè)需要指出的事實(shí),在IBM兼容PC機(jī)上看到的圖片似乎比蘋果機(jī)上的小,而且顏色稍深。如果你的站點(diǎn)圖形大部分在蘋果機(jī)上設(shè)計(jì),建議在發(fā)布之前,在PC機(jī)上進(jìn)行預(yù)覽,看是否有較大的效果差異。
蘋果機(jī)和PC上顯示的同樣的顏色在某種程度上看上去往往有些差別。說(shuō)的更精確些就是我們?cè)缜疤岬降年P(guān)于調(diào)色板的區(qū)別在起著決定性的作用。這二個(gè)不同的平臺(tái),有216個(gè)通用的顏色,所以,網(wǎng)頁(yè)設(shè)計(jì)師在設(shè)計(jì)的時(shí)候盡量使用這通用的216色就可以最大程度的保證這二個(gè)平臺(tái)的頁(yè)面色彩顯示效果基本一致。
9、測(cè)試、測(cè)試、再測(cè)試!
不要為我的羅嗦而感到厭煩。為了保證在眾多的瀏覽者瀏覽器里面能正確的看到我們所想表達(dá)的頁(yè)面效果,所以正式發(fā)布站點(diǎn)之前的測(cè)試顯得非常的重要,是重中之重。從你自己的電腦開始,一遍又一遍的開始測(cè)試,使用不同的瀏覽器,試著調(diào)整瀏覽器窗口的寬度和高度,關(guān)閉圖形顯示,試著使用不同的顯示分辨率。然后,在朋友、同事甚至鄰居的電腦上重復(fù)剛才作過(guò)的事情。
有專業(yè)的網(wǎng)頁(yè)設(shè)計(jì)師建議我們將測(cè)試工作交給熟識(shí)的普通的用戶去進(jìn)行,因?yàn)檫@樣才符合大多數(shù)的使用者的習(xí)慣,而且這些用戶使用的瀏覽器版本較老,這樣可以保證最終用戶的瀏覽效果。有必要強(qiáng)調(diào)這一步的重要性。在辦公室里面,我們經(jīng)??梢钥吹揭恍┧坪跏亲鳛辄c(diǎn)綴使用的古老的機(jī)器(幾乎能見證電腦的發(fā)展歷史),我們不妨用作我們的測(cè)試機(jī)器,似乎更能體現(xiàn)這些古董機(jī)器的價(jià)值。而這些古董機(jī)器得出的測(cè)試結(jié)果,往往比我們使用的專業(yè)的設(shè)計(jì)師所有的電腦測(cè)試的效果更加客觀,更加具有代表性。
10、可以通知你的訪問(wèn)者了。
即使我們作了上面我們要作的一切工作,你必須明白,我們還是無(wú)法保證這個(gè)精心設(shè)計(jì)的站點(diǎn)能讓每一個(gè)訪問(wèn)者都有很好的顯示效果。如果你在首頁(yè)上明確指出瀏覽你的站點(diǎn)需要具備什么什么樣的條件,你必須明白并非所有的用戶都能具備你所要求的條件。你可以為這些不能滿足你認(rèn)為的基本條件的用戶一個(gè)另外的選擇,這樣可以讓他們知道你并沒有忽視他們。你可以告訴他們?nèi)绾瓮ㄟ^(guò)電話,書信或者電子郵件的方式與你取得聯(lián)系,這樣也不至于讓他們空手而歸。
最后,經(jīng)過(guò)測(cè)試、驗(yàn)收合格的站點(diǎn)才能向全世界發(fā)布。瀏覽者是否有興趣瀏覽你的站點(diǎn)或者在你的站點(diǎn)停留很長(zhǎng)事件已經(jīng)完全擺脫你的控制了。有些用戶由于使用速度過(guò)慢的調(diào)制解調(diào)器而變得煩躁不安,或者是頁(yè)面無(wú)法顯示圖形或者,或者用戶使用了他們個(gè)性化的瀏覽器無(wú)法正常顯示站點(diǎn)……這些問(wèn)題都將存在,一點(diǎn)也不用感到驚奇。我們現(xiàn)在所能作的,就是從客戶的反饋信息當(dāng)中分析和測(cè)試用戶的多樣性和可能性不斷的進(jìn)行調(diào)整。
無(wú)論如何,你已經(jīng)從你的站點(diǎn)得到某種心理上的滿足。在開始繼續(xù)作這件事情以前,你可以坐下來(lái)清楚的想想你究竟是為了什么創(chuàng)建這個(gè)站點(diǎn)的。仔細(xì)的列出你的連接,并不是所有的用戶都有耐心在你的站點(diǎn)上尋找他所關(guān)心的內(nèi)容。讓他們知道什么時(shí)候什么地方將提供什么,比如你準(zhǔn)備在什么時(shí)候提供一個(gè)重要資料的下載等等。尤其重要的是,要讓那些相關(guān)的宣傳對(duì)象滿意,因?yàn)橐坏┧麄儼l(fā)現(xiàn)一些對(duì)他們有用的東西,他們將向他們周圍的朋友、同學(xué)或者親戚進(jìn)行擴(kuò)散,這樣你的站點(diǎn)的知名度就會(huì)慢慢的打開。
恭喜你,你已經(jīng)成功了一半,接下來(lái)要告訴你的就是"持之以恒,精益求精"。希望你能記住。