網站設計原則

 
 
網站設計原則
做網頁,做網站也有一些日子,做得多了就會發現一些很細的東東,以下是我個人在做網頁時都會比較注意的一些細節,當然爲了能綜合更多更好的經驗技術,我還特意上網遛了一圈,把這些好的東東總結了一下,供大家相互學習交流之用,歡迎轉載(請註明出處),若用不足之處,請多多包涵,並歡迎指正。
swf版下載地址:http://www.dezai.net/blog/work/webdesign.swf
PDF版下載地址:http://www.dezai.net/blog/work/webdesign.pdf
1、作爲一個專業網站製作者需要具備什麼知識
答:首先,你必須熟悉編寫主頁的標註語言HTML、熟悉W3C 的HTML 4.0規範、CSS層疊樣式表的基本知識、javascript、VB Script的基本知識。對於常用的一些腳本程序如ASP、CGI也要有適當瞭解,但掌握多少不做要求。熟練使用至少一種所見即所得編輯工具和至少一種代碼編輯器並部分了解多種編制工具的用法。熟練使用至少兩種圖形處理工具和至少一種動畫製作工具以及至少一種的矢量繪圖工具,並部分了解多種圖形圖像動畫工具的基本用法。熟練使用至少一種FTP工具以及相應的軟硬件和網絡知識。
這些只是網站Shell建設中的一部分,但似乎少了一樣東西,她也非常重要,就是一定的美感。對於色彩搭配和版面排列會起關鍵作用,不過這個東西比較模糊,而且因人而異,無法定製統一標準。
其次,你必須有非常強的自學能力,Internet發展千變萬化,新的工具、技術層出不窮。例如目前新興的Shockwave。網絡上的兩個月相當於我們生活中的一年,如果對於新的事物接納不快,不能很快地掌握而停步不前,那麼你很快將會被淘汰。
還有你的身體要比較好,熬夜已經是網絡一族很正常的現象,有些工作或許逼你連夜趕工。如果身體不好,在高強度的工作下沒幾天就病倒了,那什麼都談不上了!
如果上面提到的那些你都具備的話,那麼你一定會是一個非常優秀的Web Designer
2、網站設計的標準
不同人的觀點看待頁面的精美與否是有不同的標準(w3c除外)的,有些偏於美工精美,有些偏於功能強大,有些追求個性,有些則喜歡跟隨潮流,但其實不管乍樣,網站都有一個共同的功能,不是隻做給個人看的,更多的是爲了在別人面前展示自己的東東,所以個人認爲做一個網站,最基本的是要實用、簡潔、整體性好,能真正的形成一個屬於自身網站的風格,保持一個整體的形象,配色均勻。這些應該是一個網站要做到的基本的要求了吧,做一個網站,首先還是要在腦子裏構思好怎麼纔可以利用手中有限的資料(特別是企業網站)來設置好網站的主體色調,採用何種架構,如何配色搭配等一些因素,做到心中有底纔開始動手。有些網頁設計師比較在乎頁面的“不拘一格”,但卻忽視了網站的交互功能,一個頁面設計再精美,別人使用不上裏面的東東,也是白費的。我個人認爲,真正好的設計師,應是在考慮到網站使用者的方便的同時,把自已的設計風格融入到作品中,能讓客戶感到滿意纔是OK的。總體來看吧,目標明確、定位正確 、主題鮮明、富有特色版式、編排佈局合理、色彩和諧重點突出 、形式內容和諧統一 ,能做到這些應該就是一個很好的網站啦。
3、 網站設計要考慮的一些額外因素
就像不同的機子有不同的配置一樣,在網站設計過程中,我們所要考慮的不僅僅就是頁面設計,還要考慮到你的頁面是否能在較快的時間內打開頁面,如果一個頁面等上個一兩分鐘,我想除非是您女朋友或漂亮MM網友的相片,要不你早就把它close了。拿一個門戶網站設計來看,我們要考慮的是訪問者的分辨率是1024*768還是640*480,是用PC機還是用Mac機,是用手機來看還是用PDA來看,是用中國電信來訪問還是用中國網通來訪問,是用ADSL來是用撥號上網,是僅僅面向國內用戶還是要面向全球,是用IE6。0來訪問還是用fox來訪問等等這些因素.解決這些總是最好的辦法是嘗試採用DIV+CSS 來設計你的網站,從現在的趨勢來看,WEB標準將是以後的發展之路,大家還是多點心學吧。
3、 網站的設計思路
上面說過,網站設計之前必須讓自己有一個明確的思路,怎麼執行怎麼安排都要在動手前有個準備,最好能在此基礎上能積累一些資料,以方便在動手時可以靈活運用,參考網上的教程,網站的設計思路一般是:
定位你的網站主題和名稱→定位你的網站LOGO或相關形象標識→確定網站的欄目和頻道→確定網站的目錄結構和鏈接結構→確定網站的色調和採用的網站結構用相關字體→確定網站的風格和創意設計→設計首頁和主要的子頁面→設計網站的功能→檢驗網站,進行網站測試→投入使用
順便提及g gh 一個企業網站的一般設計流程:
需求分析(項目立項 客戶的需求說明書)系統分析 (網站總體設計 網站建設方案 網站詳細設計)項目實施(整體形象設計 開發製作 調試完善)宣傳推廣→維護
4、 網站建設尺寸規範
頁面標準按800*600分辨率製作,實際尺寸爲778*434px,頁面長度原則上不超過3屏,寬度不超過1屏,每個標準頁面爲A4幅面大小,即8.5X11英寸,全尺寸banner爲468*60px,半尺寸banner爲234*60px,小banner爲88*31px,另外120*90,120*60也是小圖標的標準尺寸,每個非首頁靜態頁面含圖片字節不超過60K,全尺寸banner不超過14K
創建優秀網頁的6個好習慣
5、不要將鏈接全部放在圖像中 以往的網頁中的鏈接都是文字,而且用下劃線以資識別。但不久人們就討厭了這些文字鏈接,於是都採用了圖像鏈接。後來,更加嫌一個圖像一個鏈接太麻煩了,於是將所有的鏈接都放進了一個圖像中去。但並不是所有的用戶都打開圖像載入,如果你把所有的鏈接都放入圖像中去,而沒有任何同樣功能的文字鏈接的話,用戶也許會不知所措。
6、慎用自動滾動 曾經到過一個內容“豐富”的網頁,它使用了很多常見的網頁製作技巧:現在的時間、訪問時的時間等等。不過有一個用得不是很好,就是窗口的自動滾動。我只是想發個郵件給網頁的主人,但我卻無法使滾動條停下來讓我點擊鏈接,於是我花了很久才“命中”窗口中的E-mail鏈接——真後悔軍訓的時候沒有練好射擊!
7、不要用延時效果的javascript 現在的網頁製作者爲了使網頁更加具有影響力,都瘋狂地加入javascript。以現在的“貓”奔跑的速度而言,這些腳本也算不了什麼,用戶不會介意。但是,如果這些腳本可能導致延時的話,用戶的態度就不同了。某個國人網頁的首頁在載入時窗口的底色———窗口裏面沒有任何內容———由白色逐漸變成黑色,整個過程耗費了幾秒,嘿!別小看這幾秒,我能檢查全部的郵箱了! 不要依賴瀏覽器 .太多的網站首頁中加入了“請在800×600分辨率下使用IE瀏覽器瀏覽本網站”等字樣的文字。我是安裝了IE、NC和Opera,因爲我要製作網頁,需要它們來檢驗網頁在這些瀏覽器下的可讀性。但一般用戶不會安裝那麼多的瀏覽器,更加不會牢記着哪個網站需要用哪個瀏覽器瀏覽。也許不可能讓網頁在使用所有的瀏覽器瀏覽都有一樣的效果,但儘量地去達到該目的,會讓網頁在這個瀏覽器下有這樣的特色、在另一個瀏覽器下又有不同的特色,這是網頁製作者的工作,不是嗎?
8、不要忘記版權 現在,網上侵犯知識產權的問題非常猖獗,某免費個人網頁提供商上的網頁尤其嚴重——甚至有盜版光盤販賣呢!爲此一些新的免費個人網頁提供商就要求用戶在申請時提交詳細的、真實的個人資料,以防備不可預料的事情發生。所以,如果你的網頁需要引用別人的東西的話,要麼你就和他聯繫一下,徵求意見;要麼就在明顯的位置註明其版權歸屬。這並非多餘,這是你的網頁“長壽”的祕方!當然,如果是你自己製作的圖像或自己撰寫的文章,你絕對有權聲明版權歸你自己所有!
9、不要懶於更新 某個個人網頁聚居地上有很多的網頁都是很久前建立而至今沒有更新過的,姑且不說這是浪費公用資源的行爲,訪問過這些網頁的人看到網頁主人如此懶惰,你說他還會再去訪問嗎?誰能確定下次訪問不會又是這般模樣呢?因特網上的資源如此浩瀚,誰會去訪問一個從不更新的網頁呢?
網頁設計禁忌
10、關於外觀的禁忌
不要先決定網頁的外觀,然後強迫自己甚至是強迫別人去適應它。應該從網站的瀏覽者、網站要傳達的信息以及網站的發展目標考慮,設計出一個最適合的網頁架構。 不要每頁都採用不同的背景圖片,以免每次轉頁都要花時間去下載。採用相同的背景色及近似的按鈕都能增加網頁一致性,樹立統一的風格。這也是最基本的網站VI設計(視覺識別系統)。 不要把圖片的白色部分當作是透明的顏色,要知道別人的操作系統是並不一定會將底色設爲白色的。解決的方法是把網頁的底色設爲白色。而最好的方法是用圖片編輯工具爲圖片設置好透明底色。 底色或背景須與文字顏色形成明顯對比,方便閱讀。若你的網頁裏有較多文字,不妨在這方面下多點功夫,力求讓瀏覽者能舒適閱讀你的文章。 每頁的排版不要太疏或用太大的字,儘量避免看網頁的時候要作很大的捲動。 太長的一頁要使用內部鏈接,聰明的網頁設計者不會讓瀏覽者在看網頁時太多捲動。常見的內部鏈接例子如 FAQ、或名詞解釋。 在17寸顯示器尚未普及的時候,不要以 800x600 以上的像素設計網頁。因爲這常常會導致設計上的判斷失誤。因此,無論你有再大的顯示器,能上再大的分辨率,將顯示器設置成 800x600的顯示模式是適當的。 - 不要於每頁插入太多的廣告牌。相信你也不會喜歡貼滿廣告的網頁。什麼廣告交換、點錢Banner、彈出窗口,還有時下最流行卻又最討厭的浮動廣告,還是少放爲妙。至少,當我看到的時候,是會第一時間按右上角的“X”的。
11、關於操守的禁忌
不要抄襲別人的創作。網絡上的所有資料都是公開的,但都有版權的,若想引用別人的作品,不妨先徵得同意,一般作者都只要你註明出處,對於電腦方面的東西,大多數朋友都是熱情而慷慨的。更不要下載了別人的網站後,當作是自己的放在網上,這樣做的結果是使所有人都知道你是個剽竊者。 引用 Newsgroup、BBS、或其他非電子傳媒的文章,切記要註明原作者名稱及文章事源,若引用別有的網頁更要通知網主。尊重版權,避免官司,利人利已。 不要利用網頁散佈謠言、中傷他人,網絡雖然難管理,但本着道德良心,都應潔身自愛。維持良好網絡環境,要靠大家努力,從我做起。不要將別人的網頁變成你的框架中的一個窗口,這樣不僅爲瀏覽者帶來不便,令人的網頁更醜陋,而且也侵犯了別人的版權,解決方法是採用鏈接中的 target 參數,如 target="_top" ,或是target="_blank" 從新窗口打開網頁等。若重視訪問者的感受請從每一細節做起。
12、不要把首頁做成flash
真正的搜索引擎對圖片的識別能力很差,首頁做成flash,不僅不利於搜索引擎排名,而且還減慢了進入主頁的速度,在一定程度上爲你的客戶儘快找到你又設置了一道小障礙。
13、不要把導航做成圖片連接
因爲搜索引擎是一個很大的數據庫,而不是一個圖片庫,搜索引擎首頁搜索引擎到的是你的標題,接着才通過你的導航系統搜索到你網站的其他內頁,所以如果你的網站導航是文字連接,搜索引擎就很容易搜索到你其他的頁面,是網站的整體形象得意完美展示,如果圖片連接則不能達到這個效果。
 14、不要用大量的圖片組成首頁
任何一個搜索引擎都喜歡結構明顯,而不喜歡把網站做成一張皮,讓搜索引擎分不清你的重點所在。
數據庫開發
15、數據文件命名採用系統名+_+文件類型,比如系統名爲kupage,則數據庫文件命名爲kupage_database.mdf,有的數據庫文件有多個,比如SQL Server就有2個,一個是數據庫文件,另一個是日誌文件,那麼他們的文件命名分別爲kupage_database.mdf,kupage_log.log。文件名全部採用小寫。
數據庫表命名規範,表名長度不能超過30個字符,表名中含有單詞全部採用單數形式,單詞首寫字母要大寫,多個單詞間不用任何連接符號。若庫中有多個系統,表名採用系統名稱+單詞或多個單詞,系統名是開發系統的縮寫,系統名稱全部採用小寫英文字符,如bbsTitle,bbsForumType。若庫中只含有一個系統,那麼表名僅用一個單詞或多個單詞。單詞選擇能夠概括表內容的一個或多個英文單詞,如UserInfo,UserType。關連表命名規則爲Re_表A_表B,Re是Relative的縮寫,如:Re_User_ArticleType, Re_User_FormType。
數據庫字段命名規範,數據庫字段名全部採用小寫英文單詞,單詞之間用”_”隔開,命名規則是表別名+單詞,如:user_name,user_pwd。表別名規則,如果表名是一個單詞,別名就取單詞的前4 個字母;如果表名是兩個單詞,就各取兩個單詞的前兩個字母組成4 個字母長的別名;如果表的名字由3 個單詞組成,你不妨從頭兩個單詞中各取一個然後從最後一個單詞中再取出兩個字母,結果還是組成4 字母長的別名。
視圖名採用規則View_表A_表B_表C,View表示視圖。這個視圖由幾個表產生就用”_”連接幾個表的名,如果表過多可以將表名適當簡化,但一定要列出所有表名。
存儲過程命名規則P_表名_存取過程名(縮寫),比如P_User_Del,P_ArticleType_AddData。
SQL語句編寫規則,關鍵字必須大寫,其他書寫按上述命名規則,比如:
SELECT user_id, user_name FROM User WHERE user_id = ‘tom’
文件夾文件名命名規範
16、文件夾命名一般採用英文,長度一般不超過20個字符,命名採用小寫字母。除特殊情況才使用中文拼音,一些常見的文件夾命名如:p_w_picpaths(存放圖形文件),flash(存放Flash文件),style(存放CSS文件),scripts(存放javascript腳本),inc(存放include文件),link(存放友情鏈接),media(存放多媒體文件)等。
文件名稱統一用小寫的英文字母、數字和下劃線的組合。命名原則的指導思想一是使得你自己和工作組的每一個成員能夠方便的理解每一個文件的意義,二是當我們在文件夾中使用“按名稱排例”的命令時,同一種大類的文件能夠排列在一起,以便我們查找、修改、替換、計算負載量等等操作 。
圖片的命名原則名稱分爲頭尾兩部分,用下劃線隔開,頭部分表示此圖片的大類性質例如廣告、標誌、菜單、按鈕等等。
放置在頁面頂部的廣告、裝飾圖案等長方形的圖片取名: banner
標誌性的圖片取名爲: logo
在頁面上位置不固定並且帶有鏈接的小圖片我們取名爲 button
在頁面上某一個位置連續出現,性質相同的鏈接欄目的圖片我們取名: menu
裝飾用的照片我們取名: pic
不帶鏈接表示標題的圖片我們取名: title
動態語言文件命名規則性質_描述,描述可以有多個單詞,用”_”隔開,性質一般是該頁面得概要。
程序代碼編程規範
一個良好的程序編碼風格有利於系統的維護,代碼也易於閱讀查錯。在此只討論ASP的編程風格和約定。在ASP中所有變量是弱變量,無需定義就可以直接使用,而且代碼不區分大小寫。但其他語言一般這些都要定義的,爲了養成良好的編程習慣,編寫代碼務必按照一下規則。
17、每個變量名必須定義,在ASP文件的最開始添加語句,強制定製每個變量。
18、程序代碼需要有縮進,縮進採用鍵盤Tab鍵,不採用空格鍵。並且”=”或者鏈接字符串時需要左右空一格
19、函數過程編寫的約定。函數或者過程命名採用動作+名詞,每個函數需要給出相應的註釋,函數功能,傳入變量,以及作者和修改相關信息。
20、ASP內置對象區分大小寫")
21、數據庫連接一個庫只能有一個數據庫連接文件,創建數據庫對象得原則是儘可能晚地打開數據庫,儘可能早地關閉數據庫。創建數據庫對象調用統一地創建函數
22、當一個對象不在使用時要釋放對象資源,。採用統一函數調用。
23、時間全部以字符串的形式保存到數據庫中,這樣做能夠是日期在不同的數據庫中都能良好地保存,也方便數據庫地遷移。時間用14位字符串保存,日期用8位字符串保存。
網站製作過程中把握的幾點
  24、重點信息放在突出醒目的位置,整個網站空間排序適當 一個網站很重要的就是標題,標題就像路牌一樣,人家在你的網站上逛來逛去,全靠它指路了。給人的第一印象是否能夠馬上注意到標題,標題要意義清晰、描述性強,把最吸引人的地方放在突出顯眼的位置,然後再慢慢展開。或者說,把你的獨特內容包裹成一個懸念,吸引人家注意。讀者看一篇文章,前三段注意力最集中,如果這"寸土寸金"的前三段用不好,人家就要和你拜拜嘍!留出可調整的位置,用於滿足臨時性或短期營銷活動的宣傳需要。如,福州電信局12月11日舉辦的"福建省首屆信息網絡展示會"展覽,需要在網頁中放在最突出的位置。這就需要調整原有的結構,既讓新的內容有突出的體現,還要不至於淹沒其他重點。在每屏中的文字與圖形的佈局既要考慮到重點的突出,還要給人以和諧的感覺。不能讓圖形淹沒文字,也不能圖形太少而讓人覺得單調。視覺的吸引和誘惑力是不能低估的。
  25、網頁應該易懂,控制沒個模塊的信息量 網站設計最重要的訣竅,恐怕就是你的網頁要易讀。這就意味着,你必須花點心思來規劃文字與背景顏色的搭配方案。注意不要使背景的顏色沖淡了文字的視覺效果,別用花裏胡哨的色彩組合,讓人看起你的網頁來很費勁。一般來說,淺色背景下的深色文字爲佳。這個原則也意味着,你最好別把文字的規格設得太小、也不能太大。文字太小,人家讀起來難受;文字太大,或者文字視覺效果變化頻繁,像是衝着人大喊大叫,看起來不舒服。
另外,最好讓文本左對齊,而不是居中。按當代中文的閱讀習慣,文本大都居左的。當然,標題一般應該居中,因爲這符合讀者的閱讀習慣。在內容上着筆儘量要細緻,讓人家能在最短的時間內,瞭解你想呈現給人傢什麼。給人家一幅清晰的畫卷,別雲山霧罩的。開門見山,直接了當。大家都知道,網友的耐心尤其少。你能提供的信息或許對他們有裨益,但如果要人家沒完沒了地翻下去才能找到,恐怕極少有人有這份耐心。立體規劃內容,將所有部分按一定的構架各就其位、分別納入不同層次的頁面。注意先要把最重要的內容放到首頁上,其他的依次就緒。然後,你就可以勾劃頁面藍圖、編HTML了。就文本內容的表現而言,記住儘量別讓其一行文字的寬度,橫跨整個屏幕。段落一多,這樣子看起來很費勁,而且別人的瀏覽器還可能和你的差別很大。最好別超過屏幕寬度的一半。
26、網頁頁面越小越好,最好別超過50k,儘量精簡 有研究顯示,如果一個網站頁面的主體在15秒之內顯現不出來,訪客會很快失去對該站的興趣。當然,也有例外,比如內容實在太精彩,人家不去不行。再像視覺藝術類站點,也不能以"快"爲唯一設計標準。不過,即使這類站點,也該在加個導引頁,給讀者一個提示,別不理睬人家的心情。但是大多數網站還是以內容爲主,大部分人感興趣的還是信息量,追求的是速度。要限定頁面的大小,就得從各個角度考慮節省。最大的一頭是圖像,有的好東西,只得割愛了。想想看,在創意表達、品牌形象、掙錢幾個目標之中,哪個最重要?
 27、網站導航要清晰,容易查找, 所有的超鏈接應清晰無誤地向讀者標識出來,所有導航性質的設置,像圖像按鈕,都要有清晰的標識,讓人看得明白,千萬別光顧視覺效果的熱鬧的,而讓人家不知東西南北鏈接文本的顏色最好用約定俗成的:未訪問的,藍色;點擊過的,紫色或栗色。如果你一定要別出心裁,鏈接的文本就要想着以什麼方式加以突出,比如說加粗體?加字號?兩側加豎標?或者幾者兼用。總之,文本鏈接一定要和頁面的其他文字有所區分,給讀者清楚的導向。清晰導航還要求:讀者進入目的頁的點擊次數,不能超過三次。如果三次以上還找不到,人家可就沒有耐心陪你玩了!
28、網站內容非富 網站作爲一種媒體,提供給用戶的最主要還是網站的內容,沒有人會在一個沒內容的網站上留連往返,就象沒人會兩次看同一份毫無新意的報紙一樣!
29、頁面下載速度快 據研究發現,頁面下載速度是網站留住訪問者的關鍵因素,如果20—30秒還不能打開一個網頁,一般人就會沒有耐心。如果不能讓每個頁面都保持較快的下載速度,至少應該確保主頁速度儘可能快。在目前的情況下,保持頁面下載速度的主要方法是讓網頁簡單,僅將最重要的信息安排在首頁,儘量避免使用大量的圖片。雖然大量使用文字降低了網頁的視覺效果,顯得有些呆板,不過根據加拿大最近一項“網民網上看什麼”的調查顯示,互聯網用戶92%的上網時間用來看文字資訊。
30、功能多樣、使用方便 網站吸引用戶訪問的基本目的無非是出於幾個方面:擴大網站知名度和吸引力;將潛在顧客轉化爲實際顧客;將現有顧客發展爲忠誠顧客等。爲用戶提供一個多功能的人性化界面,並保持這種功能的使用方便,就顯得十分重要,說到底用戶使用一種服務----不管在網上網下------最主要的是方便。包括方便的導航系統、必要的幫助信息、常見問題解答、儘量簡單的用戶註冊程序等等。
31、網站品質優秀 網頁上的錯誤鏈接常常是人們對網站抱怨的主要因素之一。我們時常可以看到“該網頁已被刪除或不能顯示”、“Filenotfound”等由於無效鏈接而產生的反饋信息,這種情況往往讓人覺得難以忍受,同時也嚴重影響了用戶對網站的信心。如果網站同時可以提供800免費服務電話和callcenter等聯繫方式,相信不僅可以體現公司的實力,而且更能充分體現出良好的顧客服務。
32、保護個人信息 在個性化服務十分普及的今天,許多網站要求用戶首先註冊爲會員,網站收集用戶資料有何目的?如何利用用戶的個人信息?是否將用戶資料出售給其它機構?是否會利用個人信息向用戶發送大量的廣告郵件?用戶是否對此擁有選擇的權利?填寫的個人信息是否安全?是否能獲得必要的回報?這些都是用戶十分關心的問題,如果網站對此沒有明確的說明和承諾,這樣的網站顯然缺乏必要的商業道德,或者至少可以被認爲對用戶不夠尊重。
製作網頁訣竅
33、預早籌劃 設計主頁未必很艱難。但這一工作與編制傳統的宣傳品一樣,都需要我們謹慎處理和籌劃。換言之,我們必須首先確定自己需要傳達的主要信息,然後細意斟酌、把所有意念合情合理地組織起來;之後是設計一個頁面式樣,試用於有代表性的用戶,接着重複修訂,務求盡善盡美。
34、主頁上的顏色最好不超過六十四種,頁頂圖像最好保持在大約10KB(千字節)以下。切勿禁不住誘惑。覺得非要放入大幅的圖畫不可;應考慮只用三兩幅短小精悍的圖像。主頁整體上要能夠迅速傳送。  
35、善用圖像 用戶在網上四處漫遊,你必須設法吸引和維護他們對你的主頁的注意力。萬維網的其中一個最重大資源是其多媒體能力,所以我們無論如何要善加利用。主頁上最好有醒目的圖像、新穎的畫面、美觀的字款,使其別具特色,令人過目不忘。圖像的內容應有一定的實際作用,切忌虛飾浮誇。最佳的圖像足集美觀與傳訊於一身。 注意圖畫可以彌補文字之不足,但並不能夠完全取代文字。 很多用戶把瀏覽軟件設定爲略去圖像,以求節省時間他們只看文字。用純文本模式測試已製成的主頁,確保其傳達到所有信息。
36、使主頁易於漫遊 主頁的其中一個主要功能是作爲漫遊工具,指引用戶查閱你存儲在網址或其他地點的信息。儘量使漫遊過程不費吹灰之力。基於清晰明確和速度的考慮,主頁上的聯接項目應只限於幾個高級的類別,例如公司、產品、服務、支援等。 用六至八個聯接項目最爲理想。 此外,你提供的信息不應埋藏在重重疊疊的頁面之下。穿越五個以上的聯接項目已足以令人厭煩。因此,你必須在廣度和深度之間求取平衡。如果你的網址上有太多信息,你可能要編制較長的頁面或使用更多聯接項目,甚至可能要建立多個主頁、使每個主頁載有不同的信息。如果能夠讓用戶在主頁上以關鍵字或詞語查找所需的信息,肯定受用戶歡迎。
39、循環利用現有信息 製作主頁(或其他主頁)時,通常都毋須從頭做起,因爲有許多現成的文字、圖畫等資料可供我們重用,例如宣傳小冊、公關文件、技術手冊、資料庫等。很多情況下,只要用少許功夫、就可把這些材料轉到網頁上使用。
41、貫徹諾言 做不到的事情,千萬不要輕易承諾。切勿隨便叫用戶作出迴應行動,例如要求用戶填交訂貸表格,除非你已制訂好處理這些訂單的方法和交貨程序。如果在網上列出聯絡電話、就要確保自己能夠迅速解決來電者的問題。
42、吸引用戶瀏覽 既然絞盡腦汁把主頁弄得美觀實用,沒有人來欣賞就太可惜了。爲吸引所有網中人來瀏覽,必須使主頁易於尋找。 通知其他網站(例如題材相關的網站),他們可能想聯通你的主頁。安排將自己的網址列在所有相關的網址目錄、索引、查找程序和?What? s new?頁面上。儘量將網址傳播開去,使之出現在 Internet和所有傳統煤體上、例如書刊廣告、公關文件、宣傳品等。 在網站上,於每個頁面設置home按鍵,方便用戶隨時返回主頁。 萬維網充滿生命力、正在不斷演進,所以一些現時適用的經驗,將來未必合用。舉例來說,將來家居用戶有高速線路接駁Internet,就可以消除數據傳輸目前的所受的限制、使主頁的篇幅可以更長,頁面更華麗。新的瀏覽功能、例如Sun的 HotJava測覽軟件所提供的先進功能、將使萬維網更強勁和更方便溝通。 HotJava將主頁由靜態的文件轉爲動態的實體,提供諸如即時製作動畫、背景音樂、即時存入資料(例如不斷更新股票價格)、話音廣播等功能、爲網上用戶帶來更多樂趣。
創建一個Flash站點的十大技巧
43、記住用戶的目標 用戶往往帶着目的訪問一個站點,每個鏈接,每次點擊都要合乎他們的經驗並且引導他們通向他們的目標。當傳輸你的頁面時,應該讓關鍵的導航鏈接首先裝載——萬一用戶想轉到網站其它的區域。模仿通常的用戶圖形界面往往可以增加可用性。
44、記住網站的目的 網站設計應該反應商業或者客戶的需求,有效的傳播主要信息與促進品牌。然而網站的目標最好通過尊重用戶的習慣來達到,所以站點結構必須滿足用戶的需要,快速的將用戶引導至其目標而避免任何公司和區域行話。
45、避免沒有必要的介紹 雖然介紹的動畫非常精彩,但是它們往往延誤了用戶訪問他們正在尋找的信息。應該經常提供給用戶一個忽略介紹的命令或者訪問你的主頁的選擇,當他們第二次訪問您的主頁時,對所有的用戶都應該忽略簡介動畫(使用客戶端的javascript來完成這個功能),然後在目標頁面提供返回到動畫頁面的選擇。
46. 提供合乎邏輯的導航與交互 保證用戶的導航: 顯示用戶訪問過的上一個地址和他即將訪問的下一個地址. 通過鏈接的不同顏色在用戶訪問後提醒他們訪問過的頁面. 提供用戶一個輕鬆跳出他們正在訪問的部分回到出發點的的鏈接. 明確說明每個鏈接的位置. 保證鏈接的結構和命名法的可視性,而不是隱藏它們直到用戶觸發了某個事件(比如鼠標移近). 確保按鈕定義了足夠好的反應區域. 利用Flash流的特性首先裝載主要的導航元素. 確保導航的後退按鈕. 爲了做到這一點可以使用瀏覽器內置的前進和後退導航系統,將Flash影片邏輯的分成幾塊並置於獨立的HTML頁面中. 做爲一種選擇, 爲影片建立一個基於Flash的後退按鈕以便用戶可以利用它後退到一個包含上一個訪問頁面的場景或楨.
47、設計的連貫性 提高您的站點性能的最好方法是用戶界面的一致性. 元素結構的再使用,元素的設計以及命名的習慣將使用戶在導向他們的目標時對站點傳達的信息的注意力更加豐富, 而且這也有利於站點的維護. 你可以在整個站點中使用小影片(Smart Clip)來重複使用交互元素, 還可以讓最初導航系統的文字和圖片在目標頁面中重新使用.
48、不要過度使用動畫 避免不必要的動畫. 最好的動畫應該是可以增加站點的設計目標的動畫, 在導航的時候講述一個故事或者有幫助的事情. 在包含大量文字的頁面使用重複的動畫將使視線從消息轉移.
49、 慎重使用聲音 聲音可以爲你的站點錦上添花但是絕對不是必要的. 例如:使用聲音來說明用戶剛剛觸發了一個時間. 確保使用了聲音的開關與音量調節方法, 並且要記住聲音會顯著的增加文件的大小. 當你確實使用了聲音的時候,Macromedia Flash會將聲音轉換爲MP3文件甚至流媒體化.
50、 面向低帶寬的用戶 越少的下載越好. 初始的下載頁面大小不能超過40K, 包括所有Macromedia文件,圖像和HTML文件. 爲了減少下載時間, 使用矢量圖形(除非圖像使壓縮過的BMP, 那樣最好仍保持爲BMP格式), 並且只有在用戶確定的要用到某個文件時才使用Load Movie動作. 如果用戶必須等待, 提供一個裝載的時間序列與進度條, 只要可能,必須在前5秒內裝載導航系統.
51、設計的易用性 確保你的站點的內容能被所有的用戶閱讀, 包括那些殘疾用戶. 高度使用ALT標籤可以確保網站內容能被輔助工具解釋. 影片的可縮放性是讓更多用戶瞭解網站內容的另一項易用的Macromedia特色. 如果需要一個徹底的Macromedia Flash內容可用性的討論,請登陸Macromedia Flash可用性網站.
52、可用性測試 讓一些新手來訪問站點並同時完成用戶目標與站點目標. 甚至簡短的Macromedia Flash動畫都有可能阻擋用戶實現目標, 所以使用Macromedia Flash的帶寬模擬器(Bandwidth Profiler——譯者注)(在視圖菜單的測試影片模式下)來分析站點在不同帶寬模式下的性能.每次 重複測試影片哪怕是很小的改動. 確保站點的測試者從人口統計學上合乎站點的預定用戶—特別是預定用戶中有對站點的導航有不同級別的滿意程度.
網站設計小技巧
53、做好網頁的分區,確定網頁以哪個分辨率爲標準(1024*768 640*480)
54、對於網站頁面50頁以上的應該採用網站搜索功能
55、若一篇文章很長,就不要把內容都放在一起,要採用分頁形式,一行句子的長度在一般在500-600pixes,行間距爲160%,反之,若內容較少,則可以加入圖片進行補充說明.
56、根據內容的重要性,按次序排列各個內容.
57、如果沒有特殊的原因,一般按照通用模式來設計網站的框圖
58、不要使用沒有內容的空菜單,頁面風格要保持一致
59、儘可能的採取CSS來定義網站的風格,網站首頁的CSS樣式一般不採用外部調用,但其它頁面則最好採用外部調用CSS方式
60、網站所有的文件夾和文件名都應該以英文命名,並且都應該是小寫
61、文件名最好採用英語來命名而不是採用拼音來命名,文件名應簡潔,圖片文件和動畫文件命名能看懂就可以了,能採用常用文件名的儘量採用,如index, add, up,detele,modify,foot ,head等.
62、首頁及頻道一般定義爲index,組件名稱,函數名稱,過程名稱要有意義.
63、置標的屬性要使用引號,置標要注意換行和縮進兩個半角空格,圖片的width height等到屬性要等於圖片的真實大小.
64、最好使用CSS樣式表定義字體大小,頁面中儘量使用相對路徑,書寫代碼時要區分大小寫,在無規定時儘量採用小寫字母書寫代碼
65、文件的標題屬性聲明最好填補完整,在書寫代碼過程中,最好把重複的內容做成共用文件若做成模塊。
66、儘量使用CSS樣式表來定義行距,常用的兩個行距的值是line-height:120%/150%.,避免使用<br>來換行,最好使用<P>或text-indent屬性來處理首行縮進
67、表格的嵌套儘量控制在三層內,網頁內絕對不允許使用一張大表格,不允許用空的<td>,避免使用<coolspan> <rowspan>
68、.不要在每一頁使用風格不同的圖標,不必在頁面上填滿圖像來增加視覺趣味,儘量使用彩色圓點...它們較小並能夠爲列表項增加彩色活力(並能用於彩色列表)。彩色分隔條也能在不擾亂帶寬的情況下增強圖形感。
69、不要讓訪問者不知所措,不必非要用聲音和圖像充斥網頁,也不要把文件做得太長,使用圖像時要謹慎;大的圖像顯然會降低頁面建立的速度,但許多需要順序裝載的小圖像也會如此;
70、對用作背景的GIF要謹慎。它們可以使一個頁面看起來很有趣,甚至很專業,但是裝飾背景很容易使文字變得不可辨讀,要把背景做得好,光有顏色對比是不夠的。背景要麼很亮(文字較暗)要麼很暗(文字較亮)。如果背景含圖像,對比度要較低才不至於過於分散讀者的注意力。
71、不要把重要的內容放到頁尾--有些讀者可能不會往下看那麼遠,不要讓什麼東西看起來像是一個按鈕卻不起按鈕的作用。
72、從頭至尾都要使用導航圖標,尤其是要用“返回到首頁”連接,可以在每部份都做這樣做。比如在每頁的頂端(或底部)都有一小串圖標,第一個回到首頁,第二個回到章,第三個回到節。、在頁面上應該有一些連接幫助訪問者來回跳轉,總是以相同的格式把這些連接放到所有頁面上,這樣讀者就總能知道哪兒去找到它們以及怎樣使用它們
73、請不要在網頁中連續出現多於一個的   也儘量少使用全角空格(英文字符集下,全角空格會變成亂碼),空白應該儘量使用 text-indent, padding, margin, hspace, vspace 以及透明的gif 圖片來實現。
74、在網站根目錄中開設p_w_picpaths、common、temp 三個子目錄,根據需要再開設media 子目錄,p_w_picpaths目錄中放不同欄目的頁面都要用到的公共圖片,例如公司的標誌、banner 條、菜單、按鈕等等;common 子目錄中放css、js、php、include 等公共文件;temp 子目錄放客戶提供的各種文字圖片等等原始資料;media 子目錄中放flash、avi、quick time 等多媒體文件。
75、儘快學會CSS樣式表,儘快運用Web標準來設計頁面(DIV+CSS)
附:常去的一些學習論壇
國內知名設計論壇網址:
網絡家園 http://www.my9u9.com/bbs/
藍色理想 http://www.blueidea.com
設計聯盟 http://www.chindu.org
中國UI網 http://www.chinaui.com
視覺中國 http://www.chinavisual.com
閃客帝國 http://www.flashempire.com
閃吧 http://www.flash8.net
5D多媒體 http://www.5d.cn
國內知名開發網站:
CSDN http://www.csdn.net
Codelphi http://blog.codelphi.com
Chinauinix http://www.chinaunix.net
博客園 http://www.cnblogs.com
IECN http://www.iecn.net
 
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章