設計的心理學 – 設計的基本原則

這篇我要來整理一下這本書所提到的設計基本原則,雖然書中有提到「七個設計的基本原則」,但細讀此書後發現,有些地方不容易連貫,而且解釋上不容易理解,所以我先提出書中的觀點後,再整理成一個我認為比較好理解的概念。

首先,在本書中一開始就提到,一個優良的設計要滿足兩個特點:可發現性(discoverbility)、易理解性(understanding)。從字面上的意思來看,可發現性是指,使用者能夠容易發現那些是可以做的動作 、怎麼做;易理解性是指,使用者可以容易理解並知道該如何使用。這是設計師在設計任何裝置或介面,必須遵循的大原則,只要失去其中一個原則,就不能稱的上是優良的設計。

而在書中七項行動原則所延伸出以下七項設計的基本原則 :

  1. 可發現性 (discoverbility)
  2. 預設用途 (affordances)
  3. 指意 (signifiers)
  4. 使用局限 (constraints)
  5. 對應性 (mapping)
  6. 回饋 (feedback)
  7. 概念模型 ( conceptual model)

七項設計原則中,有提到可發現性但卻沒提到易理解性,這是我比較疑惑的地方,而在p37有提到:「可發現性是來自五個基本的心理觀念:預設用途、指意、使用局限、對應性、回饋」,但對易理解性並沒有太多的解釋,所以易理解性不包含在七項設計原則嗎?  有點不合理,所以我在想可能指的是概念模型?

關於概念模型的解釋在p52有提到:「概念模型是一個東西怎麼運作的解釋」,同時又提到概念模型主要的線索來自於東西的結構,特別是指意、預設用途、使用局限及對應性,也就是說,概念模型是可發現性的組合,能夠讓使用者合理的解釋東西如何運作,所以如果使用者能夠去解釋一個東西如何正確的運作,我想跟使用者對於東西的「理解」有密切的關係,因此我推斷易理解性指的就是概念模型,這是可能比較合理的解釋。

書中將可發現性視為七項設計基本原則之一,但又包含了其中的五項原則,但易理解性卻沒在這七項設計原則之中,這是我覺得書中比較不清楚的地方,因此我將這七個設計原則重新理解為:

二大設計目標、六大設計原則,如下圖。

 

psymodel

  • 二大設計目標:可發現性、易理解性。
  • 六大設計原則:預設用途、指意、對應性、使用侷限、回饋、概念模型。

 

為什麼我要將圖畫成圓型,因為我覺得這是一個合理的解釋模型。使用者透過可發現性由外而內的去認識產品,形成產品的概念模型,所以如果設計師發展出來的概念模型與使用者的概念模型相似,使用者就可以正確的理解、使用你的產品,這就是優良的設計。

但對於設計師而言,這裡有一個很大的陷阱,就是因為使用者是從外而內的去認識產品,所以設計師往往會用自己也是使用者的心態去設計產品,這是根本性的錯誤,但卻又很難去發現。

我認為好的設計方式,要從概念模型開始,去理解使用者的概念模型,這也就是為什麼要做使用者經驗分析,目的是要讓概念模型正確,否則就算介面再好看,操作上讓使用者無法理解,那一切都是枉然。

所以設計師要養成好習慣,做設計一定要有根據,要系統性的思考整個產品的架構,不要一開始就上機畫精稿,因為視覺會影響設計師的判斷,應該從醜醜的線稿開始、看流程、不斷的討論,收斂發散再收斂,才能成就一個很棒的產品。做設計要找出更多理性,這也是我不斷提醒自己的。

之前常常在想怎樣的介面才是一個好的設計,才能看的出設計師的功力,強者我朋友給我的答案是:「一定好用、盡量好看」,原來如此。

方向對了,接下來再來好好討論那六項設計原則吧。

廣告

4am democracy 海報視覺分析(part2)

黃金分割比率(golden raito), 指的是1:1618的矩型,這矩型從何而來,如果有興趣的話,可以去google一下。基本上黃金比例矩型,是從許多生物的觀察中,並透過數學得到一個無理數的規則,可能是神奇海螺鸚鵡螺螺紋的規則、人類手臂的長度、自然美景…等等,總之在這樣的比例下,可能會符合生物的生長規則,同時也可能會符合人類的於視覺上美感的感受。

 

那運用在海報的設計上是不是有相同的規則呢?有興趣的人可以參考這一本書《Geometry of Design:Studies in Proportion and Composition(設計幾何學:發現黃金比例的永恆之美)》,或許可以得到一些答案

 

但本篇的重點,在於這一次4am democracy 的海報,是否符合黃金分割準則,我想就一步一步來檢驗,到底這張海報是如何去做版面上的配置?到底圖要多大?高度、寬度怎麼決定?真的一切是憑設計師的美感嗎? 或許是,但是美感還是有規則可尋,就讓我繼續看下去~

 

這張海報網路上有兩種尺寸3461×6295(px)、3980×6260(px),我認為3980×6260(px)是原始稿,所以我以這個尺寸當作分析的標準,如果對於另一個尺寸有興趣的,也可以動手試試看。
shot1
一開始先在標題、段落、圖片,標示上對齊的參考線,可以找到一些對齊的規則,好奇的是,這些高度,對齊的位置怎麼決定的?接下來,我將在圖面上加上黃金分割比率的參考線,黃金分割比率要怎麼畫,請參考這裡。先從圖的上方,畫出一個黃金比例的矩形,如下圖。

 

shot2_
從圖中我們可以看到,畫出來的矩形下緣,會超出海報的下緣,也就是說,這張海報小於黃金矩型的尺寸,但是從中我們己經可以發現幾個有趣的交點,這些交點決定了photo1上方邊界的位置(B)及左下角(A)的位置(沿著圓弧)。

 

shot3_
接下來就是photo1的下方高度要怎麼決定,只要知道photo1下方的高度,就可以知道photo1的高度,先將原來尺寸從左上到右下標示出另一條對角線(紅線),找到交點E,與photo1之間的距離,恰好大致等於海報下方邊界到photo1之間的距離,因此我們就可以找出photo1的大小。
shot4_
最後,我們要找出photo2的位置,先從寬度找起,寬度是從交點C往上延伸,會發現 交點C上的垂直線條,剛好切到photo2的左側,寬度大概知道了,接下來比較複雜的地方是高度,先從剛剛畫出來的黃金矩型,找出中點的水平線,會發現photo2的上緣恰好在黃金矩型中間的位置,photo2上方邊界位置決定,可是高度怎麼進定的?圖中中線到交點D的垂直距離,似乎還不足photo2的高度,多的那段高度是怎麼出來的?其實就是兩個矩型高度的差距(黃色方塊處),寬度高度確定後,photo2的大小與位置大致上就出來了。

 

透過上述的方法,就可以找出這兩張圖大致上定位的方式,當然其他文字或許也有比較特殊的定位方式,就留給有興趣的人去檢驗吧!

 

當然有人會覺得,一張海報有需要用到特別去運用黃金分割率來配置嗎? 當然憑經驗豐富設計師的美感,在無意的情況下的設計,可能會恰好符合黃金分割,但是那是在不斷的調整與修正的情況下,得到的一個結果,但考慮到這張海報僅只有三天的時間就要刊出,我想為了時間也是有經過一些巧思來快速的進行版面的配置。

 

最後我從設計幾何學這本書中,得到一句話,或許可以解釋大多數人對於黃金比例的疑惑:
「數學上的表示模數,僅能用來驗證人類直覺的洞察力;黃金分割準則,亦僅用來定義藝術家直覺認定的理想比例,因為這是一種檢驗方式,非常一套創作體系。(Adolphe Mouron, 1901-1986)

 

所以,黃金分割準則,只是用來驗證作品,不建議直接用來當創作工具;基本功還是很重要,不斷的發想,不段的修正,在大自然的定律下,美感自然就會碰巧的符合黃金分割準則;走捷徑,可能只會限制創作力的發揮。
以上個人小小心得~~歡迎指教。

4am democracy 海報視覺分析 (part1)

關於反服貿這個議題,在台灣持續了好一陣子了,觀察整個的過程,根本是學生展現創意的一個地方,看了許多很有創意塗鴨、海報,當然也有超級專業的作品,而刊登在紐約時報4am democracy ,正是聶永真神人的作品啊!!

 

這張海報的原由是為了讓全世界知道台灣發生什麼事情,有人在募資平台(flyingV Vdemocracy.tw)發起了募資活動,希望能夠將台灣目前發生的事情,透過國際媒體發聲來引起關注,而在短短的時間內就募足了資金,買下了紐約時報的全版廣告,而廣告視覺的操刀者,正是台灣知名的設計師聶永真。

 

聶永真何許人也?能夠被記載在維基百科應該不太容易,有興趣的人可以上網google一下這位神人的作品。而就這一次刊登在紐約時報的作品,網路上也有一些人從不同角度給予不同評價,但身為一個設計師, 想試著從視覺的角度來分析這個作品。

 

字體的部份,可以參考這裡
從廣告的角度去看,請參考這裡

 

The Non-Designer’s Design Book (寫給大家看的設計書)書中有提到四個設計法則,來檢示作品是否符合一般的設計美感;這本書是寫給非專業人士看的,所以提出來的原則是一個比較簡單的通則。
當然也可以透過其他的方式來理解這個作品, 這本書所提到的四個原則分別是,相似、對齊、對比、重覆,其說明如下:
  1. 相近(proximity):
    是指相關的元素要盡量放在一起,比較如符合易讀性,想像在一張海報上,將聯絡資訊(地址、電話、mail、時間、地點…等)放在不同的區塊,除非是想考驗讀者的耐心,否則就是另有巧思,想讓讀者體驗解迷的箇中樂趣那就另當別論了。
  2. 對齊(alignment):
    是指在文字或是物件(圖片、logo、插圖…等),要有一個對齊的標準,否則會顯的整個版面的部局紮亂無章,讀者無從看起。對齊常用的方式有:齊左、齊右、齊中對齊,依當下的設計需求使用。
  3. 對比(contrast):
    是為突顯主題或是增加畫面張力常用手法,這也是一個作品能否在一瞬間抓到讀者注意力的最大關鍵因素;那對比是什麼呢?簡單來說就是兩個反差很大的東西,放在一起,對視覺造成一個強大的衝擊;對比就像是:多與少、黑與白、深與淺、暴力與和平、光明與黑暗…,都是對比的呈現方式。
  4. 重覆(repetition):
    指的是為了符合一致性或是要強化讀者的印象所採用的方式,但重覆的次數要適當,重覆太多次反而容易覺得有種碎碎念的感覺,當然也是要視情況使用,像是在不同的輸出物上,適當的重覆logo,來強化讀者對品牌的印象。
而回過頭來看這個作品,從這個作品中得到了什麼,一個大大的標題,整片黑的畫面,右下角有一個圖片,旁邊有一段文字,似乎想與這張圖片做一些連結;往下看有一段有文章,右邊有一張大張的圖片,搭配這些文字或許可以從圖片知道什麼故事,下面則有一排細細的文字,接下來就看到了4am.tw的logo,標題與結尾互相呼應;這是我看到這個海報大致上的感覺。

 

接下來我們就從這四個原則來簡單的來了解這個作品。請參照下圖,一張是原圖,另一張則是經過標示的圖
democracy_oringin_400  democracy_marked_400
  1. 相近(proximity):
    整個海報,除了標題在最上方的位置外,所以有文字大概都集中左下角,圖片則在右下角。若想得到更多有關於4am.tw的資料,在文章的最下方整排的文字會有說明。
  2. 對齊(alignment):
    title1、title2、text1、tex2 靠左對齊;photo1、photo2靠右對齊。
  3. 對比(contrast):
    title1大文字,與text2、text3、對比,整個黑畫面與文字的白底對比,黑畫面大於白畫面,看似有一鼓黑色的力量往下壓迫的感覺,最後在右下角的位置,放了一張photo3,一張有太陽花照片的圖片,與上方photo1、photo2呈現對比,讓整個畫面很有張力。
  4. 重覆(repetition):
    字體與"4am.tw"的重覆,希望大家到這個網站得到更多有關於台灣現在正在發生的事情。內文字體有三種,這方面請參考這篇文章
以上是我初略對於這張海報的分析,當然每個人對於這張海報的解讀可能不同,但整體而言,個人認為是一個很成功的且讓人印象深刻的作品。

 

接下來,可能有些人會跟我一樣好奇,為什麼看似是很單純的作品,但看起來卻還是有一種說不出的美感(除了照片與字體挑的好外),這當然是聶永真的功力啦!! 但是不是能有什麼更細的方法來解構這個作品,接下來的文章,我會用黃金分割率(golden ratio),來分析,這個海報在設計上還藏著什麼樣的密秘。