亚洲AV免费看深爱成人|日韩av另类一级特黄片在线|中国免费一级黄片|国产av一二三区|亚洲有码AV在线|久久亚洲国产日韩欧美|成人免费AV网站|婷婷一区综合一区|亚洲AV无码导航|高级欧美成人网站

高校合作1：010-59833514 ?咨詢電話：400-810-1418 服務(wù)與監(jiān)督電話：400-810-1418轉(zhuǎn)接2

UI設(shè)計中色彩應(yīng)用的6個基本常識

發(fā)布時間：2024-02-22 09:03:54 瀏覽量：179次

顏色是眼睛從光線中感知到的感官印象，并以各種形式的概念和情感進行轉(zhuǎn)換。對于藝術(shù)家來說，對顏色的正確使用至關(guān)重要。因此在整個歷史進程中，顏色已經(jīng)以多種方式和不同方法被理論化。


在繪畫、印刷、攝影、平面設(shè)計和界面設(shè)計中，通過使用色彩理論來喚起特定的想法和概念。色彩信息傳遞的速度是非常快的，在進入眼球的瞬間即可在人腦中形成一種印象。

HSL格式是改變顏色的一種數(shù)字語言。顏色可能會因其所具有的色相、飽和度和亮度而改變。這三個軸為我們提供了數(shù)字世界的所有色彩，然后以十六進制數(shù)字或 RGB 代碼進行重新解釋。


在界面設(shè)計中，從增強品牌知名度到在購買按鈕上產(chǎn)生更多的點擊量，色彩理論被用來影響用戶可能擁有的感知。同時，改進可用性，也是掌握良好色彩能力的結(jié)果。

本文將介紹進行界面設(shè)計時經(jīng)常用于色彩選擇的六個注意事項。


關(guān)聯(lián)性

特定的顏色與某些情緒相關(guān)，但并非總是如此。自從我們出生以來，我們的眼睛就開始去了解現(xiàn)實世界中的色彩，隨著時間的推移，記憶會將這些色彩與某些體驗和元素關(guān)聯(lián)起來。這種熟悉的認知會為用戶提供一些有關(guān)界面的情境。


該應(yīng)用程序使用了與夜空相關(guān)的顏色，從而形成概念上的呼應(yīng)。設(shè)計中由藍色和紫色組合而成的五種顏色范圍喚起了人們對入睡體驗的記憶。


當然，這并不是絕對的，因為人類對現(xiàn)實的感知會有很大不同，不能一刀切。德國藝術(shù)家約瑟夫·阿爾伯斯（Joseph Albers）在其書籍「Interaction of Color」中指出，色彩的主要特性是相對而言的。西方國家的紅色可能代表危險和邪惡，但在中國，紅色則意味著幸福、喜悅和慶祝。他還指出，盡管如此，許多人還是會以相同的方式感知某些顏色，例如與生態(tài)相關(guān)的綠色或代表女性氣質(zhì)的粉色。


和諧

和諧的色彩使元素具有邏輯感。有很多方法可以創(chuàng)建和諧的色彩。其中之一是通過使用類似顏色（Analogous colors），即在色輪中彼此相鄰的顏色。


在Rolling Stones的網(wǎng)站上，紅色和紫色的應(yīng)用為我們提供了一個使用類似顏色的示例。在色輪中，紅色在一個方向過渡為橙色，在另一個方向上過渡為紫色。


為什么類似顏色具有吸引力？因為這是自然產(chǎn)生的色彩行為。日落使天空從橙色變成紫色，海洋從藍色變成綠松石色，彩虹將所有七種顏色融合在一起。我們可以得出這樣的結(jié)論，那就是視線在相似的顏色中找到了自然的喜悅。


由于溫度也會產(chǎn)生相當大的協(xié)調(diào)性，因此建議僅在暖色或冷色之間保持此顏色范圍。你還可以利用這些顏色的飽和度和亮度來加強類似顏色的使用效果。當然，這些完全取決于你要創(chuàng)建的效果以及界面要顯示的內(nèi)容。


對比

顏色對比度使界面更具活力。實現(xiàn)色彩和諧的另一種形式是使用補色，即在色輪中彼此相對的顏色。通過使用互補色，可以在設(shè)計中創(chuàng)建對比度和動態(tài)效果。


在Beats網(wǎng)站上，通過使用紅色和綠色這一組互補色可以實現(xiàn)有趣的顏色組合。照片中的淺藍色天空與紅色相鄰，使購買按鈕異常突出。但是，這種效果反而處理的非常好。


對比色的好處包括，可以賦予界面能量和運動效果，以及強化一些我們希望用戶注意的相關(guān)點。要使這些顏色和諧并不容易，因為對它們的濫用會造成視覺混亂，并使眼睛不適。因此，使用比例是關(guān)鍵。


要了解有關(guān)色彩對比的更多信息，推薦Johannes Itten撰寫的「The Art of Color」這本書，書中介紹了七種對比理論：色調(diào)、溫度、明暗、互補、飽和度和定量。無論我們選擇哪種類型的顏色對比度，都應(yīng)在整個Web及應(yīng)用頁面中保持設(shè)計的一致性。


色階

色階降低認知負荷。保持色調(diào)并調(diào)整明亮度的級別既有助于將不同元素分離開，又不會使界面過載。


在Bear這款應(yīng)用程序中，我們看到白色文本位于第一級別，灰色文本位于第二級別，以創(chuàng)建層次結(jié)構(gòu)，并且不會以相同可視權(quán)重的消息使視圖過載。這也適用于Bear的插圖。請記住，色階保持在同一色調(diào)中的時候效果會更好。


UI設(shè)計中的色階也受自然的影響，不僅受樹木、天空或海洋等元素的影響，也受物體體積和陰影的影響。人眼會根據(jù)光線、深度甚至紋理來感知相同顏色的不同變化。毫不奇怪，人們所期望看到的UI顏色就如他們在現(xiàn)實世界中感知的一樣。


可以這樣說，使用色階的目的是避免添加大腦必須處理和理解的新顏色或色調(diào)。界面設(shè)計越容易且越快速地被理解，用戶就越高興。


比例

定義顏色比例可平衡顏色組合。控制好顏色的使用多少，可以使樣式更清晰，并避免不必要的顏色沖突。


在Mailchimp主頁上，黃色是主要顏色，配色僅應(yīng)用了綠色、粉紅色和黑色。黃色，同任何一種顏色一樣，傳達了自己的概念，而不用在權(quán)重上與其它色調(diào)競爭。


顏色層次結(jié)構(gòu)對于定義一種氛圍非常重要，同時，它也是構(gòu)成網(wǎng)頁中所有元素的主要色彩。在當前的UI設(shè)計趨勢中，白色是最受歡迎的顏色，因為它可以保持界面清潔，突出顯示交互色彩并提高可讀性。 但是，如果要在特定頁面上創(chuàng)建更具沉浸式和藝術(shù)感的效果，則選擇更具飽和度的顏色效果會更好。


交互

交互色彩在執(zhí)行過程中必須清晰且在界面中保持一致。號召性用語必須相對于背景具有足夠的對比度，并且相對于其他組件必須具有足夠的視覺權(quán)重，以便用戶可以輕松識別它們。


在Nike應(yīng)用程序的截屏中，號召性用語具有構(gòu)圖中最具飽和度的色彩，從而脫穎而出。 檸檬綠作為主要按鈕，同其他屏幕保持了一致。我們還注意到，圓形比經(jīng)典的矩形具有更好的突出表現(xiàn)。


但是，交互色彩并不總是以最具飽和度或最亮為特征，而是通過色調(diào)、形狀、大小或?qū)Ρ榷?，從屏幕上脫穎而出。因此，交互色彩的有效性將基于用戶識別交互區(qū)域和執(zhí)行任務(wù)的速度來衡量。


另一方面，次要號召性用語權(quán)重要更輕，并且在視覺上更接近信息元素。在如上所示的Nike應(yīng)用示例中，設(shè)置和聲音按鈕表明這些是通過形狀而不是顏色來傳達交互信息的。按鈕的這種層次結(jié)構(gòu)很重要，以便用戶可以對元素進行自然排序，并避免在每個屏幕上出現(xiàn)多個主要號召性用語。


總結(jié)

總之，顏色是對事物的重要影響者，它不僅影響事物對環(huán)境的感知，還直接影響其他顏色甚至自身。盡管對其理論的深入研究可以改善我們對設(shè)計的掌控，但是創(chuàng)建專業(yè)配色方案的過程很大程度上取決于我們的視覺體驗和對現(xiàn)實世界的感知。就讓我們從訓練我們的眼睛開始吧！

熱門課程推薦

熱門資訊

請綁定手機號

獲取驗證碼
x

同學您好！

您已成功報名0元試學活動，老師會在第一時間與您取得聯(lián)系，請保持電話暢通！
確定