造就常新的用戶色彩體驗： 第一部分 理論

這張照片的顏色感覺如何?這些煙花感覺喜慶嗎?

照片 來自 expressmonorail 。

色彩是您的網站的最重要的一個部分。 然而，顏色往往只是通盤決定之後的馬後炮，甚至有時候被不管不顧。這樣可不行。色彩幫助用戶解讀信息。說得復雜一點，大多數人對網站用色的評判是在下意識裏完成的。他們可能不會說出對色彩的意見，但他們潛意識裏對此很介意。

有時候，你會因為顏色記住網站。我告訴你有一個網站，紫色用的很棒，我問你這是哪一個網站，你首先想到什麽?大概是 Yahoo!吧。雅虎的品牌標識系統有好幾大特征 ，其一就是紫色。 您可能會問：色彩理論和紫色有什麽關系?

在這一系列文章中，我們將(或多或少地)講解對色彩以及其在網頁設計中的起的作用。在這一篇文章中，我們將解釋色彩基本知識：色彩的原理?藝術家如何使用色彩?色彩如何影響我們的情緒?在第二篇文章中，我們將研究如何在網頁上渲染色彩，樣式表中的色彩編碼方式，和CSS3中關於顏色的新特征。在第三篇，也是最後一篇文章中，我們會講解如何在您的布局中拾取和應用顏色，和顏色靈感存在與大千世界中的顏色。

首先，我們會簡單介紹一下物理學中的顏色理論。然後，我們將討論心理學色彩理論：網站的中顏色傳遞何種情緒，以及我們如何用此優化用戶體驗。最後，我們將討論如何將理論應用於網頁設計的實踐中。

物理學顏色理論

反射顏色

我們周圍的世界五顏六色。一個物體，受到光線照射(可以看得到的物體，見 電磁輻射 ) ，將會把某些波長的光反射到你的眼睛裏。舉例來說，純粹的白光照射蘋果，除紅色外( 波長700-630納米)所有的顏色(所有波長)的光都會被吸收 。紅色是唯一反射出來讓你看到的光，因此，你認為蘋果的顏色是紅色的。搞笑吧——紅是唯一蘋果不吸收的顏色。所以說，我們所認定的顏色，實質上是：特定波長的光在被物體反射回來的時候被削減。

加法顏色

顯示器用另一種相當不同的方式顯示顏色。因為 它自己產生光，就是說它自己產生顏色。一般來說，產生豐富色彩的三原色是紅，綠，藍。因為電腦顯示器有著非常高的像素分辨率，它並不是逐點使用“加法”顏色的。比如計算機顯示器在某一點上顯示青色，它實際上會在一個特定區域上都亮起藍色和綠色像素。因此認為，計算機顯示器以一種抖動的形式顯示顏色。

設計涉及到的顏色理論

標準色相環

互補色

做下面這個實驗：盯住某種顏色大約一分鐘，然後閉上你的眼睛。你會看到什麽顏色?不出意外，您會看到被稱之為“對比色”的顏色。這種顏色通常是在“色相環”中方向“相對”的顏色。但這種奇奇怪怪的實驗有什麽現實意義?

如果一個醫生整天盯著血液(暗紅色)，當他閉上眼睛，他就會看到“互補色”。這種情況下，他看到的是淺綠色。因此，醫院的一般都被刷成一塵不染的淡綠色。雖說可能算不上什麽高深科技，但這種“互補性”的色彩系統確實能鎮靜我們的視覺系統。如果人們在建造醫院時都可以受益於色彩理論，那我們網頁設計師在制作網頁時一樣也可以!

使用互補色是美觀的藝術設計和平面設計的重要方面。放到其他領域也一樣適用，比如一些對比鮮明的標誌和零售展示。把互補色放在一起，它們會互相凸顯。

因為 藝術/禪/生活 都關乎平衡，網站具有良好的色彩基礎是很重要的。絕不要過度刺激你的受眾，除非……小子，你跟自己的錢包過不去。

近似色

簡單的色彩“三角”，與第四種顏色。

在為您的設計選擇色彩時，近似色是最安全的選擇。最簡單的挑選方法就是從基礎色開始：在這裏，我選擇綠色，色相為120 ;下面得顏色我會挑選 相關的顏色。 開始啦，挑選色相和120相關的顏色——都是可以如數學般精確。我選擇 60 ， 45 ， 和 33 。 您會發現我每一次都會降低一些色調，這是有意的，而且不是隨意的。通常情況下，設計者會選擇這樣的一組三個顏色：這種組合被稱為顏色三角。

矩形選色法

矩形選色法不僅是最復雜的，而且是最難搞懂的。但它的挑顏色卻相當簡單，只需畫一個一個長方形的撐住色相環;這樣，矩形的四個角就會各壓住一個色相。然而，重點是變化。一不小心，你的方案會花得堪比彩虹。盡量讓一種顏色壓住別的，並且讓您的用色方案盡可能簡明。我發現如果多種顏色相對不飽和，那麽處理起來就會容易許多。

心理學色彩理論

顏色是一個重要的工具，您可以用它來實現跨越語言的交流。看看大家看到各種顏色時的自然想法

與情緒和感情相關的顏色

每種顏色都有自己的明度和情緒。

暖色系

暖色比冷色更有親近感。因此說來，一個較暗的暖色可能看起來和一個在數值上較亮的冷色一樣亮。

紅色

動力，力量，熱情，愛

橙色

快樂，熱情，吸引力，成功

黃色

歡樂，刺激，焦點

冷色系

冷色比比暖色更有距離感。因此說來，一個較亮的冷色可能看起來和一個在數值上較暗的暖色一樣亮。

綠色

清爽，新鮮，威望，涼爽，冷靜，

藍色

可靠，可信，可依賴，寧靜

紫色

靈性，儀式，神秘，轉生，皇權

中性色

中性色對情緒的影響更小，因此常被考慮用來做客觀介紹。然而，若用得好，中立色依然可以有自己的暗示。“純”黑和“純”白是我們的理想的“光明”和“黑暗”的色彩代表。

黑色

性感，神秘，服從，危險

白色

純潔，無辜，恢復，中立，永恒

色彩的明暗和變調

請記住，顏色不僅僅只有色相。飽和度和亮度也影響到我們的感覺。而傳統的色彩理論往往回避飽和度和明度，但藝術家歷來強調了解他們的微妙之處。

幾乎可以肯定，你看到過選擇性使用顏色的例子：一個藝術家拍完了照片，將所有顏色去掉，只保留焦點位置的顏色。顏色差異會影響我們看待事物時的主觀感覺。通過賦予顏色，藝術家可以將活力註入照片中原本枯燥的地方。

瀏覽一下最熱門的 網站藝術作品 如Deviant Art 。他們有什麽共同點嗎?請一定註意互補色以及飽和度的用法。你想要傳遞什麽情緒?如果你想提醒大家註意某個特殊元素，你有沒有考慮過選擇性使用顏色?

這個照片讓你感覺如何?

照片來自 midnight digital

在我的設計中指定了色彩之後，我發現很難將各個地方的色彩轉回黑白;在選擇性色彩表達的想法指導下，它們太出眾了!

一旦你了解了顏色和色調如何影響您的網站，就要利用它們的優點。正如鮮明的個性 ， 快樂的話語(比如在 Flickr.com 可以找到)可以使網站更加動人，明亮快樂的色彩一樣可以做到。另一方面，無趣的話題也可以讓生動的顏色帶動起來。請記住，色彩的一切都跟感覺相關。在知覺上沒有黑白分明(一語雙關)的科學。

結論：挑選最符合經驗的色彩

理論，我們講完了。如果您有興趣在網頁布局中使用和掌控顏色，關於顏色和顏色方案的內幕理論是是至關重要的了。雖然，這只是一部分。作為經驗的設計師，我們要考慮各種不同的元素。需要註意的是，我們不是要成為某個特定領域的大師，而是要有一個總體的知識體系。

顯然，我不能給出以上所涉及的每個概念的全部細節，真那樣的話，這篇文章會有現在的八倍長。不過你可以花點時間看看這些概念的相關鏈接，或細讀一些相關書籍。如果這還不夠，去找靈感吧：瀏覽下你最喜愛的網站和藝術家。看看他們是怎樣使用色彩的。不要去註意形式啦，版權啦，特效啦：只是要註意色彩。如果你能單獨的註意用戶體驗每一個部分 ，你將在構思的時侯一帆風順。我的文章中有什麽東西觸動你了嗎?請不吝您的想法的評論!

下篇文章內容預告

理論是一回事，實踐又是咋個一回事?

本文的目的是為了奠定基礎。現在，我們站在這一層面上，要對這個概念進行再一步探討。在下一篇文章中，我們將討論如何渲染網頁顏色( sRGB是什麽意思) ，樣式表中各種各樣的顏色編碼方式以及CSS3 中關於色彩的新特征。

根據專業的研究機構研究表明，彩色的記憶效果是黑白色的3．5倍。也就是說，在一般情況下，彩色頁面較黑白頁面更加吸引人。

1．網頁色彩搭配原理

①色彩的鮮明性。網頁的色彩要鮮豔，容易引人注目。

②色彩的獨特性。要有與眾不同的色彩，使得用戶對企業網站的印象強烈。

③色彩的合適性。色彩和網站表達的內容要與氣氛相適應。

④色彩的聯想性。不同色彩會產生不同的聯想，如藍色想到天空，白色想到純潔等。

2．網頁色彩搭配技巧

①相同色系色彩。先選定一種色彩，然後調整透明度或飽和度，產生新的色彩。這樣的頁面看起來色彩統一，有層次感，容易塑造網頁和諧的統一氛圍，缺點是容易造成網頁的單調。

②運用對比色或互補色。先選定一種色彩，然後選擇它的對比色或互補色，這種用色方式容易塑造活潑、生動的網頁效果，缺點是容易造成色彩雜亂。

③不要將所有顏色都用到，盡量控制在三種色彩以內，並且在其中選擇一種作為主色調。

④背景和文字的對比盡量要大，要有足夠的對比度來保證頁面易於閱讀，絕對不要用花文繁複的圖案作背景，以突出主要的文字內容。

⑤由於生活的地理位置、文化修養的差異等，不同的人群對色彩的好惡程度有著很大的差異。如生活在鬧市中的人喜歡淡雅的顏色；生活在沙漠中的人喜歡綠色等。在設計中要考慮主要用戶群的背景和構成。

　　一、顔色是影響網頁的重要因素

　　無論是平面設計，還是網頁設計，色彩永遠是最重要的一環。網絡推廣當我們距離顯示屏較遠的時候，我們看到的不是優美的版式或者是美麗的圖片，而是網頁的色彩。

　　不同的顔色給用戶帶來不同的情緒，比如紅色、橙色給人一種熱情、亢奮的感覺，黃色使人聯想到陽光，綠色是和平的象征，藍色是用度最廣的顔色，幾乎沒有人會對藍色反感。所以，做網站時一定要給自己的網站定位好顔色，一個頁面不能太多顔色，會給人很花的感覺。

　　二、網頁速度直接影響用戶體驗

　　網頁速度直接影響用戶體驗，而影響網頁速度的主要原因有兩點：

　　1 界面設計

　　很多人爲追求美觀，把界面設計得很漂亮，于是網頁上到處都是圖片，網絡推廣甚至連導航都用flash設計的。這樣的網站確實美觀，但是增加了速度的負荷，而且優化起來也不好優化。

　　像網易、騰訊等大站，這麽龐大的數據系統，打開速度並不慢，在技術方面暫且不說，只看界面，簡單但不失美觀，相比下自己的網站，不需太累贅的圖片也能達到美觀的效果，同時還能帶來很好的用戶體驗，在這點上還是需要多多注意的。

　　2 網站空間服務商

　　除了界面外，空間服務商也是個很重要的原因。做網站就不能因爲要省下幾十塊錢而去買個不好的空間服務商。紅姐的博客剛建立時，購買的空間不好，很多人反映網站打開速度太慢，後來紅姐毅然換了空間服務商，同時也把博客換成打開速度較快的主題，這才解決了網頁速度這一大問題。

　　所以這裏我要說的是，想要做好網站，就要花多點錢購買一個穩定、帶寬好點的空間。

　　三、版面設計

　　用戶浏覽網站的習慣(可浏覽文章用戶是如何浏覽你的網站的)，是以“F”字母的特性浏覽。“F”，從書寫上，先寫上面的一橫，然後一豎，最後是一橫。用戶浏覽網頁也一樣，先從左向右浏覽，然後從左邊開始由上到下，再從左向右。所以，也就是說，最重要的信息應該放在左上的位置，通常這裏是放logo。根據這個特性，把最重要的信息排在最適當的位置，能更好地展示給用戶看，用戶也能更迅速發現了他們需要的信息，這樣方可達到雙贏!

　　四、導航設計

　　導航是整個網站的指南針，帶領用戶准確查找所需的信息。網絡推廣從以下方面講述導航設計的重要性：

　　1 從優化方面看導航

　　在第二點說到，有些人會把網站導航設計成flash的形式。flash的導航是很有特色，但是不利于優化。蜘蛛抓取網頁根據文字和的腳本進行抓取，而flash導航把所有的鏈接都放到了flash腳本裏，蜘蛛是不會抓取flash腳本裏的鏈接的。

　　2 從用戶體驗方面看導航

　　有些不成熟的網站，盡管導航設計得非常漂亮非常有特色，但是用戶體驗並不好。爲什麽呢?請看下面這個網站的導航：

　　上面的導航是改版前的導航，和下面改版後的導航沒有變化，但是，從下面的導航可以一眼看出，現在你的位置一定是在“城市導航”這個頻道裏，而上面的導航你並不知道自己正位于哪一個頻道。對于一個不了解你網站的用戶來說，下面標明位置的導航對用戶來說，是很有必要的一點。

　　以上是以站長指南的多年經驗告訴大家網頁設計對用戶體驗的影響，很多站長對網站的前端設計並不感興趣，但是在整個網站中前端設計是門面功夫，做得好才能吸引別人。盡管很多人倡導“內容爲王”，其實，在做好內容的同時，多多關注網站的界面是否給用戶帶來不好的體驗也是很重要的。

社交網的信息十分繁雜，因此導航的引導就顯得至關重要。沒有公司比Google更大膽了，將導航的tab全部簡化成icon，只有鼠標hover上去的時 候才會顯示這個tab的注釋。顯然，這對新手用戶而言，有一定的學習門檻的，但是我們從中無不從中感受到了簡潔的力量，圖形化導航讓整欄顯得幹淨整潔，功 能集中，切換方便。

縱觀國內外幾大主流社交網的導航，導航大多采用的是文字，雖然從功能上看一目了然，但是由于文字本身不夠簡潔，排布起來有局限，那麽只好在設計的時候，更要考慮功能的歸納分布以及優先級展示，隱藏不常用的功能。

2.使用灰色按鈕
經常做設計的人都知道，灰色按鈕代表著是被禁用的功能，是不可點擊的。然而Google+卻大膽的使用了灰色按鈕，通過鼠標hover告訴用戶這是可點 的。仔細想來，這用做以下兩個原因：一、平衡了頁面的配色。由于Google的logo主題色有四種，如果讓按鈕們默認展示原有的顔色，頁面會看起來很 花，沒有重點。像這樣灰掉的處理，使選中的tab更加突出，也不會帶來幹擾。二、按鈕由灰點變彩色的方式給人一種點亮圖標的暗示，增強了用戶點擊按鈕的欲 望。

從圖標的發展趨勢來看，無論顔色還是形態都是朝著簡潔方向走的，過去花花綠綠的圖標已經失去了它原有的標識感，純色的圖標應用起來會顯得更上流，更高端。更優雅，更親切的科技感。

3.鼠標所到之處均有反饋

網頁上的大多數元素，在鼠標滑過的時候，都應該有其相應的反饋。無論是僅僅發生鼠標指針變化，還是出現下劃線，或是結合一些簡單功能的操作和注釋來顯示。 設計師在做靜態設計稿時，很容易忽略這些設計細節，但這正是一個産品體現良好交互性能的關鍵時刻。就好比和人交談，如果他對我的話語沒有任何反映，我也會 減少對他訴說的興趣，如果他時而點頭，時而微笑，時而贊許，那麽我可能會有更多更有意思的事情告訴他。因此，哪怕僅僅是邊框的顔色變深了一些，也能表達這 個頁面對用戶是友好的，而不是不理不睬的。

hover態是展示用戶在當前頁想知道的相關內容的最佳時機。例如鼠標劃到頭像時，會出現那個人的相關信息等。Hover態還可以對某一模塊有強引導的作用，例如Google會強調它的搜索功能。另外，還可以用于隱藏一些不常用的操作，例如刪除等。

4.簡單任務在當前頁完成

這裏最值得一提的是Google+加好友和分組的流程優化。原本加好友和分組是兩個獨立的任務，分組是在對方同意加好友時才能進行，由于Google+推 出的是單向關系鏈，因此將分組可以提前到添加好友這一步做。原本加好友是需要點擊按鈕，如今只用hover上去就會出現分組框，大大降低了加好友和分組的 操作門檻。用戶最少只要點擊一下即可完成兩步步驟。如今Face book等一些雙向關系鏈的社交網也開始學習這種快速加好友和分組的方式。

5.feed實時滾屏更新

Feed就是我們的每天訂閱的新消息。相信大家對下面的小黃條都不陌生吧，國內大部分網站都是采用點擊小黃條來查看新的消息，而Google+是自動滾屏 的方式展示最新消息，並在左側出現一條藍豎線，表示是最新更新。Google的設計之所以顯得靈動，還有一個重要的原因，在于它的這些狀態的改變都伴隨著 優雅的動畫，而不是赤裸裸的出現、消失。包括feed的評論和贊，都是實時更新，配上簡單華麗的動畫，簡直就像在看現場直播。

類似上圖中的提示條在整個網站都是統一一致的，它們都是自動出現，自動消失，有的還肩負著簡單的操作，例如圖中的撤消等。有了這樣輕便的系統反饋，就不會再出現彈窗等很重的反饋方式，頁面的交互就顯得輕便流暢許多，無時無刻不在安撫著用戶焦躁的情緒。
綜上所述，本文從靈敏輕便的角度，對Google+的體驗進行分析，總結出以上六點讓web更輕便靈敏的設計方法，希望能給大家帶來一些參考。

1、 産品需求期達成共識

在執行一個新的産品設計時，首先設計師會與産品經理進行溝通，明確定位。當交互設計人員按照需求文檔，直接進行了功能設計，産品經理評審原型時，發現與自己規劃的産品完全不同，在這兩者之間，設計人員與産品經理對産品的需求往往理解不同；設計人員在前期需求分析方面工作應該更細致些（如果在時間允許的範圍內），如：

A 分析用戶的類型以及目標

B 競品調研，分析産品的核心點

C 創建人物角色，完成用例流程

往往在經過這一輪工作之後，你應該會和産品經理在意識流上有了共識，當然這些工作可以是提供更細節的內容，也可以找些相關的圖來說明，只要在産品的方向上把握一致就可。

2 梳理經驗和分析數據

以往的産品設計對設計師來說是一個很好的經驗教訓，不管成功與否，都應該好好的對整個工作流程和內容進行梳理，當然認真的分析過去産品的各類數據以及盡可能掌握競品的數據。很多人會說，分析用戶群很重要，如：分析一些用戶的年齡，學曆，知識水平，理性感性成分，性別，家庭背景，個人成長環境，對行業進入的深淺，使用的客戶端品牌，操作系統，浏覽器以及其版本，操作習慣，消費能力，個人好惡，地區，訪問時間，停留時間，停留頁面，操作語言等信息因爲不同的需求去設計，徹底了解你的用戶爲他們而設計原型，當然筆者認爲定性的內容是需要檢驗的，用數據來佐證才是關鍵，這點毋庸置疑。

3 合理規劃和酷樂體驗

第一眼的感受是刻骨銘心的，對任何用戶來說都是很重要的，在那些很酷的想法迸發之前，我們還是需要有一些基礎理論來支持的，比如：

A. 一個頁面總體的信息量不宜過多，提供給用戶識別的區塊最好不超出這個數字5-9

範圍太多。（7±2原則，即“由于人類大腦處理信息的能力有限，它會將複雜信息劃分成塊和小的單元。根據喬治A米勒（George A. Miller）的研究，人類短期記憶一般一次只能記住5-9個事物。”）

B 應用古藤堡圖表即科學的引導用戶的視線

用戶一旦進入頁面，不管他們是有意進入還是無意間進入網頁，人們在浏覽頁面或布局的時候，視線往往趨向于從左上角到右下角，就好像頁面的布局設計有某種自然引力一樣。因爲人們通常都是從左至右，由上往下地閱讀，久而久之視線自然會沿著這一路徑移動，因此我們在設計時將內容模塊按照這樣的視線引導排列。

C 使用顔色或者動畫來吸引用戶注意

顔色或者動態的形式能把人的注意力吸引到特定的元素上去，當某個元素與其他的形成反差時更是如此。相對一致性來說，人類對物體間的差異性更爲敏感。因此在頁面中加入一些顔色或做適當的特效，可以非常有效地把浏覽者的視線引導到我們希望他們看到的地方。