• 上傳作品
    • 上傳經驗
    • 上傳即刻

您的意見是我們 UI 中國進步的動力!
點擊立即反饋按鈕,發表您的意見!
立即反饋
QQ群反饋
您也可以加入UI中國官方反饋群進行反饋!
群號:302892100
備注:反饋問題後@管理員能讓我們及時了解您的意見

成長值達到300分以上才可以發布喲!~

收集成長值
輸入邀請碼
先看看別人的即刻>

拆解·iPad深色模式の文字配色

原創文章 分類: 教程 版權:
3520 97 213 7
2019-08-07
31.9
首頁推薦

· 此前的一些經曆

2017年秋天,當時我負責的泡泡iPad端需要進行一次改版。

這次改版,主要是將在同年8月份團隊剛剛完成改版的泡泡Phone端移植到iPad端。

Image title

移植遇到的第一個問題就是兩端界面的底色差異。手機端采用的是常見的純白底色,而iPad端則采用深色模式。

自2015年起,我曾幾次階段性負責過iPad端相關需求。當時做iPad界面就有一種感覺:頭變大了。

Image title

將手機界面移植到iPad上,首先要解決的就是文字配色。

平日裏,大家都習慣在純白色背景上進行界面設計,對不同字符該用什麽色值也十分熟悉。比如

Image title

當背景色由熟悉的白色變爲深色,情況就不一樣了。

原本在白色背景下,文字有多種色階,而到了深色背景下,不同字符該用什麽顔色,一時間反而沒有了頭緒。于是,當時有很多字段都使用#FFFFFF進行處理

Image title

但這麽做,顯然不太妥當。




· 近年來的經曆

入行早年,文字配色完全是“憑感覺”。那段時間,時常出現文字顔色對比度過大或過小的情況。比如,當標題、內容、輔助色嘗嘗就拉不開差距。

2015年,偶然間習得一套通用的文字顔色規範: #333333、#666666、#999999、#CCCCCC

Image title

之後文字配色,全仰仗這套規範。但這個時候,面對零星的iPad需求(暗黑模式),還是沒有想到好的解決方案。

到2016年,偶然間發現Sketch的調色盤下,可以將RGB(Red、Green、Blue)切換成HSB(Hues、Saturation、Brightness)。

Image title

同年秋季,在整理規範的時候,發現 #333333、#666666、#999999、#CCCCCC 在HSB中蘊含一個規律:四種顔色的Brightness分別爲:20、40、60、80(亮度範圍是0~100)

Image title

而黑色#000000剛好對應Bri爲0,白色#FFFFFF對應的Bri爲100。

當時,頁面中分割線采用的色值爲#E6E6E6,對應的Bri數值爲90,


細看整個整個色階的變化,當時只覺得好巧。


到2017年8月,就在愛奇藝泡泡改版後不久,我需要同步對iPad泡泡模塊進行一次大調整。

因爲是整體重做,這就讓我有機會重新思考iPad端文字的配色問題。


這次我打算應用在HSB中發現的字色規律:“369C”不同字符亮度相差的20,Bri 0~100進行五等分。

梳理出一套可以用于iPad暗黑模式上文字配色規範




· 分析思路

首先,基于“369C”不同字色,亮度相差的20這個規律,可以得出:

    · 標題字符#333333(HSB 0,0,20)與白色背景#FFFFFF(HSB 0,0,100),亮度相差80

    · 內容字符#666666(HSB 0,0,40)與白色背景#FFFFFF(HSB 0,0,100),亮度相差60

    · 輔助字符#999999(HSB 0,0,60)與白色背景#FFFFFF(HSB 0,0,100),亮度相差40

    · 置灰字符#CCCCCC(HSB 0,0,80)與白色背景#FFFFFF(HSB 0,0,100),亮度相差20

Image title

在白色背景下,標題字符用@333333(HSB 0,0,20)


那在暗黑模式下,標題字符應該用什麽顔色?是否應該用白色#FFFFFF?

根據文字配色的基本原則:純白背景上不要出現純黑字色,黑色背景上不要出現純白字色。因爲這兩種方式都會增大眼疲勞(Eye Strain)

Image title

解決方法是用“淺灰”背景代替純白色;或是在黑色背景裏將淺灰作爲字色。這兩種方式都可以降低眼疲勞,令人在閱讀內容時感到更加舒適。

Image title

既然在黑暗模式下不適合選用#FFFFFF,那顯然使用#CCCCCC是一個比較好的選擇。

這樣一來可以得出一個黑暗模式下的配色方案:

    · 標題字符#CCCCCC(HSB 0,0,80)

    · 內容字符#999999(HSB 0,0,60)

    · 輔助字符#666666(HSB 0,0,40)

    · 置灰字符#333333(HSB 0,0,20)

這樣方案可以確保不同文案之間的對比度相對均衡。




· 思路延展

上述的解決方案遺留一個問題,即標題色與背景色的亮度對比度差值無法得到保障。

要知道,白色#FFFFFF (HSB 0,0,100)背景色標題字符#333333 (HSB 0,0,20)與背景色亮度差值普遍在80(Brightness )

如果黑暗模式下標題字符爲#CCCCCC (HSB 0,0,20)要與背景色亮度差值保持在80 (Brightness ),那暗黑模式的背景色必須是#000000 (HSB 0,0,0)。如果暗黑模式采用全黑,頁面將無法通過陰影等效果構建視覺層次,如下圖:

Image title

有沒有一個簡潔的辦法,可以在保障不同字色對比度均勻的同時,保障標題色與背景色的對比度呢?

有個顯而易見的辦法:先確認背景色,再依次提高亮度,這要就得出了一套兼顧兩者的字色規範,如下圖:

Image title

不過這個方案有個缺點,就是上推後的標題色,很容易接近白色,故不考慮。

這樣一來,如果繼續在0~100裏大轉似乎很難得出好的解決方案。

這個時候,不妨換一種視角,用不透明度(Alpha)重新理解“369C”的規律,從中可以得出以下結果:

    · #333333(HSB 0,0,20)= #000000,Alpha 80%

    · #666666(HSB 0,0,40)= #000000,Alpha 60%

    · #999999(HSB 0,0,60)= #000000,Alpha 40%

    · #CCCCCC(HSB 0,0,80)= #000000,Alpha 20%

Image title

暗黑模式下,字色可采用

    · 標題字符 #FFFFFF,Alpha 80%;

    · 內容字符 #FFFFFF,Alpha 60%;

    · 輔助字符 #FFFFFF,Alpha 40%;

    · 置灰字符 #FFFFFF,Alpha 20%.

Image title

依靠改變不透明度(Alpha)實現的字色規範。可以同時滿足:

    1.字與背景色的對比度

    2.字與白色的對比度

    3.字與字的對比度

這三個限定條件。

另外,即便暗黑模式下背景色有些許差異,也同樣適用。下面是白色+不透明度在三種暗色背景上呈現的不同色值:

Image title

通過上圖可知,采用透明度的方案,可以避免因爲背景調整而調整字色。


下面是泡泡iPad最後采用色字色規範以及分割線顔色

Image title

希望上述思路對你有啓發

祝大家2019玩轉暗黑模式

Image title


微信公衆號:海邊來的設計師

  • 收藏

    97人已收藏

海邊來的設計師

出版《最好的UI設計師》

8722粉絲/5關注

“勞模勳章”之鋤頭勳章人氣明星活雷鋒老馬識途首頁達人
私信
趨勢:影響體驗設計的會是什麽?2018 iPhone XS、Max、XR 適配攻略
0
無我

精彩!

海邊來的設計師

海邊來的設計師

出版《最好的UI設計師》

“勞模勳章”之鋤頭勳章人氣明星活雷鋒老馬識途首頁達人
213 收藏97

掃描二維碼
去手機端查看海報

海邊來的設計師

TA已經獲得16枚勳章啦

  • 成就勳章

    • 特別勳章

    • 身份勳章

  • 已擁有

  • 作品

    創造者才是真正的享受者。

  • 經驗

    經驗是一所好學校,可它的學生卻經常曠課。

  • 活躍

    大神都是從圍觀群衆開始的

  • 拓展

    作品、經驗、活躍還不能滿足你?

京ICP備14007358號-1 / 京公網安備11010802014104號 / Powered by 2008-2019 UI.CN

Cw9sdfed

朕收下了