- 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