[ 平面理論教程 ] 如何讓設計擁有高轉化率的配色知識指南- 設計教程 - 骨子愛創意

教學主題: 如何讓設計擁有高轉化率的配色知識指南

大家好!! 小編今天來和大家分享關於 設計教程中的平面理論教程教學

今天的這個教學主題是: 如何讓設計擁有高轉化率的配色知識指南

這教學的重點為這幾點 [ 知識,指南,轉化,設計,擁有,如何,色彩,配色,方案,用戶, ]

希望你可以從這幾點中領悟到修圖的精華

本文重點

我們總希望自己的設計能夠擁有不錯的轉化率，但是高轉化率並非一蹴而就，也沒有一勞永逸的萬能方案，一切都是要從基礎上着手。今天我們聊聊要做高轉化率的設計，應當具備哪些色彩上的基礎知識。

我們總希望自己的設計能夠擁有不錯的轉化率，但是高轉化率並非一蹴而就，也沒有一勞永逸的萬能方案，一切都是要從基礎上着手。今天我們聊聊要做高轉化率的設計，應當具備哪些色彩上的基礎知識。

對設計師而言，色彩是最強有力的工具之一，不同的色彩能夠喚起用戶不同的情緒和不同的感受，這也是大家都熟知的事情。可如果你真的從零開始一個全新的設計項目就會發現，要拿出一套真正適合這個項目的配色方案是何其艱難。

為此，我開始着手撰寫這篇涵蓋了基礎色彩理論和UX規則的快速參考指南。這篇文章並非系統而完備的色彩設計說明，它更接近於一份為UI和UX設計項目而準備的色彩使用概述。

色彩理論

色彩理論中涵蓋了許多內容，但是其中最基本的還是通過對比、互補和感染實現色彩與用戶的互動：

·互補指的是我們視野中色彩和色彩之間相互補足的關係。選擇色輪中處於相對位置的色彩，構成的配色方案令雙眼覺得和諧。最常見的互補配色有兩種，三元配色和複合配色，我們將稍後探討。

·對比則可以將不同的元素區分開來，從而降低視覺疲勞，構建出視覺重心和焦點。元素之間的高對比度讓文字更容易被識別，引導用戶注意到更關鍵的信息。背景和背景之上文本的色彩選取就是一個非常常見的對比度的問題，我們會隨後聊到。

·色彩對於用戶的情緒上的感染也是一個重要因素。

色輪

每次談及色彩和配色，總是繞不過色輪。色輪上每一個色彩在對稱的位置上都有一個與之“相反”的色。

色輪的功能不只是為你呈現出互補色。色輪以三原色(Primary Colors)紅、黃和藍為基礎，兩兩混合創造出次色(Secondary colors)橙色、綠色和紫色。在這六個不同的色彩的基礎上，加入白色能夠創造出不同的色調，加入黑色營造出色度的差異。

創造高效的配色方案

想要構建一套可行的配色方案，通常有三種可靠可行的配色方案：三元色(Tradic)，近似色(Analogous)和複合色(Compound)。

三元色。這種配色方案是幾種配色方案中最均衡的，在色輪上選取三個位置互成120度角的三種色彩，以它們的位置為端點能在色輪內畫一個等邊三角形。

通過這個等邊三角形，你能確保配色方案中的三種色綵帶來的感染力、對用戶的影響是均衡的，並且相互之間能夠形成可靠的搭配。

複合色。色輪上相互對稱位置上的色彩構成互補色，而兩組相鄰互補色構成的配色方案則為複合色。這兩組色彩的強對比是吸引用戶注意力的重要手段。

舉個例子，紅色和綠色就是一組互補色。iOS 中電話圖標和右上角的數量提示標識就很好的構成了色彩對比。

近似色。色輪上彼此相鄰的色彩是類似色，它們能在色彩上營造出協調而連續的感覺。雖然這種配色不是那麼好把控的，但是有訣竅，就是注意選取有感染力的色調作為核心，這樣可以最大化利用整個方案。一套類似色的配色方案通常是在色輪的同一區域內選取色彩搭配而成。

黃色和橙色就能很好的搭配出一套配色方案。

著名的任務管理類工具Clear 就是藉助類似色配色方案將不同優先級的任務視覺化的處理。

類似色配色方案能夠用來給APP或者網站營造特定的情緒和氛圍。比如醫療類應用Calm 就使用了藍色和綠色這樣的類似色配色來盡量讓用戶感到輕鬆和寧靜。

學習搞定配色方案最好的方法就是不斷的練習。創造配色方案的工具很多，Adobe Color CC 無疑是相當可靠的選擇。Color CC的調色面板非常的直觀，選中的色彩都可以進行單獨的修改，方案制定完成之後只需簡單的點擊幾下就能很好的保存下來。

文本色彩

當你在為文本進行色彩選取的時候，需知道文本和周圍的色彩如何相互之間對比度低的話，用戶是很難進行分辨的。當這種配色出現在移動端上之時，戶外的炫光和屏幕本身的反光可能讓這種情況更加嚴重。

色彩低對比度讓用戶的眼睛無法聚焦和分辨信息。

WC3 的網絡內容可訪問性指南 能幫你更好的解決網頁中色彩和對比度的問題。這份指南中規定了對比度的最低標準，確保低視力的用戶最起碼能看清文本。根據WC3的規範，文本色彩和背景之間的對比度會根據光照強度分為1-21總計21個不同的級別。對於正文文本和圖片文本之間，他們提出了如下的建議：

·較小的文本應當確保至少和背景之間有4.5:1的對比度比率

·較大的文本(14pt粗體，18pt常規)應當確保和背景之間的對比度超過3:1

一旦你對配色作出了選取，那麼用絕大多數的常用設備來驗證這個配色的對比度是非常有必要的。測試結果和用戶的實際體驗是掛鈎的，如果識別度有問題，那麼應當作出適當調整。

色彩對轉化率的影響

UI設計中，色彩搭配不僅僅是一種裝飾，合理的設計能夠對產品和業務產生直接的影響。色彩對於產品的轉化率而言有着諸多影響，它作用於不同的UI控件，直接地影響着用戶的交互和體驗。而色彩對於轉化率的影響，最值得一提的應該是行為召喚(CTA)按鈕。

一個CTA 按鈕通常牽涉到4件事情：位置，形狀，文案和色彩。如果這四個因素在設計上都能良好的配合，那麼這就是一個效果良好的CTA按鈕了。在按鈕的顏色選取和轉換上的爭議可能是世界範圍內爭吵的最多也是最常的一個問題了。有大量的A/B 測試的測試結果顯示，CTA 按鈕的色彩變化對於註冊等交互行為有着重大的影響。HubSpot 曾經共享過一個著名的按鈕顏色測試：

Performable 所展示的A和B兩個版本的按鈕顏色測試，頁面上的內容都是一樣，測試的是顏色對於用戶的影響。

雖然大家都預測綠色的按鈕效果會更好，但是紅色的按鈕實際效果比綠色按鈕高了21%。

所以，同樣的道理，這樣的測試結果並不能覆蓋所有的情況。並沒有一種神奇的色彩能夠應用於所有的網頁和APP，實際的情況需要根據你的受眾、基於測試來進行選取，看看用戶會怎樣決策。

對比度是關鍵

如果你想讓用戶點擊某個東西，那麼盡量讓它脫穎而出。如果你的網站或者APP中使用了大量的藍色，那麼用戶可能不會立刻注意到藍色的按鈕，就像淺色的背景下，淺色的按鈕不會顯眼。用戶之所以會更傾向於CTA按鈕也是因為它們對比更明顯，會因為鼠標懸停、點擊而發生狀態改變，讓人無法忽視。

貼心提醒: 按Ctrl+Alt+Z和Ctrl+Shift+Z組合鍵分別為在歷史記錄中向後和向前 ( 或者可以
使用歷史面板中的菜單來使用這些命令 )。結合還原 ( Edit／Undo )命令使
用這些熱鍵可以自由地在歷史記錄和當前狀態中切 換。

結語

對色彩的基礎知識有完整而深入的理解，是做好網頁和APP設計的重要先決條件。這些色彩理論是做好UI設計的重要基石，提升的空間非常的大，怎麼提升還是要取決於你的努力方向。不論你此刻選取的色彩是什麼，它們對於整體是一定會有影響的，從對比度、協調度和對用戶情緒的感染力上，都有着直接的作用。

看完小編分享的教學之後 是不是對平面理論教程中的設計教程教學更熟悉了呢?

希望我們所介紹的 如何讓設計擁有高轉化率的配色知識指南 這教學會喜歡

文章標題: 骨子愛創意- 如何讓設計擁有高轉化率的配色知識指南–轉載請註明來源處

本教學分類為平面理論教程中的 設計教程相關教學

文章相關關鍵字為: 知識,指南,轉化,設計,擁有,如何,色彩,配色,方案,用戶,

本文永久連結 :如何讓設計擁有高轉化率的配色知識指南

本文轉載自 :VIA