萬盛學電腦網

 萬盛學電腦網 >> 網頁制作 >> 交互設計 >> 如何在網頁設計中使用顏色

如何在網頁設計中使用顏色

   在網頁設計中,對目前的網站配色(Landscape of color)認真琢磨一下還是非常有趣的。大多數網站或多或少相同,但是顏色的設計搭配卻是一個非常給力的工具。

  我並不想嘗試去闡述一些具有革命性的東西或者是特別的發現。但如果大部分網站都采用同樣的配色方案,那對顏色意味著什麼呢?實際上,遠超出你的想象。幻想一下整個世界的每一個網站都是非常漂亮和五彩缤紛的,但它同時也意味著千篇一律。這就像你文章中每一個段落的粗體。

  因此,當配色方案比較柔和的時候,它允許有更多的機會。

  關注你想要的任何東西

  許多網站都有一個基本的灰度配色方案-白色的背景和黑色的字體。(網頁中)想讓你看到的部分會賦予顏色作為強調。這就是為什麼網頁不會充滿顏色—它們使用在想讓你看到的按鈕,標題或者鏈接上面。

如何在網頁設計中使用顏色 三聯

  使用Vibrant,例如,當你第一次登陸它們的主頁,主頁的背景和圖片是黑白的,網站標志,可點擊的按鈕和漢堡菜單是亮黃色,這些可以很快的(在灰度背景中)脫穎而出,吸引你的注意力。

  另一個例子是Takeit; 當你第一次登錄他們的主頁就看一個大大的藍色背景。然而,其他的都是白色的。最前面並且居中的大標題會讓你的注意力集中在中間。同時,你的眼睛在很短的時間內就能注意尺寸較小但是仍然明顯的APP商城的按鈕。你可以看到是顏色如何指引用戶的注意力的。

fa0d56ab234e32f875520f3e3a73.jpg

  創造個性

  顏色是非常奇妙的,因為它可以設置一個網站或者品牌的語氣和情緒。Beagle(很 遺憾,譯者訪問的時候,網站已經不在了)提供創建項目簡介的服務,他們的網站使用了較輕的茶色。當你向下滾動他們的主頁時,你會看到棕色,炭色,綠色,甚 至粉紅色這樣一些愉快的色調。世俗的色調(earthly tones)看起來專業和優雅,給人對於其所代表的公司(留下)一個非常好的印象。

  An Interesting Day 網站它特指“在奧斯陸峽灣(Oslofjord)的一個小島上舉辦的一個不可思議的,為期一天的會議”( “a weird, one-day conference on a tiny island in the Oslofjord”)。當紅色的背景和紅色的字體在上面的是偶,你一定會有一種怪異的不同的感覺。這不是我們每天看到的東西。這看起來很好,但更重要的 是這種配色方案傳達了一種很明顯的“怪異的”(weird)個性。

9c1f56ab246232f875520fbeb206.jpg

  寫一個非常重要的聲明

  通過顏色做一個聲明(statement)會很有趣。但你必須保證這個顏色很顯眼並且能抓住用戶的注意力。這很簡單的說~。但對於語句來說也必須是 一個很好的顏色選擇。你不能只是隨便選取了一種亮色,(反之)它的外觀和感覺必須對整個頁面來說具有意義和目的性。舉個栗子,這是Gaga Symphony的登錄頁面。當你登錄到他們的界面,你會被亮麗的粉紅色背景所包圍。這不是你期待的交響曲。相反,你覺得交響樂應該更優雅,你期待靜谧的色調。但是,不是這一個,Gaga交響樂是充滿活力,有趣和創造性的。因此,(其所使用的)桃紅色(hot pink)是有意義的。

602d56ab246d6ac7256cb0e6c378.jpg

  提供內聚(Cohesion)和流動(Flow)

  顏色也可以指導用戶使用流式頁面。在上面的Takeit的例子中,她比較溫和的准確指引了用戶的注意力。顏色為了指導用戶,它可以變得敏感 (subtle)但不需要戲劇性(dramatic)或者過分誇大(over the top)。尤其當各種顏色之間開始緊密結合時特別有效。這基本就是品牌顏色工作的原理。

  看Marvel或者Dropbox。他們APP的配色方案都使用了明顯的藍色,但是你看在它們圖形中的其他顏色,像綠色,橘黃色或者紅色,非常恰當的搭配在一起;這樣就讓他們變得有意義了。

89be56ab24a26ac7256cb09c0194.jpg

  一個不同的例子是Innovation Project Canvas。他們使用了綠色來指引用戶(操作)沿著他們的頁面滾動。你不需要使用許多顏色來創建一個漂亮的流式頁面;僅僅使用一種顏色也可以做得更好。Innovation Project Canvas僅僅使用他們的綠色就達到了極佳的參與指導用戶的效果。

6f0c56ab24d26ac7256cb040b9f3.jpg

  圖片中的顏色

  一個關於顏色的有趣的小竅門是通過圖片去使用它。用戶界面的基礎不僅是給網站添加一些顏色而已。隨著登錄頁面上照片背景和大產品圖片使用的興起,去使用合成的圖片為你的設計帶來色彩也是一個不錯的主意。

eb7c56ab24e332f875520fd47876.jpg

  CartoDB 是一個能夠讓你將地理位置數據可視化的APP。(CartoDB是一個開源的允許你在web上存儲和虛擬化地理數據的工具,這個數據庫通過靈活方式讓開發 者更容易的創建地圖和設計自己的應用。)有什麼最好的方法可以炫耀它們的服務有多好而不是炫耀他們的地圖有多美嗎?那就是他們的主頁。這是一個機智的方式 去為他們的的產品說話,同時為他們的頁面增加視覺興趣和色彩。

  說到產品為它們自己說話,ETQ讓 他們的鞋子大大勝過了他們的UI。這個網站風格非常簡潔,以最低限度去延伸他們的配色方案。他們把重點放在他們的產品上。盡管他們不是所有的鞋子都像例子 中的一樣富有色彩,但是要讓他們的鞋子成為其設計中最大的顏色板塊,仍然有一段很長的路要走。ETO真正的讓鞋子脫穎而出。

150b56ab24f432f875520f9eed35.jpg

  誰需要顏色呢?

  有趣的是看到網站沒有顏色。有時候你不需要它(顏色)。網站沒有紅色,綠色或者藍色也仍舊可以很華麗。灰度配色方案可以為品牌創建必要的外觀和感覺以及發表聲明。

2f2f56ab25006ac7256cb08b1b10.jpg

  Visual Soldiers確實很好,沒有顏色,就像Tomasz Wysocki’s portfolio。 這兩個網站有同樣的優雅。因為整體缺乏色彩,所以他們反而抓住了你的注意力。你想在一個CTA(引起用戶動作)或是一個鏈接中找到一些輕微的藍色或者綠色 的提示,但是這裡沒有。顏色的缺乏是這兩個網站品牌的一部分。就算僅有黑和白兩種顏色,他們看起來也同樣的時髦和美觀。

b33b56ab252032f875520fddfbfd.jpg

  結論

  就像你所看到的,顏色是非常強大的。如果你能讓顏色做一個設計,它可以做到許多事情。顏色可以通過流和重要的聲明指引用戶的眼睛,幫助指導用戶。顏色充滿個性,也可以十分有趣。對我而言,我認為顏色,或缺乏(色彩),賦予了設計生命。

  So have fun with it.

copyright © 萬盛學電腦網 all rights reserved