Visual design principles

視覺規(guī)范

主要是3個方面:易讀,易觸,一致

關于易讀:字體(32dp & 24dp),文本長度(120字符),對比度比率4.5:1, 晚上易讀性

關于易觸:合適的點擊區(qū)域尺寸(最小76*76),點擊區(qū)域間隔(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.

車載屏幕的內容設計必須遵循駕駛員任何可視條件下都是易讀和速讀的,包括統(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:

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

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對字體和大小的規(guī)范。主要文字比較典型的用于對一些信息做決定,比如歌曲名或者內容名稱,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和文本都傳達了同樣的意思),只有一種元素需要遵循對比規(guī)范。滾動輸入的對比度要高于背景。

Rationale:

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

駕駛員對于內容的接收時基于了各種燈光條件(明暗度,自然光,陰暗環(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.

白天對于文字和背景的色差(白底黑字)是易讀的(黑底白字)是不易讀的,當晚上的時候就是反過來的

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:

如果點擊區(qū)域太小或者太密會讓駕駛員分散注意力或出錯,讓點擊區(qū)域容易點擊需要遵循以下規(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是最小的點擊區(qū)域。特殊情況下,寬度可以為高度犧牲一點(保持整體相同的區(qū)域)去適應行車中的震動

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.

小的點擊區(qū)域會增加錯誤率。另外,駕駛員也需要用更長的時間去看著尋找要看的東西,增加視覺和認知的分散力。

Avoid touch target overlap

避免點擊區(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.

一定不能讓點擊區(qū)域與另外的交叉??s放能幫助減少交叉的問題,如果可以,至少要在兩個點擊區(qū)域間隔23dp

Rationale:

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

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


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元素一致性需要遵循以下規(guī)范:

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.

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

Rationale:

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

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


?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成,瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發(fā)布,文章內容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關閱讀更多精彩內容

友情鏈接更多精彩內容