一映入眼簾的網頁畫面，基本上沒有帶給我什麼太大的感覺，卻有點略嫌擁擠。

色彩 Colors

採用大量的灰色，以及一些墨綠色。值得一提的是，當切換到「The Blog」以外的分頁時，整個網頁的主色會改變，也就是將各種作為主色的墨綠色取代為別種顏色。

橫幅 Banner

Banner 分為上、中、下三個小 banner，其重要性也由上往下遞減。

最上頭的小 banner 有左右兩部份，左邊是這網站的名稱，右邊是對瀏覽者簡單介紹這網站；中間的小 banner 是這網站的各分頁，特別的是除了分頁名稱外，還有該分頁的簡單描述；下頭的小 banner 則有 About、Contact，及 Advertise 三個連結。

文章 Post

節錄一篇在網誌主頁的文章於右圖。

作者是用綠色框圍起來，文章的日期則是寫在節錄的下方，連同幾個網路書籤及回應的連結在一起。

此外，每篇文章都有一張圖片，大小不一，但基本上都是280×360 左右。大部分的圖片底下還會有一行字，說明該圖的來源。

內文 Innertext

除了以下兩個地方外，基本上個人認為沒什麼特別之處。

引用 Quotes

這裡運用到一個 WordPress（沒錯，FreelanceSwith 也是用 WordPress 設計的XD）的外掛，叫做 jspullquotes，這裡就不詳細介紹了。使用方式就是將要引用的話，利用 <span class="pullquote"> 包起來，甚至再加上 pqRight 或 pqLeft，設定引用的話在右邊或左邊。

文章下方

有左右兩個部份，分別是「Related Posts」（相關文章）及「Subscribe」（訂閱），訂閱有三個連結，就是訂閱 RSS feed、透過 Email 訂閱文章，以及介紹什麼是 RSS feed。

回應 Comments

首先就是 Comments 字樣，以及緊接在其後、用綠底白字框包起來的「留下回應」連結。而各個回應則有幾個元素：一個預設的 80×80 圖樣、回應作者名稱、回應時間（沒有幾點幾分），以及最特別的、預設高度為 180px，而寬度為 500的回應框。除非回應內文的長度超過 180px，否則縱使只有一行文，回應框高還是 180px。此外，若回應作者有留下個人網站，則作者名稱會變成淺墨綠色。

側欄

欄位非常多。最值得注意的是「Best of FreelanceSwitch」欄位。有「All Time」、「Last Month」，以及「Random Posts」三個分頁，切換都是利用 JavaScript 即時顯示。

自以為有缺點

• Footer 的資訊可以更豐富。
• 側欄東西有點多。

希望至少能每個禮拜寫一篇，而主題當然也是跟資訊與藝術有關囉~~ ^^

打開 Windows Live Writer 的那一刻，一切都變得如此熟悉…

在這邊也放一首網主最近每天必聽的歌給大家聽，充充篇幅

孫燕姿–開始懂了

作詞：姚若龍     作曲：李偲菘

(前奏)

我竟然沒有調頭 最殘忍那一刻
靜靜看你走 一點都不像我
原來人會變得溫柔 是透徹的懂了
愛情是流動的 不由人的
何必激動著要理由

相信你只是怕傷害我 不是騙我
很愛過誰會捨得
把我的夢搖醒了
宣布幸福不會來了

用心酸微笑去原諒了 也翻越了
有昨天還是好的
但明天是自己的
開始懂了 快樂是選擇

(間奏)

我竟然沒有調頭 最殘忍那一刻
靜靜看你走 一點都不像我
原來人會變得溫柔 是透徹的懂了
愛情是流動的 不由人的
何必激動著要理由

相信你只是怕傷害我 不是騙我
很愛過誰會捨得
把我的夢搖醒了
宣布幸福不會來了

用心酸微笑去原諒了 也翻越了
有昨天還是好的
但明天是自己的
開始懂了 快樂是選擇

(間奏)

相信你只是怕傷害我 不是騙我
很愛過誰會捨得
把我的夢搖醒了
宣布幸福不會來了

用心酸微笑去原諒了 也翻越了
有昨天還是好的
但明天是自己的
開始懂了 快樂是選擇

(完)

想知道我最近在幹麻的，可以使用 Buboo，我的帳號是 Ivangelion（人雋凡），或者使用 PTT2，至我的個板「Ivangelion」，謝謝。

不同的文化或個人，對於不同的顏色，往往有著不同的詮釋，且還會隨時間演變。不過今日研究者已發現一些色彩共通的特性。

色彩象徵與色彩心理學是不一樣的，色彩象徵意謂各文化是如何將顏色用作符號，以代表某特殊意義；色彩心理學則用來解析某顏色會對人造成的特殊影響。因此，二者不可一概而論。例如，就象徵意義而言，紅色常被標記為危險，大概是由於紅色會有看起來離自己較近的錯覺，所以有較大的衝擊；而在色彩心理學中，代表危險的色彩卻是黃色和黑色。

研究顯示，顏色通常會被作為正面而非負面的聯想，除非用於特殊環境與文意中。

色彩各論

紅 Red

紅色是最能引發情感的顏色，能讓人心跳加速、呼吸加快。常代表著暴力、戰爭、侵略，以及熱情；這大概是由於血及火的顏色是紅色所致。紅色也是愛的象徵。

紅色衣著易引人注意，且讓穿者看來較重。由於紅色是一個較偏激的顏色，所以不建議談判者在協商或對質中穿戴紅色。

紅色也可將文字及圖像帶到前景。它可用作強調色，刺激人快速做決定，所以最適合用來當作「立刻買！」或「點擊這裡！」等網頁按鈕的顏色。

在廣告業，紅色也常用來表達性感與情色，如朱唇、紅指甲、紅燈區、紅色的女人……等。電影《罪惡城市 Sin City》中，有一片段就是除了女主角全身用紅色裝扮外，其餘的幾乎全為黑白。

粉紅 Pink

粉紅色一般被認為是很浪漫的顏色，且比起紅色，它較能使人平靜。它也常用來代表著女孩的純真。在零和運動比賽中，主場球隊有時會將客場球隊球員的休息室鐵櫃漆成粉紅色，讓其對手喪失幹勁。

褐 Brown

褐色是大地的顏色，代表著堅固、可靠等男性特質；不過，褐色也可表示為憂傷或沉悶。淺褐色常暗喻為真實。

橘 Orange

橘色界於充滿能量的紅色與興高采烈的黃色之間，所以其各種意涵也介於二者之間。常被聯想為喜樂、陽光，以及熱帶地區。它也代表著創意、成就、激勵。它在年輕人中較容易被接受。

由於橘色正是柑橘的顏色，它也被聯想為健康的食物，並能刺激食慾。它也是秋天的顏色，象徵著豐收。

跟紅色一樣，可將設計中最重要的元素以橘色做點綴。將橘色用於食物產品或玩具的廣告效果不錯。

深橘 Dark Orange

深橘色可意指謊言與不信任。

黃 Yellow

黃色是屬於夏天的顏色，會使人心情愉快。不過，雖然它被象徵為樂觀，但人在黃色的房間中卻易失去耐性，且嬰兒也更常哭鬧。它也是讓眼睛最不舒服的顏色，所以不該濫用。黃色也會使人注意力加強，所以一些紙張底色是淺淺的黃色。

男性常將黃色視為漫不經心以及幼稚，所以若某樣產品的訴求對象為男性，並不推薦使用黃色－－應該沒人會買黃色的西裝，或者黃色的賓士車吧！

黃色也易使人感覺不穩定，所以若想傳達安全與穩定的特質，別用黃色。

金 Gold

金色會讓人有高級的感覺。它的意涵為光亮、智慧，以及財富。

紅、橘、黃等色被視為「暖色系」，使人感到活力、喜樂等特質。

綠 Green

綠色象徵自然。它是對眼睛最舒服的顏色。它也會讓人感覺平靜與涼爽，並且非常能讓人有安全感。電視台會讓人們在上電視之前，使其待在綠色的房間，消除緊張的情緒；醫院也常使用綠色來安撫病人。用綠色來促銷醫藥或環保產品也是很好的選擇。

綠色有時也可暗喻為缺乏經驗，例如英文字「greenhorn」，就是生手、不懂事故的意思。

深綠 Dark Green

深綠色代表著陽性、保守，並暗喻財富。它也常與華爾街聯想在一起。

橄欖綠 Olive Green

傳統上用來表示和平的顏色。

藍 Blue

天空與海洋都是藍色。它所造成的反應與紅色相反。平和、穩定的藍色會讓身體產生一種平靜的感覺，所以常用於寢室，且在藍色的房間也會讓人有較高的工作效率。有人推薦面試時穿藍色的衣服，因為藍色也有忠誠、具深度、智慧、自信等意涵。它也常被當作天堂的象徵色。它也是男性接受度最高的顏色。

許多人相信藍色是最棒的顏色，因為它在各文化中所隱含的負面涵義最少。不過，它有時也被視為冷感與沮喪。

藍色最適合用來促銷與清潔、空氣、天空、水、海洋等有關聯的產品，如濾水器、機場、航空公司、礦泉水……等等。而因為它也常與意識及知識連結在一起，所以推銷高科技產品時，可用藍色來暗示產品的精密。

別將藍色用於烹飪產品及食物的推銷上，因為藍色會壓抑食慾。當藍色與紅、黃等暖色搭配使用時，可在設計上引發強烈衝擊。想想超人衣服的設計吧。

深藍

常被聯想為具深度、專業、認真，以及穩定。

藍、綠色等色域被視作「冷色系」，能使人心情舒緩。

紫 Purple

紫色為穩定的藍與活力的紅二者的結合。代表著高貴，並意味奢華、財富，以及複雜。它也象徵著陰性與浪漫。然而，因為它在自然界較少出現，所以紫色有時會讓人感覺神秘、不自然，例如超自然的魔法。小孩子對紫色的接受度也很高。

淺紫 Light Purple

常用於女性設計品中。也可用亮紫色來推銷孩童產品。它也引發懷舊感。

深紫 Dark Purple

會讓人有沮喪、洩氣的感覺。

黑 Black

黑色常代表權力、權威。在時尚界，黑色是相當流行的，因為它會讓人們看起來比較瘦。黑色也常暗指著委身或順服，如神父或牧師穿黑色制服，象徵順服於天主。不過，若穿著一身黑，也會讓人看來冷淡或不舒服。

在許多文化中，黑色常會自動讓人有負面的感覺。有學者發現，依據歷屆資料，制服主色為黑色的球隊在比賽中會被處罰較多次，且其在照片中也讓學生感受到更多負面特性。

此外，在西方文化中，黑色也常是死亡的象徵。它代表著陰暗與陌生，且意味著光明的消滅。

白 White

白色常代表天真、純潔，以及完美。白色在佈置及時尚界是很普及的，因為它看來很輕盈與中性。

不同於西方文化以黑色代表死亡，東方文化常以白色做為死亡的象徵。這大概是由於殮布、屍體、骨頭等都是白色的。

高科技產品常用白色來暗示簡單大方的特質。

灰 Gray

介於黑與白之間的灰色，常被代表著謙遜、穩定、平衡與中性、悲傷、污染和塵埃，以及無聊與無趣。

參考資料

• Color Psychology: Do different colors affect your mood?
• Wikipedia: Color symbolism and psychology
• Color Wheel Pro: Color Meaning

然而，它沒有為 UTF-8 做特別的設定，造成如中文這種一個字超過一個 byte 的字集編碼會出問題。

解決的辦法在這兒。

1. 先至 /usr/local/etc/php，查看 extensions.ini，確認有 extension=mbstring.so 這行，否則安裝 /usr/ports/converters/php5-mbstring。
2. 修改 get-recent-comments/get-recent-comments.php 裡的 function kjgrc_excerpt：（參數不變）

…
if (strlen($text) > $length) {
    if (function_exists(‘mb_strimwidth’)){
        $text = mb_strimwidth($text, 0, $chars_per_comment, ‘…’, ‘utf-8′);
    }
    else {
        $text = substr($text,0,$length);
        $text = substr($text,0,strrpos($text,’ ‘));
        // last word exceeds max word length:
        if ( ( strlen($text) – strrpos($text,’ ‘) ) > $chars_per_word) {
            $text = substr($text,0,strlen($text)-3);
        }
        $text = $text . "…";
    }
}
…

接著再重啟 Apache，然後 po 一個回應測試，更新側欄的 Get Recent Comments 顯示，接著再刪掉即可。

整體外觀

以咖啡色系及橙色為主。中性的咖啡色以鮮明叛逆的橘色加以突出。

左右兩側有一點適當的留白；字體大小採用「em」，而元素間距則是用「px」。

標頭

網誌名稱配上LOGO旁的留白，約佔掉標頭近一半；標頭右側則是網誌的描述。下方則是導覽棒，分隔標頭與主文。

標頭的背景則是非常漂亮的煙霧，大小為 1006 x 253，延伸到導覽棒下頭。

左側內文

跟 31THREE 一樣，內文左邊都有一張圖片，大小為 110 x 85，有 4px 的邊框。特別之處在於當滑鼠移到圖片上時，本來為咖啡色的邊框會變成橘色，會連結到跟標題連結一樣的全文。

除了文章所附的圖片外，沒有像我網誌的 metadata 一樣有多餘的小圖示；短文後面的回應數背景用了如慧星尾巴似的漸層。文章並沒有「繼續閱讀」的連結，而是只有按標題或圖片才能看全文。

全文後面、在回應之前的樣子如上圖。有「digg it」的連結，還有幾個擺在兩條直線中間、將文章加入網路書籤的圖示。後面還有杯咖啡，請瀏覽者貢獻一點經費給作者。

右側

整個網誌就我認為，最特別的地方就是它的右側，包括「側欄網誌」以及「標籤雲」，讓這網誌獨樹一格。

側欄網誌就是作者簡介他在網路上看到的好文，將其收錄在側欄做簡介，還有 RSS 種子，文章的連結則在每個側欄網誌的文章標題。

Abduzeeodo 的標籤雲除了字體大小粗細外，還利用數種由亮到暗、色調卻一致的顏色、依照文章數多寡而非字母順序來排序，且一行只有一個標籤，這樣由上到下靠左對齊排列。非常棒的創意。

結尾

結尾部分分成上下兩個部分。上半部有三個主要元素，分別是回應數最多的文章、作者的隨機網站設計作品，以及他在 Flickr 的照片；下半部則是跟一般的結尾差不多，再附上有幾位 FeedBurner 的讀者，以及網誌的 RSS 訂閱。

自以為有缺點

1. 我始終認為 RSS 訂閱應該更顯眼，放在使用者舉目可見之處！
2. 文章結尾的「digg it」及「網路書籤分享」排列有點草率。
3. 沒有搜尋框？

這次要分析的是 31THREE 這個部落格。進入後，映入眼簾的是這個畫面：

網站整體外觀

利用 Firefox 的 Web Developer 外掛，得知其色域如左。除了灰階色系外，其色調就是以 #3a5e8c 的藍綠色、#8dc4c7 的淺藍綠色，以及其他棕色系與米白色系為主。背景色為 #f8f4e8 、色域中第二淺的米白色。

藍綠色給我的感覺比較偏冷，這種偏冷的感覺似乎藉由米白色以及棕色予以稍微中和。

同樣利用 Web Developer 看其 CSS，得知其使用的字體為「Helvetica Neue」、Helvetica、Arial，以及 Sans-serif。這一系列都是屬於無襯線黑體字型（筆劃尾端沒有像 Times New Roman 那種修飾，這種襯線字體就是明體），使得內容可讀性較高。這也是一般較常使用的字體。

中間分隔的那條漸層灰線是是一條 950 x 12 的細長條圖，再利用 background-repeat: repeat-y 將其作 Y 軸延伸。

左側標頭的標題與右側作者介紹的標題對齊，且左側第一篇文章標題也與右側「Side Links」對齊。

總體而言，外觀給人的印象是專業、理性。

標頭

標頭的外觀如下：

整個標頭有相當多留白，營造一種高級的氣氛。「Weblog」採用某種看起來較為古老的襯線體，為一張圖。左側有兩欄，分別是文章分類及熱門文章，讓瀏覽者可迅速得知這網誌的走向，欄位左側有淺淺的灰線；右側則是作者簡介，外加一張照片，讓瀏覽者馬上認識作者是誰。

再來，我們看標頭部位的背景。

除了其將色彩「往下刷」的漸層感外，特別值得一提的是其大小為 2099 x 215。為何需要這麼長的背景？我只想到這會不會是為了作者或某些使用者的雙螢幕服務。此外，這種往下刷的漸層感也在底下另一地方重複出現，幾乎成了這網誌最大的特色，不過也將其變得稍微複雜。

接著，我們看標頭部位的導覽條，分左側及右側兩部份介紹。

沒有標識圖（logo），只有名稱，以及一行斜體綠色襯線體字的介紹，同樣有助於營造理性的氣氛。

全都是圖，而不是文字。前景區塊文字是白色，背景區塊文字是灰色。用以區隔的直線很特別，從最上面延伸至字體基線。

左側

首先提的就是左側文章內容所在的背景。它只放在右下方，用來結束中間的漸層灰線，漸漸與背景色融合，且還使用了 min-height CSS 屬性來強制規定左側最小高度，約等同於右側欄位高度。

再來分析文章區塊。

文章標題是 Georgia、「Times New Roman」，以及 Serif 等襯線字體，與內文字體不同。連結有底線，底線顏色與字體顏色不同。文章的 metadata 不同於一般的設計，而擺在文章底部，用兩條斜線「//」區隔。

最特別的地方，在於每篇文章都有一個專屬圖片，大小為 128 x 128，有 1px 邊框。

而在文章回應部份，作者的回應用右邊這張圖做區隔，這種「往下刷色」的樣式與標頭背景相同。

右側

分為三部份，有「Side Links」、「Authentic Jobs」，以及「Recommended」。最值得一提的是「Authentic Jobs」這部份，尤其是其分頁條。

它利用了三張圖片，分別是背景、前景區塊、背景區塊，一樣用漸層方式來設計。而且利用 JQuery tabs，切換分頁時不需等待，且還會 fade-in / fade-out 顯示。

此外，就是「Recommended」的三個區塊，其文字皆不會超過文繞圖的範圍。

結尾

結尾設計非常簡單。

其他 CSS 屬性

網站所用的大小單位不是 W3C 推廣的「em」，而是一般人較常使用的「px」。em 讀為字母的「M」，是一種相對於母區塊的大小；若母區塊的字體大小為 16px，則若子區塊字體大小為 1em，代表其大小就是 16px。

在 body CSS selector 中有三個屬性值得一提，分別是 font-variant、font-size-adjust、以及 font-stretch。

• font-variant：若指定為 small-caps，則所有的小寫字皆顯示為大寫，但會比大寫字略小一些。預設是 normal。Demo 按我。

• font-size-adjust：小寫字母 ‘x’ 的高度與字體大小高度的比率稱為該字型的「外觀值」（aspect value）。若字體外觀值為 0.58，代表當字型大小為 100px，則小寫 ‘x’ 的大小為 58px。若外觀值較高，則當字體大小較小，會比外觀值低的字型較清楚可讀。

  若為 font-size-adjust 指定一個值，則其 font-size 就等於 font-size-adjust/aspect value。預設是 none。Demo 按我。

• font-stretch：將字體變寬或變窄。有 wider、narrower、ultra-condensed、extra-condensed、condensed、semi-condensed、semi-expanded、expanded、extra-expanded、ultra-expanded 幾種值可供選擇。預設是 normal。

自以為有缺點

1. RSS 訂閱圖片太不明顯，應該擺在右側上方較恰當。
2. 文章的 metadata 應再設計得漂亮一些。

- – -

「科技使我們的生活更為豐富，卻也使之『豐富』到不舒服的地步……我知道並不是只有我有這種隨時會被淹沒的感覺。」

十條法則

 減少（REDUCE） 達到簡單的最簡單方法，就是用心割捨。

• SHE：Shrink（縮小）、Hide（隱藏）、Embody（賦加）。
  1. 縮小－－例如，蘋果 iPod 背部的鏡面金屬製造出一種錯覺，讓人覺得機身只有浮在表面的白色或黑色塑膠面板那麼薄，而讓機身的其他部分彷彿融入周圍環境。原本已經很薄的液晶或電漿面板，又安置在極小的支撐結構，甚至浮在透明的壓克力平台上，使它顯得更輕巧。
  2. 隱藏－－這項技術的經典範例，就是瑞士刀：只露出需要用到的工具，其他刀子、起子都藏起來。其他例子還有手機的摺疊式設計。
  3. 賦加－－隨著產品縮小和功能隱藏，產品必須注入因縮小和隱藏而消失的價值感。丹麥皇家 B & O 音響（Bang & Olufsen）遙控器的設計，其外型纖細，採用最好的材質，卻故意做出一種沉重感，微妙傳達了高品質的訊息。

組織（ORGANIZE） 組織能使複雜的系統顯得比較簡單。

• SLIP：哪些東西可以歸納在一起？Sort（分類）、Label（標示）、Integrate（整合）、Prioritize（排定優先序）。
  1. 分類－－把性質類似的事項放在一起。
  2. 標示－－為每個類別安上適當名稱。
  3. 整合－－盡可能把看似同類的群組加以整合，越少越好。
  4. 排定優先序－－把最優先的事項放在同一組，加強注意。
     • 伯瑞圖法則（Pareto Principle，一般稱為 80/20 法則）：假定任何一批資料裡通常有 80% 能夠暫緩處理，只有 20% 需要最優先處理。這個假設讓我們很容易專注於「關鍵少數」。
• 神奇的定位鍵（tab key）：列表以便檢視資料，絕非火箭科學，卻是保證有效的特殊視覺魔術。

時間（TIME） 節省時間讓人感覺簡單。

• 進度長條圖。
• 利用「造型」製造行動和速度的幻覺：汽車的流線形造型。
• 如何使等待縮短？ ←→ 如何使等待更容易忍受？

學習（LEARN） 知識使一切變得更簡單。

• 腦袋（BRAIN）法則
  1. 基本（Basics）是起步：感受信心。
  2. 經常重複（Repeat）：感受本能直覺。
  3. 避免（Avoid）製造挫折感：感受安全。
  4. 用實例啟發（Inspire）：內在動機永遠勝過外在激勵。
  5. 不要（Never）忘記重複。
• 相關－轉化－驚喜
  • 全錄公司（Xerox）研究人員把電腦新出線的圖像力量，與辦公桌的一般擺設加以結合，在人與資訊之間建立很容易辨認的關係。

差異（DIFFERENCES） 簡單和複雜相輔相成。

背景（CONTEXT） 簡單的周邊事物絕非無關緊要。

感情（EMOTION） 感情愈多愈好。

信任（TRUST） 我們相信簡單。

失敗（FAILURE） 有些事物絕不可能簡單。

單一（THE ONE） 簡單是減少明顯的，增加有意義的。

三個要點

遠離（AWAY） 只要挪得遠遠的，多就會顯得少。

開放（OPEN） 開放會簡化複雜。

能源（POWER） 少用，會得到更多。

簡單的生活

「在收容所工作時，他注意到每個病人床邊都有一層架子，放著他們所有家當。看到這種情況，使他捫心自問：『在你擁有的東西已經這麼少的時候，到生命終點你還能保留哪些珍藏？』一枚戒指、一張照片，或是其他的小紀念品，是他經常發現的東西。他得到心酸的結論：到最後，真正重要的只有回憶。」

作者

前田約翰（John Maeda）

日裔美國人，1966年生。他是世界知名的圖像設計師、視覺藝術家、電腦科技專家，也是MIT媒體實驗室的教授，教授媒體藝術與科學，培養出許多設計界與科技界的成功人士。

他畢業自麻省理工學院電腦科學系與研究所，後來更取得筑波大學設計博士學位。橫跨藝術與科技雙領域的前田教授，開創了電腦FLASH動畫技術，也以新穎的視覺藝術作品震撼人心，曾在巴黎、紐約、倫敦、東京等地辦過多次個展。他曾獲獎無數，包括美國設計界最高榮譽史密森尼（Smithsonian）機構的國家設計獎、日本朝日設計獎、德國雷蒙洛伊（Raymond Loewy）基金會獎、戴姆勒克萊斯勒設計獎。

「整體大於部份之和。」

Gestalt psychology，中文譯為「格式塔心理學」或「完形心理學」，是一門在十九世紀末出現 的心理學學派，為近代知覺研究的基礎。

「完形效應」是我們感官的一種能力，會將所見的拼湊成一整體形象，而不會將其單單視為直線與曲線的集合。我們人類偏好的，是整齊、有系統的結構，所以舉目可見的商標經常只是一些簡單的圖形或線條，就是基於完形法則提升辨識度的考量。

利用這個法則，一些遮掩某些要素的設計，常可刺激讀者嘗試補足該部分，進由達到提升讀者專注度的效果；例如一些雜誌封面的標題，常被封面人物的頭給掩蓋過去。

Gestalt 是一個德國詞彙，用來解釋一個東西是如何被「組合在一起」，在心理學上常被翻譯為 pattern（模式、樣版）或 configuration（結構、外貌）。

這個知覺理論是為了對抗傳統的「原子論」模型發展而來。就原子論的觀點而言，所謂的「模樣」，是由彼此無關的視覺元素組成的；但是，諸如「前景－背景」互換或「鴨－兔」互換等現象（上圖），說明了人類會以各種方法將接收到的視覺刺激組織起來；對整個場景的詮釋方法不同，視覺經驗也就跟著不同，亦即整體不等於其部份之和。

性質

完形系統具有以下四個關鍵性質：浮現性(emergence)、具體性(reification)、多穩定性(multistability)，以及不變性(invariance)。

浮現性

看左邊這張圖。乍看之下，這只不過是一堆不知所云的黑點集合；然而，看久一點即可在一瞬間發現這是一隻身體朝左、頭朝下嗅地、左側身軀朝我們的大麥町犬。我們並非先看到它的頭、腳、鼻子，或尾巴，然後從其部分判斷出這是一隻狗，而是立刻察覺。

看不出來的人可以看這裡。（X 的，我也看好久 @_@"）

具體性

具體性指的是人知覺的建構性，也就是說，人所感受到的、由知覺而得的印象，會包含比知覺刺激更加明確的空間資訊。

例如左圖 A，我們會認為有一個三角形，雖然並無實際描繪的三角形；在 B 圖跟 D 圖，眼睛會認為那些不同的形狀是屬於單一形狀；而 C 圖中，我們好像可以看到有一個 3D 的物件，雖然實際上並沒有這個東西。

多穩定性

多穩定性指的是當一個畫面有多種詮釋方式時，人的知覺經驗會在這幾種方式之間不停地擺動，例如本文最上圖，以及下面三個圖。點擊可以看原圖。

不變性

不變性指的是不管一個幾何物體怎樣旋轉、平移、放大縮小，人總是可以辨識出它來，甚至是變形、不同明暗，或者是其部份特徵發生改變都OK。

例如左圖，我們很快就能發現 A 的五個物體都屬於同一個形狀，且與 B 的物體形狀不同；就算如 C 將這形狀變形，或者改成透視視角，或如 D 用不同的物體描繪方式，一樣辨別得出來。

網路上運用這原理的則是 CAPTCHA 測驗。

如右圖，給予一個圖片，請使用者回答圖片中遭到扭曲的字母是什麼。人可輕易辨識，而垃圾郵件、垃圾文章製造機器人則不行。

簡明律

完形心理學最基本的規則為簡明性(prägnanz)。這條規則說，我們會嘗試以越「完形」越好的方式來看一個東西，例如規律、單純、對稱…等等。其它完形律有：

封閉律(closure)：為了完成一個樣式，我們的腦袋會自動填補該樣式缺失的部份。（上圖左）

相似律(similarity)：我們的頭腦會將相似的元素視為一個整體。這個相似性與元素的形式、顏色、大小，以及明暗程度有關。（上圖中）

鄰近律(proximity)：鄰近的元素會自動被我們視為屬於同一個群體。（上圖右）

對稱律(symmetry)：在其他條件相同的情況底下，我們傾向把事件組織成滿足對稱的情況。（上圖左）

連續律(continuity)：會傾向將一種樣式延續下去，縱使該樣式已經結束。（上圖右）

運用完形法則，常可利用一些簡單的圖形與設計，達成令人驚艷的效果。

參考資料

• Answers.com: Gestalt psychology
• Dalmatian: hidden figures
• 交大應藝所陳一平視知覺上課筆記
• 設計的文法
• 簡單的法則