【車載】從0-1深入拆解淺色模式設(shè)計(jì)理念

5 評論 4298 瀏覽 19 收藏 9 分鐘

編輯導(dǎo)語:你有觀察過常見的車載UI設(shè)計(jì)嗎?如今,淺色模式已經(jīng)十分常見,為什么演變至今,淺色模式會更加適配當(dāng)下的車載UI設(shè)計(jì)呢?本文便針對車載UI設(shè)計(jì)中的淺色模式做了詳細(xì)解讀,一起來看一下吧。

淺色模式在車載設(shè)計(jì)中已越來越常見,尤其在數(shù)字化儀表以及智能中控領(lǐng)域,淺色模式不僅可以帶來全新的感官體驗(yàn),也保證了在高亮環(huán)境下駕駛和安全性和易讀性。

一、為什么默認(rèn)的車載UI都是黑色的?

1. 起源

其實(shí)在一戰(zhàn)時(shí)期,最早的戰(zhàn)斗機(jī)儀表盤是白底黑字的設(shè)計(jì),但由于駕駛艙周圍環(huán)境的影響,大面積的白色反而很容易吸引駕駛員的注意力,導(dǎo)致儀表內(nèi)信息無法在短時(shí)間內(nèi)完成獲取,造成事故頻發(fā),當(dāng)?shù)咨臑楹谏珪r(shí),這一問題才得以解決。

2. 延續(xù)

而汽車從機(jī)械儀表到電器儀表的發(fā)展過程中,車內(nèi)的顏色多半以黑灰色為主,顯示器底色和車內(nèi)顏色保持一致可以增加整體的和諧性,表盤內(nèi)關(guān)鍵信息也更容易凸顯出來,有利于減少安全隱患。所以車載系統(tǒng)的UI設(shè)計(jì)也一直沿用著深色的設(shè)計(jì)。

二、那為什么現(xiàn)在車載設(shè)計(jì)又需要淺色模式了?

1. 智能汽車

隨著新能源汽車的發(fā)展,數(shù)字化儀表以及大尺寸中控屏幕被廣泛應(yīng)用,內(nèi)飾也不僅僅局限于暗色調(diào)的設(shè)計(jì),淺色模式得到了很好的適配空間,舒適的淺色可以更好地適配到高亮環(huán)境中,也帶來全新的感官體驗(yàn)。

2. 更深的研究

研究表明,淺色模式在各個(gè)方面都具有優(yōu)勢:無論年齡大小,無論是視敏度任務(wù)還是校對任務(wù),淺色模式都表現(xiàn)得更好。

在《人的因素 》雜志上發(fā)表的一項(xiàng)研究中發(fā)現(xiàn),淺色背景下,隨著字體大小的減小而呈線性增加:字體越小,用戶以淺色模式查看文本的效果越好;其是在儀表盤的狹小空間中,可以發(fā)揮出重要的作用。

而麻省理工學(xué)院喬納森·多布雷也通過研究發(fā)現(xiàn):在模擬環(huán)境下,白天比夜晚能做出更快的判斷,淺色模式下比深色模式下的表現(xiàn)要好,大字體比小字體識別得更快。

圖示:在文本識別上,人們在白天比晚上更快,在淺色模式下要比在深色模式下要快,并且使用大字體(4毫米)要比使用小字體(3毫米)好。在夜間,淺色模式明顯優(yōu)于深色模式,小字體在淺色模式下更容易閱讀。

當(dāng)前,淺色模式已經(jīng)成為車載設(shè)計(jì)中必不可少缺少的一環(huán),但是淺色到底應(yīng)該有多淺便成為新的思考。

三、淺色模式的【淺】指的是什么?

1. 專業(yè)術(shù)語

在講淺色模式之前,我們先來認(rèn)識幾個(gè)專業(yè)術(shù)語:

  1. 對比度極性:描述文本與背景之間對比度;
  2. 正對比極性(淺色模式):在淺色背景上顯示深色字體文本;
  3. 負(fù)對比極性(深色模式):在深色背景(例如黑色)上顯示淺色(例如白色)字體文本。

2. 核心

那在淺色模式的設(shè)計(jì)中,其實(shí)我們需要做好兩件事情:

  1. 保持深淺模式色彩的一致性和和諧性;
  2. 提高信息的可讀性和易讀性(核心)。

3. 深淺模式的一致性

眾所周知,深色模式與淺色模式最大的不同就在色彩的處理上。當(dāng)深淺模式并存時(shí),希望在色彩上有一定延續(xù)和關(guān)聯(lián),而不是毫不相關(guān)的兩套色板。這樣一是避免開發(fā)及后續(xù)的維護(hù)成本,二是實(shí)際切換和使用時(shí),可以保證一致性,這意味著需要借助一定規(guī)則。

由于黑色和白色自身屬性不同,我們很難實(shí)現(xiàn)由深到淺的轉(zhuǎn)變,但可以基于淺色的基礎(chǔ)色板,通過結(jié)合透明度的轉(zhuǎn)換,從而得到前額模式下的色彩,這樣的結(jié)果也相對和諧,也符合我們一致性的原則。

這里我們以天青藍(lán)淺色模式下的色板為例,通過正負(fù)極性變化趨勢總結(jié)出來的規(guī)律,來重新驗(yàn)證深色模式下的色板一致性:

在實(shí)際應(yīng)用過程中,如果你選了色相在 225~325 間的深冷色系作為主色或強(qiáng)調(diào)色使用,建議適當(dāng)提高透明度的值,避免在暗色界面上引起閱讀障礙??梢钥闯鼋?jīng)過調(diào)整后顏色的明度、飽和度有很好的統(tǒng)一性。

可以看到在大趨勢走向上左右兩側(cè)圖基本一致,這代表兩個(gè)色板在變化規(guī)律接近一致,基本可以證明規(guī)則的合理性。

4. 可讀性和易讀性

  • 可讀性定義了人們閱讀單詞、短語和文本塊的難易程度;
  • 易讀性衡量用戶識別特定字體中字母的速度和直觀程度。

在淺色模式中,主背景顏色要保持溫和適中,既要確保不會因?yàn)檫^亮而產(chǎn)生刺眼感,也要保證信息的可見性,在WCAG標(biāo)準(zhǔn)下,前后景的正對比度極性比最低為4.5:1、最合適為7:1,最高不得超過18:1,由于儀表使用環(huán)境以及過小的顯示范圍等因素,建議對比值在10:1到15:1范圍最佳,方便用戶在高亮環(huán)境可以達(dá)到快速識別的目的。

在實(shí)際設(shè)計(jì)的過程中,通過對比多種背景方案:帶有多種顏色傾向的灰色以及多種中性色灰的色調(diào)變化,最終選取了以天藍(lán)色為底色的背景板,重新塑造淺色模式是視覺規(guī)范:

以上僅作為實(shí)例展示。

5. 文字方面

除了基礎(chǔ)的背景色外,文字用色也需要格外的嚴(yán)謹(jǐn),對于 #000000 的純黑色文字,盡量避免大面積使用,如有需要,可以通過調(diào)整不同背景上的透明度使其更加融合。

以上就是上篇的全部內(nèi)容了,下篇我會詳細(xì)說一下底色的選取方法以及淺色模式下其他的注意方向,感謝您的耐心觀看,同時(shí)也希望上述內(nèi)容能對大家在淺色模式的設(shè)計(jì)上有所幫助,如果您有不同意見歡迎留言探討~

 

本文由 @阿洋 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)許可,禁止轉(zhuǎn)載。

題圖來自Unsplash,基于 CC0 協(xié)議

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 作為司機(jī),我還是更喜歡深色模式,只有一個(gè)原因,淺色刺眼。短途駕車還好,長途駕車,本身眼睛就是很疲勞的,連深色儀表盤內(nèi)的白光都感覺刺眼。

    來自廣東 回復(fù)
    1. 所以淺色模式下的色彩一定溫和不刺激

      來自上海 回復(fù)
    2. 還有問題,就是車內(nèi)光線普遍偏暗,不需要大面積太亮(淺色)的屏幕。

      來自遼寧 回復(fù)
    3. 方便說下您現(xiàn)在開的是什么車型么

      來自上海 回復(fù)
  2. 解析的不錯

    來自江蘇 回復(fù)