1. 報告人：陳耿暉 各類別網頁設計的概念及趨勢 指導老師：吳有龍教授

2. 一、前言  網頁介面設計的構成要素 版面設計 色彩運用 內容  網頁介面設計的特性 使用的便利性 一貫性 創意性

3. 二、各類別網頁設計的概念  傳媒 以文字為主，豐富而即時的訊息 版面依訊息主題分類，主頁顯眼處提供即時 訊息 廣告與主要內容分離，以不影響可讀性 白色背景、深色文字，減少色彩數量 使用重點色彩強調重要部分

4. 二、各類別網頁設計的概念  兒童、遊戲、動漫 繽紛、活潑的色彩、字體、圖片、動畫，喚 起人們興趣和好奇心 版面編排禁忌較少，增加創意空間 黑色、白色背景增加插圖效果 符合兒童跳躍式的思維模式 遊戲化、故事化的內容編排 鍵結層級不宜過深、過廣

5. 二、各類別網頁設計的概念  飛機、汽車 展示寬廣、安全、便利、活力、自由 橫向版面讓視覺更寬闊 黑色、深藍色、深灰色「強調工業色彩」 暖色系、優雅圖像、柔和音樂增加親和力及 感染力。

6. 二、各類別網頁設計的概念  電腦、通信 清新、別致的色彩搭配，簡潔、素雅的文字 組合。 鮮明圖片、動畫展現有關產品性能及優點 硬體網站強調硬體的精密性、準確性 軟體網站強調軟體使用的便利性

7. 二、各類別網頁設計的概念  家居、生活 主要以溫馨、幸福、明朗、舒適的氣氛為主 大面積的色塊比流動的線條佳 簡潔的版面、間距較大的文字排列 浪漫氣息的圖片、裝飾圖案 節奏柔和輕音樂

8. 二、各類別網頁設計的概念  建築、室內設計 建築類表現強大、堅固及空間秩序為要點 需表現實際建築材料的質感、力學 強調版面整齊及平衡 室內設計更重視視覺元素，主要運用乾淨、 溫暖的配色，表現優雅、都市風格。

9. 二、各類別網頁設計的概念  社會、法律 應強調專業、嚴謹、公正、信任 配色以彩度、亮度較低者為主 版面以縱向分割為主 如要擺脫權威形象，應設計溫和、親切頁面， 使用曲線和圓形的圖像等。

10. 二、各類別網頁設計的概念  時尚、購物 時尚網站應善用高品質照片 白色背景，可凸顯照片，黑灰色則顯高雅 依標識特性融入畫面設計及配色 購物網站應展示商品圖像及名稱，並製作方 便明確的導覽列。

11. 二、各類別網頁設計的概念  體育 強調健康、速度、高度、充滿朝氣及活力 版面安排較自由、以流暢、動感為主軸 運用生動的圖片及色彩對比以增添活力 可依球隊或運動員設計個性網站 如需提供大量即時資訊，應避免過於雜亂

12. 二、各類別網頁設計的概念  文化、教育 表現富有知識的專業性、開放性及朝氣 色彩以白色為主，搭配黃、藍、草綠色 放置校園風光及活動場景圖片 版面安排應以簡單、整齊為主

13. 二、各類別網頁設計的概念  醫藥、健康 強調信任、親切、清新、溫和 以淡綠、淡紫色為主要配色，搭配暖色系以 調和 使用大面積的白色區域，或透明的圖片、色 塊 避免使用黑色、深灰色或彩度較低之色彩為 背景

14. 二、各類別網頁設計的概念  藝術、歷史 依照藝術屬性由強調浪漫及創意，到傳承、 懷舊等不同類型 文字資訊較少，提供高品質圖片 展示作品應提供小圖，點選後看到大圖 背景以白色為佳，方便欣賞作品

15. 二、各類別網頁設計的概念  影視、娛樂 強調視覺性及自由性 版面、色彩等設計較無禁忌 放置相關主題圖片，以利宣傳 依頻寬置入動畫

16. 三、網頁設計的趨勢 from ： Smashing Magazine  凸版印刷風格

17. 三、網頁設計的趨勢  豐富的使用者介面

18. 三、網頁設計的趨勢  PNG 透明效果

19. 三、網頁設計的趨勢  大字體

20. 三、網頁設計的趨勢  替代字體

21. 三、網頁設計的趨勢  燈箱效果

22. 三、網頁設計的趨勢  多媒體影音

23. 三、網頁設計的趨勢  雜誌化的版面設計

24. 三、網頁設計的趨勢  幻燈片導航

25. 三、網頁設計的趨勢  在重點位置做形象展示

26. 三、網頁設計的趨勢  反 Box 佈局

27. 三、網頁設計的趨勢  單頁佈局

28. 三、網頁設計的趨勢  多欄佈局

29. 三、網頁設計的趨勢  巨型插圖式與多變背景設計

30. 三、網頁設計的趨勢  更多留白

31. 三、網頁設計的趨勢  ” 社會 ” 網路元素

32. 三、網頁設計的趨勢  解釋風格的導覽

33. 三、網頁設計的趨勢  動態 Tabs

34. 四、參考資料 周虹、王咏剛 (2006) 。出色網頁大賞。電腦 人文化。 黃在賢 (2006) 。 Web better design 設計師談 精采網頁設計。文魁資訊股份有限公司。 smashing magazine ： http://www.smashingmagazine.com/2009/0 1/14/web-design-trends-for-2009/ http://www.smashingmagazine.com/2009/0 1/14/web-design-trends-for-2009/

35. 報告完畢，敬請指教！

36. 網頁設計的版面設計  Logo 位置： 左側：最常見 中央：訊息量大的入口／搜索網站 右側：富創造性的專門領域網站  畫面分割： 縱向分割：適合提供大量資訊之網站 橫向分割：適合強調視覺效果、設計之網站 橫－縱向混合：最常見，通常在橫向的上端設置 網站標誌、主功能表 留白

37. 網頁設計的色彩運用  色彩的心理效果 三要素、對比、平衡  即有通俗印象 節慶、國別、企業標誌、主題屬性  特定族群 性別、年齡、職業