今天人與計算機(手機)的互動主要基于與圖形用戶界面元素的交互,而色彩在該交互中起著關(guān)鍵作用帆锋。
正因為有無數(shù)種色彩組合的可能,在設(shè)計一個新的APP 時,人們往往很難決定一個效果好的配色方案七兜。
用多少色彩:
保持色彩組合簡潔有助于改善用戶體驗。 一個簡潔的配色方案不會使人眼花繚亂福扬,并且使你的內(nèi)容更容易被理解腕铸。 相反,在太多的地方有太多的色彩很容易搞砸設(shè)計铛碑。
有研究表明:大多數(shù)人更傾向于僅依賴2-3種色彩的簡單色彩組合狠裹。那么如何選擇這2-3種色彩?色環(huán)是很好的工具汽烦。
單色配色
單色方案是最易于創(chuàng)建的配色方案涛菠,因為每種色彩取自相同的基色。 單色的色彩可以很好地結(jié)合在一起撇吞,產(chǎn)生和諧的效果俗冻。單色是單一色系的搭配,它在色彩的深淺牍颈、明暗或飽和度上有所調(diào)整而形成明暗的層次關(guān)系迄薄。
相近色
相近色的配色方案是選取相互不沖突的的相關(guān)色彩; 一種色彩用作主色,而其它色彩用于豐富該方案煮岁。
?相近色配色方案是由在十二色環(huán)圖中相鄰的二到三種色彩創(chuàng)建的噪奄。
這個方案相對容易使用,其訣竅是選擇哪種顏色作為主調(diào)色來突出人乓。
補色搭配
互補色是對立的色彩勤篮。
?互補色是色環(huán)上兩個正對立的顏色。
它們對比強烈色罚,可以用來吸引觀眾的注意力碰缔。 當(dāng)使用互補色方案時,重要的是選擇主色并且使用其互補色用于強調(diào)戳护。 例如金抡,當(dāng)人眼看到一塊不同色調(diào)的綠色物體時瀑焦,一點紅色就會很突出。
自定義配色方案
創(chuàng)建自己的配色方案不像許多人想象的那么復(fù)雜梗肝。最簡單的方法就是將一個明亮的主色添加到一堆中性色中榛瓮,這也是一個最能引起視覺沖擊的方案。
白底加灰色文本禀晓,點綴以藍色高亮。
對比度的應(yīng)用
通常用戶界面上的色彩對象或區(qū)域是不會單獨出現(xiàn)的坝锰,而是比鄰或重疊在在另一個色彩對象或區(qū)域上粹懒, 從形成對比效果。 對比能使一種色彩與另一種色彩想分離顷级。 正確使用它凫乖,可以緩解眼睛疲勞,并通過清晰劃分屏幕上的元素來聚焦用戶的注意力弓颈。
對比度和文本易讀性
設(shè)計師經(jīng)常喜歡使用低對比以使事物看起來美觀昨凡,和諧。 然而辰狡,美觀并不意味著有好的易讀性橘蜜。 當(dāng)你在文本中使用色彩時菊匿,你需要知道把兩種對比不明顯的顏色放在一起會導(dǎo)致你的內(nèi)容難以閱讀。 特別是在手機端计福,用戶會經(jīng)常處于戶外或者光線較為充足的地方跌捆,這時用戶會因為屏幕反光根本看不到內(nèi)容。
為了確保界面對比度處于一個合理的范圍內(nèi)佩厚,你只需要檢查下對比度。對比度體現(xiàn)了一種色彩如何區(qū)別于另一種色彩(通常寫為1:1或21:1)说订。 比率中的兩個數(shù)之間的差越大抄瓦,色彩之間的相對亮度的差越大。W3C建議對正文和圖像文本使用以下對比度:
較小的文本與背景的對比度最少要達到5:1
較大的文本(14pt 粗體/18pt 正程绽洌或以上)與背景的對比度要達到3:1以上钙姊。
這條建議也可以幫助低視力,色盲或視力惡化的用戶看到并閱讀屏幕上的文字埂伦。
圖標(biāo)或其他關(guān)鍵元素也應(yīng)使用上述推薦的對比度。
有幾個免費工具可對你所選調(diào)色板的對比度提供有意義的反饋婚温。 WebAIM’s Color Contrast Checker是其中一個描焰,它可以讓你測試已經(jīng)選擇的色彩。
對比度和用戶焦點
除了建立易讀的文本之外栅螟,對比度還可以引起用戶對屏幕上的特定元素的注意荆秦。 一般來說,高對比度是重要內(nèi)容或關(guān)鍵元素的最佳選擇嵌巷。所以如果你想讓用戶看到或點擊什么東西,可以使其與眾不同室抽! 舉例來說搪哪,用戶更可能點擊與背景對比強烈的具有號召性的按鈕。
總結(jié)
提升色彩使用技能是一個不斷努力和積累的過程坪圾。如果你想學(xué)習(xí)如何創(chuàng)建美觀晓折,使用的配色方案,需要的是實踐兽泄,決心和大量的用戶測試漓概。