[網站建設之]10條優良的網站設計教訓 一個設計良好的網頁應該可以被寬帶網上的多媒體高級電腦或者仍然使用慢速MODEM連接的低檔電腦上裝置的瀏覽器瀏覽。然而,良多新的網站設計者均不是十分的懂得如何盡量的讓這些HTML文件保持很好的兼容性。 當然,這里" />
當前位置: 網站建設 > 網頁設計 > 建站經驗 >

10條優秀的網站設計經驗

時間:2013-03-02 03:40來源:未知 作者:admin 點擊:

標簽:10條優秀的網站設計經驗 10條(4)網站設(2)網站設計(740)經驗(30)優秀(12)網站建設(1202)優良(5)
--> [網站建設之]10條優良的網站設計教訓 一個設計良好的網頁應該可以被寬帶網上的多媒體高級電腦或者仍然使用慢速MODEM連接的低檔電腦上裝置的瀏覽器瀏覽。然而,良多新的網站設計者均不是十分的懂得如何盡量的讓這些HTML文件保持很好的兼容性。 當然,這里
10條優秀的網站設計經驗》文章地址:http://www.tfxk.com/wangyesheji/jianzhanjingyan/0302331092013.htm
--> [網站建設之]10條優良的網站設計教訓

  一個設計良好的網頁應該可以被寬帶網上的多媒體高級電腦或者仍然使用慢速MODEM連接的低檔電腦上裝置的瀏覽器瀏覽。然而,良多新的網站設計者均不是十分的懂得如何盡量的讓這些HTML文件保持很好的兼容性。
  當然,這里有太多的不斷定因素影響網頁最后浮現的結果。首先,盤算機的顯示器有不同的分辨率和顯示品質,其次,運行著各種各樣的操作系統,使用著不通版本的WEB瀏覽器 ,不同INTERNET連接方式和各種速度的MODEM。我們不能想當然的去果斷地斷定瀏覽者的愛好。我們還是花點時光來測試頁面,這樣可以讓每一個訪問者覺得高興。然而,遺憾的是我們沒有辦法為每一個訪問者來優化頁面,但是下面講述的多少個步驟將有助于你保證大多數訪問者的瀏覽效果。  
 
  1、肯定受眾。
  個別的來說,絕大多數一般受眾圖形,插件,applets和其它有關的高等Web閱讀器特征。對咱們來說,頁面的適用可能比美麗更主要,對于用戶來說,不什么比頁面可能疾速下載更重要了,簡而言之,精簡你的站點,這是一條最佳的捷徑。

  波士頓一位圖形設計者兼美術講師說:"你必須考慮什么,這一切都應該來自自于你的觀眾"!

  為了讓每個人滿足,一個站點的實用比英俊更加重要。并且首先,它必須能夠倏地的被用戶真個較老版本的瀏覽器快速說明。簡化你的站點,然而,那未必是最好的辦法。

  斟酌一下站點訪問者的操作系統,監督器,瀏覽器,和的連接類型。而后,想想實踐上他們需要從你的站點取得什么?他們是想失掉連接還是需要實際的內容?如果是普通的站點是否會掃興,是否需要為瀏覽下載特殊的插件。有一個訣竅就是沒有必要為每一個人優化你的站點,要知足每一個訪問者顯然不可能,你必須為訪問者采用恰當的技巧。

  2、不要依附圖形。
  就站點設計而言,確實能夠通過成功的圖形設計招攬或者喪失訪問者。并非所有的訪問者可以完全看到圖片,某些人為了加快存取網絡的速度已經關閉了瀏覽器端的圖形。簡而言之,圖形并不能準確的在客戶端加載。   然而,圖形經常被用來作為導航按鈕。舉例來說,訪問者常常按向左的箭頭返回上一頁,或者一個包括問號的圖形可以得到更多的信息,或者按公司的標記(LOGO)會告訴用戶公司的地址和電話號碼。圖形映射(IMAGE MAP)容許你按圖像的不同區域連接到不同的處所,這個常常被用來用作站點輿圖,你給訪問者提供站點內容指引。但是如果你僅僅通過圖片來提供站點導航的話,某些訪問者將不能完全或者正確的分開你的站點。

  老是告訴用戶你的站點需要什么樣類型的技術才干正確瀏覽你的網站是一個非常笨拙的方法。如果訪問者需要安裝插件能力處理,如果你僅僅給出一個連接讓訪問者去下載。這個自認為非常酷的頁面對用戶來說根本不是什么風趣的事情,這是和用戶的等待所恰好相反的。至于為什么偏偏相反,愿望你能反思一下,如果是你,你會為了瀏覽一個你基本不知道什么樣的站點而去下載一堆你不知道的插件么?

  如何解決這個抵觸呢?你可能想到的解決方法有二種:一個是單純的文本,另外就是完全的圖形方式。其實不然。如果你使用一個圖形映射的方式給內容列表,可以在該頁的最后使用一個純文本方式的表格來處理,這樣會好很多。如果使用圖形按鈕,最好還是包含簡略的導航文字提示。

  大多數的時候,通常我們要養成使用"ALT"標記的習慣,這樣當圖形未能正確顯示的時候可用準備的文本替換顯示。這樣,用戶至少可以看到關于這個圖形的表述,便知道這個圖形究竟象征著什么。舉例來說某個圖象標記的預備文本就可以這樣寫:   

  使用"ALT"標志也有另外一個利益。文字將顯示在圖象的上面,這樣會給用戶造成一個頁面快說領導的感覺。

  3、保持頁面小巧。
  這個小節我們念叨的是對于圖形的處置。最好的方式是我們吶喊寬大的讀者堅持讓圖形文件的尺寸盡量的小。即便是那些幸運領有快捷Internet銜接的用戶,他們不會埋怨說你的站點加載速度太快。

  第一個基本準則是讓每一個圖形文件的尺寸小于30KB。這相對不是一個壞的建議。更"極其"的某些頁面設計專家說,保持整個頁面的尺寸大略在30KB, 40KB左右(也就是包含圖形和文本以及其它多媒體對象之后的全部頁面)才是比擬適合的。并忠告我們"千萬不要使用無比大的頁面"。

  要保持頁面尺寸玲瓏,花些時間來處理一下圖形,在保證圖形質量的情形下使用盡量高的緊縮比例,讓圖形盡量的小。

  另外,讓圖形使用較少的色彩也是一個讓圖形盡量小的辦法。使用枯燥的顏色比使用梯度的顏色要好。使用梯度顏色可以在瀏覽器端快速填充顏色調色板供客戶端顯示。此外,減少圖形的色彩深度進而可以使用較少的色彩樹也是可以的。

  如果你需要提供較大的圖象和多媒體文件,盡量不要插入頁面里面,提供一個連接就可以了。這樣,如果使用快速的連接點擊圖象就可以立即看到,低速的連接不看圖象也可以看到他最關懷的內容,瀏覽感覺上沒有什么延遲是最好的。

  4、不要假設用戶的顯示器和分辨率大小。
  一個常見的過錯的是好多的網頁設計師都認為訪問者都有一個他們一樣顯示效果良好的大屏幕顯示器。依照目前的狀態,你可以為你的站點優化設計為尺度的800×600辨別率,這是當初主流顯示器的的默認顯示分辯率。

  搜尋引擎,比如Excite,我們可以發現一些為增添大批用戶訪問量的好主張。舉例來說,多使用表格單元格顏色填充。該頁的網頁設計師為該網頁增加了背風景,這樣用戶就不會在感覺上感到下載頁面消耗的時間過多。另外,大多數的顯示器只能顯示256色,而不是設計師所使用的真彩上百萬種顏色設置。瀏覽器能顯示的顏色在瀏覽器"保險色彩范疇",即256色以內。后面我們將具體探討這個問題。

  5、警惕使用插件(plug-ins)和Applets。
  凸起交互性或者多媒體特性的站點通常使用plug-ins和applets。Plug-ins是Web瀏覽器功能的擴大。瀏覽者如果安裝了Plug-ins,他們就能夠運行不同類型的文件,比方動畫,視頻和音頻。Applets是小的程序片段或者是工具,常常用Java語言編寫,可以借助諸如瀏覽器這樣的大型程序實現一些有用的功能。

  固然plug-ins跟applets能大大加強站點的交互性和多媒體機能,然而對一些較老配置的機器來說,這無疑又是一個過剩的功效。舉例來說,Java applets僅能工作在32位的操作體系下,Windows 3.


  雖然plug-ins和applets能大大增強站點的交互性和多媒體性能,但是對于一些較老配置的機器來說,這無疑又是一個多余的功能。舉例來說,Java applets僅能工作在32位的操作系統下,Windows 3.x就行不通(雖然現在很少有人使用了)。另外,plug-ins需要破費時間下載安裝,但并不是每一個用戶都能純熟的完成下載后安裝這樣一個過程。不純熟的用戶安裝plug-ins的時候可能會碰到故障,不純熟的用戶不需要這樣的懊惱。

  如果你斷定你的受眾可以安裝plug-ins和applets,你必須要在相關的部分提示用戶,下載plug-ins和applets的時間和地址,并且安裝進程中需要留神哪些方面的內容。這樣可以方便用戶的使用。如果是異常重要的信息,建議你提供一個可用的如純文本型的可用信息,以便利那些確切無法安裝plug-ins和applets的訪問者。

  6、僅僅在須要的時候應用幀(FRAME)。
  使用幀可以把一個瀏覽器分成幾個不同的窗口,對于站點的構造的掌握是一個不錯的方法。但是,你還是必須知道,還是有人在使用不支持幀的瀏覽器。在你開始打算設計一個幀的時候,你該仔細的考慮考慮你是否的確真的需要。經常,你這樣的需要可以通過表格來組織站點的結構。當然,有些特別特別老的瀏覽器的確連表格也不支撐。哎,這樣說來,我們似乎真的是沒有辦法了。

  假如你必需使用幀,想法為還在使用那些古董瀏覽器的用戶供給其它的解決方法。最壞的盤算就是,如果然的沒有措施解決,給這些用戶一些報歉的信息,不要讓他們感到到你疏忽了他們的存在。

  7、不要忘卻Web瀏覽器。
  你應該知道,最終的瀏覽者有很多的方法可以節制網頁在客戶端瀏覽器的顯示效果(包括字體大小,顏色等等),不外從市場占領率來看,網景公司的航海家(Navigator)比擬微軟公司的探險家(Internet Explorer)的份額正逐步減小。

  對一個指定的站點來說,如果考慮到某些訪問者不愛好使用圖形方式的導航條,測試的時候你就需要封閉圖形顯示。所以,在制造的時候,你就必需要考慮到大部門(不是全體,當是至少應該考慮到導航條圖形)的圖形必須要使用文字提示,這樣即使在瀏覽者客戶端不顯示導航圖片的時候還有文字給予適當的提示,這樣的感覺,會好許多,至少面對無法顯示圖形的紅叉而言,這樣的文字提醒就給人以友愛的感覺二不至于莫衷一是。

  事實上,微軟公司出品的WEB探險家和美國Netscape公司航海家已經有越來越多的類似之處了,實在,早在一年前,他們之間的兼容已經不是一個大問題了。但是在細節上還是有差別的,某些在某個瀏覽器看上去的效果用另外一個瀏覽器看就完整不是那么一回事了。你可以懂得這些差異,但是你無法安排他,不同的瀏覽器看上去就是不同,就象不同的人眼里的某個人各自會有不同的印象一樣。你所需要的,就是知道他們存在差別,你應當盡量的去防止使用導致宏大差別的代碼或者辦法。   好消息是,這二個瀏覽器都可免得費下載,對用戶來說,完全可以嘗試用二個瀏覽器去看看你的站點有什么不同的瀏覽感觸,取舍的權力在于瀏覽者,而你作為站點設計者,要做的只是去傾聽瀏覽者可能的反饋。壞新聞就是,你不能把持訪問者使用什么樣的瀏覽器,或者額定的去轉變瀏覽器窗口的大小,設置字體類型、色彩和大小。你能作的就是當訪問者不能訪問某些局部的時候倡議他們使用什么樣的配置,怎么樣看你的站點,這樣他們就可以使用默認的設置或者你提議的瀏覽器。
  
  8、保持蘋果和PC格局兼容。
  很多的頁面在蘋果環境中設計而瀏覽者使用的確是PC。對大部分頁面來說,這個理由。實際上,瀏覽器比操作系統更多的影響站點的瀏覽效果。有一個需要指出的事實,在IBM兼容PC機上看到的圖片好像比蘋果機上的小,而且顏色稍深。如果你的站點圖形大部分在蘋果機上設計,建議在宣布之前,在PC機長進行預覽,看是否有較大的效果差別。

  蘋果機和PC上顯示的同樣的顏色在某種水平上看上去往往有些差別。說的更準確些就是我們早條件到的關于調色板的區別在起著決議性的作用。這二個不同的平臺,有216個通用的顏色,所以,網頁設計師在設計的時候盡量使用這通用的216色就可以最大程度的保證這二個平臺的頁面顏色顯示效果根本一致。

  9、測試、測試、再測試!
  不要為我的羅嗦而感到膩煩。為了保證在眾多的瀏覽者瀏覽器里面能正確的看到我們所想表白的頁面效果,所以正式發布站點之前的測試顯得非常的重要,是重中之重。從你本人的電腦開始,一遍又一遍的開始測試,使用不同的瀏覽器,試著調劑瀏覽器窗口的寬度和高度,關閉圖形顯示,試著使用不同的顯示分辨率。然后,在朋友、共事甚至街坊的電腦上反復方才作過的事情。

  有專業的網頁設計師建議我們將測試工作交給熟悉的普通的用戶去進行,由于這樣才合乎大多數的使用者的習慣,而且這些用戶使用的瀏覽器版本較老,這樣可以保證終極用戶的瀏覽效果。有必要強調這一步的重要性。在辦公室里面,我們時常可以看到一些好像是作為裝點使用的古老的機器(簡直能見證電腦的發展歷史),我們不妨用作我們的測試機器,仿佛更能體現這些古董機器的價值。而這些古董機器得出的測試成果,往往比我們使用的專業的設計師所有的電腦測試的效果更加客觀,更加存在代表性。

  10、可以告訴你的訪問者了。
  即使我們作了上面我們要作的所有工作,你必須清楚,我們仍是無奈保障這個精心設計的站點能讓每一個拜訪者都有很好的顯示后果。如果你在首頁上明白指出瀏覽你的站點需要具備什么什么樣的條件,你必須明確并非所有的用戶都能具備你所請求的條件。你可認為這些不能滿意你以為的基礎前提的用戶一個另外的抉擇,這樣能夠讓他們曉得你并沒有忽視他們。你可以告訴他們如何通過電話,書信或者電子郵件的方法與你獲得接洽,這樣也不至于讓他們空手而歸。

  最后,經由測試、驗收及格的站點才能向全世界發布。瀏覽者是否有興致瀏覽你的站點或者在你的站點停留很長事件已經完全解脫你的掌握了。有些用戶因為使用速渡過慢的調制解調器而變得焦躁不安,或者是頁面無法顯示圖形或者,或者用戶使用了他們個性化的瀏覽器無法畸形顯示站點……這些問題都將存在,一點也不必感到驚疑。我們現在所能作的,就是從客戶的反饋信息當中剖析和測試用戶的多樣性和可能性一直的進行調整。

  無論如何,你已經從你的站點得到某種心理上的滿意。在開端持續作這件事件以前,你可以坐下來明白的想想你畢竟是為了什么創立這個站點的。細心的列出你的連接,并不是所有的用戶都有耐煩在你的站點上尋找他所關心的內容。讓他們知道什么時候什么地方將提供什么,好比你籌備在什么時候提供一個重要材料的下載等等。尤其重要的是,要讓那些相干的宣揚對象滿意,因為一旦他們發明一些對他們有用的貨色,他們將向他們四周的友人、同窗或者親戚進行擴散,這樣你的站點的著名度就會緩緩的翻開。

  祝賀你,你已經勝利了一半,接下來要告知你的就是"堅持不懈,不斷改進"。盼望你能記住。 Tag:網站設計   網站設計   相關的主題文章:
(責任編輯:網站建設)
10條優秀的網站設計經驗相關文章
上一篇:10個讓你的網頁設計很糟糕的原因 下一篇:11個非常棒的CSS3實現的圖片畫廊
回到頂部