2012年5月24日 星期四


通知圖示的四大天王
by DesignWing




一般人的日常生活裡,無論是為了美觀裝飾、區隔提醒、辨識警告等等哪種目的,都充滿了各種色彩的訊息。有些色彩讓人感覺溫和,有些色彩讓人感覺刺激,有些則表現出冷靜,雖說顏色本身是由沒有情感成分的光譜波長所構成,但是人類因為各種經驗的投射與認知的心理作用,很多顏色逐漸產生了各自代表的特定意義和感受,而且這些約定成俗的意義長久以來已經深植人們的內心深處且無法輕易被改變,硬要改變的話可能會造成地球大毀滅般難以想像的災難與不便。

而在介面的世界裡為了讓使用者更直覺正確的感知某些系統的回饋訊息,更是會用一些特定的顏色及符號來喚起使用者經驗的認知,加強使用者對於訊息的判斷。這些圖示如果用了慣用色以外的顏色來顯示,將造成使用者認知的矛盾而產生錯誤的操作判斷。今天我們就來看看介面裡提醒訊息界的四大天王:完成(確認)、錯誤(取消)、告知(提醒)及幫助(說明)各自慣用的代表色彩及符號。

藍色訊息
Pictures by Google
首先第一位出場的,是代表使用說明、幫助、更多資訊等等的i符號。其實從符號表面上不難理解,他就是英文裡information第一個字母i的縮寫。這個圖示通常會在系統為了讓使用者能更進一步的了解更多的資訊時出現,為的是讓使用者立刻體認到目前跳出的訊息是系統用小幫手的身分在教導一些關於操作Q&A的詳細訊息。而顏色通常會是使用一般認知裡偏向較冷靜、祥和的藍色,為的就是避免使用者在看到突然跳出的視窗感到驚嚇,用藍色的隱喻可以讓使用者感到某種程度的安心與信任,達成引導使用者繼續閱讀而完成傳達各種須知項目的任務,畢竟閱讀使用須知是一件理性的行為,用較冷靜的色彩可以讓人產生信賴感。

綠色執行
Pictures by Google
第二位要介紹的是代表執行、完成、確認的V符號。關於確認的這個行為為何會用一個勾勾來表示其實有好幾種說法,筆者聽過認為比較有理的是源自於以前英國的老師在批改學生的作業內容無誤時,會用手寫註記right(正確的意思),後來為了更快速的批改而縮寫為只剩下第一個字母的r,久而久之就演變成V這樣的特定符號了。
而在慣用的顏色上通常會用綠色來表示,這是因為綠色象徵著綠樹、生命、自然,所以給人一種安全、和平的感受,這樣的色彩訊息拿來當作可執行、確認和完成的代表色實在是再適切不過了甚至覺得按了這顆確認鈕以後考試也都一百分了

紅色警戒
Pictures by Google
接下來我們來介紹一下有點感到灼熱和緊張感的禁止、錯誤、取消符號,通常會是用X來表示。關於這個符號的由來其實也是眾說紛紜,有人說是因為X這個符號象徵一種破碎、損壞的形象所以用他當代表,另一種說法是由英文判斷式中常用的false而來,跟上述確認的right是相對的意義,而首字f寫久了就簡化成X的符號了。
而在顏色的選擇上,紅色這個顏色一直讓人有一種強烈的感覺,原因除了紅色容易讓人聯想到火焰和鮮血而產生警覺性之外,紅光在科學的理論中是可見光裡波長最長的,所以穿透性最好也傳的最遠,最容易被人的眼睛看見。因此在介面操作的時候為了提醒出現了某些錯誤必須停止或是警告動作將會造成的資料遺失,便選用了這個最不會被忽略而且還會讓你感到緊張的色彩而達到紅色警戒的作用。

黃色提醒
Pictures by Google
最後一位是具有提醒、告知意謂的!符號,看到這個驚嘆號大概就可以理解,系統正在提醒接下來的操作可能會有某些無法預期的結果,或是系統出現異常可能會導致之後的運作不順暢。而顏色則是選擇了光譜波長界的第二把交椅:橘黃光。因為橘黃光在日常生活中的穿透性也是非常強的,例如車子的霧燈為了達到在濃霧中的可視度便是選用了橘黃色的燈光。但是它又不像是紅色帶給人如此強烈窒息的感受,所以對於拿來用在具有提醒警示的圖示上,既不容易被忽略,也不會讓使用者感到相當的驚慌而容易誤判操作。

Pictures by Google
其實各種顏色的涵義因為各地民情的不同,通常也會產生各種不同的意義與情感的投射,但在某些使用情況下全世界倒是都說著同一種語言,就拿路上的交通號誌來說,幾乎所有國家的燈號都是以紅、黃、綠來表示禁止通行、即將禁止通行、可通行,雖說對於紅綠燈號顏色的由來,相傳是1868年時一位英國的工程師為了解決當時馬車容易撞傷人的情況,從英國約克城中的穿紅衣婦女代表已婚勿接近,綠衣女士代表未婚可以追求而得到靈感,設計出第一代的紅綠燈。但追究源頭,穿紅衣綠衣的原因可能也是由這些顏色基本上散發出來給人感受的訊息而成。

而紅綠燈號與介面中的符號顏色意義上是相當吻合的,畢竟虛擬介面有一點想把整個真實世界搬進小螢幕裡的企圖心,所以在很多圖示的應用與意義上,都會盡量與真實世界人們的感知產生連結,操作起來也才會更加的直覺。


參考文獻
維基百科


每星期我們都會發表新文章,若各位讀者覺得可以與這些文章產生共鳴,可透過下面FB及Blog的圖示分享喔。也可以加入我們的FB粉絲團,當有新文章的時候便能透過FB收到最新訊息了!


沒有留言:

張貼留言