1 / 37

網站的頁面設計 ～ 別讓我的滑鼠沒氣質

網站的頁面設計 ～ 別讓我的滑鼠沒氣質. 指導教授：吳有龍教授 學 生：洪淑芬 班 別：碩專一 學 號： 9822012G. 網站設計概念全通透. 風格設計 （ Style Design) 比喻設計 （ Metaphor Design) 版面設計 （ Layout Design) 框架安排 （ Frame Arrangement) 標誌設計（ Logo Design) 背景設計 （ Background Design ) 文字風格 （ Typographic Design)

hedva
Download Presentation

網站的頁面設計 ～ 別讓我的滑鼠沒氣質

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 網站的頁面設計～別讓我的滑鼠沒氣質 指導教授：吳有龍教授 學 生：洪淑芬 班 別：碩專一 學 號：9822012G

  2. 網站設計概念全通透 • 風格設計 （Style Design) • 比喻設計 （Metaphor Design) • 版面設計 （Layout Design) • 框架安排 （Frame Arrangement) • 標誌設計（Logo Design) • 背景設計 （Background Design ) • 文字風格 （Typographic Design) • 螢幕設定 （Page Dimensions 640*480) • 頁面長度 （Page Length) • 刊頭與註腳 （Page Headers and footers)

  3. 風格設計 （Style Design) • 風格設計決定整個網站的設計元素 • 設計觀念須知：風格設計前需先清楚目標使用者是誰？喜歡的網站型態為何？ • 什麼是風格設計？ 風格設計就是將網頁在未來所要呈現出的型態作一完整的計畫，包含首頁和內頁的平面和色彩等整體設計。 • 類型：完全依照企業或個人想要營造出的氣氛而定

  4. 風格設計（Style Design) • 功能： 1. 一個網站的風格可代表該企業或個人的形象 2. 成功的網頁風格設計可強化閱讀者對網站的相互感覺、關連想像。 • 設計重點： 1. 內頁鋪排要一併考慮其一致性 2. 頁面風格設計要同中求異：如用顏色來做 單元區隔

  5. 風格設計（Style Design)

  6. 比喻設計 （Metaphor Design) • 比喻設計能做為網站視覺上的有聲指導 • 設計觀念須知：需站在使用者的角度思考來做設計，以幫助使用者更容易的瞭解或使用網站 • 什麼是比喻設計？ 比喻設計是將使用者在日常生活中已習慣的物件或形式導入網頁的設計中，讓使用者進入網站後能夠很快的瞭解、習慣並清楚記得網站的各項資訊。

  7. 比喻設計 （Metaphor Design) • 類型： 1.模擬場景 2.圖像比喻 • 設計重點： 1.介面要簡單明瞭、易讀易懂 2.比喻設計要有一致性 3.要強調出重點，讓使用者更瞭解 4.用最小的比喻獲得最大的效益 5.要符合使用者的能力及經驗

  8. 模擬場景

  9. 圖像比喻

  10. 版面設計（ Layout Design) • 版面設計是根據使用者習慣來設計 • 設計觀念須知：版面設計不只要讓網站整體看起來更美麗，也要促使與使用者間的良好互動。 • 什麼是版面設計？ 版面設計是將網頁的版面作整體的規劃及設計，目的是讓網頁能夠兼重視覺平衡、美觀及其互動功能。

  11. 版面設計（ Layout Design) • 類型：沒有一定格式，依照使用者需要和習慣及設計者巧思來設計 • 功能：畫出內容大概所在的位置，排出版型，為未來的細部規劃做預備 • 版面設計優質化秘訣： 1.有效表現版面內容 2.版面元件要安排恰當 3.版面要具有視覺上的美感

  12. 版面設計（ Layout Design)

  13. 框架安排 （Frame Arrangement) • 框架設計有助於網站內容資訊的維護 • 設計觀念須知：當下載一頁新網頁時，有框架的設計通常下載時間會比較快。 • 什麼是框架安排設計？ 框架設計是將網站分割成數個視窗，且每一個分割視窗開啟後都能呈現出不同的網頁內容，可把整個網站做更有效率的整理及呈現。 • 類型：框架依頁面上的切割方式來做區分，有多少切割框架就有多少HTML檔案

  14. 框架安排 （Frame Arrangement) • 功能：1.下載時間會比較快。 2.頁面量大的網站容易維護 • 設計重點： 1.框架使用範圍不宜過大 2.框架設計需考慮資料列印的便利性 3.框架最好設計在頁面的兩側

  15. 框架安排 （Frame Arrangement)

  16. 標誌設計（Logo Design) • 標誌設計要隨時顯示在網站畫面中 • 設計觀念須知：Logo 代表公司或企業形象的表彰，一個網站的設計也代表了該網站的指標，也一定都是放在網頁上最明顯的地方。 • 什麼是標誌設計？Logo 代表一個公司的形象，而放在網頁上的Logo也必須要能夠代表網站或產品公司本身的精神。

  17. 標誌設計（Logo Design) • 功能： 1.美化網頁 2.當作網站的識別證：讓使用者進入網站後可得到明確的標示，且可帶領使用者回到首頁。 • 設計重點： 1.要著重Logo的辨識性：第一眼就要捉住使用者的目光，且認出這是網站的Logo 2.要讓Logo成為第一眼就看見的頁面元素：頁面上方的左上角是頁面載入時讀者目光最先匯集的地方 3.可以從做為設計的基礎，用以延伸整個網站的風格。

  18. 標誌設計（Logo Design)

  19. 背景設計 （Background Design ) • 背景設計會影響網站的整體氣氛 • 設計觀念須知：背景的圖像與顏色是網頁上氣氛主要的元素，不只會影響使用者進入網站的視覺感受，也關係了整個網站的氛圍呈現。 • 什麼是背景設計？ 背景設計如桌布一樣，放在網頁的最底部，然後再把其他圖像及文字放在背景的上面，讓內容更活潑。

  20. 背景設計 （Background Design • 類型： 1.單色背景：檔案較小，下載較快 2.圖像背景：畫面較活潑，但須注意不可太雜亂或蓋住前景文字或圖片，檔案不可太大，以免影響下載時間。 • 功能： 1.平衡頁面視覺效果 2.充實頁面空間 3.引導網站主題方向，導引使用者閱讀 • 設計重點： 使用圖像做為背景時，可先用繪圖軟體將其做淡化或模糊的處理，讓其不會影響使用者對其他資訊視覺上的打擾。

  21. 背景設計 -單色背景

  22. 背景設計 -圖像背景

  23. 文字設計 （Typographic Design) • 文字設計是傳達訊息的基礎 • 設計觀念須知：文字設計是傳達網站資訊給使用者的基礎媒介，良好的文字設計能同時提高閱讀性及美化網站版面。 • 什麼是文字設計？ 文字設計是選擇最適當的字型、大小、顏色及行距等，用最適合讀者閱讀的方式設計文字，提高文章的可讀性亦可兼顧美化頁面功能

  24. 文字設計 （Typographic Design) • 類型： 1.字型選用：同一頁面字型不要超過三種以上 2.字的大小尺寸：標題、段落字首字可放大；文章內容 文字在10-12級之間 3. 斜體文字：可放在文章的開頭或附註說明的地方 4. 粗體文字：用來強調文章內容的重要性 5.改變標題顏色：將文章內容及標題欄目用顏色作有系統的引導可減輕閱讀壓力 • 功能：網頁的文字設計需讓使用者便於在螢幕上閱讀 • 設計重點： 1. 使用隱形表格（Table）的方式製作文字排版以控制字數長度及對齊 2.字型選用以電腦的預設基本字型為主要設計字型，盡量不要使用特殊字型

  25. 文字設計 （Typographic Design)

  26. 螢幕設定 （Page Dimensions ) • 螢幕設定會影響網站的風格呈現 • 設計觀念須知：電腦畫面的顯示會因為使用者端的螢幕不同而會有不同的顯示效果，設計時最好以大部分的目標使用者所使用的螢幕為基準。 • 什麼是螢幕規格設計？ 螢幕規格設計就是使用者的螢幕解析度的設定，針對大部分使用者所使用瀏覽器可視範圍做出定義，設計出讓使用者不用捲軸，一眼就看完的網頁。 • 常見規格類型：600×480 800×600 1024×768 1280×1024

  27. 螢幕設定 （Page Dimensions ) • 功能：螢幕規格設計 的主要功能是鎖定所有的螢幕解析度大小，以瞭解不用捲軸的頁面可視範圍，所有資料都能在同一瀏覽頁面顯示。 • 設計重點： 1. 需先瞭解目標使用者大部分使用的螢幕規格來作設計。 2. 依螢幕解析度設計頁面寬高：以800×600為例 頁面的寬不超過760pixels，而高不超過410pixels資訊內容才能呈現在同一頁中。

  28. 螢幕設定 1024×768

  29. 頁面長度 （Page Length) • 頁面長度要考量使用者閱讀感受 • 設計觀念須知：頁面長度會影響使用者對這個網站的閱讀感受使用者閱讀感受，太長太短均不適當。 • 什麼是頁面長度設計？ 頁面長度會依據螢幕大小的不同而使頁面顯示出的長度有所不同，若超過螢幕可顯示範圍，則會出現捲軸下拉輔助閱讀，但太長的頁面會讓使用者在閱讀時無法喘息，故必須衡量頁面長度設計

  30. 頁面長度 （Page Length) • 功能：將冗長的資料切成不同的頁面，利用網頁相關的單元話題可用連結來串連整個網站，可帶領讀者做跳躍性閱讀，更讓使用者不用在單頁中，由上而下不斷的拉捲軸閱讀。 • 設計重點： 1. 將資料分割成不同頁面：頁面太長時，可分割成不同頁面，設計同頁面的連結。 2. 錨點設計：讓底部的頁面可經由「回TOP」的按鍵直跳回頁面頂端讓使用者不用一直按捲軸。 3.加上「友善列印」的選項：讓使用者下載印出後直接在紙上閱讀；友善列印的設計可將廣告及其他不相關內容排除在外，以加速頁面的下載時間。

  31. 頁面長度 （Page Length)

  32. 頁面長度 （Page Length)

  33. 刊頭與註腳 （Page Headers and footers) • 刊頭與註腳指示使用者的瀏覽位置 • 設計觀念須知：網頁的刊頭能做為視覺上的引導，告知使用者現在到底在哪一站，哪一個功能項下。網站每一頁都應有明顯且一致的刊頭及註腳的標示，讓使用者明白其身處何處。 • 什麼是刊頭及註腳？ 刊頭是放在網頁最上方讓使用者便於辨認網站名稱及其所在位置；註腳就是網頁的結語，給使用一個網覺及使用上的結尾。 • 類型：刊頭可放置網站、公司標語或直接做為導覽列

  34. 刊頭與註解 （Page Headers and footers) • 功能：刊頭及註腳是使用者在使用網頁時避免迷路的指示燈，可讓其明確的知道現在的確切位置。 • 設計重點： 1. 刊頭尺寸不要太大：高不要超過畫面的三分之一 2. 註腳不要太冗長：只要標注一些基本資料，並不是將所有聯絡的資料及行政相關資訊都放在上面。 3.每一頁的刊頭和註腳設計需一致

  35. 刊頭與註解 （Page Headers and footers)

  36. 參 考 資 料 • 別讓我的滑鼠沒氣質—網頁元素設計指南 (作者：廖鵬文 盧康渝 數位人資訊 架站人.ComER) • 使用者最大(作者：魏澤群 網奕資訊科技股份有限公司 • http://www.taiwanmobile.com/ • http://www.tokyodisneyresort.co.jp/tdl/index_ch.html • http://pages.ebay.com.hk/education/buy/index.html • http://www.kcg.gov.tw

  37. 參考資料 • http://tw.yahoo.com • http://www.kcg.gov.tw/jsf/Traveler.jsf • http://bazaar.khcc.gov.tw/home00.aspx?ID=1 • http://w3.epson.com.tw/epson/index.asp • http://www.ntm.gov.tw/child/biodiversity/ • http://www.louisvuitton.com/web/flash/index.jsp?buy=0&langue=zh_HK • http://www.sedu.cyc.edu.tw/artedu99/

More Related