DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> WEB網站前端 >> 關於網頁技巧 >> 設計理論:視覺等級中的色彩認知
設計理論:視覺等級中的色彩認知
編輯:關於網頁技巧      日期:2016/12/27 12:51:28

網頁制作POLUOLUO文章簡介:從訂電影票淺議視覺等級中的色彩認知.

最近有一部由多位外籍華人參演的片子要上映了,我很想去看,想為GDP做點貢獻,於是我想到了網上訂票。在杭城的同學知道,大部分影院都是歸口於時代院線,訂票也大抵上要通過該網站來完成。盡管我最後未能完成網上訂票的夙願(按步驟走完,我才發現我必須擁有一張會員卡才能訂票,這又是另一個說來話長的故事了),但是我至少發現了一個有趣的、值得我寫下點什麼的地方。

於是我挑選了一個具有代表性的頁面截屏以紀念:

tickets 

如果你也曾真正訪問過這個網站,你也許會有和我一樣的感受:在第一次訪問該頁面的時候,我實在不清楚這花花綠綠的顏色代表的意義,五色讓人目迷。

好吧,讓我們先來聊聊色彩。隨著不斷在社會中成長,我們逐漸對色彩形成完整的認知,有一些認知形成是天然的,比如紅色,因為我們的血液是紅色,紅色天然的代表了鮮血,引申為危險,還有綠色象征著生命,藍色象征著深遠等等;另一些則是基於地緣和文化的,比如還是紅色,在中國,紅色代表吉祥,黃色象征高貴。如果展開說,我就顯得有些班門弄斧了,所以就此打住。(《每天懂一點色彩心理學》是近期上市,並且讀起來很輕松的關於色彩方面的一本小書。)

回到訂票這件事情上,在我看到這些色彩後,我的第一反應是這些色彩是為了區分出些什麼,那麼是什麼呢?

時間?因為我知道,對於用戶而言,訂票只需要了解三件事情,電影名稱、場次和票價。電影名稱是顯而易見的,那麼是用來做場次的時間區分嗎?不是,我發現《樂火男孩》11:15的那一場是淡橙色,而緊接的《可愛的中國》11:40的那一場是淡紫色,再往下《氣喘吁吁》11:50是幾乎融入背景色中的深紫色……我想知道了,這些顏色代表的應該是價格了。

但是另一個問題又擺在我眼前——不同的顏色代表不同的價格,這些價格到底是什麼呢?在我將鼠標滾輪翻轉數圈後,我終於,終於的來到了頁面的底部,答案出現了:

price

如果我眼睛沒有大礙的話,上圖中應該出現了四種不同色度和明度的紫色,以及三種不同色度、明度以及色相的綠色,當然還有兩種偏米色的黃色。請原諒我無法用語言精確的描述每種顏色代表的價格,因為它們毫無規律——准確的說是,它們以一種毫無規律的色彩排列試圖告訴用戶票價的等差規律

這讓我想起了我剛剛翻譯的《用戶界面設計10原則》,其中第四條將的是“運用視覺等級”,作者Kyle在文章中告誡設計者“清晰的層級關系將對降低外觀的復雜性起到重要作用”。我想,這個頁面的設計者一定想要通過色彩讓用戶了解到價格的區分,而且是可以“一目了然”的,當然結果不如願。在我看來,這僅僅是為了區分而區分,就像有些界面是為了圖形化而圖形化一樣。

如果我們想要告訴用戶,從最低票價到最高票價是可以通過色彩辨識的,那麼我們應當去尋找一種被人們普遍接受的色彩認知。那麼中國人對於等級區分的普遍色彩認知是怎樣的呢(原諒我拋棄了國外用戶)?

一 用什麼色彩

比如,白,雖然本義象征著純潔、無邪,但是在等級中,因為我們常常用白丁、白衣來形容平民,白色在我們的文化環境下代表的是比較低的等級,和便宜掛鉤。那麼類似的,我們可以明白為什麼黃色代表著高貴了。但我們要注意的,又不能是嫩黃,那只能是黃口小兒的象征,因此色彩的飽和度也是重要一環,白色和黑色給人帶來的厚重感完全兩樣,一個從白色到黑色的完美漸變可以很好的反映出視覺等級的變化,但是我們需要色彩。

二 用多少色彩

那麼我們要用多少色彩呢?向上面頁面那樣用到三大色系,九種顏色麼?這幾乎是George A. Miller提出的7±2效應的上限。除非是雨人,否則大部分用戶只能在短時間內記住7個左右的信息,更何況這7種顏色是多麼的抽象,多麼的……難記。(感興趣的同學,可以點擊這張圖片,然後關掉)

換句話說,具體到這個例子,當你有九種價位的電影票,試圖用色彩來做等級區分和讓用戶做記憶力測試沒什麼區別。如果你剛才點開了那張意大利國旗的圖片,你還能第一時間記起它的綠色是下圖中的哪一種嗎?

green

說老實話,時代院線的訂票頁面我也反復上過數十次了,但是我至今也不記得到底是綠色的票便宜還是紫色的票便宜。因為我最終買到的票都是粉紅色的。

關於如何改進,展開來又是長長一段了,如果是我,我也許會取消色彩區分,轉用數據表的形式,但是BOSS也許會覺得頁面不夠炫(就國情而言,100條設計原則敵不過BOSS一句話);也許我會考慮網站上的色彩和實際票面印刷對應,長久讓用戶形成色彩的對應關系,比如黑色的信用卡一般都是等級較高的,但是BOSS也許會覺得這樣增加成本了吧:-D

方法會有很多,就看你的了……

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved