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

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

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

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

 

　　設(shè)計人員通常喜歡將主按鈕的輪廓形狀用作輔助按鈕。樣式可能有所不同，但按鈕仍在競爭，因?yàn)樗鼈兊念伾珜Ρ榷认嗤?br />  

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

　　不要使用黑色的輔助按鈕
 

　　UI設(shè)計師的現(xiàn)在另一種趨勢是使輔助按鈕變黑。他們認(rèn)為使用中性色不會競爭。但是，黑色按鈕贏得了戰(zhàn)斗，因?yàn)樗哂懈叩膶Ρ榷取?a href="http://5wd995.cn/ui/2828.html" target="_blank">UI設(shè)計要注意抓人眼球。
 

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

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

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

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

　　暗模式下的按鈕對比度
 

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

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