了解顏色如何影響網(wǎng)站設(shè)計中的效果
時間：2024-05-22 10:30:01 | 來源：建站知識
時間：2024-05-22 10:30:01 來源：建站知識
色彩是直接影響靈魂的力量，即色彩如何影響網(wǎng)頁設(shè)計。作為網(wǎng)站開發(fā)人員，我們的主要任務(wù)之一是確保我們創(chuàng)建的每個網(wǎng)站都能以正確的方式傳達(dá)正確的消息。
而最大的因素之一就是使用（正確的）顏色。選擇配色方案不僅僅使用客戶（或您）最喜歡的顏色，甚至不使用品牌顏色。
有很多因素需要考慮，在本文中，我將討論其中的大多數(shù)因素。
本文分為三個主要部分： - 顏色在設(shè)計網(wǎng)站中的用途
- 基本顏色，它們對我們的感知和示例的影響
- 創(chuàng)建網(wǎng)站時使用顏色的永恒技巧
顏色在網(wǎng)站設(shè)計中的用途 顏色增加品牌知名度 在商業(yè)世界中，品牌塑造很重要，而品牌塑造的很大一部分就是我們所說的
“彩色品牌塑造”。
顏色品牌只是使用顏色來幫助建立公司形象或影響人們對公司的看法。
因此，假設(shè)一家大數(shù)據(jù)處理公司希望其客戶或潛在客戶將其視為可靠和值得信賴的公司，他們可能會選擇“正式”顏色，例如藍(lán)色和灰色。
如果一家酒店公司希望被視為豪華酒店，他們可能會選擇黑色，金色或銀色。 這讓您作為網(wǎng)頁設(shè)計師/開發(fā)人員如何在客戶的網(wǎng)站上執(zhí)行顏色品牌建設(shè)承擔(dān)更多責(zé)任。
讓我們嘗試一個簡單的測試。我只是給你看顏色。我希望您想到使用這些顏色的品牌。
這里是：
這是哪個品牌/業(yè)務(wù)？得到答案了嗎？如果您想到了Google，其實這個測試中的91％的人都想到了Google。
您的目標(biāo)是確保當(dāng)人們登陸您客戶的網(wǎng)站時，他們將確切地知道它是一家公司以及他們的工作。
在您的網(wǎng)站設(shè)計生涯中，您將擁有兩種客戶：
類型1： 那些已經(jīng)決定使用配色方案的人
類型2： 那些仍需要其顏色幫助的人
對于第一類客戶，您的責(zé)任將是融合他們的品牌色彩，并尋找與之匹配的色彩。
可口可樂的網(wǎng)站就是正確完成顏色一致性的一個例子。
紅色是品牌的顏色，他們的網(wǎng)站開發(fā)團(tuán)隊通過在整個網(wǎng)站中發(fā)現(xiàn)紅色的條紋，將紅色結(jié)合到他們的網(wǎng)站中做得很出色：
當(dāng)觀眾瀏覽網(wǎng)站時，他們不會因為紅色而忘記自己在可口可樂網(wǎng)站上。
BlueHost是另一個示例：
請注意，如何使用藍(lán)色將頁面劃分為較小的部分，以便更輕松地使用信息。
最后但并非最不重要的，這是Backlinko的綠色示例：
該網(wǎng)站的側(cè)邊欄使用綠色并突出顯示重要文本。
繼續(xù)：
如果您覺得客戶使用了錯誤的顏色怎么辦？
如果您認(rèn)為a儀公司對紅色的選擇傳達(dá)了錯誤的信息怎么辦？
在這里，您可以并且應(yīng)該為客戶
增加更多的價值。
像這樣的問題：
- 為什么選擇當(dāng)前的品牌顏色？
- 你怎么看這件事？
- 您是否收到客戶關(guān)于他們對這種顏色的感覺的反饋？
- 您想為貴公司塑造什么樣的形象？
這些是基本問題，可幫助您了解客戶的品牌問題。 顏色使某些元素脫穎而出 如果您想引起人們對按鈕或特定部分的關(guān)注，（我希望）您不經(jīng)常使用大箭頭或霓虹燈閃爍。
您用顏色來做。
顏色通常用于突出顯示按鈕，重要文本和小節(jié)等元素。
號召性用語按鈕 CTA按鈕是可以激發(fā)行動的按鈕，例如購買產(chǎn)品，注冊免費(fèi)試用版或下載電子書。
營銷人員實際上要經(jīng)過大量數(shù)據(jù)和測試，才能獲得正確的CTA按鈕副本，顏色，大小和位置。
為什么要經(jīng)歷這么多麻煩？因為擁有更好的CTA按鈕意味著更多的業(yè)務(wù)。 這是Divi的CTA按鈕的示例：
快速瀏覽一下，您會看到主要的CTA是綠色按鈕。
主按鈕為綠色，并非偶然。
他們想引起人們的注意，他們知道綠色與白色形成了鮮明的對比，因此這將是人們登陸該頁面時首先要注意的事情。
他們使用頂部的另一個CTA按鈕（“加入下載”）執(zhí)行相同的操作。
這引出我一個大問題：
最好使用哪種CTA顏色？ 最佳答案是沒有。盡管
綠色，橙色和紅色是CTA按鈕最常見的選擇，但沒有單一的顏色可以保證最佳的轉(zhuǎn)換率。
您無需尋找“最佳顏色”，而是要
創(chuàng)造最高的對比度。 HubSpot進(jìn)行了一項測試，以查看在綠色按鈕和紅色按鈕之間沒有其他更改的情況下哪個CTA效果更好：
測試進(jìn)行了幾天，并進(jìn)行了2000多次主題訪問。
結(jié)果：紅色按鈕的點(diǎn)擊次數(shù)比綠色按鈕多21％。
這是否意味著紅色的轉(zhuǎn)換效果好于綠色？
不必要。 您會注意到，由于綠色是網(wǎng)站的主要顏色，因此紅色更加突出。這是其更好性能的合理解釋。也可能是Performable的訪客碰巧喜歡紅色。
Dmix的另一項測試顯示紅色按鈕的性能比綠色按鈕高34％。但是同樣，可能有很多因素可以解釋結(jié)果。
A / B測試是找到特定網(wǎng)站或網(wǎng)頁的“最佳” CTA按鈕顏色的最佳方法。
邊欄 邊欄是您要引起注意的網(wǎng)頁的重要部分。
回到Backlinko，看看下面的邊欄：
您可以清楚地看到綠色和橙色如何彈出并引起注意。
顏色影響人們對您網(wǎng)站的感覺 在潛意識層面上，色彩對人們感知的影響比我們想象的要大。
這是
色彩心理學(xué)的主要理念
。 研究由學(xué)院色彩研究表明，人們作出的環(huán)境中，人的潛意識評估
在90秒內(nèi)初步觀察的-和
62％和90％之間的這一評估是
基于顏色。
顏色對我們的看法有不同的影響，您對顏色的選擇會顯著影響用戶對客戶品牌的第一印象以及網(wǎng)站的整體體驗。
您使用顏色的方式可以增加人們對網(wǎng)站的信任，并可以使他們成為忠實客戶。
當(dāng)人們登陸您的網(wǎng)站時，您希望他們：
- 信任網(wǎng)站/業(yè)務(wù)
- 被說服足夠留在網(wǎng)站上
- 被說服執(zhí)行所需的操作（CTA）
您在設(shè)計中所做的一切都應(yīng)支持這些目標(biāo)。
基本顏色及其對感知的影響 在本部分中，我將討論8種基本顏色及其對我們的感知的影響，以便您可以確定哪種顏色適合某些消息。
如果我說，綠色是金融相關(guān)網(wǎng)站好，你不具備使用它的每一個金融相關(guān)網(wǎng)站，你會做。
我只是讓您了解基本信息。
紅色：權(quán)力和緊迫感的顏色 紅色描繪的是緊迫感，熱情，緊急情況，生存，勇氣和進(jìn)取心，但其陰影具有不同的含義。
紅色的陰影
鮮紅色：充滿活力，令人興奮；非常適合食品，飲料，娛樂，冒險公司。
深紅色：權(quán)威，豪華；適用于銷售高價產(chǎn)品和服務(wù)的公司，教育機(jī)構(gòu)。
錯誤地使用紅色可以使您/現(xiàn)場看上去很霸道，脾氣暴躁，怨恨，暴力，殘酷，霸道，好斗和生氣。
藍(lán)色：信任的色調(diào) 如果您想營造一種信任感，平靜感和生產(chǎn)力，那么藍(lán)色是正確的顏色。它給人一種寧靜與和平的感覺。
與紅色不同，紅色使人感到緊迫感，藍(lán)色使他們可以抽出時間來決定自己是否信任公司并相信自己所說的話。
藍(lán)色陰影
淺藍(lán)色：創(chuàng)造力；非常適合科技和創(chuàng)意公司。
深藍(lán)色：智力，信任；非常適合需要建立信任的公司，例如金融機(jī)構(gòu)，醫(yī)療保健，政府組織和公司。
綠色：金錢，平衡與自然 大多數(shù)人不知道綠色是色譜的中心，使它成為平衡，平衡和沉著的顏色。
它是一種通用的顏色，在大多數(shù)行業(yè)中都適用，其變化比其他顏色要小。
這使綠色成為健康和保健行業(yè)，環(huán)?；蛴袡C(jī)產(chǎn)品以及科技公司的理想之選。
以下是一些有效使用綠色的網(wǎng)站示例：
黃色：創(chuàng)意，好玩，獨(dú)特 快活的人經(jīng)常被描述為“陽光燦爛”并不是偶然的。
黃色是最快樂的顏色，使您感到興奮，樂觀并樂于接受。
想要喚起愉悅感受的公司（例如旅行社或兒童聚會組織者）通常會使用黃色來表示友好和愉悅。
黃色在區(qū)分創(chuàng)意和即裝即用類型的品牌方面也很有用。
橙色：緊急，持久，自信 如果您想以一種非侵入性的方式傳達(dá)一種緊迫感，橙色可能是合適的選擇。
它結(jié)合了黃色的快感和紅色的緊迫感，因此這是一種持久而自信的絕佳方式。
紫色：成熟，成功，想象力 紫色是奢侈和精致的顏色，但其陰影對感知的影響略有不同。
紫色的陰影
淺紫色：喚起女性的階級感和成熟感；非常適合向女性銷售產(chǎn)品（如珠寶和美容產(chǎn)品）的公司。
深紫色：嚴(yán)肅，陰沉，神秘，奢華。
黑色：大膽，優(yōu)雅，與眾不同 黑色比紫色要復(fù)雜得多，因此它是迎合最富有客戶群的品牌的理想顏色。
正確使用黑色可以使您形成高對比度，從而幫助任何行業(yè)的網(wǎng)站做出大膽的聲明。
白色：友好，老練，優(yōu)雅 如有疑問，請使用白色。
白色簡單而無憂，但仍然富有創(chuàng)意，優(yōu)雅，精致，誘人且友好。
白色最好與強(qiáng)烈的響亮色彩搭配使用，以創(chuàng)建干凈，極簡的效果，并且仍然易于閱讀：
網(wǎng)頁設(shè)計中使用色彩的永恒技巧 空白不是浪費(fèi)空間 空白是網(wǎng)站上任何空白的內(nèi)容。
它不必是白色的:)
某些人仍然認(rèn)為白色/負(fù)空間浪費(fèi)了屏幕空間。實際上，這個空間有特定用途。
您是否曾經(jīng)登陸過一個網(wǎng)站，并且由于來自各個方向的所有顏色而使眼睛瞬間“受傷”？
或者，也許您對公司的業(yè)務(wù)如此困惑？
這正是空白可以幫助的。
我們喜歡SquareSpace如何利用空白：
我認(rèn)為有一些小事情可以做得更好，但這很好用，因為它很簡單明了。
讓我們不為另一個例子走得太遠(yuǎn)。花點(diǎn)時間注意到我網(wǎng)站的設(shè)計-您當(dāng)前正在使用的網(wǎng)站。
注意大量的空白嗎？
那是設(shè)計使然。
我打算簡化顏色的使用并避免使用側(cè)邊欄，因為
白色空間可以使在線讀者的眼睛呼吸和休息。 移動和臺式機(jī)屏幕已經(jīng)給眼睛帶來了很大的壓力，因此，如果您可以幫助他們尋找所需的內(nèi)容，那么您的讀者將會喜歡它。
使用空白的好處：
- 在段落的行距和中間各行之間正確使用空格會使理解率提高近20％。
- 它允許您將文本，圖像和部分分開，以便您可以以更有條理的方式呈現(xiàn)單個想法/概念。
- 空白可創(chuàng)造平衡。太多的空格給您的印象是您的網(wǎng)站缺少內(nèi)容，但是缺少內(nèi)容會導(dǎo)致混亂和混亂。
- 它可以讓您通過創(chuàng)建高對比度來突出顯示CTA。
提供對比以保持您的網(wǎng)站吸引力 看一下這個網(wǎng)站：
乍看之下，它沒有吸引力，而且很無聊，因為它將灰色調(diào)的文本和淺色的圖像放在淺灰色的背景上，使所有內(nèi)容顯得平淡無趣。
如果用戶不得不著眼睛閱讀您的文本，則必須更改字體或背景顏色。
這是另一個：
頂部的行“請求個人咨詢”幾乎看不見，下面的段落也很難閱讀。
要使所有內(nèi)容都脫穎而出的關(guān)鍵是使用能夠形成對比的顏色。
在選擇配色方案時使用色輪 色輪是顏色關(guān)系的直觀表示。
Adobe Color CC是有用的色輪工具，您可以輕松地使用它來找到配色方案。
互補(bǔ)色彼此形成對比，如果要突出顯示網(wǎng)站上的元素，則很好用：
因此，如果您網(wǎng)站的主要顏色是藍(lán)色，則要使用的一種很好的對比色將是黃色，以突出顯示諸如CTA和小節(jié)之類的重要元素。
以下是我們討論內(nèi)容的回顧：
- 顏色可以提高品牌知名度，突出重要的網(wǎng)站元素并影響人們對網(wǎng)站的感覺。
- 不同的顏色會使人產(chǎn)生不同的情感，因此選擇正確的顏色很重要。
- 空白，對比度和良好的配色方案是良好網(wǎng)頁設(shè)計的重要元素。
我們希望到目前為止，您在為下一個網(wǎng)站設(shè)計項目選擇顏色時更有信心。
在線咨詢