傳意設計入門

 

 Design

 

視覺感知

理解與視覺

從感光細胞而來的景物包含大量視像噪音,我們的視覺可以高速地在噪音中把對自身生存有關的元素分離出來

現代生活當中我們不斷從視象噪音中分離出資訊

當找到視覺用以辨識事物的特徵後,便可以運用高度簡化的圖像來傳意

利用視覺排除噪音的特性而設計的廣告,車上乘客的視覺會「看不見」廣告灰黑色的背面

單從看見波長範圍、分辨率等來衡量,人的視覺與其它動物相比並不特別優秀,但人的腦袋中,用來處理視覺訊息的區域,相對整個大腦的比例,是動物之中最高的。

若要了解人的視覺感知(Visual Perception),並不能單單用照相光學的角度去理解,而應更深入了解,從光照在感光細胞(Photo-receptor Cells)上直至交給我們的意識為止,視覺做了些什麽工作。

產生視覺的組織包括一連串從眼球到視皮層(Visual Cortex)的神經細胞,它們就好比一台大型的網絡計算機,自主地分析訊號、調整眼球、追踪目標,它們的活動統稱早期視覺(Early Vision)

早期視覺的主要作用有:

  • 將眼球轉動掃描得來的細小畫面合並為一整幅景物,即我們所見到的視野。
  • 將與477mm, 540mm, 577mm三種波長對應的訊號,理解為「顏色」。
  • 決定視野中有否對自身生存有關的元素(獵物、敵人等)並集中注意
  • 排除與自身生存無關的元素
  • 將視野所見的線條、色面等分組,歸類並予大小、形狀、方位、遠近等屬性

從上可知,當視象無法為視覺處理或處理後被排除的話,是無法為訊息接收者理解的。傳意設計的構成,既要把訊息快速、準確地傳達,也須令觀者喜愛和接受,因此在使用合適的視覺元素和構成手段時,無不考慮視覺感知的運作。

視像的組織

完形的經典例子,視覺感受到的白色三角型是一個完形,它不存在於原來的黑色多邊形,反之它使黑色多邊形看似方形

格式塔理論是約一九一零年德國的科學家Wertheimer,Kohler和Koffka所提出的。他們發現,對人的感知而言,存在一些整體(完型),其特性並不存在於它的組成部分,而是這些特性反過來會對組成部分產生影響。格式塔的主要研究是在於發現並了解這些整體。 格式塔理論 的研究認為,當信息由感覺器官送到腦袋,腦部即展開種種分析和整理的工作,在這個過程中,完形心理便在腦海中產生,協助人類的感知思維。完形心理的理論認為信息在腦部要將信息整理及組織,才能形成知覺,而信息組織是知覺之本。

近代對視覺感知的生理研究,慢慢地揭示了格式塔理論背後的生理過程,了解格式塔理論,可以使我們在設計視象時,預計觀眾的生理反應,從而提高傳意的速度和準確度。

近年的視像設計師,將人類的知覺思維的分析,整理及組織方式,運用在設計視像之中,使作為視像信息含義的形成,令視像可直接影響受信者的知覺,使受信者在看見信息含義後馬上作出行為的反應。而在完形心理學說上的研究及理論,與視像設計有著很密切的關係。

 

就近性令我們自然地把線條分為五組

閱讀文字十分依賴就近性,當字距與行距差異不夠大,視覺的分組能力便會被擾亂,出現透孔

「就近性」是格式塔理論中最基礎的一個規律。我們日常看見的形體,如果距離相近的話,很大機會它們是屬於同一個個體的。因此,在處理視像資料時,久而久之,視覺形成了「就近便是一組」的規律。

就近性最重要和基本的體現便是在文字的編排上,中文書法中所指「行氣」,便是文字的字、行、段間的距離,能否令視覺建立起正確的分組,此外,在書刊、網頁的構圖中,相同的內容放在一起,也是配合就近性的 鋪排方法。

 

封閉性使我們無視元素之間的距離分別,把能組成方形(在此例子是一完型)的元素歸為一組

圖像缺損的位置對視覺辨認有重大影響,顯示線條交點是視覺分辨圖形的主要線索

字母的字腳在封閉性作用下把字母連成一組

封閉性和就近性的結合令我們自動把版面的資訊分成一個個單元

「封閉性」是格式塔理論中比較難用文字解釋的一個規律。封閉性的基礎是「完形」,即一個視覺上最簡單、完整的形狀。但凡眼睛看見的景物,視覺都會試圖將之組合,直至選擇到一個最合理的完形為止。 因為生活中外界景物是在不斷的變化當中,前一刻看見的形體,現在可能已被遮蓋,所以視覺會跟據經驗,補足形體的殘缺部分,因此我們常常會出現視錯覺。

封閉性是凌駕於就近性的規律,如果視覺能補足完形,相距遠的兩個形狀會較相近的更易形成一組。 拉丁字體中的有腳字類別,便是利用了就近性,令我們更強烈地感受到一個字串的整體感。 在版面編排上,方框、顏色塊、間線等,都是設計師常用的手段,來引起我們的封閉性感覺。

配色

肉眼對可見光不同波長有不同反應,光譜是將反應按波長排列的圖表

將光譜彎曲為一圈成為色彩環,可直觀地看到相似色與對比色的關係

 

如果視覺感到整個視野的顏色都有偏移,會自行減弱偏移的影響

光乃視物之本,基本的光學常識,例如白光可分為七色、物體之顏色乃其反射之色光所決定、以至眼睛媯羉蘀仇Q光照射而產生視覺訊號等等,已是普通常識。但當我們須要了解設計作品的構成和傳意的機制時,有一些平常忽視的要點,是須要 注意的。

首先要指出,除實驗室的特殊器材外,一般光源(燈光、火光、太陽等)所發出的光,都包含可見光譜中的所有波長,不過不同波長部分的強度則各有不同,對於眼睛所感測的顏色,視覺有很強的適應和調節能力,即使肉眼看見一道紅光,或一隻反射着紅光的紅汽球,其光線中都有橙、黃、綠等成份,只是視覺把其餘較弱的成份忽略掉。

我們人類視覺的工作,除了把次要的波長成份濾走,亦會創造新的色感,比如洋紅色,在波長成份中並不自然存在,洋紅是當進入眼睛的短波(400mm)和長波(700mm)同樣強烈時,大腦所「形成」的一種感覺。

另一件視覺的工作,是調節各視野內各種顏色的差別,以彌補光源改變時所引起的顏色變化。

 

一件視象作品的用色可歸納為數種

配色是傳意設計的一個重要步驟,任意地使用顏色不單會擾亂視覺分析和組合資訊,更可能破壞構圖的美感。 專業設計的視像作品上顏色可以很多,但如果把近似的歸為一類,其實主色只有幾種,不會「五顏六色」。為了帶出不同視像文件中的統一配色,我們多會限制一個版面所用的顏色數目,並將許可的顏色用文字或色票訂明,這種顏色規範稱為色盤。

配色的方法變化多端,是相當博大精深的學問,不過在日常生活中,也有一些基本規律可以掌握,利用這些規律而成的色盤,不致出現很大的差錯。 「原始色」、「近似色」和「對比色」是其中比較容易辨認的。

 

     
     
     

幾種原紿色

使用原始色的年畫

使用強烈的原始色令人感受活力與節奏,讓人相信機構正在不斷改變中

「原始色」(Primary Color) 是一種基本、強烈,而且容易使用的配色組合。原始色是以洋紅、黃、青三種顏色,或者這三種顏色的混色相配而成,由於使用的都是鮮明的顏色,所以看起來有原始和充滿活力的感覺,亦因此長久以來都得到人類喜愛。好像我國的年畫,皆多用原始色,取其明亮,喜氣洋洋之意。少數民族服飾,以至世界各鄉郊部落,都不難發現在服飾 、器物等之上採用原始色的例子。

 

     
     
     

三套近似色組合例子

運用近似色的廣告

近似色有助統一城市景觀

指示牌使用環境色的近似色可令畫面和諧舒適,不會「汚染」四周環境的配色

「近似色」是最安全易用的配色組合。近似色是指使用不超過色彩環一百二十度範圍內的顏色,由於這個規律,近似色的配搭中不會出現對比或衝突,所以能在視覺上形成平和舒適的感覺。

近似色在日常生活中的用途最廣泛,日常工作和作業的構圖,都可用近似色來帶出整潔、統一的感覺。

近似色的另一作用就是協調大範圍內的視覺統一性,例如在都市的規劃上,建築物的統一顏色配合,和使用近似色,可以使一個城市一見難忘。 在一套多件的設計作品中也可使用近似色來製造統一性。

 

   
   
   

三套不同程度的紅、綠對比色

   
   
   

三套不同程度的藍、橙對比色

   
   
   

三套不同程度的紫、黃對比色

極端的對色相配令人有目眩甚至迷幻的效果

使用藍–橙對比色的廣告

意大利Portofino地區常見弱化了的紅、綠對比色房屋,鮮明而不刺眼

「對比色」是變化最大,表達力最強,但也最難使用的配色。 對比色是指使用色盤上相對的兩種顏色,由於視覺上補色加強的特性,兩種對色會令對方更明亮,因而令我們有深刻、強烈的視覺反應。

極端的對色相配可令人有目眩甚至迷幻的效果,因此深受藝術家和設計前衛刊物的設計師喜愛。 深沉的對色令人覺得嚴肅,所以多見於高級消費品的宣傳中。 一深一淺的對色活潑,明快之餘,沒有原始色的粗糙感,所以在日常生活的平面設計中最常見。

對比色不一定須要完全一百八十度相反的两色,選擇色盤對角近一百二十度邊緣處的對色的話,視覺效果將介乎近似色與對比色之間。

 

視窗系統一般採用成份比率標示顏色

Pantone包括多個不同用途的色盤,Formula Guide是其中之一

香港品牌的色彩指引同時標明專色(Pantone)與拆色(RGB及CMYK)方便各種用途

在科技不那麽發達的過去,色彩的指定是比較簡單的,因為以前顏料的來源所限,可供使用的人工色料不多,因此直呼其名便可,例如意大SIENA城產的礦物顏料色便是SIENA色,不會弄錯。自化學顏料發展起來,顏色可以自由調配生產後,色彩便開始需要有一個指名系統。

現時的色彩名有兩種,其一是以顏色成份的比率(CMYK、RGB)或光波的物理量(HSL、LIB)等為依據,印刷行業稱為「拆色」方式,這種方法的好處是準確 、公認、而且容易數碼化,是電腦之資料交換的首選。這種方法的主要缺點是不能直觀地知道所指的顏色,單從R58 G16 B2,一般人無法知道這是紅還是啡。

另一個指名方法是靠業界一些權威機構自訂一個色盤,再為色盤內所有的顏色起個名字,香港流行的PANTONE色盤便是一例。印刷行業稱用色盤指定的顏色為「專色」,由於色盤的最初訂立帶有主觀性,而且色數始終有限,所以會出現設計師在色盤中挑不出合用的顏色的缺點。

立體和深度

用輪廓投影方式繪畫的法國Lascaux地區石器時代壁畫

輪廓投影是漢字的起源

正投映是最常見的表達手法

投眏是各種工程行業記錄和傳達空間資料的主要手段

一直以來,傳意設計的載體,無論木、石、紙張、銀幕、螢幕等,皆為平面,所以如何在平面傳達有關三維空間的訊息,困擾着幾萬年以來的人類。

圖象的表現是平面的,但我們的視覺認知是立體的,視像創作者唯有採用各種各樣的方法,為平面的視像營造一種有如我們視覺的空間感。這種在畫面裹的空間感,是存在於我們的視覺感知內,並不存在於真實的物理空間,畫家只是將他感知到的物象,轉化成平面與平面之間的關係,並將此關係描寫成視像的空間。 因此,種種不同的透視繪畫法,應運而生,目的是要將物體的立體空間(容量)、重量、所處的位置,及與觀者的大約距離等信息,表達於視像中,令視像更具真實感、更詳盡的表達物體的存在狀態。

發明最早的繪畫方法是投影,即是將立體的其中具代表性角度的輪廓描在平面上,中外的史前人類洞穴壁畫、甲骨文,以至現代大量使用的符號、商標皆在此例。

 

七世紀古羅馬壁畫中所使用的類透視繪畫法(Theatrical scenography, Herculaneum, 那波里國家考古博物館)

單點透視中景物、投眏面、觀察者的關係

三點透視是簡單之餘最接近視覺所感受到的景像,因此被選用在電腦顯示上

以軸測圖作参觀指南(参觀指南,巴黎龐比度中心)

等角投影圖能保存物件尺寸比例

透視投影圖能模擬現實中物件隨距離改變大小的效果

視覺在辨認視野中個別物件的身份以外,還能從物體之間的大小、分佈、變形與水平面的相對高低等關係中,推斷出物件的空間位置,前人在利用投影的同時,也同樣利用了視覺的這些距離感知的特性,令構畫包含三維空間訊息。

在芸芸的三維表達方法中,最為人熟悉的是線性透視,包括單點、两點和三點透視,其中單點和两點透視是三點透視的簡化形式。不同透視方法各有特色﹕

  消失點 用途
單點 一點 室內空間
两點 二點 風景、建築、器物
三點 三點 多層建築
軸測圖 不適用 建築、器物

現代觀點所指的透視畫法,普遍認為是文藝復興時期著名佛羅倫斯建築師貝魯齊所發明,再由同期的其它藝術家,包括Piero Della Francesca及Andrea Mantegna等完善,而第一本描述透視畫法的書'On Painting' 則是在一四三六年由阿爾貝蒂所寫。

在數學中幾何的分枝日漸成熟時,透視的運作原理被確立,同時使三維到二維的轉換變得簡單,亦構成今天電腦三維建模(3D modeling)及三維動畫(3D animation)的基礎,但必須指出的是,視覺感知中的距離感知,如同顏色一般,是經過視覺的大量調整的,肉眼雖然構造上與鏡頭無異,但利用三點透視方法所描繪的畫面,和大腦所見的並不相同。

相關連結

環境設計圖像表現技巧

 

採用展開圖的民間娃娃圍涎

畫家利用展開方式表達五官的相互關係,比透視更接近人的視覺感知(Self-portrait, Henry Matisse)

陰影錯覺(Trompe l'oel)是建築物上添加裝飾的常用方法

此外,我們對三維物體的理解,是不同角度所見的投影在大腦當中的一個綜合,如果只表達其中一面,其傳意能力與瞎子摸象無異。

面對此種種困難,人類想出大量的折衷辦法,例如工程上會用多角度的投影圖和剖面圖,民間年畫會用剖面圖和展開圖,中國傳統山水畫會用多點透視,而立體派的畫家,索性把多個視點的碎片來一個大集合。

類型 用途 使用例
展開 表達物體表面特徵的分佈 地圖
剖面 表達層層包套的關係 機械結構圖
多點透視 更接近視覺感知的空間感 傳統山水畫
拼貼 盡可能全面表達物體的立體特徵 立體派繪畫

運動

只有两幀畫面的動畫,大腦會"填補"两畫面相差的部分,令橫畫好像從右伸向左

一個由四幀圖像組成的動畫鼠標,運用了變形運動的錯覺效果

運動感知是我們接收動態視像作品的基礎。

我們的眼睛在觀看四周環境中正在運動的物體時,物體經常會因我們視線轉移或物件阻擋而時隠時現,為了提高處理視像效率,減輕意識負擔,視覺會將運動方向一致,外型相似的片 段理解為連續事件,並補足失去的部分。由於這種特性,當肉眼觀看交替出現內容相近的靜止畫面時,便會有動態的錯覺,這是動畫的由來。

只要畫面的內容有「完形」特質,即使畫面轉換很慢(每秒二至三幀)也會產生動畫感,但當畫面毫無關係,即使快速轉換(每秒二十五幀或以上)亦只會產生重影,而不會出現動感 的效應。

 

 

< back                                      main                                        next>