Visual & Digital Visual Design

根據發展科學美學、實證美學的統雄美學3論，第一論：「風格論」，說明美學是以相對之「風格」、而非絕對吸引力的形式存在。第二論：「統一與變化論」，分析風格的內涵包括「統一與變化」2個向面，「統一」向面是跨感官、跨媒體而存在的，統一構成元素就是「結構」與「意涵」。

對閱聽人而言，是先感受到視覺作品的視覺結構，而後領會作品的視覺意涵。

對創作人而言，是先企畫視覺作品的視覺意涵，而後發展出作品的視覺結構。

統雄美學第三論：「風格可建構論」，解說不同感官、與不同媒體的「變化構成元素」，可以推導出：視覺設計的4類主要建構元素是：統一向面的視覺結構、和視覺意涵（主題、故事），與變化向面的視覺動力、和視覺色彩。

視覺結構：要強調視覺與主題一致性、導引性，包括以下次元素：…
空間：空間範圍、深度、前景與背景、甚至含中景的多層次。
時間：光源、角度、明暗對比。

畫面配置：平衡式或對比式、物件主從關係、畫面完整性與整潔性。

視覺意涵包括：主題構想：訊息、人事時地物、傳達的故事…

基礎的視覺視覺意涵元素，要能在沒有文字的說明下，能夠表現作品的主題、至少是主題的方向。進階的視覺視覺意涵元素，更要能啟發閱聽人「動或靜」「喜或悲」「明或暗」…的心理反映。

視覺動力：要求靜態的畫面應有可刺激想像力的內在能量。

平面且靜態的媒體，要表達出視覺動力，必須與視覺結構的「前後景與層次」結合，才能有動作施展的心理空間。

視覺色彩設計包括：數位視覺色彩原理、視覺色彩心理學、選色與配色，另闢專題討論。

TX視覺數位視覺設計建構4元素

TX視覺設計建構4元素，可摘要如下表。

Planning 視覺企畫

視覺企畫是將視覺建構 4 元素作整合的規畫，包括：

用途

對什麼對象、表達什麼事。

Purpose: What, who, where,...you want to deliver to your audience.

媒材

繪圖、攝影照片、視訊、多元媒材…

Display Method: Graphic, Imaging, Video, Multiple materials...

角色

主視覺設計、視覺設計系統內不同物件、元件…

Role: Main visual attraction, Supporting visual assistance,...

建構

實現以上企畫目標的 4 建構步驟：視覺結構、視覺意涵、視覺動力、視覺色彩。

Design implementation steps: structure and context, dynamics, then color.

視覺建構應用範例

靜態視覺設計依創作媒材分，最簡可分為繪圖與攝影照片2類，各舉一例如下。

繪圖的視覺企畫：夢工廠

以建構20世紀視覺經驗、歷史性的「夢工廠」代表圖為例子。

統一建構元素：視覺結構

視覺結構包括：空間與結構物件2部分。

視覺結構﹦空間結構（平面+層次）+結構物件

空間因作品媒材不同，而有靜態空間，如美工繪圖、影象照片等，與動態空間，如動畫、視訊、舞臺實境等。

靜態空間的表現在單一的空間結構設計，而動態空間的表現，可以視為一連串空間結構設計的連結。

空間結構﹦平面構圖+層次景深

圖片就物理上是2度空間的物件，但是在視覺上要形成3度空間，就是要在結構設計上達成「平面構圖+層次景深」，尤其是否有「層次景深」的觀念，最能反映視覺設計的專業與業餘區別。

「層次」就是在一個物理平面上，至少有2個以上的「視覺平面」、視覺環境、或簡稱「景 scene」，包括主景、前景、或後景、甚或多層次設計。

「景 scene」可能是實景、布景、或造境、虛境。

20世紀，為全球人類創造想像力的影片公司「夢工廠」，其代表圖，就是明顯的例子：

這是一個月空造境的空間，由前景月牙、與後景宇宙組成，而宇宙又再以2層次的雲彩與無限遠組成。層次則由亮度，區隔了前後空間。

視覺結構設計最精簡的考量，就是：平面構圖 Plane Composition、層次景深與前後景 Arrangement of Fields、與結構物件﹦表現物件+道具 Structural Objects and Props。

平面構圖 Plane Composition

平面構圖不外「平衡與對比」，平衡畫面最不容易出錯，但有些人拍照患了「中央呆板徵候簇」，即主體總是呆若木雞地擺在照片中央。改善的方法，就是加入了對比元素的「非對稱平衡」構圖。

整個的月球，其實是在畫面的正中心線上，但利用了多種對比打破平衡：包括幾何對比-月球圓形與太空的不等腰三角形、明暗對比-小而亮的月牙與與較大的月蝕、前後景對比-明亮的雲彩與深邃的宇宙拉開了空間。

槓桿平衡 Leveraged Balance

「夢工廠」的主景、也是意涵主題，是「釣夢」-釣魚的孩子。

結構設計的神來一筆，就是這位釣魚孩子的空間規畫，他坐在月芽底部，本來會將畫面壓向右傾，造成不穩定感，但他朝中央揮出魚竿超過中線，形成的「視覺物理槓桿」正好穩住重心。

也就是在所有對比元素設計完成之後，又創造了「非對稱的槓桿平衡」。

九宮構圖法‧井字構圖法

在平面設計的文獻中，會出現：九宮構圖法、井字構圖法、或三分構圖法的議題。

此議題主張：把平面按九宮格畫分，而將右側直線落在主題的正中間，使主題偏畫面的三分之二處。

這其實是槓桿平衡法 Leveraged Balance 的狹義應用，三分之二是一個一般均可行的簡易法則。

對設計者而言，只要有槓桿平衡 Leveraged Balance 觀，在視覺上不因完全對稱而產生呆板感，並毋需刻板的遵循三分之二的數字。進一步的「黃金比例」構圖法，也可以作如是觀。

層次景深與前後景 Arrangement of Fields

前後景其實是構圖的「立體空間」設計，相片雖然實體是平面的，卻須拍出感覺上的立體感，即必須有前後景與層次觀念，至少應有前景、背景，並可加上更多層次的中景。

夢工廠的月亮是前景，宇宙是背景，而不同亮度的雲層，再構成了多層次的景深。

繪圖是屬於「造境」，層次設計較自由；而攝影、尤其戶外攝影，要善用實物，請參見攝影的結構、與層次景深與前後景設計。

同時，進階視覺層次設計將在下節，與「動力」之整合設計說明。

結構物件﹦表現物件+道具 Structural Objects and Props

結構物件簡單說，就是包括狹義的「道具 prop」、與廣義的「表現物件 props」。

道具是表演藝術中，用以表達意涵的用具， 一般又分大道具、小道具，其間沒有明確區隔，在實務上，1個人可以移動、使用、表現的，就是小道具，反之即大道具。

廣義的「表現物件 props」，可以包括演員、服裝、化妝…等。在靜態視覺中，演員經常是主要的表現物件。

在「夢工廠」代表圖中，表現意涵主題的結構物件，就是釣魚的孩子，與釣魚桿。

現代裝置藝術，可以只使用「空間層次」與「道具」，而創造不同的視覺經驗，如這幅制服畫像，就是這樣創作成功的。

內嵌幾何空間

以上各種結構效果的整合，形成了「夢工廠」內嵌幾何空間，而非零亂的堆砌，包括：主題的立體圓、平面月牙，以及背景的三角立體錐，再用一根線性釣桿作破壞性對比。  

統一建構元素：視覺意涵

視覺意涵是實現，最重要的就是「用眼睛說故事」，也就是先要有劇本。

要讓觀眾「看見」事件、並「聯想」到劇情、甚至「浮現」未來的發展。

這項設計的基本非常明顯，就是3個字：「夢工廠」，就必須以視覺描述夢的場域、夢的活動、作夢者的角色，與如何產生夢、使美夢成真。

主題場域是夢工廠，故以超現實的夜景表現夢的時間、與夢幻感的環境。

再以能夠天真有夢的小孩為主角，以在夢中釣魚的行為，表達「追夢」的意涵，聯想期待、追尋，與尚未可知的獲得。

以小孩表現「童心」，是非常重要的選擇。在歷史上還有一些與釣魚有關，鮮明的意象，如：老人與海、姜太公釣魚…這些主角，都會導引向不同的故事期待。

變化建構元素：視覺動力

動力同樣因作品媒材不同，而有靜態動力，與動態動力的區隔。

平面的「視覺動力」來自物件「內在張力」的「動」，如釣魚的孩子的甩桿。

而不同亮度的雲層，除構成多層次的景深外，也會創造流動感。

「畫面」的「動態」，是一種「正格」技法，但需要多次嘗試才能夠掌握其妙處。

靜態視覺的動力：內在張力與互動能量

視覺動力主要來自演員的表演、畫面物件的移動，以及在數位科技下愈來愈發達的特效、與物件擬生命的行為等。

表演學

演員表演的研究，足以形成另一個獨立的領域：表演學。

卓別林 Charlie Chaplin 是不朽的表演教科書之一：著名的馬戲團段子。

由於卓別林 Charlie Chaplin 崛起於默片時代，在沒有語言、對話表現之下，完全要靠肢體語言、乃至五官表情，傳達作品的意涵。

動力不一定必須經過動態實現，而是能夠發揮卓別林式的內在張力與互動能量。

同學作品：「美食大賞」原始設計為人類直覺的「排排站」，屬於業餘生活照，不能算創作；而且，設計前也忘了戡景，現場的空間也不足。統雄老師建議將劇本修改為二人對峙，以表現「美食競賽」的意涵；前方再加上一位吐舌角色，以拉開景深，注意，這已是非常「正格」的技巧；各演員並在軀體角度、眼光方向、吐舌動作，發揮出視覺動力的互動能量。

「人類進化」的5階段、「青春跳躍」的5線條、乃至「知識大道」的領頭雁翔女生，都在時間結凍的瞬間，展現了內在張力與互動能量。唯「青春跳躍」在色彩設計上，有可以改善的空間，這是以後我們要再深入研究的。

變化建構元素：視覺色彩

夢工廠採用的是單一主色的「一致協調律」配色法。

主色選擇則是最被接受，認同度與穩定性最高、又具備科技氣息的藍色。

一般而言，彩色畫面較有豐富、飽滿感。但這幅圖具備「識別標誌系統」的目的，而往往呈現在大銀幕上，所以在線條上已經豐富，在色彩上就選擇了簡潔。

黃金比例構圖法‧Golden Ratio

知識美學的「模式」與「或然律」

黃金比例構圖法是視覺結構設計，歷史上傳頌數千年的理論，應用在繪圖、攝影、建築…自然生物結構上，甚至有人認為是宇宙結構的奧秘。

黃金比例構圖法，就是設定矩形的長寬比為 1 : 0.618，甚至持續以此比例連續放大構圖空間區域，許多文獻稱為「鸚鵡螺(Chambered Nautilus)形」的「黃金螺旋」。

最後晚餐 Last Supper：達利 Salvador Dali

最有名的代表作之一，應該是20世紀3大畫家之一、Salvador Dali 的「最後晚餐 Last Supper，1995」。

此作品應受 Leonardo da Vinci 同名作品（1495–96）的啟發，現在是美國華盛頓 National Gallery of Art 的鎮館之寶。 

但這種認定存在「黃金比例」的創作規則，或藝評理論，可能有點牽強。

因為以科學實證觀念來剖析鸚鵡螺，兩者很像但實則並沒有遵循黃金比例的數字發展，也因此產生很大的爭議。

這個爭議，和「古典美學」中「非科學」觀點的爭議是一樣的。

亦即一般人缺乏「知識光譜」的觀念，所認識的科學只是狹窄的「物理科學」，認為科學就是要有因果關係、要有「點預測」能力，亦即認為事件的成果，其測量值，一定和依據成因所推算出來的數字一模一樣。

「知識光譜」指出，知識除了因果知識外，還有「機率知識」，而美學更是屬於「第3類知識、人類取用行為知識」，尚待發展的「非等機率知識」。

知識美學不是追求「公式」，而是可以產生「模式」與「或然律」，在某種範圍內的條件下，可以引導、潛移默化較多人類發生某種取用行為：有感、並產生記憶，從而導出知識美學的「模式」與「或然律」式的「通律」。

亦即創作設計不必拘泥於固定數字，如 1/3、 1 : 0.618…等，而「槓桿平衡」指出了較廣闊的觀照：在 3/8 ~ 2/3 的比例範圍內，容易產生「槓桿平衡」美，但超過此範圍，仍並非沒有可令人有感的設計。

最後晚餐 Last Supper：達文西 Leonardo da Vinci

兩達對比 Last Supper: Dali PK Leonardo da Vinci

相同的「最後晚餐 Last Supper」主題，Dali 作品和 Leonardo da Vinci 兩相對比，由於 Leonardo da Vinci 具備歷史的「社會相信」優勢，且被附會許多傳說，可能一般比較著名。

但純就「設計有感」觀察，Dali 作品的結構比較恢宏、意涵也比較深奧，原因應非遵守黃金比例，以上圖解，附會的可能性較高。

由於「最後晚餐 Last Supper」具備宗教的基本意涵、必須以平衡穩重優先，所以 2 人都將主角放在中間，Leonardo da Vinci 是將左右 2 群人作不同造型，產生左右兩側的各自槓桿平衡，而 Dali 作品採用了更多創意方法：

多層次連續景深

Leonardo da Vinci 的作品達成了立體空間、三層次的設計：餐桌、建築、與窗外。

 Dali 作品將建築透明化，形成：水、山、雲、天…更綿延連續、多層次的景深，空中還浮著上帝之影，更拉高天頂景深；同時，將 2 位門徒調到前面來，更增加了前景的景深。

縱深式槓桿平衡

Dali 作品的多層次連續景深設計，得以進一步創造出「縱深式槓桿平衡」，餐桌前後形成槓桿，聖父與聖子耶穌再形成天地的槓桿。

兩人都有企圖將耶穌的形象略放大，而Dali 作品的設計，可以使耶穌如金字塔的塔尖般突出，更發生對比效果。

視覺動力效果

Leonardo da Vinci 的作品設計是兩側各門徒都有不同動作，突顯耶穌端作中間的沉穩。而攤手的動作，也是祥和的效果。

Dali 的設計相反，眾徒都是低頭靜聽、聆訓，獨有耶穌雙手都有激情的手勢，同時，與天上聖父的保護手勢作對比呼應。 

視覺色彩效果

Leonardo da Vinci 的作品因長期受到環境劣化，目前有陰暗的感覺，但有文獻提出，當初並非如此。

Dali 的色彩設計，以紅藍互補、對比配色為主，彩度、亮度鮮艷，再增強產生了強烈的對比與動態感。

攝影照片的視覺企畫：楓橋夜泊

特選一幅有中華風格、臺灣的攝影先師郎靜山的「楓橋夜泊」為代表。

統一建構元素：視覺結構

同樣由視覺結構設計的基礎進行品析，就是：平面構圖 Plane Composition、層次景深與前後景 Arrangement of Fields、與結構物件﹦表現物件+道具 Structural Objects and Props。

平面構圖 Plane Composition

平面構圖 Plane Composition，同樣採用了槓桿平衡 Leveraged Balance，主題的「泊」：漁舟在平面中央偏右。

本圖有一大特色，就是形成右斜、且有縱深發展引導性的視覺主軸。

層次景深與前後景 Arrangement of Fields

攝影、尤其戶外攝影，要善用實物創造「前景、背景」，可以刻意設計，也可以信手拈來，如在戶外拍照時，可藉選擇有趣的角度或自然背景以增強立體感，例如懸在上方角落的樹葉，或前景佈滿七彩繽紛的野花。

「楓橋夜泊」景深有3大層，而大層中又有小層次。

主題的「泊」：漁舟，是重點的中景。

背景的明月，點出「夜」泊，且多層雲霞掩映，擴大了宇宙的空間。

前景的「江楓」說明畫面所在的時空，再以陰影呈現更多細密層次。注意，前景在空間的比重、甚至色彩的搶眼度，幾乎等於中、後景的總合，是否會有不穩感呢？原來作者還有如下的設計。

本圖還有一大特色，就是創造出「虛擬空間」的「題詞」區，而與「強勢」的前景，再形成平衡。

在安排層次時，始終必須記得「相機-人物-背景」的原則是「相機與人物近-人物與背景遠」，業餘者最大的問題，就是往往反其道而行。 

結構物件﹦表現物件+道具 Structural Objects and Props

「楓橋夜泊」的視覺物件，均以白描的手法直接表現。

本作品的創意，再次彰顯「帽子哥」的威力。注意漁夫之道具「漁帽」，表現出「傾聽」的傾斜動作。一個結構物件同時促成「意涵元素」的「夜半鐘聲」，與「動力元素」的「到客船」的互動反應。

內嵌幾何空間

以上各種效果的整合，形成了「楓橋夜泊」內嵌幾何空間，包括：一個 X 形的內凹立體方錐，以及一個右斜 ^ 形的時空通道。

統一建構元素：視覺意涵

視覺意涵是實現，最重要的就是「用眼睛說故事」。

要讓觀眾「看見」事件、並「聯想」到劇情、甚至「浮現」未來的發展。

本作品就是以「楓橋夜泊」為劇本的故事，這項設計的意涵可說非常明顯的達成了。 

變化建構元素：視覺動力

動力同樣因作品媒材不同，而有靜態動力，與動態動力的區隔。

平面的「視覺動力」來自物件「內在張力」的「動」，「楓橋夜泊」就有3動：

漁夫之動：包括搖槳與傾聽，尤其傾聽，更能傳達「夜半鐘聲」的意涵，也是設計效果的整合。

雲層之動：不同亮度的雲層，除構成多層次的景深外，也會創造流動感。

楓葉之動：也是使用不同亮度的楓樹枝葉，構成更多連密的層次與搖動感。利用亮度形成「畫面」的「動態」，是一種需要多次嘗試的技巧。

變化建構元素：視覺色彩

「楓橋夜泊」表現的是水墨式的黑白、灰階色彩，但使用了一方紅印，也產生了「非對稱式對比」的配色法效果。

而此紅印的小巧，也突顯了對比必須「大小分明」的原則。

攝影建構4 元件

攝影必須使用相機，所以必須再強調攝影建構4 元件：焦距與角度、光圈與景深、快門與光源、影象後製與影象改創，待介述後再併入品析。

「楓橋夜泊」有經過影象後製與影象改創，郎靜山一生都還是在「化學後製」的時代，其實是很不方便的，但觀賞郎靜山其他作品，可以發現他在影象後製與影象改創的表現揮灑自如，且「水墨」幾乎是他作品的總風格物件。

當前的數位影象後製與影象改創工具發達，雖然便利了太多，但作品質感還是靠創意，而非僅工具。

試評範例：江山如畫

「江山如畫 On the River」是中華風格的彩色攝影，為俄羅斯攝影師 Vladimir Proshin 的作品，曾獲得 2015 Sony World Photography Awards 大獎。

由於這是一張有版權宣告的作品，所以直接在發行者網站 Sony World Photography 上觀賞。

請讀者對這幀作品試作品析。

Copyrights: Intellectual Property vs. Creative Common

著作權：智慧財產觀對創用CC分享觀

當前數位文創的各種表現形式都已多媒體化，所需要應用的各種媒材如果都能獨立原創，當然是最佳狀況。

但如果必需使用、或改創他人作品，請必須詳閱「創作著作權的兩面觀：智慧財產權觀 對 創用CC分享觀 Copyrights of Creation: Intellectual Property vs. Creative Commons」一文，並作嚴謹的處理。

對採用「創用CC分享觀」者，我們感激、並願薪火承傳、推己及人；對採用「智慧財產權觀」者，我們主動尊重，而非害怕受罰、更不心存僥倖。

Main Visual Design Case Study 主視覺設計個案品析

Real Publication 商品

Previous Students' Works 本課程學生作品

Media Implementation 媒體實作

Digital Photo 數位影象照片

Digital Graphics 數位美工繪圖

Digital Video 數位視訊