UI設(shè)計(jì)按鈕層次結(jié)構(gòu)的顏色對(duì)比原則

　　假設(shè)用戶在界面上遇到一對(duì)按鈕時(shí)猶豫不決。用戶向左看，然后向右看，進(jìn)行比較。經(jīng)過思考后，他們做出選擇。他們的選擇不僅遲了，而且他們也不確定，因?yàn)槟陌粹o沒有很強(qiáng)的層次結(jié)構(gòu)。今天AAA教育武老師為大家分享UI設(shè)計(jì)按鈕層次結(jié)構(gòu)的顏色對(duì)比原則。
 

　　要建立強(qiáng)大的按鈕層次結(jié)構(gòu)，請(qǐng)避免設(shè)計(jì)師犯下以下常見的顏色對(duì)比錯(cuò)誤，UI設(shè)計(jì)配色避免出錯(cuò)。使用基于Web內(nèi)容可訪問性指南(WCAG)顏色對(duì)比度公式的在線顏色計(jì)算器來評(píng)估對(duì)比度級(jí)別。
 

　　不要使用相同的顏色輪廓按鈕

 

　　設(shè)計(jì)人員通常喜歡將主按鈕的輪廓形狀用作輔助按鈕。樣式可能有所不同，但按鈕仍在競(jìng)爭(zhēng)，因?yàn)樗鼈兊念伾珜?duì)比度相同。
 

　　為確保主按鈕得到更多關(guān)注，請(qǐng)為輪廓按鈕使用強(qiáng)調(diào)色的陰影以減弱對(duì)比度。您可以通過保持強(qiáng)調(diào)色的色調(diào)并降低亮度和飽和度，直到其對(duì)比度低于主按鈕，來創(chuàng)建陰影。但是，請(qǐng)確保其足夠高，以達(dá)到可讀性的最低可接受水平。這也考驗(yàn)UI設(shè)計(jì)師的配色經(jīng)驗(yàn)。
 

　　不要使用黑色的輔助按鈕
 

　　UI設(shè)計(jì)師的現(xiàn)在另一種趨勢(shì)是使輔助按鈕變黑。他們認(rèn)為使用中性色不會(huì)競(jìng)爭(zhēng)。但是，黑色按鈕贏得了戰(zhàn)斗，因?yàn)樗哂懈叩膶?duì)比度。UI設(shè)計(jì)要注意抓人眼球。
 

　　不要使用黑色，而應(yīng)使用強(qiáng)調(diào)色的色調(diào)，以使輔助按鈕比主按鈕弱。為此，您需要增加亮度并降低強(qiáng)調(diào)的色彩飽和度。
 

　　請(qǐng)勿在主色上使用淺強(qiáng)調(diào)色
 

　　UI設(shè)計(jì)要抓人眼球。同時(shí)也要注意和諧。將彩色按鈕與中性灰色配對(duì)并不總是意味著彩色按鈕會(huì)獲得更多關(guān)注。如果主按鈕的口音太輕，則中立的輔助按鈕將勝出。
 

　　為避免此錯(cuò)誤，請(qǐng)選擇不太亮的強(qiáng)調(diào)色。明亮的強(qiáng)調(diào)色可能看起來很吸引人，但與白色背景或文本的對(duì)比度卻不佳。在主要按鈕上使用較深的重音，以使次要按鈕無法吸引注意力。避免UI設(shè)計(jì)顏色出錯(cuò)。
 

　　暗模式下的按鈕對(duì)比度
 

　　在深色模式下使用的強(qiáng)調(diào)色應(yīng)與在淺色模式下使用的強(qiáng)調(diào)色不同。使用相同的重音顏色將使文本標(biāo)簽更難以閱讀，按鈕也更難以感知。
 

　　了解按鈕對(duì)比在黑暗模式下如何工作，應(yīng)避免的錯(cuò)誤以及可遵循的最佳做法。以上就是UI設(shè)計(jì)按鈕層次結(jié)構(gòu)的顏色對(duì)比原則，這些知識(shí)學(xué)到了嗎？更多精彩內(nèi)容持續(xù)關(guān)注aaa教育~