格式塔（Gestalt）理論是一個心理學(xué)名詞，該理論旨在解釋人類的某些行為是如何產(chǎn)生的，也解釋了我們?nèi)祟惖囊曈X經(jīng)驗(yàn)如何與大腦的反應(yīng)產(chǎn)生聯(lián)系。其中，同型論（Isomorphism）是格式塔中的一個理論。格式塔理論并非應(yīng)用于設(shè)計，但了解這些理論卻對我們進(jìn)行設(shè)計有很大的幫助。

同型效應(yīng)：同型效應(yīng)是指人類通過自身的經(jīng)驗(yàn)及記憶來對一個視覺對象作出判斷。

看到這只毛絨絨的泰迪熊，是否讓你有一種溫馨舒服的感覺？看到手指離仙人掌這么近，是否讓你有一種想立即將手抽回的感覺？這就是同型效應(yīng)。我們對這些圖片產(chǎn)生反應(yīng)，是根據(jù)我們自身曾經(jīng)有過的經(jīng)驗(yàn)而作出的。因?yàn)槲覀冊H身觸摸過一個真實(shí)的泰迪熊，我們也曾經(jīng)有過被針刺到而產(chǎn)生疼痛的經(jīng)歷——所以我們會將已有的一種感覺應(yīng)用到對一張圖片的理解上。

下面我們要來介紹一個相關(guān)案例。有位讀者希望我們對她的名片提些意見，她自己并不喜歡這個標(biāo)志，但如果一定要應(yīng)用這個標(biāo)志時，如何才能讓名片展現(xiàn)出來的效果能夠吸引她的顧客？

修改前：一個呆板、機(jī)械化的設(shè)計

標(biāo)志其實(shí)說不上有多糟糕，但也談不上有多精彩。對于一個餐飲標(biāo)志，My favorite Muffin其實(shí)并不太差。它有一個簡潔（或者說一個讓人熟悉的）的構(gòu)造，其名字較長，但居中的擺放使其成為一個焦點(diǎn)元素，還有一縷香氣飄在上方。字體圓滑，與松餅的產(chǎn)品氣息也挺配合。但它的顏色卻有問題，不過顏色我們可以通過在設(shè)計中修正?？赡苁歉杏X標(biāo)志有點(diǎn)單薄，設(shè)計師在設(shè)計時加上杯子及叉子，為了配合標(biāo)志的特征，在一個圓角區(qū)域中也用上一種圓滑的字體作為文字。

此外名片的版面中有很多相似之處，對于設(shè)計來說這其實(shí)是好事。它起到簡化版面以及提示讀者各個元素之間的關(guān)聯(lián)性。在上圖中，標(biāo)志、文字及白色區(qū)域都是圓角的，與松餅給人的圓型及松軟的感覺是相似的，方向是正確的，但這并不足夠！由于圓角太小，對名片本身的直線邊及字體來說，它起不到支配的作用。如果將它與別的元素對比時我們會很容易觀察到這點(diǎn)（如下圖對比）。

此外，名片及標(biāo)志所采用的這種顏色搭配并不太常見。淺綠并不是松餅的顏色，也絲毫沒有給人一種早餐或溫暖的感覺。與色輪中相對的紅色搭配（即“補(bǔ)色搭配”），你通常感受到是一股活躍的能量。但這兩種不飽和顏色再加一個灰色，就使整個配色顯過于機(jī)械及缺乏生活氣息。

讓我們開始運(yùn)用同型效應(yīng)理論來重新設(shè)計

當(dāng)你僅僅看到下圖這些照片時，相信你的味蕾已經(jīng)開始有所反應(yīng)！這并不需要設(shè)計，也不需要有張卡片放在你眼前你才會感覺到美味。因?yàn)槲覀冊?jīng)吃過松餅，所以當(dāng)看到這些照片時，它喚醒了我們曾經(jīng)有過的的視覺、味覺及嗅覺。

不需要任何贅述，朱古力脆皮包住的松餅，放在藍(lán)莓上的松餅，一張高質(zhì)量的照片是最容易也是最直接勾起我們的感知及回憶的。所以我們要利用一張好的照片來作為你設(shè)計的主要落腳點(diǎn)。

1.放置圖片
將圖片在版面中居中，其它空間放置文字。

圖片占據(jù)版面的1/3高是恰當(dāng)?shù)模虚g的位置也是版面中最有力量的區(qū)域，能夠最大程度吸引別人的興趣。留意松餅的陰影及倒影使松餅像放置在名片上，這樣會有很強(qiáng)的真實(shí)感，一如你那些放在餐臺上的松餅一樣。

圖片放大當(dāng)然有好處，可以讓讀者更加接近你的美味，但如果太大，那么用剩下的空間來放置文字時就會顯得擁擠不舒服。

2.根據(jù)圖片設(shè)計
現(xiàn)在，我們要選擇字體、顏色及調(diào)整版面的布局來呼應(yīng)那些松餅。

我們要讓圖片自己說話。標(biāo)題越短，圖片的沖擊力就越強(qiáng)，特別是在如此狹窄的版面中。我們采用了“上癮的美味”（Addictively Delicious）作為標(biāo)題，直接與你味蕾溝通！流動著不規(guī)則輪廓的Fenway Park字體顯得特別蓬松柔軟，而且它不規(guī)則的輪廓線與圖片中的松餅形狀相似，呈現(xiàn)出一種香脆的吸引力。

接著，從圖片中取色。從左到右，文字有深中淺三色選擇，這些標(biāo)題顏色都是用吸管工具從圖片選取的顏色，這三種顏色都能夠與圖片形成良好的搭配，但最淺的顏色可以讓那些松餅顯得更加突出更加富有吸引力。

3.增加輔助字體
增加較小尺寸的字體，要與大元素形成對比，并且不干擾主要元素的氣息。

我們采用Serlio字體作為補(bǔ)充的文字字體，這種字體細(xì)看起來線條并不規(guī)則，充滿襯線，顯得復(fù)雜及懷舊，但同時也具有一種溫曖的感覺。這些字體最開始時手寫形成的，所以沒有直線及規(guī)則的轉(zhuǎn)角。我們采用細(xì)體，與標(biāo)題那種粗壯小寫字母形成恰當(dāng)?shù)膶Ρ?。上圖中，A：全部設(shè)為小寫字母（這種字體小寫字母也是以大寫字母形式出現(xiàn)，但尺寸相對于大寫字母來說較?。?，其整體邊緣性過于平滑。B：首字母設(shè)為大寫字母，使其形成一些不規(guī)則的輪廓。顯然第二種能獲得更好的視覺體驗(yàn)。

上圖中，圖片放置于版面中部，整齊地將版面劃分為兩個放置不同文字內(nèi)容的區(qū)域，上面是標(biāo)題及主要說明，下面是出品的各種松餅名稱。反觀下圖，是另一種的變化，所有文字都在上面，但文字似乎形成灰色色塊的感覺。（留意所有文字都是居中）

4.加上LOGO
標(biāo)志在這里并不是作為一個視覺焦點(diǎn)來處理，而是作為一個“標(biāo)點(diǎn)”來處理，可以顯得更為突出有力。

右下區(qū)域在視覺上自然形成了一個“出口”，在這里放置標(biāo)志，無論你的標(biāo)志是什么顏色，總能夠產(chǎn)生效果，不用太大，但卻可以傳達(dá)一種權(quán)威的感覺。記住你的顧客只是對你的產(chǎn)品有興趣，而標(biāo)志的作用只是說明“這些美味的東西是誰做的”這個信息。

兩個額外的設(shè)計欣賞
不同的圖片有不同的構(gòu)造。下圖是兩個全出血位的圖片放置，在版面結(jié)構(gòu)上也需要作出相應(yīng)的調(diào)整。

上圖所要傳達(dá)的主要感覺是溫馨。白色的版面被棕色的圖片代替，整個畫面讓人感覺香氣四溢。在這個設(shè)計中，將圖片簡單地作為背景能夠使我們在設(shè)計過程中更加輕松，但缺點(diǎn)是剩余的空間比較局促，使各種松餅的名稱也要重疊在產(chǎn)品上。一般不推薦這樣做，但這次，只能說基本還可接受了。

這一幅圖中，根據(jù)圖片的構(gòu)造特點(diǎn)我們將其放置于左邊，因?yàn)閳D片給人的感覺是“從左向右的”，所以要剪切圖片也是切圖片的左方區(qū)域。松餅局部重疊于藍(lán)色區(qū)域，活躍了版面。細(xì)白線的邊框給人一種“懷舊”的感覺。圍住的藍(lán)色區(qū)域，可以讓這部分與藍(lán)莓在視覺上不混淆。

我們可以看到，經(jīng)過重新設(shè)計，原本并不突出的淺綠色標(biāo)志已能夠在各種版面中成功地代表一個形象符號。

原文地址：logosky

 
================關(guān)于優(yōu)設(shè)網(wǎng)================
“優(yōu)設(shè)網(wǎng)uisdc.com“是一個分享網(wǎng)頁設(shè)計、無線端設(shè)計以及PS教程的干貨網(wǎng)站。
【特色推薦】
設(shè)計講座：每月邀請國內(nèi)互聯(lián)網(wǎng)公司設(shè)計前輩及行業(yè)總監(jiān)在群內(nèi)及YY語音（YY頻道：15335158）分享實(shí)戰(zhàn)經(jīng)驗(yàn)。
設(shè)計微博：擁有粉絲量33萬的人氣微博@優(yōu)秀網(wǎng)頁設(shè)計?，歡迎關(guān)注獲取網(wǎng)頁設(shè)計資源、下載頂尖設(shè)計素材。
設(shè)計導(dǎo)航：全球頂尖設(shè)計網(wǎng)站推薦，設(shè)計師必備導(dǎo)航：http://hao.uisdc.com
———————————————————–
想在手機(jī)上、被窩里獲取設(shè)計教程、經(jīng)驗(yàn)分享和各種意想不到的”福利”嗎？
添加 優(yōu)秀網(wǎng)頁設(shè)計 微信號：【youshege】優(yōu)設(shè)哥的全拼
您也可以通過掃描下方二維碼快速添加：