Visual design principles

视觉规范

主要是3个方面:易读,易触,一致

关于易读:字体(32dp & 24dp),文本长度(120字符),对比度比率4.5:1, 晚上易读性

关于易触:合适的点击区域尺寸(最小76*76),点击区域间隔(23dp)

一致性:一致的icon,术语和交互模板。清晰的可操作和不可操作


翻译出自: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.

车载屏幕的内容设计必须遵循驾驶员任何可视条件下都是易读和速读的,包括统一的UI,较大的触摸区域。

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:

确保用户能快速浏览理解屏幕上的内容,内容展示必须在行驶中很容易读到。内容易读需要遵循以下原则:

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对字体和大小的规范。主要文字比较典型的用于对一些信息做决定,比如歌曲名或者内容名称,32dp。次要文本是支持性信息,比如艺术家或者类别,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.

驾驶中的文本显示会受到很多影响因素,比如灯光,时间,字体(粗细),对比度。高易读文本可以帮助驾驶员查看的时间,和做决定的时间,进而减少认知时视觉分散

Limit text length

文本长度限制

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个字符,包括标点符号和空格(一句话101字符)。日语不能超过31个罗马字符,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.

长字符会导致长时间的阅读,因此会增加风险

Follow contrast ratios for text, icons & background

对比度高的文本,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,文本,图像的对比度比率至少4.5:1. 这个要求应用在任何展示内容上。如果提供过多的信息(比如icon和文本都传达了同样的意思),只有一种元素需要遵循对比规范。滚动输入的对比度要高于背景。

Rationale:

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

驾驶员对于内容的接收时基于了各种灯光条件(明暗度,自然光,阴暗环境等)

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.

白天对于文字和背景的色差(白底黑字)是易读的(黑底白字)是不易读的,当晚上的时候就是反过来的

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.

易读的对比度在晚上增加了光线的敏感度。颜色和光度的展示在白天和晚上使用时都不能让视觉清晰度太强烈或者削弱。

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:

如果点击区域太小或者太密会让驾驶员分散注意力或出错,让点击区域容易点击需要遵循以下规范:

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是最小的点击区域。特殊情况下,宽度可以为高度牺牲一点(保持整体相同的区域)去适应行车中的震动

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.

小的点击区域会增加错误率。另外,驾驶员也需要用更长的时间去看着寻找要看的东西,增加视觉和认知的分散力。

Avoid touch target overlap

避免点击区域交叉

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.

一定不能让点击区域与另外的交叉。缩放能帮助减少交叉的问题,如果可以,至少要在两个点击区域间隔23dp

Rationale:

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

减少点击区域的交叉从而避免误解和用户的错误点击


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:

让用户快速理解屏幕的选项,需要界面清晰且一直,保持UI元素一致性需要遵循以下规范:

Use consistent map icons, terminology & interaction patterns

用一致的icon,术语和交互模板

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

icon和术语应该保持一致性以至于一一对应功能,同样交互模块应该一致且可预测

Rationale:

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

保持一致且熟悉的界面可减少驾驶员认知时间和更容易做出决定

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.

界面应该清楚地从不允许的功能中区分可行的功能-例如,媒体内容的变暗。界面应该区分只在驾驶中的应用和非驾驶中的应用。例如搜索框应该在驾驶中隐藏

Rationale:

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

让用户清楚的知道选项的不可用,要提高系统状态在看的一瞬间的可理解性


©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 159,835评论 4 364
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,598评论 1 295
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 109,569评论 0 244
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 44,159评论 0 213
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,533评论 3 287
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,710评论 1 222
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,923评论 2 313
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,674评论 0 203
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,421评论 1 246
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,622评论 2 245
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,115评论 1 260
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,428评论 2 254
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,114评论 3 238
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,097评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,875评论 0 197
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,753评论 2 276
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,649评论 2 271

推荐阅读更多精彩内容