網頁製作之 畫面配置 觀念及應用

1. 網頁製作之畫面配置觀念及應用 黃 輝 南

2. 畫面配置的意義 將背景、文字、圖片、音樂在網頁畫面上加以組合，透過設計觀點與技巧，運用色彩、形狀及大小加以處理，產生新的視覺感受，並完成圖形、文字及符號訊息之傳達效果。

3. 首頁畫面的特性 • 具有櫥窗的作用 • 展現主體的個性 • 兼具導引的功能

4. 網頁畫面的關聯 • 整體性與獨立性 • 變化中的統一

5. 網頁畫面的構成 • 主要構成 • 文字與圖片 • 次要構成 • 背景與音樂

6. 文字是組成畫面的主要因素，它包括標題和內容，所以在畫面佈局及編輯上應優先處理。文字是組成畫面的主要因素，它包括標題和內容，所以在畫面佈局及編輯上應優先處理。

7. 瞭解文字架構特性，在編輯時可以應用得更順暢。瞭解文字架構特性，在編輯時可以應用得更順暢。

8. 字體種類及特性 ROMAN ARIAL

9. 圖片的編輯語言 • 圖片是相片、插畫、漫畫及圖表的總稱，是一種人人都看得懂的圖畫語言。 • 圖片具有真實、美觀及親切的三大功能。 • 圖片可以透過裁切、組合、合併等處理來美化圖片。

10. 目前常用影像編輯軟體 • Adobe Photoshop 5.0 • PhotoImpact 4 • Microsoft Photo Editor • 小畫家

11. 背景、框線編輯概念 • 背景色彩及背景圖案編輯應用 • 框線的使用時機與條件

12. 色彩的感受

13. 色彩是一種複雜的語言，它具有喜怒哀樂的表情，色彩對感覺的影響是多方面的。色彩是一種複雜的語言，它具有喜怒哀樂的表情，色彩對感覺的影響是多方面的。

14. 色彩的聯想

15. 具體聯想 　夜晚、頭髮、木炭、墨 • 抽象聯想 　死亡、拒絕 恐怖、邪惡

16. 具體聯想 白雪、白雲、白紙、護士 • 抽象聯想 純潔、樸素、神聖、虛無

17. 具體聯想 血液、太陽、 火燄、心臟 • 抽象聯想 熱情、危險、 反抗、喜慶

18. 黑白紅 是最古老的色彩

19. 黑、灰、白是屬於無色彩，是其它「有色彩」都可配合的共同色。黑、灰、白是屬於無色彩，是其它「有色彩」都可配合的共同色。

20. 色彩的聯想

21. 具體聯想 葡萄、茄子、 紫菜、紫羅蘭 • 抽象聯想 高貴、神祕、 優雅、孤獨

22. 具體聯想 樹葉、公園、 草木、安全訊號 • 抽象聯想 和平、理想、 成長、安全、 休息

23. 具體聯想 香蕉、黃金、 黃菊、注意信號 • 抽象聯想 明快、光明、 注意、野心

24. 色彩的聯想

25. 具體聯想 巧克力、咖啡、 泥土、木材 • 抽象聯想 苦澀、燒焦、陳舊、古董

26. 具體聯想 橘子、柳橙、 晚霞、秋葉、… • 抽象聯想 快樂、溫情、積極、明朗、...

27. 具體聯想 海洋、藍天、 湖泊、遠山 • 抽象聯想 沉靜、涼爽、憂鬱、理性

28. 色彩的喜好性，常因風土、環境、教育、習慣、民族、時代等而變化，個人也會因某些經驗，而對特定的色彩 產生喜好或厭惡。

29. 一般而言，受人喜愛的色彩，大多是活潑、明快。故純色比濁色喜好率高，清色比暗色喜好率高，單色比複雜色喜好率高。一般而言，受人喜愛的色彩，大多是活潑、明快。故純色比濁色喜好率高，清色比暗色喜好率高，單色比複雜色喜好率高。

30. 男性較喜歡涼色，女性喜歡暖色；明度愈高，女性的喜好度愈高，反之，明度愈低，男性的喜好度愈高。男性較喜歡涼色，女性喜歡暖色；明度愈高，女性的喜好度愈高，反之，明度愈低，男性的喜好度愈高。

31. 以年齡而言，從年輕至年老，對色彩的喜好，由暖色傾向涼色；由明色調到暗色調；由對比強烈傾向對比柔弱；由高彩度傾向低彩度。以年齡而言，從年輕至年老，對色彩的喜好，由暖色傾向涼色；由明色調到暗色調；由對比強烈傾向對比柔弱；由高彩度傾向低彩度。

32. 色彩是不能單獨存在的，當我們觀看某一色彩時，必受周圍的其它色彩影響；只有在兩種以上的色彩互相比較時，才有美與不美的問題。色彩是不能單獨存在的，當我們觀看某一色彩時，必受周圍的其它色彩影響；只有在兩種以上的色彩互相比較時，才有美與不美的問題。

33. 配色的原則 配色因個人修養，時代風尚或人文地理而有所不同，因此，各地區各族群皆有其獨特的色彩風格，但基本上還是可找出配色的基本原則。

34. 涼色所構成的畫面

35. 暖色所構成的畫面

36. 柔軟的配色

37. 爽朗的配色

38. 華麗的配色

39. 輕的配色

40. 重的配色

41. 色彩的均衡與強調

42. 均衡是指兩種以上的色彩配置在一起時，在視覺上具有平穩安定的感覺。色彩的明暗輕重和面積大小，是影響配色均衡的主要因素。均衡是指兩種以上的色彩配置在一起時，在視覺上具有平穩安定的感覺。色彩的明暗輕重和面積大小，是影響配色均衡的主要因素。

43. 均衡配色的原則 • 彩度高、暖色調，純色在面積比例上要小於彩度低、涼色調或濁色，如此才易得到均衡。 • 明度高的輕，明度低的重。故高明度色彩宜在上，低明度在下，才容易獲得均衡。

44. 為調節畫面效果，彌補整體色彩的單調感，在某一小部份使用醒目的色彩，使整體的色彩效果更加緊湊及充實的強調方式。為調節畫面效果，彌補整體色彩的單調感，在某一小部份使用醒目的色彩，使整體的色彩效果更加緊湊及充實的強調方式。 何謂強調配色

45. 強調色使用原則 • 強調色必須是比畫面上其它色調強的色彩。 • 強調色的面積不宜太大，主題要恰當，以免喧賓奪主。若過分的使用，反而會造成畫面的不安和混亂。

46. 色彩的對比 通常，我們看色彩時，絕不會只見到單一色彩，往往因周圍其它色彩的作用與比較，產生了涼／暖、強／弱、濃／淡等各種不同的對比感覺。

47. 色彩的對比，就是色彩本身受其它色彩的影響，而產生與原來單獨觀看時不一樣的現象。色彩的對比，就是色彩本身受其它色彩的影響，而產生與原來單獨觀看時不一樣的現象。

48. 色相對比

49. 明度對比

50. 彩度對比