如何開發網站、電子商務或應用程序配色方案

開發網站、電子商務或應用程序配色方案

我們分享了很多關於顏色對品牌重要性的文章。 對於網站、電子商務網站或移動或 Web 應用程序,它同樣重要。 顏色對以下方面的影響:

  • 對品牌及其價值的初步印象——例如,奢侈品通常使用黑色,紅色暗示興奮等。
  • 購買決定 – 品牌的信任度可能取決於顏色對比。 柔和的配色方案可能更加女性化和值得信賴,強烈的對比可能更加緊迫和折扣驅動。
  • 可用性和用戶體驗—— 顏色有心理作用 以及生理影響,使導航用戶界面變得更容易或更困難。

顏色有多重要?

  • 85% 的人聲稱顏色對他們購買的商品有重大影響。
  • 顏色將品牌認知度平均提高 80%。
  • 顏色印象佔產品接受或拒絕的 60%。

在確定網站的配色方案時,隨附的信息圖中詳細說明了一些步驟:

  1. 原色 – 選擇適合您的產品或服務能量的顏色。
  2. 動作顏色 – 下面的信息圖中缺少這一點,但確定主要動作顏色和次要動作顏色非常有幫助。 它教育您的觀眾根據顏色關注特定的用戶界面元素。
  3. A其他顏色 – 選擇額外的 互補的顏色 你的原色,理想的顏色是你的原色 彈出.
  4. 背景顏色 – 為您網站的背景選擇一種顏色 – 可能沒有您的原色那麼激進。 還要記住黑暗和光明模式......越來越多的網站在明亮或黑暗模式下採用配色方案。
  5. 字體顏色 – 為將要出現在您網站上的文本選擇一種顏色 – 請記住,純黑色字體很少見,不推薦使用。

以我公司為例 Highbridge 為一家服裝製造商開發了一個在線品牌,該製造商希望建立一個直接面向消費者的電子商務網站,讓人們可以 網上買衣服. 我們了解我們的目標受眾、品牌的價值,並且——因為該品牌主要是數字產品,但也有實體產品——我們專注於在印刷 (CMYK)、織物調色板 (Pantone) 以及數字(RGB 和十六進制)。

通過市場研究測試配色方案

我們的配色方案選擇過程非常緊張。

  1. 我們對目標受眾進行了一系列原色的營銷研究,將我們簡化為單一顏色。
  2. 我們對目標受眾進行了一系列二級和三級顏色的營銷研究,並在其中縮小了一些配色方案。
  3. 我們製作了產品模型(產品包裝、頸掛標籤和吊牌)以及帶有配色方案的電子商務模型,並將這些模型提供給客戶和目標受眾以獲取反饋。
  4. 因為他們的品牌在很大程度上取決於季節性,所以我們還在混合中加入了季節性色彩。 這對於廣告和社交媒體共享的特定集合或視覺效果非常有用。
  5. 在確定最終方案之前,我們經歷了六次以上的過程。

closet52 配色方案

雖然品牌顏色是淺粉色和深灰色,但我們開發了 動作顏色 成為綠色的陰影。 綠色是一種以動作為導向的顏色,因此它是一個很好的選擇,可以將我們的用戶的注意力吸引到以動作為導向的元素上。 我們為我們的次要動作加入了綠色的倒數(帶有白色背景和文本的綠色邊框)。 我們還在懸停動作的動作顏色上測試更深的綠色陰影。

自從我們剛剛推出網站以來,我們就結合了鼠標跟踪和熱圖來觀察我們的訪問者被吸引並與之互動最多的元素,以確保我們的配色方案不僅看起來不錯……而且表現良好。

顏色、空白和元素特徵

開發配色方案應始終通過在整個用戶界面中對其進行測試以觀察用戶交互來完成。 對於上面的站點,我們還合併了非常具體的邊距、填充、輪廓、邊框半徑、圖標和字體。

我們為公司提供了完整的品牌指南,以便在內部分發任何營銷或產品材料。 品牌一致性對這家公司至關重要,因為他們是新人,目前在行業中沒有任何知名度。

這是帶有配色方案的電子商務網站

  • Closet52 - 在線購買連衣裙
  • Closet52 系列頁面
  • Closet52 產品頁面

訪問 Closet52

顏色可用性和色盲

不要忘記對網站元素之間的顏色對比度進行可用性測試。 您可以使用 網站可訪問性測試工具. 通過我們的配色方案,我們知道我們將在未來解決一些對比度問題,或者我們甚至可能為我們的用戶提供一些選擇。 有趣的是,我們的目標受眾出現顏色問題的可能性非常低。

色盲是無法感知非有色障礙用戶可以區分的某些顏色之間的差異。 色盲會影響 百分之五到八的男性 (約 10.5 萬)和不到 XNUMX% 的女性。

可用性.gov

WebsiteBuilderExpert 的團隊將這張信息圖和詳細的隨附文章放在一起 如何為您的網站選擇顏色 這是非常徹底的。

如何為您的網站選擇配色方案