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

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

「設(shè)計(jì)干貨」UI設(shè)計(jì)中顏色使用的10條原則

發(fā)布時間：2024-02-22 18:29:41 瀏覽量：188次


1. 顏色術(shù)語


顏色術(shù)語構(gòu)成了我們顏色知識的基礎(chǔ)。將諸如色相（hue）,色調(diào)(tint)和陰影(shade)之類的顏色術(shù)語視為我們可以用來開發(fā)獨(dú)特調(diào)色板的工具。


? 色調(diào)/色相(Hue)



色相是色彩的技術(shù)術(shù)語。色相是指父色-一種飽和色，沒有添加白色或黑色。


? 亮化著色/染色(Tint)



亮化著色是把一種顏色和白色混合后形成的顏色，這將增加該顏色的亮度。


? 陰影（Shade）



將黑色添加到色相時，將創(chuàng)建陰影。


? 明度（value）



值是指顏色的明暗程度。它指示反射的光量。明度（Value）分為11級，數(shù)值越大表示明度越高，最小值是0（黑色），最大值是10（白色）


? 飽和度（saturation）



飽和度是指顏色的亮度和強(qiáng)度。高度飽和的顏色充滿活力和光芒，而低飽和度的顏色則暗淡。


2. 層次結(jié)構(gòu)



當(dāng)某個元素的外觀與其周圍環(huán)境形成對比時，表明該元素具有更高的重要性。我們可以使用顏色和顏色權(quán)重建立層次結(jié)構(gòu)。


通過使用色彩，我們可以為元素分配不同的重要性級別。


如果一個元素比另一個元素更重要，則它應(yīng)該具有更高的視覺重量。這使用戶易于快速瀏覽頁面并區(qū)分重要和次要信息。


更加醒目，富有重量感的信息內(nèi)容可以快速吸引用戶的注意力，我們可以運(yùn)用這種視覺規(guī)律引導(dǎo)用戶視線，并促使用戶繼續(xù)瀏覽其下方的支持信息。


3. 富有表現(xiàn)力



在設(shè)計(jì)產(chǎn)品界面的時候，別忘記融入標(biāo)志性的品牌色彩，以增強(qiáng)用戶心中的品牌印象。


4. 包容性



設(shè)計(jì)產(chǎn)品類似于在圖書館或?qū)W校之類的公共建筑中建造建筑-它必須包含所有人。因此，產(chǎn)品的包容性也是需要考慮的重要要素。


Web內(nèi)容可訪問性指南（WCAG）提出了一些建議，以確保運(yùn)動，聽覺和認(rèn)知障礙人士可以無障礙訪問界面中的顏色。舉個例子，文字標(biāo)準(zhǔn)色差至少需要達(dá)到4.5：1的對比度。


5. 顏色的含義



顏色會吊起用戶不同的情感感受，通過了解顏色的心理，我們可以利用與目標(biāo)受眾產(chǎn)生共鳴的品牌顏色。


重要的是要了解您的受眾群體的差異，這些差異因?yàn)槲幕偷貐^(qū)而有所不同。例如，在西方文化中，白色通常與婚禮相關(guān)聯(lián)，而在東南文化中，白色被視為哀悼的顏色。


我們可以留意到：許多公司在其品牌營銷活動中都使用色彩作為一種策略。許多快餐店的品牌都使用紅色和黃色，這是因?yàn)榧t色引發(fā)刺激，食欲，饑餓的效果，并引起人們的注意，而黃色則給人帶來幸福和友善的感覺。


6. 有限的顏色



通過限制在應(yīng)用程序中使用過多顏色，可以使應(yīng)用顏色區(qū)域中的內(nèi)容受到更多關(guān)注，例如界面中的文本，圖像以及按鈕等單個元素。


您會注意到，許多應(yīng)用，例如Instagram或Twitter，它們的界面往往非常簡潔。它引導(dǎo)用戶將視覺焦點(diǎn)聚焦在內(nèi)容上。


7. 提供狀態(tài)信息



顏色的差異可以提供有關(guān)應(yīng)用程序狀態(tài)，組件和元素的信息。


顏色是我們可以在界面中顯示狀態(tài)變化的一種方式。通過靜音按鈕的顏色，可以指示按鈕已禁用，或者通過將其突出顯示為紅色來表示錯誤操作。我們還應(yīng)該在錯誤顏色旁邊附加錯誤消息和圖標(biāo)，以確保清晰度并吸引色盲用戶。


8. 一致性和上下文



界面中的顏色用法應(yīng)保持一致，因此即使上下文發(fā)生變化，顏色也能保持統(tǒng)一，避免對用戶造成混淆。


如果顏色信息在展示內(nèi)容和狀態(tài)上有沖突，例如在商標(biāo)中使用紅色的情況，則應(yīng)避免使用它來通知錯誤狀態(tài)。我們可以使用其他顏色（例如黃色）來避免混淆。


9. 調(diào)色板



如何獲得完美的調(diào)色板？讓我們從對顏色理論和基本工具的簡單理解開始。


第1步-原色和系統(tǒng)顏色（primary &system color）



設(shè)計(jì)師首先可以根據(jù)偏好，選擇調(diào)色板的主要顏色，例如使用產(chǎn)品的品牌顏色作為主色。并在此基礎(chǔ)上，為文本和背景添加顏色。


第2步-創(chuàng)建調(diào)色板


為UI選擇基本顏色后，將這些顏色放入Google顏色工具中，以獲取該顏色的不同陰影和色度。


它是生成近乎完美的調(diào)色板的一種簡單方法，如果需要互補(bǔ)色或要測試輔助功能，則可以使用Google顏色工具完成所有這些操作。


步驟3 —將這些顏色組合在一起



10. 60–30–10規(guī)則



60-30-10原則是室內(nèi)設(shè)計(jì)行業(yè)中的一個著名和永恒的裝飾原則。它非常簡單和高效。這個原則可以用來找到配色方案中的正確平衡。


60%+30%+10%是所用顏色之間的比例：其中60%屬于主要顏色的比例；30%是次要顏色的范圍；10%是剩余部分的色彩比例。


在產(chǎn)品設(shè)計(jì)過程中，我們同樣可以遵循60-30-10的原則。其中：60％是主色，30％是輔助色，10％是強(qiáng)調(diào)色。

來源網(wǎng)絡(luò)

熱門課程推薦

熱門資訊

請綁定手機(jī)號

獲取驗(yàn)證碼
x

同學(xué)您好！

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