1 / 25

網頁 設計 基本 原則

網頁 設計 基本 原則. Basic Principles & Guidelines. 大綱. 版面安排 內容架構 內容與樣式分離 為各式各樣的瀏覽器保留彈性 效能考量 好的使用者體驗. 版面安排. 留白（ Whitespace ） 動線（ Flow ） 對齊（ Alignment ）. 版面 安排. 留白（ Whitespace ） 莫 令內容擁擠 在頁面和瀏覽器邊界之間保留一些空白，在段落與段落之間保留一些空白 保留喘息的空間. 留白. 版面 安排. 動線（ Flow ） 引導讀者的眼光順著動線瀏覽網頁 由 左至右，由上而下

amir-hardin
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. 網頁設計基本原則 Basic Principles & Guidelines

  2. 大綱 版面安排 內容架構 內容與樣式分離 為各式各樣的瀏覽器保留彈性 效能考量 好的使用者體驗

  3. 版面安排 留白（Whitespace） 動線（Flow） 對齊（Alignment）

  4. 版面安排 • 留白（Whitespace） • 莫令內容擁擠 • 在頁面和瀏覽器邊界之間保留一些空白，在段落與段落之間保留一些空白 • 保留喘息的空間

  5. 留白

  6. 版面安排 • 動線（Flow） • 引導讀者的眼光順著動線瀏覽網頁 • 由左至右，由上而下 • 左高右低，左重右輕 • 用圖片吸引讀者的目光 • 用標題清楚分割章節段落

  7. 動線

  8. 版面安排 • 對齊（Alignment） • 文字和圖片對齊的位置，影響瀏覽的動線 • 專業設計軟體（Photoshop, Fireworks, Illustrator）提供 960格線系統 • 頁面寬度 960 像素 • 垂直分割成 12 或 16 欄

  9. 960格線系統

  10. 內容架構 • 內容很重要！ • 良好的章節結構，幫助讀者有系統地獲取資訊 • 精確地以標籤描述內容 • 以 <h1>、<h2>、… 標示章節名稱 • 以 <article>、<section>、<p>、<header>、<footer> 標示文章段落結構

  11. 內容架構 • 搜尋引擎最佳化（Search Engine Optimization，SEO） • 網站的目錄結構和內容架構一致 • 網頁檔案名稱和網頁主題一致 • 以 <title>、<meta name=description>、<meta name=keywords> 讓搜尋引擎正確地認識你的網頁

  12. 內容與樣式分離 • HTML 只負責內容結構 • 樣式由 CSS 負責 • 不要在網頁裡使用下列標籤 • <font>設定字型、<big>大字、<small>小字、<b>加粗、<i>斜體、<u>底線、<s>刪除線、<center>中間對齊 • 行為由 JavaScript 實現 • 團隊合作、專業分工 • 撰寫文稿、美術設計、程式設計 • 快速更換網站風格，不影響網站內容與行為

  13. 為各式各樣的瀏覽器保留彈性 • 瀏覽器種類繁多，對於 HTML、CSS、JavaScript 的呈現結果未必完全相同 • 謹守W3C的標準，避免使用不標準的標籤 • 代價：犧牲某些特效 • 驗證工具：http://validator.w3.org/ • 善用工具：Adobe Dreamweaver 製作的網頁相容性高

  14. 為各式各樣的瀏覽器保留彈性 • 平台差異性大 • 各種手持裝置的螢幕寬度不一 • 避免『固定寬度』的設計，盡量使用百分比 • 戒掉 Flash • 勤加 alt • 當影像出不來的時候，使用者至少可以看到文字 • 一個網站兩個版本 • 小螢幕手機版 • 寬螢幕筆電/桌機版

  15. 效能考量 @import url('style1.css'); @import url('style2.css'); @import url('style3.css'); @import url('styles.css'); <link rel='stylesheet' href='styles.css'> • 減少 HTTP Request 的數量 • 合併引入的外部 CSS 檔案 • 合併引入的外部 JS 檔案

  16. 效能考量 • 圖片最佳化 • 從數位相機或掃描器取得的影像解析度太高！ • 先以 Photoshop 處理，降低色彩、調整寬度高度 • 經驗法則：圖檔大小不要超過 12KB • 不要用 CSS 或 <img> 調整影像的大小 • 影像原始大小=網頁上顯示的大小

  17. 好的使用者體驗 • 導覽（Navigation） • 讓使用者知道他目前身在何方 • 以亮色突顯目前功能選單 • 使用導覽路徑標示（Breadcrumbs, 麵包屑） • 清楚的標示，使用副標題

  18. 導覽 Breadcrumbs

  19. 導覽

  20. 好的使用者體驗 • 用色 • 對於顏色好惡，取決於主觀印象 • 表現設計風格 • 背景和文字的顏色應該採對比色 • 網路上的對比色工具：Jonathan Snook’s Color Tool • Web Content Accessibility Guidelines (WCAG) 2.0 • 用鮮艷的顏色吸引使用者 • 最重要的：橘色、紅色 • 第二重要的：藍色、綠色

  21. 用色

  22. Call to Action

  23. 色彩繽紛的 Toys R Us

  24. Mail Chimp

  25. 結語 版面避免擁擠 以 HTML 標籤描述內容架構 搜尋引擎最佳化(SEO) 內容與樣式分離 為各式各樣的瀏覽器保留彈性 減少 Http Request 的數量、影像最佳化 網站導覽 Call to Action

More Related