Visual design principles

視覺規(guī)范

主要是3個(gè)方面:易讀蹬音,易觸河狐,一致

關(guān)于易讀:字體(32dp & 24dp)砖织,文本長(zhǎng)度(120字符),對(duì)比度比率4.5:1, 晚上易讀性

關(guān)于易觸:合適的點(diǎn)擊區(qū)域尺寸(最小76*76)娇哆,點(diǎn)擊區(qū)域間隔(23dp)

一致性:一致的icon湃累,術(shù)語和交互模板。清晰的可操作和不可操作


翻譯出自:https://designguidelines.withgoogle.com/automotive-os-apps/design-for-driving/visual-design-principles.html#

Content designed for a car screen must be legible and glanceable, with a consistent UI and large touch targets that drivers can identify under all viewing conditions.

車載屏幕的內(nèi)容設(shè)計(jì)必須遵循駕駛員任何可視條件下都是易讀和速讀的碍讨,包括統(tǒng)一的UI治力,較大的觸摸區(qū)域。

Make content easy to read

易讀

Make targets easy to touch

易觸

Keep UI elements consistent

UI一致性


Make content easy to read

To make sure drivers can quickly scan and understand onscreen content, the content must be presented in a way that’s easy to read while driving. To make content easy to read, follow these principles:

確保用戶能快速瀏覽理解屏幕上的內(nèi)容勃黍,內(nèi)容展示必須在行駛中很容易讀到琴许。內(nèi)容易讀需要遵循以下原則:

Display legible fonts

易讀字體

Visually presented primary and secondary text should align with Android Automotive guidelines for font and size. Primary text is typically used for pieces of information required for decision making, such as song titles or contact names, and should be 32dp. Secondary text is typically used for supporting information, such as artist name or call type (such as “mobile”), and should be 24dp.

主要和次要的文本展示要遵循Android Automotive對(duì)字體和大小的規(guī)范。主要文字比較典型的用于對(duì)一些信息做決定溉躲,比如歌曲名或者內(nèi)容名稱,32dp益兄。次要文本是支持性信息锻梳,比如藝術(shù)家或者類別,24dp

Rationale:

Text legibility in the context of driving can be affected by many factors, such as lighting, time of day, font proportions (thin, medium, bold) and contrast. Highly legible text helps drivers shorten glance times as well as decision times, thus reducing cognitive and visual distraction.

駕駛中的文本顯示會(huì)受到很多影響因素净捅,比如燈光疑枯,時(shí)間,字體(粗細(xì))蛔六,對(duì)比度荆永。高易讀文本可以幫助駕駛員查看的時(shí)間,和做決定的時(shí)間国章,進(jìn)而減少認(rèn)知時(shí)視覺分散

Limit text length

文本長(zhǎng)度限制

Text items using the Roman alphabet must not exceed 120 characters, including punctuation and spaces. (Note for reference: The preceding sentence is 101 characters.) Text items in Japanese must not exceed a total of 31 Roman characters, kana, or kanji combined.

羅馬字體不能超過120個(gè)字符具钥,包括標(biāo)點(diǎn)符號(hào)和空格(一句話101字符)。日語不能超過31個(gè)羅馬字符液兽,kana骂删,kanji的組合。

Rationale:

Long strings of text encourage long glances to read the entire message, thus increasing visual distraction and the incidence of crashes and near-crashes.

長(zhǎng)字符會(huì)導(dǎo)致長(zhǎng)時(shí)間的閱讀四啰,因此會(huì)增加風(fēng)險(xiǎn)

Follow contrast ratios for text, icons & background

對(duì)比度高的文本宁玫,icon和背景

The contrast ratio for icons, text, and other images must be at least 4.5:1. This requirement applies to any displayed items that convey information, including selected items in rotary inputs and the like. However, if redundant information is provided (such as an icon and text that convey the same meaning), only one element needs to meet contrast guidelines. For rotary inputs, the contrast guideline must be met for the highlight against the background.

icon,文本柑晒,圖像的對(duì)比度比率至少4.5:1. 這個(gè)要求應(yīng)用在任何展示內(nèi)容上欧瘪。如果提供過多的信息(比如icon和文本都傳達(dá)了同樣的意思),只有一種元素需要遵循對(duì)比規(guī)范匙赞。滾動(dòng)輸入的對(duì)比度要高于背景佛掖。

Rationale:

Drivers must perceive content and selections accurately under various lighting conditions (bright sunlight, overcast, and so on).

駕駛員對(duì)于內(nèi)容的接收時(shí)基于了各種燈光條件(明暗度妖碉,自然光,陰暗環(huán)境等)

Provide glanceability at night

晚上的速讀性

Polarity of content shown during the daytime can be positive (dark text on light background) or negative (light text on dark background), while content shown during nighttime must be negative polarity.

白天對(duì)于文字和背景的色差(白底黑字)是易讀的(黑底白字)是不易讀的苦囱,當(dāng)晚上的時(shí)候就是反過來的

Rationale:

Positive polarity during nighttime increases brightness sensitivity and after-images. The colors and luminosity of the display should not dazzle or impair visual clarity during day or night usage.

易讀的對(duì)比度在晚上增加了光線的敏感度嗅绸。顏色和光度的展示在白天和晚上使用時(shí)都不能讓視覺清晰度太強(qiáng)烈或者削弱。

Make targets easy to touch

Drivers can easily get distracted or make mistakes when trying to touch onscreen targets that are too small or close together. To make targets easy to touch, follow these principles:

如果點(diǎn)擊區(qū)域太小或者太密會(huì)讓駕駛員分散注意力或出錯(cuò)撕彤,讓點(diǎn)擊區(qū)域容易點(diǎn)擊需要遵循以下規(guī)范:

Display appropriately sized touch targets

合適的尺寸

Touch targets should adhere to the Android Automotive guidelines, for a minimum size of 76 x 76dp. For special cases, width can be slightly sacrificed in favor of height (while keeping overall area the same) to better accommodate up-and-down vehicle vibration.

76*76dp是最小的點(diǎn)擊區(qū)域鱼鸠。特殊情況下,寬度可以為高度犧牲一點(diǎn)(保持整體相同的區(qū)域)去適應(yīng)行車中的震動(dòng)

Rationale:

Small touch targets increase the likelihood of missing the touch target. In addition, the driver may need to glance or search for the touch target for a longer period of time, increasing visual and cognitive distraction.

小的點(diǎn)擊區(qū)域會(huì)增加錯(cuò)誤率羹铅。另外蚀狰,駕駛員也需要用更長(zhǎng)的時(shí)間去看著尋找要看的東西,增加視覺和認(rèn)知的分散力职员。

Avoid touch target overlap

避免點(diǎn)擊區(qū)域交叉

Touch targets must not overlap with one another. The option to zoom can help mitigate overlap issues by separating targets. If possible, allow at least 23dp between touch targets.

一定不能讓點(diǎn)擊區(qū)域與另外的交叉麻蹋。縮放能幫助減少交叉的問題焊切,如果可以扮授,至少要在兩個(gè)點(diǎn)擊區(qū)域間隔23dp

Rationale:

Eliminate touch target overlap to prevent clutter confusion and users missing the correct touch target.

減少點(diǎn)擊區(qū)域的交叉從而避免誤解和用戶的錯(cuò)誤點(diǎn)擊


Keep UI elements consistent

To help drivers quickly understand their onscreen options, the user interface must be clear and consistent. To keep UI elements consistent, follow these principles:

讓用戶快速理解屏幕的選項(xiàng),需要界面清晰且一直专肪,保持UI元素一致性需要遵循以下規(guī)范:

Use consistent map icons, terminology & interaction patterns

用一致的icon刹勃,術(shù)語和交互模板

Icons and terminology should consistently map one-to-one to their functions. Likewise, interaction patterns should be consistent and predictable.

icon和術(shù)語應(yīng)該保持一致性以至于一一對(duì)應(yīng)功能,同樣交互模塊應(yīng)該一致且可預(yù)測(cè)

Rationale:

A consistent familiar interface reduces the time and cognitive effort required by the driver and makes decision-making easier.

保持一致且熟悉的界面可減少駕駛員認(rèn)知時(shí)間和更容易做出決定

Clarify active & inactive features while in motion

劃分清可操作和不可操作

The interface should clearly distinguish allowed from disallowed features – for example, by dimming distracting media content. The interface should also distinguish features that are intended for use only while driving versus those intended for use only while not driving. For example, the search box should be hidden while driving.

界面應(yīng)該清楚地從不允許的功能中區(qū)分可行的功能-例如嚎尤,媒體內(nèi)容的變暗荔仁。界面應(yīng)該區(qū)分只在駕駛中的應(yīng)用和非駕駛中的應(yīng)用。例如搜索框應(yīng)該在駕駛中隱藏

Rationale:

Clearly communicate to users when options are unavailable or currently inaccessible, to enhance general understanding of system state at a glance.

讓用戶清楚的知道選項(xiàng)的不可用芽死,要提高系統(tǒng)狀態(tài)在看的一瞬間的可理解性


?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末乏梁,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子关贵,更是在濱河造成了極大的恐慌遇骑,老刑警劉巖,帶你破解...
    沈念sama閱讀 216,402評(píng)論 6 499
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件揖曾,死亡現(xiàn)場(chǎng)離奇詭異质蕉,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)翩肌,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,377評(píng)論 3 392
  • 文/潘曉璐 我一進(jìn)店門模暗,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人念祭,你說我怎么就攤上這事兑宇。” “怎么了粱坤?”我有些...
    開封第一講書人閱讀 162,483評(píng)論 0 353
  • 文/不壞的土叔 我叫張陵隶糕,是天一觀的道長(zhǎng)瓷产。 經(jīng)常有香客問我,道長(zhǎng)枚驻,這世上最難降的妖魔是什么濒旦? 我笑而不...
    開封第一講書人閱讀 58,165評(píng)論 1 292
  • 正文 為了忘掉前任,我火速辦了婚禮再登,結(jié)果婚禮上尔邓,老公的妹妹穿的比我還像新娘。我一直安慰自己锉矢,他們只是感情好梯嗽,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,176評(píng)論 6 388
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著沽损,像睡著了一般灯节。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上绵估,一...
    開封第一講書人閱讀 51,146評(píng)論 1 297
  • 那天炎疆,我揣著相機(jī)與錄音,去河邊找鬼国裳。 笑死形入,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的躏救。 我是一名探鬼主播,決...
    沈念sama閱讀 40,032評(píng)論 3 417
  • 文/蒼蘭香墨 我猛地睜開眼螟蒸,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼盒使!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起七嫌,我...
    開封第一講書人閱讀 38,896評(píng)論 0 274
  • 序言:老撾萬榮一對(duì)情侶失蹤少办,失蹤者是張志新(化名)和其女友劉穎,沒想到半個(gè)月后诵原,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體英妓,經(jīng)...
    沈念sama閱讀 45,311評(píng)論 1 310
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,536評(píng)論 2 332
  • 正文 我和宋清朗相戀三年绍赛,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了蔓纠。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 39,696評(píng)論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡吗蚌,死狀恐怖腿倚,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情蚯妇,我是刑警寧澤敷燎,帶...
    沈念sama閱讀 35,413評(píng)論 5 343
  • 正文 年R本政府宣布暂筝,位于F島的核電站,受9級(jí)特大地震影響硬贯,放射性物質(zhì)發(fā)生泄漏焕襟。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,008評(píng)論 3 325
  • 文/蒙蒙 一饭豹、第九天 我趴在偏房一處隱蔽的房頂上張望鸵赖。 院中可真熱鬧,春花似錦墨状、人聲如沸卫漫。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,659評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽列赎。三九已至,卻和暖如春镐确,著一層夾襖步出監(jiān)牢的瞬間包吝,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,815評(píng)論 1 269
  • 我被黑心中介騙來泰國打工源葫, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留诗越,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 47,698評(píng)論 2 368
  • 正文 我出身青樓息堂,卻偏偏與公主長(zhǎng)得像嚷狞,于是被迫代替她去往敵國和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子荣堰,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,592評(píng)論 2 353

推薦閱讀更多精彩內(nèi)容