狠色狠色狠狠色综合久久,国产第一页浮力影院入口,刺激性视频黄页,日本强伦片中文字幕免费看 黄色综合,91.cn国产大片,亚洲日韩视频在线观看

全面掌握HMI設(shè)計(jì)規(guī)范:解鎖高效設(shè)計(jì)技巧

2024-10-31    藍(lán)藍(lán)小助手 交互設(shè)計(jì)及用戶體驗(yàn)

解鎖HMI設(shè)計(jì)規(guī)范
 
 
1. 前言
車載HMI設(shè)計(jì)近年來(lái)成為一個(gè)熱門領(lǐng)域。許多朋友對(duì)HMI設(shè)計(jì)感興趣,卻苦于不知如何入手,不了解HMI設(shè)計(jì)的基本原則和規(guī)范。有人誤以為HMI設(shè)計(jì)僅是設(shè)計(jì)類似iPad的界面,認(rèn)為可以直接應(yīng)用移動(dòng)端或Web端的規(guī)范,這是不正確的。HMI設(shè)計(jì)擁有其獨(dú)特的設(shè)計(jì)規(guī)范。本文旨在介紹HMI端的設(shè)計(jì)系統(tǒng)和原則。當(dāng)然,這些規(guī)范主要用于參考,特殊情況下可以適當(dāng)打破這些規(guī)則。
 
2. HMI設(shè)計(jì)原則
2.1. 交互原則
在當(dāng)前的駕駛環(huán)境中,自動(dòng)駕駛尚不能完全取代人工駕駛,駕駛者在行車過(guò)程中仍需保持對(duì)路況的高度注意,因此確保駕駛安全是設(shè)計(jì)的首要前提。本文將主要介紹視覺(jué)部分的設(shè)計(jì)考量,關(guān)于車載交互的詳細(xì)討論將在后續(xù)文章中更新。
解鎖HMI設(shè)計(jì)規(guī)范
 
 
 
2.2. 視覺(jué)原則
在以駕駛安全為前提的設(shè)計(jì)中,需要確保內(nèi)容的易讀性,目標(biāo)的易用性,以及界面元素的一致性,從而滿足用戶在全場(chǎng)景下的體驗(yàn)需求。
解鎖HMI設(shè)計(jì)規(guī)范
 
 
 
3. HMI設(shè)計(jì)系統(tǒng)
3.1. 為什么要搭建設(shè)計(jì)系統(tǒng)
一致性
:設(shè)計(jì)系統(tǒng)提供了一套統(tǒng)一的視覺(jué)和功能組件,確保不同的產(chǎn)品、頁(yè)面和功能在視覺(jué)表現(xiàn)和用戶體驗(yàn)上具有高度一致性。這不僅減少了用戶的學(xué)習(xí)成本,也加強(qiáng)了品牌的整體形象和專業(yè)性。
提高效率
:設(shè)計(jì)系統(tǒng)中的可重用組件和明確的設(shè)計(jì)指南可以大大減少設(shè)計(jì)和開(kāi)發(fā)的工作量。設(shè)計(jì)師和開(kāi)發(fā)者可以快速采用預(yù)定義的元素來(lái)構(gòu)建新功能或改進(jìn)現(xiàn)有功能,無(wú)需從零開(kāi)始。這有助于縮短項(xiàng)目時(shí)間線,實(shí)現(xiàn)產(chǎn)品的快速迭代。
易于維護(hù)
:當(dāng)所有設(shè)計(jì)元素和代碼都遵循一個(gè)統(tǒng)一的系統(tǒng)時(shí),維護(hù)和更新變得更加簡(jiǎn)單和高效。例如,如果需要更新品牌顏色或修改按鈕樣式,只需在設(shè)計(jì)系統(tǒng)中進(jìn)行更改,相關(guān)變更即可自動(dòng)應(yīng)用到所有使用這些元素的地方。
提高跨團(tuán)隊(duì)協(xié)作
:設(shè)計(jì)系統(tǒng)作為一個(gè)共享的資源庫(kù),可以幫助不同的團(tuán)隊(duì)成員(如設(shè)計(jì)師、開(kāi)發(fā)者、產(chǎn)品經(jīng)理等)更好地協(xié)同工作。一個(gè)擁有詳細(xì)文檔和標(biāo)準(zhǔn)的系統(tǒng)確保每個(gè)團(tuán)隊(duì)成員都能理解和正確使用組件,減少溝通成本和誤解。
適應(yīng)性和可擴(kuò)展性
:良好的設(shè)計(jì)系統(tǒng)具備高度的適應(yīng)性和可擴(kuò)展性,能夠隨著公司和產(chǎn)品的發(fā)展而成長(zhǎng)。隨著新需求的出現(xiàn),設(shè)計(jì)系統(tǒng)可以持續(xù)更新和擴(kuò)展,新的設(shè)計(jì)元素和組件可以被添加進(jìn)來(lái),而不會(huì)破壞現(xiàn)有的系統(tǒng)結(jié)構(gòu)。
提升用戶體驗(yàn)
:統(tǒng)一和標(biāo)準(zhǔn)化的用戶界面組件不僅可以加速開(kāi)發(fā)流程,還可以直接提升最終用戶的體驗(yàn)。一致的界面和預(yù)測(cè)性的交互可以幫助用戶更快地適應(yīng)軟件,提高用戶滿意度。
3.2. 原子設(shè)計(jì)
談到設(shè)計(jì)系統(tǒng),我們不得不提原子設(shè)計(jì)。原子設(shè)計(jì)是由Brad Frost于2013年提出的一種設(shè)計(jì)系統(tǒng)方法論,它將界面設(shè)計(jì)分解為更小的組件,目的是提高工作效率和保持設(shè)計(jì)一致性。原子設(shè)計(jì)包括五個(gè)層次:原子、分子、組織、模板和頁(yè)面。
解鎖HMI設(shè)計(jì)規(guī)范
 
 
 
原子
:設(shè)計(jì)中最小的可復(fù)用單元,包括顏色、字體、圖標(biāo)等基礎(chǔ)元素。
解鎖HMI設(shè)計(jì)規(guī)范
 
 
 
分子
:由原子組合形成的更復(fù)雜元素,例如按鈕、輸入框等具有特定功能的組件。
解鎖HMI設(shè)計(jì)規(guī)范
 
 
 
組織
:由分子和原子構(gòu)成的模塊,承載更復(fù)雜的功能和信息結(jié)構(gòu)。
解鎖HMI設(shè)計(jì)規(guī)范
 
 
 
模板
:將原子和分子組合成的布局框架,定義頁(yè)面結(jié)構(gòu)和內(nèi)容區(qū)域的排版。
解鎖HMI設(shè)計(jì)規(guī)范
 
 
 
頁(yè)面
:結(jié)合模板和具體內(nèi)容,形成最終的界面設(shè)計(jì)。
解鎖HMI設(shè)計(jì)規(guī)范
 
 
 
接下來(lái)步入正題,本文將詳細(xì)講述HMI的視覺(jué)樣式指南,內(nèi)容包括顏色、布局、排版和圖標(biāo)。
解鎖HMI設(shè)計(jì)規(guī)范
 
 
 
4. 顏色
4.1. 顏色對(duì)比度
由于駕駛環(huán)境復(fù)雜多變,如地下車庫(kù)、隧道、陰雨天、陽(yáng)光刺眼的晴天、白天及夜晚,設(shè)計(jì)時(shí)需考慮不同光照條件下的可讀性。文本與背景色的對(duì)比度應(yīng)滿足特定標(biāo)準(zhǔn),建議對(duì)比度大于7:1,至少應(yīng)為4.5:1。這些數(shù)字區(qū)間的依據(jù)是什么呢?參考WCAG(網(wǎng)絡(luò)內(nèi)容無(wú)障礙指南),這些標(biāo)準(zhǔn)旨在為視障人士提供更好的體驗(yàn),同時(shí)也便于普通人使用。汽車作為面向大眾的產(chǎn)品,應(yīng)考慮視障用戶的需求。在不佳的使用場(chǎng)景下(如強(qiáng)烈陽(yáng)光或昏暗環(huán)境中),我們也可能經(jīng)歷暫時(shí)性的視覺(jué)障礙,難以清晰感知內(nèi)容。
根據(jù)WCAG,對(duì)比度應(yīng)符合AA級(jí)與AAA級(jí)的標(biāo)準(zhǔn)。AA級(jí)要求小文本與背景的對(duì)比度至少為4.5:1,大文本與背景的對(duì)比度至少為3:1。AAA級(jí)則要求小文本與背景的對(duì)比度至少為7:1,大文本與背景的對(duì)比度至少為4.5:1。
解鎖HMI設(shè)計(jì)規(guī)范
 
根據(jù)WCAG,小文本指的是字號(hào)在19px以下的粗體文本,或者字號(hào)在24px以下的常規(guī)體文本。大文本則是指字號(hào)至少為19px且為粗體的文本,或者字號(hào)為24px以上的常規(guī)體文本。在HMI設(shè)計(jì)中,最小文本字號(hào)定為20px,字重為常規(guī)。因此,文本與背景的對(duì)比度不應(yīng)低于4.5:1。同時(shí),對(duì)比度也不宜過(guò)高,因?yàn)檫^(guò)高的對(duì)比度可能導(dǎo)致閱讀疲勞,降低閱讀效率。在深色背景下,文本與圖形的對(duì)比度建議不要超過(guò)18:1。您可以通過(guò)以下鏈接訪問(wèn)一個(gè)網(wǎng)站,以計(jì)算文本與背景的對(duì)比度:https://www.siegemedia.com/contrast-ratio#%23272e3b-on-%231868de
解鎖HMI設(shè)計(jì)規(guī)范
 
 
 
4.2. 顏色分類
HMI設(shè)計(jì)主流趨勢(shì)是采用深色背景,這在夜間或光線較暗的環(huán)境中可以減少屏幕亮度對(duì)視野的沖擊,并有效減少陽(yáng)光及其他光源的反射。在深色背景上,鮮艷的色彩(如紅色、藍(lán)色等)更加突出,便于駕駛員快速識(shí)別重要信息。在使用深色背景時(shí),應(yīng)避免大面積使用純白色,以免過(guò)度吸引用戶注意力。
然而,隨著屏幕硬件技術(shù)的進(jìn)步,越來(lái)越多的車機(jī)系統(tǒng)開(kāi)始采用淺色背景。這樣做不僅能在保持高對(duì)比度的同時(shí)有效控制反射和眩光,還確保了淺色背景在各種光線條件下的良好可讀性。由于手機(jī)和平板設(shè)備普遍采用淺色背景,用戶已習(xí)慣此類界面,這一習(xí)慣也推動(dòng)了車機(jī)頁(yè)面設(shè)計(jì)向淺色背景的轉(zhuǎn)變。
解鎖HMI設(shè)計(jì)規(guī)范
 
 
 
在界面設(shè)計(jì)中,中性色主要用于文字、背景、邊框和分割線,通過(guò)中性色的明度差異來(lái)營(yíng)造空間的縱深感。在視覺(jué)感知中,明度較高的顏色在Z軸上的位置看起來(lái)更高,這有助于區(qū)分不同層次。在深色背景下,應(yīng)通過(guò)調(diào)整白色的透明度而非使用灰色來(lái)進(jìn)行對(duì)比和層次區(qū)分。功能色代表特定的信息狀態(tài),需符合用戶對(duì)色彩的基本認(rèn)知,例如:成功用綠色表示、失敗用紅色表示、提醒用黃色表示、鏈接用藍(lán)色表示。同時(shí),還需要設(shè)定合理的對(duì)比度和飽和度,以確保在駕駛環(huán)境下能有效識(shí)別這些顏色。
解鎖HMI設(shè)計(jì)規(guī)范
 
 
 
車機(jī)配色應(yīng)避免大量使用鮮艷的色彩,以免過(guò)度吸引用戶的注意力。根據(jù)Munsell Color原理,顏色的飽和度和明度兩個(gè)數(shù)值越大,顏色越鮮艷。在車機(jī)配色中,我們需要遵循以下兩個(gè)規(guī)則:
1.越接近右上角的顏色越鮮艷,應(yīng)避免使用這類顏色;
2.選色時(shí)應(yīng)關(guān)注飽和度和明度,這兩個(gè)數(shù)值之和應(yīng)盡量小于180(S飽和度 + B明度 ≤ 180)。同時(shí),品牌色的合理應(yīng)用能有效傳達(dá)品牌調(diào)性,但不建議大量使用紅色系作為品牌的功能色。
 
4.3. 大廠顏色規(guī)范
解鎖HMI設(shè)計(jì)規(guī)范
 
 
解鎖HMI設(shè)計(jì)規(guī)范
 
 
 
5. 布局
5.1. 屏幕種類與屏幕分辨率
車機(jī)的屏幕尺寸與分辨率種類繁多,且車機(jī)涵蓋多種屏幕類型,如儀表屏、中控屏、副駕娛樂(lè)屏、后排娛樂(lè)屏等。接下來(lái)介紹幾款熱門車型的屏幕參數(shù)。
小米SU7
儀表屏:7.1英寸
中控屏:16.1英寸、3072x1920
解鎖HMI設(shè)計(jì)規(guī)范
 
 
 
特斯拉 Model Y
中控屏:15英寸、1920x1080
解鎖HMI設(shè)計(jì)規(guī)范
 
 
 
問(wèn)界M7
儀表屏:10.25英寸、1920x720
中控屏:15.6英寸、1920x1080
解鎖HMI設(shè)計(jì)規(guī)范
 
 
 
蔚來(lái)ES6
儀表屏:10.2英寸、1920x532
中控屏:12.8英寸、1728x1888
解鎖HMI設(shè)計(jì)規(guī)范
 
 
 
小鵬G9
儀表屏:10.25英寸、1920x720
中控屏:14.96英寸、2400x1200
副駕娛樂(lè)屏:14.96英寸、2400x1200
解鎖HMI設(shè)計(jì)規(guī)范
 
 
 
理想L7
儀表屏:4.82英寸、800x166
中控屏:15.7英寸、2880x1620
副駕娛樂(lè)屏:15.7英寸、2880x1620
解鎖HMI設(shè)計(jì)規(guī)范
 
 
 
通過(guò)對(duì)主要汽車廠商車型的屏幕分辨率進(jìn)行收集與分析,發(fā)現(xiàn)當(dāng)前市面上主流的屏幕分辨率比例主要為16:9和8:3,這兩種比例合計(jì)覆蓋了72.39%的車型。因此,建議將這兩種比例作為屏幕適配的基準(zhǔn)。
解鎖HMI設(shè)計(jì)規(guī)范
 
 
 
5.2. 柵格系統(tǒng)
布局區(qū)域大于或等于1600dp時(shí),建議使用12柵格系統(tǒng)。布局區(qū)域在720dp到1600dp之間時(shí),建議使用8柵格。而當(dāng)布局區(qū)域小于720dp時(shí),則建議使用4柵格。
解鎖HMI設(shè)計(jì)規(guī)范
 
 
 
5.3. 間距規(guī)范
間距可以賦予頁(yè)面信息更有節(jié)奏的感覺(jué),從而提升內(nèi)容的可讀性和閱讀效率。通過(guò)采用不同的間距,可以有效區(qū)分頁(yè)面的組織和內(nèi)容。
在設(shè)計(jì)師層面:制定間距規(guī)范可以有效減少?zèng)Q策和思考的時(shí)間,提高工作效率。
在開(kāi)發(fā)層面:開(kāi)發(fā)者不一定能夠準(zhǔn)確辨識(shí)1dp的差異,但能夠明顯區(qū)分出8dp的差距?;A(chǔ)間距以8dp及其倍數(shù)為增量(例如8dp、16dp、24dp、32dp、48dp等),這樣開(kāi)發(fā)者無(wú)需每次都精確測(cè)量,同時(shí)也能減少誤差,提高設(shè)計(jì)稿的還原度。
在用戶層面:具有一致節(jié)奏和韻律的頁(yè)面更加美觀。依據(jù)親密性原則合理調(diào)整間距,可以使用戶更加輕松地感知和區(qū)分信息,從而提升用戶體驗(yàn)。
 
谷歌Android Auto的布局間距采用8dp作為主要增量,而一些較小的組件則采用4dp作為增量。間距規(guī)范共設(shè)定了九種數(shù)值,分別為P0至P8。
解鎖HMI設(shè)計(jì)規(guī)范
 
 
 
小tips:為了更好地對(duì)齊并留出足夠的間距,較小的組件可以使用4dp和12dp的間距,但需謹(jǐn)慎使用。對(duì)于信息較少的頁(yè)面(如缺省頁(yè)、登錄頁(yè)等),使用96dp的間距可能無(wú)法很好地滿足留白需求,此時(shí)可以考慮使用120dp、160dp或200dp等其他間距數(shù)值。細(xì)心的朋友可能會(huì)注意到,在以8dp為基準(zhǔn)單位定義間距時(shí),40dp和56dp這兩個(gè)數(shù)值并未包括在內(nèi),盡管它們都是8的倍數(shù)。例如,16dp是8dp的2倍,間距變化較為明顯。然而,將56dp與64dp進(jìn)行比較時(shí),64dp僅比56dp大1.4倍,兩者間的差異相對(duì)較小。設(shè)計(jì)師在定義間距規(guī)范時(shí)需要遵循倍數(shù)規(guī)則,同時(shí)也應(yīng)考慮頁(yè)面的美觀和用戶體驗(yàn),避免過(guò)于呆板地遵守規(guī)則。
定義間距沒(méi)有絕對(duì)的標(biāo)準(zhǔn),主要取決于最小單位,如4dp、5dp、6dp、8dp等,具體選擇哪個(gè)取決于產(chǎn)品的定位和內(nèi)容的形式。重要的是,所有間距需要基于最小單位并以倍數(shù)的形式規(guī)律排列,以保證元素間有良好的節(jié)奏感。
 
6. 排版
文字是界面設(shè)計(jì)中非常重要的信息元素,其字體選擇、字階、字重、顏色及行高都是影響視覺(jué)可讀性和閱讀效率的關(guān)鍵因素。對(duì)于字體的選擇,建議在中文排版中使用思源黑體,而英文則使用Roboto。在中英文混排的情況下,應(yīng)統(tǒng)一使用系統(tǒng)中文字體;在純英文排版時(shí),則統(tǒng)一使用系統(tǒng)的英文專用字體。
6.1. 字階
字階在界面設(shè)計(jì)中用于區(qū)分內(nèi)容的主次關(guān)系,合理的字階應(yīng)用決定了內(nèi)容的節(jié)奏和秩序。為了構(gòu)建穩(wěn)定且具有良好可讀性的字階設(shè)計(jì),根據(jù)IDX & 同濟(jì)(2020)百度Apollo中控視覺(jué)基礎(chǔ)研究項(xiàng)目、谷歌Android Auto和華為車機(jī)UI設(shè)計(jì)規(guī)范的研究成果,我們可以發(fā)現(xiàn)字號(hào)通常以4的倍數(shù)遞增,且最小字號(hào)不應(yīng)小于20(標(biāo)簽類輔助文案應(yīng)謹(jǐn)慎使用),正文字號(hào)最小為24。文本的主副層級(jí)應(yīng)通過(guò)4至8的字號(hào)差距來(lái)區(qū)分。對(duì)于需要用戶閱讀和處理的重要信息,每個(gè)段落的文字?jǐn)?shù)量不應(yīng)超過(guò)20字,以確保用戶可以在2秒內(nèi)閱讀完畢(700字/1分鐘)
解鎖HMI設(shè)計(jì)規(guī)范
 
 
解鎖HMI設(shè)計(jì)規(guī)范
 
 
 
6.2. 字重
對(duì)于需要用戶關(guān)注的文本信息,可以通過(guò)調(diào)整字重來(lái)突出內(nèi)容。建議使用Regular或Medium字重,這樣的字重使文本看起來(lái)更清晰和舒適。相比之下,更粗的字體不易辨認(rèn),可能會(huì)影響閱讀速度,導(dǎo)致駕駛員分心,同時(shí)也可能引起視覺(jué)疲勞。
解鎖HMI設(shè)計(jì)規(guī)范
 
 
 
6.3. 行高
行高是指上邊框、下邊框加上字號(hào)高度的總和,可以想象成一個(gè)包裹在字體外面的透明盒子。行高主要針對(duì)多行文本;對(duì)于單行文本,使用默認(rèn)的Auto行高即可。在設(shè)計(jì)頁(yè)面時(shí),由于文字會(huì)有不同的字號(hào)構(gòu)成,便于閱讀的考慮通常會(huì)設(shè)定適當(dāng)?shù)男懈摺2煌男懈邔?duì)文字的易讀性影響較大。
文本的行高一般設(shè)置為字號(hào)的120%-150%,然而由于字階規(guī)范中包含多個(gè)字號(hào),不易確定具體每個(gè)字號(hào)應(yīng)使用120%還是150%的行高。行高的具體比例與字號(hào)密切相關(guān):字號(hào)越小,建議的行高比例越大;反之,字號(hào)越大,折行的概率通常越小。
根據(jù)Ant Design的經(jīng)驗(yàn),行高可以設(shè)置為字號(hào)加8。雖然這種動(dòng)態(tài)變化的字號(hào)與固定加8的方法看起來(lái)可能顯得死板,實(shí)際上它非常有效。例如,20px的字號(hào)加8等于28px行高,這是字號(hào)的1.4倍;56px字號(hào)加8則為64px行高,約是字號(hào)的1.14倍,符合‘字號(hào)越小,行高越大’的原則。這樣的規(guī)范使得設(shè)計(jì)師和開(kāi)發(fā)者可以更方便地調(diào)整行高。
解鎖HMI設(shè)計(jì)規(guī)范
 
 
6.4. 字色
為保證普通文本在黑白背景下的清晰可讀,根據(jù)WCAG的AA級(jí)與AAA級(jí)標(biāo)準(zhǔn),文本與背景的對(duì)比度應(yīng)設(shè)定在4.5:1至7:1之間。
在深色背景上,建議通過(guò)調(diào)整純白色文本的透明度來(lái)創(chuàng)建一致且強(qiáng)烈的視覺(jué)層次結(jié)構(gòu),而不是使用純灰色。根據(jù)IDX & 同濟(jì) (2020) 百度Apollo中控視覺(jué)基礎(chǔ)研究項(xiàng)目、谷歌Android Auto和華為車機(jī)UI設(shè)計(jì)規(guī)范,建議設(shè)置一級(jí)文本的透明度為100%-90%,二級(jí)文本的透明度為70%-60%,三級(jí)文本的透明度為40%-30%。
 
7. 圖標(biāo)
7.1. 圖標(biāo)尺寸
在初學(xué)圖標(biāo)尺寸規(guī)范時(shí),我發(fā)現(xiàn)不同的文章和文檔對(duì)圖標(biāo)尺寸單位的定義各不相同,有的使用像素,有的使用毫米,這讓我一度感到困惑。后來(lái),我查閱了相關(guān)的換算方法。根據(jù)華為車機(jī)UI設(shè)計(jì)規(guī)范,圖標(biāo)的最小尺寸建議為7mm,推薦9mm。由于不同車企的車機(jī)屏幕分辨率各異,計(jì)算出的像素值也會(huì)有所不同。以三個(gè)熱門車型為例,計(jì)算一個(gè)7mm圖標(biāo)相當(dāng)于多少像素:
  •  
    問(wèn)界M7中控屏:15.6英寸、1920x1080、PPI:142,7mm≈39dp
  •  
    特斯拉Model Y中控屏:15英寸、1920x1080、PPI:147,9mm≈41dp
  •  
    小米SU7中控屏:16.1英寸、3072x1920,PPI:225,9mm≈62dp
計(jì)算方法示例(以問(wèn)界M7為例):
  1.  
    將7毫米轉(zhuǎn)換為英寸,即7毫米 ÷ 25.4毫米/英寸 ≈ 0.276英寸。
  2.  
    確定屏幕的PPI(每英寸像素密度),問(wèn)界M7的PPI為142。
  3.  
    計(jì)算圖標(biāo)尺寸,即0.276英寸 × 142像素/英寸 ≈ 39.192像素,約為39像素。
盡管這些計(jì)算看似復(fù)雜,但在設(shè)計(jì)1倍圖稿時(shí),通??梢詫⒆钚D標(biāo)尺寸控制在40dp至48dp之間,根據(jù)具體需求調(diào)整。對(duì)于追求精確的設(shè)計(jì)師,可以使用以下網(wǎng)站一鍵計(jì)算屏幕PPI和圖標(biāo)像素:
  •  
    屏幕PPI計(jì)算器:https://config.net.cn/tools/PixelToPpi.html
  •  
    毫米到像素轉(zhuǎn)換器:https://pixelsconverter.com/millimeters-to-pixels#google_vignette
小tips:圖標(biāo)的像素大小是基于PPI計(jì)算的。PPI是屏幕像素密度的度量標(biāo)準(zhǔn),與屏幕的物理尺寸或分辨率無(wú)關(guān)。如果兩個(gè)屏幕的PPI相同,則它們顯示的圖標(biāo)大小也相同。屏幕PPI越高,相同物理尺寸的圖標(biāo)在屏幕上的像素尺寸也越大。隨著屏幕硬件技術(shù)的進(jìn)步,車機(jī)屏幕的PPI將會(huì)逐漸提高。
解鎖HMI設(shè)計(jì)規(guī)范
 
 
 
7.2. 圖標(biāo)熱區(qū)
為了確保觸控操作的高效性,車機(jī)頁(yè)面上的觸摸熱區(qū)必須比手機(jī)和平板電腦上的熱區(qū)大。較小的熱區(qū)可能導(dǎo)致駕駛者分心和誤操作。因此,最小熱區(qū)尺寸應(yīng)設(shè)置為12x12mm(約等于67dp),而推薦的熱區(qū)尺寸為15.3mm以上(約等于86dp)??紤]到駕駛過(guò)程中可能的顛簸,可以在不改變觸控總面積的情況下,適當(dāng)犧牲寬度以確保足夠的高度。
解鎖HMI設(shè)計(jì)規(guī)范
 
 
 
為避免元素?zé)釁^(qū)過(guò)近或重疊,需要在可觸摸目標(biāo)之間預(yù)留足夠的安全距離。至少應(yīng)保持3.5mm(約等于20dp)的熱區(qū)間隔。
解鎖HMI設(shè)計(jì)規(guī)范
 
 
 
7.3. 圖標(biāo)設(shè)計(jì)原則
有序統(tǒng)一的形狀可以強(qiáng)化圖標(biāo)的識(shí)別性,以及提升品牌表達(dá)。通過(guò)信息圖形化,可以準(zhǔn)確表達(dá)圖標(biāo)的含義,同時(shí)避免鋸齒的出現(xiàn)。在確保圖標(biāo)表意清晰的前提下,形式和筆畫應(yīng)簡(jiǎn)潔明了,去繁從簡(jiǎn),去除多余的細(xì)節(jié)。同時(shí),需要定期檢測(cè)圖標(biāo)以保證其識(shí)別性和可用性。圖標(biāo)設(shè)計(jì)應(yīng)保證大小、線條粗細(xì)、端點(diǎn)、拐角、傾斜角度及基本形狀的統(tǒng)一性。
Keyline柵格規(guī)范確保了圖標(biāo)視覺(jué)尺寸的統(tǒng)一性,其大小、比例和復(fù)雜程度都得到了標(biāo)準(zhǔn)化和清晰化。柵格在圖標(biāo)元素繪制時(shí)提供參考,并幫助建立清晰的內(nèi)容輪廓邊界。
解鎖HMI設(shè)計(jì)規(guī)范
 
 
 
為保持風(fēng)格的整體一致性,圖標(biāo)的所有線段端點(diǎn)默認(rèn)采用與線段同寬的圓角端點(diǎn)。當(dāng)端點(diǎn)為圓形時(shí),為保證視覺(jué)上的統(tǒng)一性,圓形直徑應(yīng)略大于線段寬度。通常情況下,線段的端點(diǎn)和可編輯節(jié)點(diǎn)坐標(biāo)最好采用整數(shù)坐標(biāo)。
解鎖HMI設(shè)計(jì)規(guī)范
 
 
 
建議圖標(biāo)元素之間的間距不得小于默認(rèn)線寬的4px。對(duì)于相對(duì)復(fù)雜的特殊圖標(biāo)元素,間距的最小值應(yīng)為線寬的1/2,即當(dāng)默認(rèn)線寬為4px時(shí),間距不得小于2px。在設(shè)置間距時(shí),建議使用偶數(shù),并以2的倍數(shù)為參考值。
解鎖HMI設(shè)計(jì)規(guī)范
 
 
圖標(biāo)中的線段傾斜角度應(yīng)為15度的倍數(shù),以保證與Keyline中的對(duì)角線或十字垂直交叉線保持平行。
解鎖HMI設(shè)計(jì)規(guī)范
 
8. 總結(jié)
本文主要圍繞HMI視覺(jué)樣式展開(kāi),整合了我平時(shí)遇到的一些問(wèn)題、思考以及碎片化知識(shí)。希望這篇文章能為您提供新的思路,并幫助提升工作效率。如果文章有不足之處,歡迎大家交流和補(bǔ)充。
 

作者:設(shè)計(jì)師Ksss
鏈接:https://www.zcool.com.cn/article/ZMTYxOTQ5Mg==.html
來(lái)源:站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán),非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。

image.png

藍(lán)藍(lán)設(shè)計(jì)(www.jghy.net )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)APP界面設(shè)計(jì)、圖標(biāo)定制用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì),以及相關(guān)的軟件開(kāi)發(fā)服務(wù),咨詢電話:01063334945。我們建立了一個(gè)微信群,每天分享國(guó)內(nèi)外優(yōu)秀的設(shè)計(jì),有興趣請(qǐng)加入一起學(xué)習(xí)成長(zhǎng),咨詢及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan。

image.png

關(guān)鍵詞:UI咨詢UI設(shè)計(jì)服務(wù)公司、軟件界面設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)公司、UI交互設(shè)計(jì)公司數(shù)據(jù)可視化設(shè)計(jì)公司、用戶體驗(yàn)公司、高端網(wǎng)站設(shè)計(jì)公司、銀行金融軟件UI界面設(shè)計(jì)、能源及監(jiān)控軟件UI界面設(shè)計(jì)、氣象行業(yè)UI界面設(shè)計(jì)、軌道交通界面設(shè)計(jì)地理信息系統(tǒng)GIS UI界面設(shè)計(jì)航天軍工軟件UI界面設(shè)計(jì)、醫(yī)療行業(yè)軟件UI界面設(shè)計(jì)、教育行業(yè)軟件UI界面設(shè)計(jì)、企業(yè)信息化UI界面設(shè)計(jì)、軟件qt開(kāi)發(fā)、軟件wpf開(kāi)發(fā)、軟件vue開(kāi)發(fā)

日歷

鏈接

個(gè)人資料

存檔