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

畫面配置的意義

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

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

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

網頁畫面的構成主要構成

–文字與圖片次要構成

–背景與音樂

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

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

字體種類及特性

ROMAN ARIAL

圖片的編輯語言 圖片是相片、插畫、漫畫及圖表的總稱，是一種人人都看得懂的圖畫語言。

圖片具有真實、美觀及親切的三大功能。

圖片可以透過裁切、組合、合併等處理來美化圖片。

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

背景、框線編輯概念 背景色彩及背景圖案編輯應用

框線的使用時機與條件

色彩的感受

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

色彩的聯想

具體聯想　夜晚、頭髮、木炭、墨

抽象聯想　死亡、拒絕 恐怖、邪惡

具體聯想 白雪、白雲、白紙、護士

抽象聯想 純潔、樸素、神聖、虛無

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

黑白紅 是最古老的色彩

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

色彩的聯想

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

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

具體聯想 香蕉、黃金、 黃菊、注意信號

抽象聯想 明快、光明、 注意、野心

色彩的聯想

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

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

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

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

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

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

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

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

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

涼色所構成的畫面

暖色所構成的畫面

柔軟的配色

爽朗的配色

華麗的配色

輕的配色

重的配色

色彩的均衡與強調

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

均衡配色的原則 彩度高、暖色調，純色在面積比例上要小於彩度低、涼色調或濁色，如此才易得到均衡。

明度高的輕，明度低的重。故高明度色彩宜在上，低明度在下，才容易獲得均衡。

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

何謂強調配色

強調色使用原則強調色必須是比畫面上其它色調強的色彩。

強調色的面積不宜太大，主題要恰當，以免喧賓奪主。若過分的使用，反而會造成畫面的不安和混亂。

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

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

色相對比

明度對比

彩度對比

色彩與形狀

如果能充份掌握色彩特性及應用， 你會發現 創造美麗及品味 是件簡單的事。

其實， 簡單就是美。

美的最高境界 就是典雅。

網頁畫面配置要素 背景與色彩的流暢配合 文字與圖片的均衡組合 框線與美工的運用得宜

E-MAIL ： hhntape@mail.tku.edu.tw電話： (02)2621-5656 轉 2233 交通與安全組