假設(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教育~
填寫下面表單即可預(yù)約申請(qǐng)免費(fèi)試聽!怕錢不夠?可先就業(yè)掙錢后再付學(xué)費(fèi)! 怕學(xué)不會(huì)?助教全程陪讀,隨時(shí)解惑!擔(dān)心就業(yè)?一地學(xué)習(xí),可推薦就業(yè)!
?2007-2022/ m.5wd995.cn 北京漫動(dòng)者數(shù)字科技有限公司 備案號(hào): 京ICP備12034770號(hào) 監(jiān)督電話:010-53672995 郵箱:bjaaa@aaaedu.cc