• <tbody id="9brb1"><pre id="9brb1"></pre></tbody>

    <em id="9brb1"></em>

  • <th id="9brb1"></th>

  • <tbody id="9brb1"><pre id="9brb1"></pre></tbody>
  • <button id="9brb1"><acronym id="9brb1"><input id="9brb1"></input></acronym></button>
      <tbody id="9brb1"><pre id="9brb1"></pre></tbody>
        更多課程 選擇中心


        UI培訓

        400-111-8989

        UI教程之文字與背景間的對比度改怎么選擇

        • 發布:UI培訓
        • 來源:UI教程
        • 時間:2019-02-21 15:55

        最近在看MD規范時,發現選擇合適的顏色對比度有數據依據,自己在選擇顏色時會依據參考,或靠感覺。突然看到這么一個數值,覺得自己離專業又進了一步,然后就花時間研究了一下其中的奧秘,本次就跟大家分享一下我的一點點收獲。

        目錄

        1. 顏色對比度 – 關注色弱人群

        2. 如何選擇合適的顏色對比度

        一、顏色對比度 – 關注色弱人群

        我們都知道對比的重要性,通過合適的對比增強內容的可識別性,讓用戶快速理解并吸收信息,增強用戶閱讀的體驗感。

        今天這里講的主要是文字與背景色之間的對比。界面中常見的背景色是白色,但為了增強視覺效果,設計師也經常會將文字放置在有顏色的背景上,例如個人中心頭部、直播界面、卡片等等。那如果在做設計的時候不注意對比度的考慮,文字的可識別性就會很差。eg. 抖音將文字放置在視頻上,因為視頻顏色的不可控性,為了保證良好的閱讀效果就必須添加蒙層。

        你可能會說在做圖時肯定會注意到文字的可識別性,但是設計不僅是給自己看的,我們要將它展現給用戶,而用戶中就存在著這樣一群視覺障礙的群體,他們對色彩的識別度比正常人低很多,普通人可以清晰看見的內容,他們看的時候就會很費勁,或者看不見。你可能覺得他們離你很遠,但其實他就在你我身邊。我們的大家族就有紅綠色盲基因,我的叔叔伯伯們的都有一定程度的色弱和色盲癥。

        下面,我們來看看Salesforce 的無障礙設計顧問 Cathy O’ Connor 提供了一組數據:

        約有4%的人口視力低下,0.6%為視盲。

        7-12% 的男性有不同形式的色覺缺陷(如色盲),不到1%的女性這樣。

        低視力狀況隨著年齡的增長而增加,50歲以上的一半人有一定程度的低視力低狀況。

        全球增長最快的人群是60歲以上的人

        這組數據表明,色覺缺陷在男性中的占比例比高達7-12%,也就是說100個人里面就有7-12個人有不同形式的色覺缺陷;同時隨著年齡的增長人們對顏色的對比度會喪失,這部分的用戶群體還在不斷增大;所以我們在做設計的時候就不得不考慮這部分人的使用需求。

        二、如何選擇合適的顏色對比度

        MD規范里說:文本應該保持至少 4.5:1 (基于亮度值計算)的對比度以保持文本清晰;最佳對比度為 7:1。

        看著這一段話很有深意,但是為什么是基于亮度計算,計算方式是什么?為什么最佳對比度是7:1?為什么最低對比度是4.5:1 ?下面我來試著解答一下。

        1. 為什么基于亮度計算

        W3C (萬維網聯盟)中提到,對沒有顏色缺陷的人進行閱讀性能評估,發現色調和飽和度對易讀性的影響很小或者是沒有影響,而亮度對比度對易讀性的影響很大。所以,顏色差別不是關鍵,即使對色弱的人,只要有足夠的亮度對比度就不會影響閱讀。由此也可以看到,在做設計時選擇HSB顏色模式的一大益處。

        2.計算方式

        我并不會給出一個高深莫測的計算公式,因為研究一番也沒弄特別明白,所以直接給一個快速獲取對比度數值的方式。如下圖,只要將兩種顏色代碼輸入進去就可以直接幫你計算出對比數值。并且會將兩種顏色直接展示出來,簡單直觀。

        3. 對比度的選擇

        WCAG 2.0 中將顏色對比等級分為3種,A級,AA級,AAA級,等級越高意味著顏色的對比度越高,呈現出來的視覺壓力越大:

        A級:采用3:1的對比度,是普通觀察者可接受的最低對比度。字號大,字重高的文字在較低的對比度下也易于閱讀,這時就可以選擇3:1的對比度。

        AA級: 采用4.5:1 的對比度,是普通視力損失的人可接受的最低對比度。這個數據來自80歲老人的典型視力。

        AAA級:采用7:1的對比度,是嚴重視力損失的人可接受的最低對比度,超出這種視力損傷的用戶就需要借助輔助技術幫助其進行信息識別了,所以不再考慮范圍內。

        所以MD就是根據這3個顏色對比等級得出:對比度最低不小于4.5:1,最佳對比度是7:1,這樣才可以保證最大的用戶群體對內容進行識別。

        總結

        這篇文章主要是講了兩件事情:

        1. 我們在做設計的時候要考慮色弱人群,畢竟有7~12%的男同胞需要被照顧;

        2. 文字與背景的對比度至少要保持4.5:1,如果是針對年齡大的用戶群體7:1是更合適的選擇。

        最后,推薦一個關于顏色識別的小游戲-《顏色識別》,直接在APP-store里下載,你可以跟身邊的小伙伴一起玩,來進行一次關于顏色識別的比賽;也可以推薦給色弱的親人或朋友,看看你們之間的差距在哪里,相信你會對顏色對比有更強烈的認知。

        預約申請免費試聽課

        填寫下面表單即可預約申請免費試聽!怕錢不夠?可就業掙錢后再付學費! 怕學不會?助教全程陪讀,隨時解惑!擔心就業?一地學習,可全國推薦就業!

        上一篇:UI教程之UI設計規范流程
        下一篇:UI教程之字體配色總結

        達內UI設計7月免費訓練營報名啦

        UI培訓教程之系統圖標如何設計

        月薪過萬的UI設計師都是怎么設計界面的

        達內設計學院九周年慶典回首來時路,共赴新征程

        • 掃碼領取資料

          回復關鍵字:視頻資料

          免費領取 達內課程視頻學習資料

        • 視頻學習QQ群

          添加QQ群:1143617948

          免費領取達內課程視頻學習資料

        Copyright ? 2021 Tedu.cn All Rights Reserved 京ICP備08000853號-56 京公網安備 11010802029508號 達內時代科技集團有限公司 版權所有

        選擇城市和中心
        貴州省

        廣西省

        海南省

        2019最新在线国产自拍,2019最新国产在线观看_久久爱久久高清视频 百度 好搜 搜狗
        <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <文本链> <文本链> <文本链> <文本链> <文本链> <文本链>