Download presentation
Presentation is loading. Please wait.
1
班 級 : 資管碩一 指導教授 : 吳有龍老師 報告學生 : 林淑芬 9822016G 資料來源 : 使用者最大, 從優史性 (Usability) 出發的網站設計原則
2
1. 首頁的角色 2. 網站形象 3. 首頁的導覽系統 4. 首頁的內容 5. 圖片及動畫的使用 6. 廣告 7. 客製化首頁 — 以 GOOGLE 為例 8. 結語 9. 參考資料
3
一般來說首頁是網站中瀏覽率最高的頁面, 使用 者是網站的常客或是頭一次造訪, 大多數都會從 首頁開始瀏覽 首頁是網站出發點,負擔重要角色任務 高瀏覽率 ≠ 好印象或高知名度
4
報紙頭版 1. 必須吸引讀者目光:讓使用者想要留在網站 進一步瀏覽。 實用功能性大於美觀性。 2. 告訴讀者有哪些內容:使用者在瀏覽過後便 能對網站中的內容有所了解。 3. 標準化的版面:沒 有一套制式化標準,但 還是必須遵循,慣例,以方便使用者瀏覽。 公關人員 賣場的服務台 廣告看板
5
設計首頁的第一原則就是要能清楚的表現網站的 性質。 讓使用者對網站產生信任感,相信網站的專業能 力。
6
Logo 即是網站的識別標示, 應該放置在頁面中顯眼的地方 頁面標題 可以加註對該網站的敘述, 並能使網頁描述會出現在我的最愛中。著重網站 特點! 網址 (URL) 簡單好記且具象徵性的的網址莫過於 www. 網站名稱.com 關於我們 方便使用者對網站的性質的了解 聯絡我們 讓使用者對網路的服務產生信任 首頁的顯示速度 首頁的顯示速度必須要快,內容精簡,避免在首頁中使用體積過大的檔案
7
http : www.iot.gov.tw www.iot.gov.tw 文字加圖形的 logo http://www.loxa.com.tw/ 純文字 logo
8
網址的 Logo http://www.whitehouse.com/http://www.whitehouse.com/
9
http://www.hitoradio.com/ http://www.hitoradio.com/
10
◎ LOGO 標語是指在 LOGO 底下一句簡短但足以表達網站 特質的標語。 ◎ Logo 標語要能簡明的解釋網站所提供服務或與其他網站 的區別。.
11
並非所有網站都須加上 logo 標語,如: 一、知名度高的網站 二、 Logo 本身已說明網站性質 三、相對於網站的媒體或機關知名度高
12
清楚的標語: 空泛的標語:
13
編寫標題要著重網站特點,避免冗長的頁面 可以加註對該網站的敘述, 並能使網頁描述會出現在我的最愛中。著重網站特點!
14
3. 首頁的導覽系統( 1 ) 網站的主要功能須放置在首頁明顯處 首頁中的主要功能不可過多 首頁的導覽列形式可與其他頁面不同 頁面上方的橫條廣告( BANNER )不可與導覽列 相連 首頁須設置搜尋列 首頁的搜尋範圍要預設為全站的內容 不需要在首頁中設置網際網路搜尋 會員系統
15
3.1 網站的主要功能須放置在首頁明顯處
16
留白的藝術, 避免版面過於擁擠 避免使用不易了解的詞彙 歡迎詞 多用圖片代替文字, 對於圖形的吸收速度遠 大於文字 精簡首頁中的文字內容
17
4.1 留白的藝術, 避免版面過於擁擠
18
4.4 多用圖片代替文字 台北市 多雲 22~25°C 20% 基隆北 海岸 多雲時陰短暫雨 22~25°C 50% 台北地區 多雲短暫雨 22~27°C 30% 桃園地區 多雲時晴 22~27°C 20% 新 竹地區 多雲時晴 22~28°C 0% 苗 栗地區 多雲時晴 22~28°C 0%
19
4.5 精簡首頁中的文字內容
20
不要為了裝飾首頁而使用圖片或動畫 有關網站識別的位置不可使用動畫 圖片註解 圖片要包含連結 不要完全以flash來製作首頁 不要使用開場頁( Landing Page ) 避免使用圖片作為首頁的底色
21
不要使用開場頁( Landing Page )
22
開場頁 + 頁面上方的橫條( BANNER )
23
頁面重要內容不可與廣告放在一起 頁面上方必須保留給網站識別 避免彈出視窗 廣告與網站內容必須分清楚
24
6.4 廣告與網站內容必須分清楚
25
http://www.google.com.tw/ http://www.google.com.tw/
27
首頁具有這麼多的問題?為什麼專業的網站設 計人員會不知道如何改善首頁的介面呢? 首頁可能存在設計者不易察覺得問題,只有透 過觀察網頁的使用者的測試,才能得知。
28
使用者最大, 從優史性 (Usability) 出發的 網站設計原則 http://www.google.com.tw/ http://www.google.com.tw/ http://www.whitehouse.com/ http://www.whitehouse.com/ http://www.hitoradio.com/ http://www.hitoradio.com/
29
參考資料
Similar presentations
© 2025 SlidePlayer.com. Inc.
All rights reserved.