• 1. 網站內容管理教師:XXX XX年X月XX日1
    • 2. 大綱網路環境與網路使用者的特性 網站架構常見錯誤 網頁版面呈現的限制 瀏覽解析度 色彩呈現 字型呈現 網站架構規劃 網站架設步驟 網站架構規劃 網頁標準樣版 文字排版 網站設計原則2
    • 3. 網路環境與網路使用者的特性3
    • 4. 網路連線速度用戶概況 截至2002年12月底為止,我國 電話撥接用戶數 為 490萬戶, xDSL用戶數 為 182萬戶, Cable Modem用戶數 為 28萬戶, 其他連線用戶數 為 346.6萬戶 (其他連線:固接專線用戶數為1.6萬戶,ISDN用戶數為1萬戶,衛星用戶數約900戶, 學術網路(TANet)用戶數為344萬人。) 將上述各個連線方式用戶數經過加權運算,並扣除低用度用戶、一人多帳號與多人一帳號等重複值後,估算2002年底我國上網人口達859萬人,網際網路連網應用普及率為38% 資料來源:XXXXXXX4
    • 5. 網站使用者的特性缺乏耐性 難以忍受「尚在建構中」或其他錯誤訊息 「掃瞄」的閱讀方式 容易迷失方向 懷疑資訊的可靠性 螢幕閱讀的忍耐時間短 文字不比影像吸引讀者 繪圖不如照片 搜尋引擎幫助有限 偏好互動模式5
    • 6. 網站內容與讀者閱讀時間6
    • 7. 網站建構之常見錯誤 7
    • 8. 網站設計者HTML及相關程式撰寫經驗不足 路徑錯誤、程式錯誤 由「視覺外觀」為導向來製作網站 不斷的旋轉和彈跳,使用者需花費許多時間下載 由「技術面」為導向製作網站 大量使用最新程式,使用者需使用最新版的瀏覽器 8
    • 9. 網頁設計常見錯誤 (1/7)視窗分割 常因操作或設計不當造成多重視窗 瀏覽器上的網址不一定是目前顯現網頁的精確網址 無法儲存正確的網頁書籤 列印的困擾 9
    • 10. 網頁設計常見錯誤 (2/7)濫用尖端的新科技 不可避免的必須強迫使用者下載、安裝與學習新的介面互動方式 冗長的下載檔案與等待時間 新科技往往不夠穩定,常會降低使用者電腦的速度或造成當機 複雜的網址(中文的網址) 不易記憶、不易傳播10
    • 11. 網頁設計常見錯誤 (3/7)孤離的網頁、沒有導覽連結的網頁 使用者無法藉由此頁連結至其他頁面,且不易得知此頁之所屬主題或機關 欠缺網站導覽 缺乏Site map、回首頁、網站主從主題結構提示 大型網站(超過100頁面)應提供站內搜尋引擎11
    • 12. 網頁設計常見錯誤 (4/7)明顯的錯誤或過時的資訊 使用者對於網站中資訊的信任感普遍低於對傳統媒體的觀感 錯誤或過時的資訊會明顯降低使用者對此網站(機構)的信心與其競爭力 舊檔案線上保存的不足 跑馬燈式(閃爍)的文字及不斷重複的動畫 過多的跑馬燈文字或閃爍,不但無法造成吸引的效果,反而造成視覺上的混淆12
    • 13. 網頁設計常見錯誤 (5/7)冗長的捲動型網頁 設計者必須盡量讓主要的網頁內容和重要的連結,在不需要下拉捲軸的範圍內完整呈現 超連結顏色使用的不一致 當有必要使文字超連結與瀏覽器預設值不同時,也應遵循網站整體一致性的原則 「上一頁」按鈕無法使用 開新視窗 即時轉接網址 阻止快取記憶(Cache)的瀏覽除非必要,否則應盡量避免!13
    • 14. 網頁設計常見錯誤 (6/7)網頁介面符號的不一致 易造成使用者瀏覽上的困擾,且造成此單位不專業的印象14
    • 15. 網頁設計常見錯誤 (7/7)未提供人物或著作出處的註明 應註明網站經營者的背景資料 著作及研究報告應註明出處及作者資訊 網頁中提及特定人物時,勿只以電子信箱做連結,因為使用者非有特定需要,不會主動聯繫作者本人 不達意的標題或按鈕文字 以組織之部門作為標題連結 設計者個人的喜好詞彙增加網站的可信度!15
    • 16. 網頁版面呈現的限制瀏覽解析度限制 色彩呈現 字型呈現16
    • 17. 640*480像素800*600像素1024*768像素瀏覽器解析度的顯示差異17
    • 18. 網頁排版安全區域18
    • 19. 色彩呈現 - 黑白色系19
    • 20. 色彩呈現 - 256色20
    • 21. 色彩呈現 - True Color21
    • 22. GIF 檔案Advantages of GIF Files All graphic Web viewers support the GIF format for inlined images. GIFs of diagrammatic images look better than JPEGs. GIF supports transparency and interlacing. 22
    • 23. JPEG 檔案Advantages of JPEG Images Huge compression ratios are possible, for faster download speeds. Gives excellent results in most photographs and medical images. Supports full-color images (24-bit "true color" images).23
    • 24. 網頁字型及段落呈現建議字型 新細明體、標楷體 Times New Roman、Arial 字體大小 內文10 pt. 或 12 pt.,標題 14 pt. 或 16 pt. 建議段落 120 % 使用額外加入電腦系統之字型,易造成網頁顯示上的誤差。24
    • 25. 網站架構規劃好的網站是實用性(utility)與可用性(usability)的組合! 網站架設步驟 網站架構規劃 網頁標準樣版 文字排版25
    • 26. 網站的架構步驟26
    • 27. 過於水平的網站架構27
    • 28. 過深的網站架構28
    • 29. 平衡的網站架構首頁目次內容29
    • 30. 網站架構示意http://www.webstyleguide.com/site/basic_structures.html http://www.webstyleguide.com/site/diagrams.html30
    • 31. 網頁標準樣版Logo超 連 結 選 項網站整體導覽本文主題 圖像新聞 資訊廣告 推薦文字導覽、版權宣告、聯絡資訊31
    • 32. Web上的慣例左上角的標誌表示回到首頁 文字連結會在網頁底部重複 在比較長的網頁上會使用一個連結回到頂端 在大量列印的網頁上會使用友善列印頁面 可以按的項目是藍色的,並且畫底線 次要的導覽元素,例如網站地圖、搜尋等,與區域導覽分開呈現32
    • 33. 網頁排版結構33
    • 34. 網頁文字應用策略(1/3)簡潔 使用者瀏覽網頁時,不傾向閱讀長篇幅文字。34
    • 35. 網頁文字應用策略(2/3)資訊分層 設計者應有計畫的將文字內容系統化的分成多層不同的段落,而後提供超連結讓使用者自由選讀。……幾個國內網站研究都一 致指出,不論在政府機關或 私人企業,多數的管理者都 開始注意網站的管理,因此 許多電子商務顧問公司應運 而生。……網站管理相關研究 ◆ 1998 十大入口網站研究 ◆ 1999 天下雜誌最佳商業網站選拔 ◆ 2000 中央政府部會網站評估台灣的電子商務顧問公司 ◆ 哈哈 e 顧問 ◆ net.com 網路顧問35
    • 36. 網頁文字應用策略(3/3)適合視覺掃瞄 凸顯關鍵字 以項目符號排列 應用具吸引力的文字內容 標題簡明清晰 應用淺顯易懂的文字 以次標題輔助說明 避免標新立異 避免故弄玄虛 圖示應加註解 36
    • 37. 網站設計原則37
    • 38. 1. 要有清楚的結構樹狀結構圖 網站地圖 組織性 顏色管理:以「顏色」作為使用者認識網站架構之線索 版面編排一致 當站內網頁超過100頁,需加上站內搜尋機制38
    • 39. 2. 網站聯絡資訊明確每頁盡量有logo、站名、URL、網頁建立日期、聯絡e-mail或電話地址 Logo和相關識別資訊固定在每頁的同一位置 提供人物或著作出處的註明 39
    • 40. 3. 網頁標題明確每個網頁都應有標題 瀏覽器怎麼顯示網頁? 搜尋引擎怎麼找到網頁? 搜尋引擎怎麼呈現找到的網頁? Microsoft FrontPage 的 Newpage1、新網頁 網頁標題應有層屬關係,[母項 - 子項]40
    • 41. 善用標題標題可以抓住使用者的注意力 將標題獨立出來,能使網頁結構更清楚41
    • 42. 4. 網頁圖文架構清晰網頁架構和版面安排,應能幫助使用者掃瞄和篩選資訊,並能忽略不相關的大段文字 內容也應有適當簡潔的大小標題,以增加內容的可讀性 再有價值的內容,版面編排不好,使用者也很難耐心觀看,點閱率和回閱率都不會提高 圖檔提供文字說明42
    • 43. 網頁編排效果比較43
    • 44. 捲動捲軸依然清晰明確44
    • 45. 重要資訊呈現由於螢幕只能顯示網頁的一小部分,故重要資訊要讓使用者一進來就可以看到!800*600 screen area45
    • 46. 5. 善用超連結不要超連結到本頁(自己連自己) 與其將有關某一主題的資料全部編成一個超長的網頁,倒不如善用目次結構及超連結來建構內容 超連結能夠幫助使用者跳過不相關的資訊,以節省時間46
    • 47. 6. 汲取成功網站經驗上網看看大受好評的網站是怎麼設計的 若90 % 以上的網站都是這麼設計,這就是「實務標準」,請依樣畫葫蘆 若60-90 % 的網站都這麼設計,這是「慣例」,可以採用 若60 % 以下的網站這麼設計,則還沒取得共識,可以自由發揮47
    • 48. 7. 網站開張前的測試以真正的使用者做可用性測試 人都有盲點,都會有奇怪的理所當然 簡單的網站評估 網站目標、網站定位 內容 速度 瀏覽器支援 網站結構 視覺外觀與版面配置 導覽功能 搜尋機制48
    • 49. 設計網站資訊架構的挑戰以使用者的行為模式為核心,盡量遵循網站使用介面 (GUI) 的設計原則 易學、易記、少錯誤、高效率 設計網站資訊架構的挑戰 個人詮釋角度的不同 內容的多樣性49
    • 50. 致謝: XXXX製作本投影片50