閱讀動線的布局設計思考

閱讀動線的布局設計思考

一旦可以使得文本的媒材以「區塊化」的形式來布置後，再來要去跟著思考的是閱讀動線的布局。



文本主題被掌握了，其他的補充性資訊也以「區塊化」的形式被整理了，很邏輯的，我們碰到的問題是，這些區塊是以什麼樣的順序，被閱讀的？

區塊的閱讀，是一種無序的狀況上被閱讀的嗎？當然可以，如果沒有進行什麼設計上思考。那麼，這就接近一般而言的「後現代文本」，亦即，每個人都會讀出他自己的文本意義。

但，這不是本文的思路。

從傳統的設計或排版的領域中，我們看到一些設計∕構圖原則，可以使得區塊被感知的順序成為一種可被設計安排的過程。依著這些原則、技巧，可以使得區塊文本內容，在被閱讀的順序上，成為創作者可控的部分。




why?閱讀動線

其實，你應該發問的。去問：為什麼，一定要讓區塊形成某種有序的閱讀狀態？這是好的追問，不是嗎？

如果你的文本，反正就是要讓讀者去亂讀，換言之，如果你也沒有什麼主概念要去和讀者「溝通」，文本只是一種亂讀的遊戲，那麼，你根本可以不用去管「閱讀動線」這一部分。

你文本中的區塊內容，可以「憑感覺」亂擺，沒關係。

但是，一旦你有某種「意圖」想要透過文本，尤其是圖文整合文本，和讀者溝通，那麼一種「有序」的文本被閱讀過程，就是一種必要。

因為，「人」這種存在物，必須在某種有序的理解過程中，才能從文本中獲得一種「可以相互被理解，即可以被溝通」的意義。

於是，如果你的圖文整合作品不只是一種自己看得懂的東東，而是一種可以傳達出某種意義的文本，這意義是可讓不同的讀者都最大可得的相同地獲得。

你去掌握一種能力，一種對文本媒材布局的能力，在這裡是指區塊文本的閱讀動線布局能力，就是一種必要的寫作能力。你無法逃避的。




區塊意義的層次位階

群化，你懂了。就是區塊化，把相關的資訊都放在同一區塊內來被「理解成一完整的意義」。只有被理解成完整的意義後，這被理解的區塊意義，才會對主題文本進行補充。

那麼，區塊意義的「層次位階」是什麼意思呢？

文本主題是所先要「凸顯」出來的。之後，我們要去形構成區塊內容，這區塊內容是要有「有序」的方式對主題概念進行充實、補充的過程。

如何去思考、去組構「區塊的有序」？

區塊文本的補充，這是過程是有序的，而不是雜亂的，這一有序的過程就是視覺動線的設置。從文本作品的最後的意義給出這角度而言，就是意義補充過程的區塊意義層次位階的建立。

換言之，愈是意義重要的區塊，就應是要先被閱讀的區塊，也就是要先去補充文本主題的區塊。


資料來源：Cullen, K. (2005). Layout workbook. Singapore : Page One. p.74.

如圖，我們可以說第一區塊是文本主題。第二區塊是圖像內容，用來充實文本主題。再來是第三文字區塊的補充過程。

在閱讀動線的布局過程中，意義的重要性是更緊要的區塊，在閱讀動線上就要安排在更前面。

換言之，就整體文本意義給出的思考而言，我們是以「區塊文本」在其補充過程中意義的重要性，來決定其被閱讀的動線次序。



我們以「區塊意義的層次位階」先來決定那個區塊要先被閱讀，那個要隨後被閱讀。

區塊閱讀的順序被決定了之後，再來就是我們要運用構圖、排版原則，在視覺上能夠使區塊被閱讀的順序，是正如同我們依意義之位階所決定的那樣。




閱讀動線與視覺溝通理論



來，先看筆者的分析，首先，1和2構成了先圖後文模式的文本主題。再來，3、4、5、6就是區塊內容的依次補充。

你會同意筆者的閱讀結構分析嗎？未必。可能，你不服氣的很。但，我也沒有說，我「絕對」是對的。

是的，這就圖文整合文本的麻煩之處，但也是有趣之處。

傳統線性文本，早就用文本物理性結構的「線性」決定了你的閱讀動線（例如看電影或看文字為主的書），你的閱讀過程，所以，並沒有閱讀動線會產生爭議的問題，如果有問題，一定是你個人的問題。文本一定沒問題。

圖文整合文本，在「閱讀動線」這一面向上，是注定有爭議的。因為，區塊閱讀動線的結構，是要被「創作者」設計出來的，而不是用文本的物理結構來決定的。
所以，你要有「構圖」的能力，來安排圖文整合文本中依視覺之特色而來安排的閱讀動線。

恰恰是我們依人的視覺理解特色來構圖，所以，視覺理解特色是什麼，就重要了。視覺理解特色，也被稱之為視覺溝通理論。




閱讀動線的推動力量：視覺重量

人的視覺理解，並不是一種「客觀的」過程。人的視覺理解，被一些原則所左右，正如同你的「使用語言」是被語法所左右一樣。

這些結構、決定、左右著最後視覺呈現、理解的「原則」，也就是視覺溝通的理論或原則。

在我們之前所談的，關於視覺焦點、關於區塊構成的諸總原則，也就是視覺溝通的理論；決定視覺上對於圖文整合文本的閱讀動線的規則，也是視覺溝通的原則。

我們之前所談的「構圖」原則，亦是，也可以總稱之為視覺溝通原則。正因為我們都有某種「共同性的」視覺溝通原則，所以我們可以使用視覺來「相互溝通」，來給出可以被共同理解的意義。

決定閱讀動線的視覺溝通原則，我們稱之為「視覺重量」的構成原則。英文是 visual hierarchy。

資料來源：Cullen, K. (2005). Layout workbook. Singapore : Page One. p.74.


形構視覺重量的諸法則

視覺，是有「偏見的」，它會認為，什麼狀況下，視覺的重量是比較重的。






資料來源：Denton, C.／劉錫權、陳幸春譯（1998）。《視覺傳達》。台北市：麥格邏希爾。頁54-56。

我們可以看到，這些原則，讓視覺可以「判斷出」那個視覺對象物是比較重的。

區塊感被形成後，在閱讀中，區塊的移動之方向是被區塊的重量來決定。我們會先被「最有重量感」的區塊吸引，接著再往第二有重要的區塊移動過去。

透過前文的說明，可知有很多原則，例如大小、顏色、形態、方向、意義等等，可以形成創作上的思考或技巧，來型塑區塊之重量。


「區塊物件」大小的視覺重量

一般而言，區塊視覺上的「大小」，很容易就可以型塑出區塊的視覺重量。

文字區塊的大小，是我們常見到的物件大小視覺對比之視覺「重量」的呈現形式。



很明顯，我們會由大字區塊往小字區塊去移轉視線的移動方式。

再來是，再來是區塊中「圖像物件」之大小，也是視覺重量的決定性因素。


資料來源：《7-11型錄》110/10/18～111/02/04。頁3。


媒材質性的視覺重量

媒材本身的特色往往就具有不同的視覺重量。例如，以具像物圖像構成的區塊就會比文字有更強大的視覺重量。



你會先看「貓」。下圖，你會先看人物像。



同樣的圖像，「人物」的圖像又往往比其他圖像更具有一種視覺重量上的加重。


以形態、顏色形成區塊的重量大小

圓的和方的都有其相似性。圓的會形成邏輯上的區塊，方的也是。這是相似性之運用。但方的物件在形態上的視覺重是是大於圓的，我們會先去讀方的區塊讀完再去讀另一塊。


資料來源：《daikin家用空調綜合型錄pcw2021》

圓的形成一種視覺區塊，而方的又形成一種視覺區塊。這裡有區塊內物件形態大小上的視覺重量差異，方＞圓，就可以形成流動。

請看下圖。


資料來源：《mypet-club com》no.88

下方狗的區塊內物件視覺本來就較大。顏色是深沈的色系，相比於明亮色系，則是顯得更重，增加了「視覺重量」。

我們會依區塊視覺重量來進行閱讀視線的移動，然後閱讀動線就形成了。


以「意義性／情感性」形成區塊的重量大小

當然，也可以用某種「社會性的意義」來讓區塊顯得有重量。


資料來源：Nah, K, Jun, J., Kim, H.,& Ka, B.／許乃云譯（2010）。《設計要怎麼企劃》。新北市：博碩文化。頁目錄。

樂譜、音箱、電子琴和演唱者貓，構成一組「意義」的區塊。「意義」讓這區塊，更有重量。

再看下一張圖，三支貓形成的區塊中，「戴口罩」的貓有一種新奇性的「意義」，給予了這區塊更大的視覺重量。

來，看看影音的綜合說明。