旗下產(chǎn)業(yè): A產(chǎn)業(yè)/?A實(shí)習(xí)/?A計(jì)劃
全國(guó)統(tǒng)一咨詢熱線:010-5367 2995
首頁(yè) > 熱門(mén)文章 > UI設(shè)計(jì) > UI設(shè)計(jì)配色方案怎樣不出錯(cuò)

UI設(shè)計(jì)配色方案怎樣不出錯(cuò)

時(shí)間:2020-11-05來(lái)源:mwtacok.cn點(diǎn)擊量:作者:Arya
時(shí)間:2020-11-05點(diǎn)擊量:作者:Arya

  UI顏色是產(chǎn)品品牌的重要組成部分。為徽標(biāo)選擇正確的配色方案非常重要,這將會(huì)是公司標(biāo)識(shí),企業(yè)UI色。為網(wǎng)站或應(yīng)用程序配置正確的配色方案同樣重要,AAA教育武老師為大家分享UI設(shè)計(jì)配色方案怎樣不出錯(cuò)。
 

UI設(shè)計(jì)配色方案怎樣不出錯(cuò)
 

  顏色可以吸引觀眾注意相關(guān)信息,影響整體體驗(yàn),與用戶建立情感聯(lián)系,并提高品牌知名度。UI設(shè)計(jì)配色經(jīng)驗(yàn)。
 

  但是,從品牌書(shū)中選取相同的顏色并在網(wǎng)站上使用它們是很不合適的。對(duì)顏色的感知取決于涉及多個(gè)方面的許多因素:用戶交互和行為,產(chǎn)品業(yè)務(wù)以及當(dāng)前的設(shè)計(jì)趨勢(shì)。沒(méi)有一種特定的選擇可用于所有目的。
 

  選擇調(diào)色板
 

  每當(dāng)您創(chuàng)建配色方案時(shí),從目標(biāo)受眾及其需求開(kāi)始就很重要。顏色本身并不是可以感知的,它需要一個(gè)可以感知顏色的上下文。
 

  考慮一下您的潛在用戶是誰(shuí),以及他們希望從您的產(chǎn)品中獲得什么。目標(biāo)受眾的偏好始終是做出產(chǎn)品顏色決策的好關(guān)鍵。
 

  找出您的產(chǎn)品對(duì)用戶意味著什么。每個(gè)利基市場(chǎng)都有自己的特征,趨勢(shì)和標(biāo)準(zhǔn)。借助某些顏色,您可以創(chuàng)建所需的心情。娛樂(lè)產(chǎn)品的配色方案大多明亮,大膽,并帶有許多重點(diǎn),而公司風(fēng)格則更涼爽,中性和簡(jiǎn)單。
 

  通過(guò)確定UI的主要目標(biāo),您可以輕松找到用于選擇特定顏色的參數(shù)。例如,如果用戶界面主要是文本,則淺色主題將在其中創(chuàng)建一個(gè)重點(diǎn)閱讀的空間。照片編輯界面通常較暗,以使圖像看起來(lái)更深。您需要這個(gè)UI設(shè)計(jì)配色攻略。
 

  ‍選擇主要顏色
 

UI設(shè)計(jì)配色方案怎樣不出錯(cuò)
 

  也許您的產(chǎn)品已經(jīng)有一個(gè)品牌及其主要顏色。這是幫助您開(kāi)始構(gòu)建的良好起點(diǎn)。
 

  如果要從頭開(kāi)始創(chuàng)建設(shè)計(jì),但尚未準(zhǔn)備好調(diào)色板,則可以從與產(chǎn)品關(guān)聯(lián)的任何內(nèi)容開(kāi)始。這些應(yīng)該是1-2種的顯示顏色,在其他背景下立即可見(jiàn),并突出顯示重要的界面,例如按鈕,鏈接和其他交互元素。
 

  設(shè)置其他顏色
 

UI設(shè)計(jì)配色方案怎樣不出錯(cuò)
 

  大多數(shù)人會(huì)很容易地以2–3種顏色組合來(lái)感知界面。太多的顏色模糊了設(shè)計(jì)中元素的層次結(jié)構(gòu),使您更難以專注于正確的事物。
 

  在設(shè)計(jì)配色方案時(shí),一個(gè)好的經(jīng)驗(yàn)法則是不要使用超過(guò)3-4種原色。代替使用大量的顏色,最好使用它們的陰影和色調(diào)。
 

  不要忘記輔助功能和黑暗主題
 

UI設(shè)計(jì)配色方案怎樣不出錯(cuò)
 

  由于不易受黑色像素影響的OLED屏幕的普及以及Google和Apple的新操作系統(tǒng)的功能,當(dāng)今的深色主題已不是增加設(shè)計(jì)可變性的簡(jiǎn)便方法,但已經(jīng)成為接口的標(biāo)準(zhǔn)。因此,在創(chuàng)建配色方案時(shí),需要記住如何使其適應(yīng)暗模式。UI設(shè)計(jì)陰影是重要的。
 

  設(shè)計(jì)師忘記的另一個(gè)重要方面是人們對(duì)某些顏色的個(gè)體感知。他們以完全不同的顏色看到您的設(shè)計(jì),這些顏色可能具有不同的陰影或?qū)Ρ榷?。這種特殊的感覺(jué)破壞了設(shè)計(jì)人員想要的接口的所有可用性。設(shè)計(jì)方案很重要,以使它們的顏色在具有不同顏色感知的人使用時(shí)匹配。
 

  請(qǐng)記住要在不同的設(shè)備和屏幕上以及不同的條件下測(cè)試顏色組合。測(cè)試甚至可以在用戶看到產(chǎn)品之前就揭示出配色方案的優(yōu)缺點(diǎn)。
 

  技巧和竅門(mén)
 

  旋轉(zhuǎn)色輪
 


 

        色輪是最簡(jiǎn)單但最重要的設(shè)計(jì)器工具。在色輪中的顏色中,有紅色,綠色,藍(lán)色三種原色,稱為原色。通過(guò)混合這三種顏色可以創(chuàng)建所有其他顏色。UI設(shè)計(jì)配色誤區(qū)也要注意避開(kāi)。
 

  通過(guò)根據(jù)一些規(guī)則組合這些顏色,可以創(chuàng)建適合您產(chǎn)品的多種配色方案。
 

  例如,如果您在輪子上使用相反的顏色,則它們會(huì)形成互補(bǔ)的一對(duì)。此配色方案將提供最大的對(duì)比度,并用于設(shè)計(jì)重點(diǎn)。
 

  如果您需要較少的對(duì)比方案,最好在色輪上使用彼此相鄰的顏色。
 

  當(dāng)您想在對(duì)比度和舒適度之間取得平衡時(shí),三合一配色方案是最佳選擇。
 

  整理顏色
 

  為了使設(shè)計(jì)與顏色保持平衡,請(qǐng)按以下比例使用顏色:主陰影為60%,補(bǔ)充顏色的為30%,強(qiáng)調(diào)色為10%。這種色彩平衡將在您的設(shè)計(jì)中更容易維護(hù),并且易于使用。另外,不要忘記在設(shè)計(jì)系統(tǒng)中添加顏色。
 

  不要在界面上使用中性灰色(#CCCCCC或#DADADA),而是向其添加陰影。我們習(xí)慣的顏色總是帶有某種溫暖或冷色調(diào)的陰影。同樣在自然界中,沒(méi)有發(fā)現(xiàn)純黑#000000。還應(yīng)使用調(diào)色板中的顏色對(duì)其進(jìn)行稀釋。
 

  不要為深色主題使用相同的顏色
 

  通常,設(shè)計(jì)師會(huì)犯一個(gè)錯(cuò)誤,就是簡(jiǎn)單地將顏色轉(zhuǎn)換為深色主題。在深色背景上,較淺的顏色會(huì)出現(xiàn)。在淺色背景上,深色則脫穎而出。設(shè)計(jì)深色主題時(shí),您實(shí)際上需要重新組合配色方案,這取決于在深色環(huán)境中與界面的交互。您將不得不將強(qiáng)調(diào)色略微調(diào)暗,將淺色背景更改為深色,然后降低文本的亮度。可以了解Google和Apple對(duì)深色主題的感覺(jué)。
 

  照顧偶然性嗎?
 

  在選擇調(diào)色板和顏色組合時(shí),設(shè)計(jì)人員應(yīng)考慮具有特殊需求或殘障的不同年齡的用戶。
 

  具有挑戰(zhàn)性的人群之一是色盲用戶。超過(guò)8%的男性和大約0.5%的女性患有這種疾病。使用量身定制的調(diào)色板以適應(yīng)多種色盲的情況非常重要。圖形編輯工具或插件中用于檢查對(duì)比度的相應(yīng)模式將為您提供幫助。
 

  用漸變
 

  UI設(shè)計(jì)陰影和漸變是潮流,漸變是近年來(lái)的設(shè)計(jì)趨勢(shì)??梢砸淮螌追N顏色組合在一起,以增加對(duì)象的深度并強(qiáng)調(diào)其形狀。也請(qǐng)嘗試使用不同類型的漸變(徑向或角度漸變,而不是通常的線性)和不同角度。組合相似的顏色:溫暖與溫暖,以及寒冷與寒冷。最佳漸變通常非常微妙,顏色之間沒(méi)有太大差異。這些漸變更加自然,令人愉悅。
 

  如今,有許多工具可以幫助大家匹配顏色或在不同條件下進(jìn)行測(cè)試,十分方便,多用,積累UI設(shè)計(jì)的配色經(jīng)驗(yàn)。擁有工具來(lái)幫助您更快,更輕松地完成工作始終是一件好事,讓設(shè)計(jì)師可以解放一些時(shí)間。以上內(nèi)容就是告訴大家UI設(shè)計(jì)配色方案怎樣不出錯(cuò),更多資料請(qǐng)關(guān)注AAA教育~

預(yù)約申請(qǐng)免費(fèi)試聽(tīng)課

填寫(xiě)下面表單即可預(yù)約申請(qǐng)免費(fèi)試聽(tīng)!怕錢(qián)不夠?可先就業(yè)掙錢(qián)后再付學(xué)費(fèi)! 怕學(xué)不會(huì)?助教全程陪讀,隨時(shí)解惑!擔(dān)心就業(yè)?一地學(xué)習(xí),可推薦就業(yè)!

?2007-2021/北京漫動(dòng)者教育科技有限公司版權(quán)所有
備案號(hào):京ICP備12034770號(hào)

?2007-2022/ mwtacok.cn 北京漫動(dòng)者數(shù)字科技有限公司 備案號(hào): 京ICP備12034770號(hào) 監(jiān)督電話:010-53672995 郵箱:bjaaa@aaaedu.cc

京公網(wǎng)安備 11010802035704號(hào)

網(wǎng)站地圖