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.

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


你可能感兴趣的:(Visual design principles)