超碰av在线|无码精品一区二区三区在线|伊人色色日韩一级片内射视频群批_欧美丰满少妇人妻HD高清在线_亚洲一区二区中文_亚洲无码动漫专区

解鎖HMI設(shè)計規(guī)范

2024-5-28    前端達(dá)人

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

藍(lán)藍(lán)設(shè)計(m.miumiuwan.com )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計、B端界面設(shè)計桌面端界面設(shè)計、APP界面設(shè)計圖標(biāo)定制、用戶體驗設(shè)計、交互設(shè)計、UI咨詢、高端網(wǎng)站設(shè)計、平面設(shè)計,以及相關(guān)的軟件開發(fā)服務(wù),咨詢電話:01063334945。

關(guān)鍵詞:UI咨詢、UI設(shè)計服務(wù)公司、軟件界面設(shè)計公司、界面設(shè)計公司、UI設(shè)計公司UI交互設(shè)計公司、數(shù)據(jù)可視化設(shè)計公司、用戶體驗公司、高端網(wǎng)站設(shè)計公司

銀行金融軟件UI界面設(shè)計、能源及監(jiān)控軟件UI界面設(shè)計、氣象行業(yè)UI界面設(shè)計、軌道交通界面設(shè)計、地理信息系統(tǒng)GIS UI界面設(shè)計、航天軍工軟件UI界面設(shè)計、醫(yī)療行業(yè)軟件UI界面設(shè)計、教育行業(yè)軟件UI界面設(shè)計、企業(yè)信息化UI界面設(shè)計、軟件qt開發(fā)軟件wpf開發(fā)、軟件vue開發(fā)



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

分享本文至:

日歷

鏈接

個人資料

存檔