這是一個翻譯系列,原文是谷歌18年所出的材料設計指南(文末有鏈接),強大的材料設計將帶我們一起深入了解UI設計中的所有規范。每周會更新數篇,一共百余篇,歡迎關注哦。

 

顏色在文本可讀性中扮演了重要角色。

 

目錄

可讀性標準
文本背景
文本類型

 

可讀性標準

WCAG標準

所有文本應該清晰可讀并符合可訪問性標準?!癢EB內容可訪問性內容指南(WCAG 2.0)”AA級對普通文本與背景顏色對比要求為4.5:1,對于大號文本是3:1。

如需了解有關顏色、對比和可訪問性設計等更多信息,請參閱“Material Design 無障礙訪問”

 

文本背景

文本在有色背景上

黑色文本推薦在淺色背景上使用,白色文本推薦在深色背景上使用。如果應用程序同時具備淺色和深色主題,請確保文本應用在顏色相對的主題上。

有色背景或文本會因文本的不透明度和不同狀態而另行改變規則。

 

使用文本不透明度

不要在有色背景上使用灰色文本和圖標,通過降低透明度來顯示白色或黑色文本可形成更好的對比。

例如,在綠色背景上顯示不透明度75%的黑色文本,除使其呈現黑色外觀外,還有一絲淡淡的綠色。

或者,你也可以通過執行以下操作來計算出文本顏色值:

  1. 將顏色設置為黑色,在綠色背景前降低不透明度
  2. 確定生成的暗綠色十六進制值
  3. 將該顏色的十六進制值用于文本

這種情況下,如果文本后的表面顏色改變了,你還必須同時更新那個十六進制值。

在有色表面上使用黑色半透明體來保持可讀性。

 

避免在有色表面上使用不易辨識的不透明灰色文本。

 

深色文本在淺色背景上

深色文本在淺色背景上(這里可表示為#000000在#FFFFFF上)可使用以下不透明度:

  1. 重點強調的文本不透明度為87%
  2. 中等強調的文本和提示文本不透明度為60%
  3. 禁用文本不透明度為38%

 

有色文本和背景

有色文本應少量使用以吸引關注和選擇性突出。理想情況下的有色文本應該為標題、按鈕或鏈接等元素保留使用。

使用材料顏色工具可判別文本上的前景色在背景色上是否符合可訪問標準。

 

 

文本類型

幫助文本

幫助文本給出有關字段的輸入場景,如應使用怎樣的輸入方式。它可以使用品牌色,但應該遵循WCAG中的可讀性標準。

例如,幫助文本在淺色背景上可使用以下不透明度和默認的十六進制值:

  1. 重點強調色:十六進制值為#000000,不透明度87%
  2. 默認色:十六進制值為#000000,不透明度60%
  3. 默認錯誤色:十六進制值為#B00020,不透明度100%

 

 

已選文本

為展示品牌,文本選擇可使用主色或輔助色來作為重點強調。

已選文本應該在所選顏色上清晰可讀,所選顏色也應與背景色有鮮明的對比?;蛘?,你也可以通過顯示輪廓、動畫、復選標記或者其它文本處理方式來表明選中的文本。

如需了解更多對比(或試用顏色對比分析儀),請訪問webaim.org

 

圖標和其他符號

圖標和其他元素不一定要符合WCAG可讀性標準,但也應盡可能明顯地表示出其功能或所傳達的信息。

例如,深色圖標(#000000)或一些顯示在淺色背景(#FFFFFF)上的元素可以使用以下不透明度:

  1. 激活的圖標,不透明度87%
  2. 未激活的圖標,不透明度60%
  3. 不可用的圖標,不透明度38%

 

 

原文地址:Material Design

譯者:招財魚

 

轉載請注明:學UI網 » Material Design Text legibility 文本可讀性

登錄收藏
 
你可能喜歡的:
如何設計好一款APP的首頁?如何設計好一款APP的首頁?
B端品牌如何面向C端用戶B端品牌如何面向C端用戶
如何搭建一個易學性高可用性強的功能框架?如何搭建一個易學性高可用性強的功能框架?
盤點 | 4個成為標桿的超強體驗設計盤點 | 4個成為標桿的超強體驗設計
設計驅動案例-如何優化金融產品購買體驗?設計驅動案例-如何優化金融產品購買體驗?
Material Design Gestures 手勢Material Design Gestures 手勢
設計沉思錄丨如何利用場景化設計提升用戶決策效率設計沉思錄丨如何利用場景化設計提升用戶決策效率
用灰色文本字段來拯救你的注冊表單設計用灰色文本字段來拯救你的注冊表單設計
1套流程,帶你看遍1000萬個產品設計的從0到11套流程,帶你看遍1000萬個產品設計的從0到1
聊聊加載等待的那些事之“進度指示器“(落地篇)聊聊加載等待的那些事之“進度指示器“(落地篇)
?
街机捕鱼城金库券 股票配资平台体验 五分彩不给提现怎么办 正规股票配资骗局 三期必中快三计划 云南快乐十分开奖结果走势一定牛云南快乐十分开奖结果 佳永配资 投资金融 怎么下载内蒙快3走势图 浙江11选五怎么中奖 云南十一选五玩法与奖金表 11137排列3预测