BOBO匠的海邊

自然選擇:自然界的顏色與界面設計

Posted on: 十月 5, 2007

原文地址:http://www.boxesandarrows.com
作者:Luke Wroblewski
翻譯:JunChen

  互聯網充斥著枯燥的設計,惠普、IBM、戴爾、微軟,以及其他數不盡的網站(相似的佈局,相似的配色)。可能有人會說通過這樣一種標準化的界面可以使瀏覽更方便,而事實上這些網站帶給用戶一種很世俗的體驗,並不能與訪客產生一種積極的聯繫。

  面對這種單調的設計,有一種解決方法,就是使用顏色。可能沒有其他設計元素能像顏色一樣能影響人們對世界(比如網站,比如家居裝潢)的感受。顏色可以瞬間改變我們的情緒和意見。顏色會讓我們感覺到舒適、敬畏,或者激動。在界面設計中,自然界的顏色組合對設計非常有用。從複雜的 Web 應用程序到很多信息類 brochure-ware 網站,自然界的顏色可以區分設計(讓用戶更加難忘)、引導用戶(使用戶專注於交互)、吸引用戶(使頁面佈局更舒適,更有魅力),並且帶來靈感(給設計師配色上的靈感)。

區分設計

  在生活中,我們很容易忘記日常的事。我們趨向於記住那些有獨特體驗的或者有情感參與的事件。在網絡上也是如此。當所有網站看上去一樣,我們可能會產生這個就是那個的幻覺。而且當在網站之間跳轉越來越快,這樣的幻覺也越容易產生。

  所以一旦有機會可以讓網站更獨特,就不能放棄。如果你的網站很「跳」,那麼用戶可能會花更多時間瀏覽並且想是從哪裡訪問過來的,他們有可能記住這個網站並且下次再訪問。可能沒有比顏色更好的元素可以達到這樣的效果了。人們會馬上對顏色產生感覺:激動、高興或者枯燥乏味。

  自然界的顏色搭配可以馬上讓你跳出互聯網的顏色(Fig 1),並且設計一個更容易讓人記住的網站。舉個例子,通過 Fig 2 中自然界的顏色組合設計的網站原型(Fig 3)完全區別於「標準」版本的同一個網站(Fig 4)。用柔和的顏色作為背景,足以突出頁面上 4 塊主要的信息區域。

  但是在用「牧場的顏色」到你的設計上之前,必須知道顏色選擇也必須和設計主題一致。因為顏色與用戶的交流非常的直接高效,用正確的顏色也很重要。

引導用戶

  「功能決定形式——這是錯誤的理解。形式和功能應該是一體的,在精神上融合。」 —— Frank Lloyd Wright

  自然界中的顏色通常具備較低的飽和度,對比「人造的數字顏色」,眼睛看上去更加舒服。這樣可以讓用戶更加專注於交互,不會被其他亮色調打擾。當你試圖在一個充滿飽和色調的頁面上(Fig 4)瀏覽信息時,你的眼睛會不斷地返回那些亮的顏色(比如頁面頂部的藍色)。相反地,Fig 3 中使用的藍色和黃色,創造了一種平衡,從而突出了圖片、導航和內容。(這對信息量大的頁面尤其有效。)最強的視覺元素是最重要的:導航和 4 塊內容區域,而不是背景色。這可能就是因為自然顏色組合帶來的效果,我們對這些顏色很親切熟悉。我們趨向於忘記那些深藍、黃色和灰色,因為每天都看到。

  在那些用戶需要長時間在線使用的 Web 應用程序中,注意這一點尤為重要。不是很強烈的配色可以使用戶專注於工作和接收重要信息。當然完美的 Web 體驗不能僅僅依靠顏色,結構、交互、佈局等方面也必須協同工作,來創建可用、易用的網站和應用程序。但是顏色是平衡中的重要部分,不能忽略。

吸引用戶

  「自然顏色非常親切並且具有很高的接受度。」 —— Edward Tufte, 1989

  自然界的顏色組合對另外一種設計思考也很有幫助,那就是情感反饋。可用性(Usability)讓用戶很方便的從 A 點到 B 點,但是有時降低了有趣的體驗,那些人們想重複體驗的或者與人分享的。

  考慮一下下圖中兩個版本的事務表單。其中一種(Fig 5)使用了寒冷和具有脅迫性的配色。另外一種使用了暖和和更有魅力的顏色,自然,使得表單更有親和力。現在假設有一個書記必須重複性的填寫這個表單,那麼較少脅迫性的表單可以吸引他在這個舒適的框架下完成工作。

帶來靈感

  自然界的顏色蘊含的另外一個財富就是可以帶來靈感。豐富多彩的自然界,給我們持續不斷的帶來新的想法,包括顏色的選擇。舉個實例,為了促進都柏林的旅遊業,設計師並沒有使用橙色、綠色和白色(愛爾蘭國旗的顏色),而是採用了愛爾蘭海岸的一種顏色組合。這種組合非常生動和吸引人,是都柏林看起來很有遊玩的樂趣,並且廣闊、豪華。非常可惜的是這個配色並沒有被帶到都柏林的網站上,少了很多生動和魅力。

  當然所有上面談到的,自然界的顏色組合併不就是一把尚方寶劍。有時候你可能想給你的訪客帶來一種「震驚懼怕」的感覺,你最好的賭注就是那些從來不在自然界中一起出現過的顏色組合(所以看上去不舒服)。有時候你的訪客想要的,或許就是你最喜歡的那種企業藍。但是在複雜的交互和需要創意的時候,自然界的顏色組合肯定會是你很重要的一件武器。

標籤:

發表迴響

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / 變更 )

Twitter picture

You are commenting using your Twitter account. Log Out / 變更 )

Facebook照片

You are commenting using your Facebook account. Log Out / 變更 )

Google+ photo

You are commenting using your Google+ account. Log Out / 變更 )

連結到 %s

Twitter Updates

Flickr Photos

upload

龍蝦 #齊民

upload

More Photos

RSS 我的相本

  • 發生錯誤;該訂閱可能暫時失效。請稍後再試看看。
十月 2007
« 九月   十一月 »
 123456
78910111213
14151617181920
21222324252627
28293031  

RSS 值得去看看

  • 發生錯誤;該訂閱可能暫時失效。請稍後再試看看。

網誌點擊數

  • 12,166 次

彙整

%d 位部落客按了讚: