激情六月丁香婷婷|亚洲色图AV二区|丝袜AV日韩AV|久草视频在线分类|伊人九九精品视频|国产精品一级电影|久草视频在线99|在线看的av网址|伊人99精品无码|午夜无码视频在线

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

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

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

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


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

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


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

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


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

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


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


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


和諧

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


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


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


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


對(duì)比

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


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


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


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


色階

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


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


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


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


比例

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


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


顏色層次結(jié)構(gòu)對(duì)于定義一種氛圍非常重要，同時(shí)，它也是構(gòu)成網(wǎng)頁中所有元素的主要色彩。在當(dāng)前的UI設(shè)計(jì)趨勢(shì)中，白色是最受歡迎的顏色，因?yàn)樗梢员３纸缑媲鍧?，突出顯示交互色彩并提高可讀性。 但是，如果要在特定頁面上創(chuàng)建更具沉浸式和藝術(shù)感的效果，則選擇更具飽和度的顏色效果會(huì)更好。


交互

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


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


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


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


總結(jié)

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

熱門課程推薦

熱門資訊

請(qǐng)綁定手機(jī)號(hào)

獲取驗(yàn)證碼
x

同學(xué)您好！

您已成功報(bào)名0元試學(xué)活動(dòng)，老師會(huì)在第一時(shí)間與您取得聯(lián)系，請(qǐng)保持電話暢通！
確定