設計要知道!如何著手車載設計?

1 評論 7150 瀏覽 27 收藏 40 分鐘

編輯導語:隨著現代技術的更新和進步,車載設計也在不斷推陳出新,而汽車HMI設計開發時是整車開發的一環。本篇文章中作者首先從整車開發流程引入,詳細的介紹了設計的分析、原則、資源、及適配,干貨滿滿,感興趣的小伙伴們快來看看吧!

車企現在對智能系統的設計越來越重視,因為只有把軟件實力提升才可以更好地掌握話語權。汽車HMI設計開發時是整車開發的一環,需要按照整車開發的流程進行,這樣在造車的各個階段才能有效地管控和輸出設計產物,由于HMI設計涉及的相關的國標,只有按照既定的流程才能設計出符合車機環境的系統界面。

一、整車開發流程

現在汽車的整體設計工作流程,一輛汽車的生產需要經過V型的開發流程(從目標的制定到目標的驗證的過程)。

設計要知道!-如何著手車載設計

配圖來源于MOMOUX

大體可以分為五個階段:

  • 產品戰略階段
  • 概念設計階段
  • 設計開發階段
  • 工程車階段
  • 生產階段

設計要知道!-如何著手車載設計

1. HMI設計開發四大流程

然后我們來說一下HMI設計流程,HMI和C端B端的的設計大部分一樣,也是需要與汽車工程師、市場人員、設計調研人員合作。

不同的是HMI的設計更多會反復測試保證安全性優先的情況下,滿足功能需求,整個HMI設計過程中及設計和實現是機密結合的。

設計要知道!-如何著手車載設計

  • 前期分析(需求分析+競品分析)
  • 交互原型(信息架構+概念交互原型提案)
  • 設計交付(高保真交互DEMO+評審+ KEY設計規范+ 交付視覺設計+信息可視化優化+整體HMI完成+ HMI整套DEMO+ 評審+ 標注切圖)
  • 開發走查(開發對接+ 內部走查+可用性測試)
  • 迭代優化(專業評測度量報告+反饋修改)

1) 需求分析,競品調研評估

在整車開發項目中,HMI體驗設計應該從立項時開始介入,主機廠在通過市場調研和用戶需求分析等調研方法,分析出市場上存在的潛在需求后,從平臺化角度評估需求的導入和定型驗收,和樣車研發同步進行。

在得到用戶需求分析和市場調研的數據后,將這些數據轉化成為設計目標,得到初步的概念設計,之后在功能定義和產品開發達成一致之后,即項目目標正式確認,可開始進行細節和具體流程的設計。

設計要知道!-如何著手車載設計

2)功能落地,交互原型

UX策略出來后,也在這一步確立交互設計的框架。

設計要知道!-如何著手車載設計

一個合格的HMI設計師,不僅需要對當下科技發展有著敏銳的洞察力,同樣需要了解一些技術通識,像Web設計師需要了解些網頁代碼常識一樣,都是為了更好的幫助設計落地。

汽車不同于移動互聯網產品,它的約束性或者說是局限性更強,對于HMI設計師而言還是有一定門檻的。例如:要了解相應的法規要求,要懂一些開發邏輯和實現方式,要明白功能上限等等。

也要懂一些實現方式來講,舉個例子:大型停車場的尋車問題該如何解決?在沒有網絡不能使用手機導航的情況下該借助什么技術來解決?使用藍牙?使用手機指南針做關聯?使用圖像分析?使用遙控照明?等等一切的猜測,都是建立在一些技術常識背景之上的。

當定義了某個需求功能轉化后,既了解功能背后的需求又知曉實現方式,會更有效的讓后面的信息流程與交互文檔行云流水。

3)視覺優化,設計交付

原型交互設計階段完成之后,之后便進入視覺概念設計階段,保證概念設計方案會以轉專業性結果呈現。會制作設計規范,然后輸出關鍵頁面。

設計要知道!-如何著手車載設計

在HMI設計中,如何進行差異化設計也是讓我頭疼的問題。

近幾年互聯網造車大軍突然闖進了之前還算比較祥和的汽車市場,行業的待顛覆性質或趨勢以及激烈的競爭,使得整個行業的產品品質逐步提升,消費者的選擇也變得多了起來。

正因如此,尋找真正適合自己品牌的差異化,也是在行業內眾多車企脫穎而出的關鍵點。

就目前自主品牌市場來看,用以“逃避思考”的降價手段已經不再那么好用,這也不是解決同質化的長久之計。

主動出擊形成差異化最經常的做法就是,尋找行業中普遍賴以生存的優勢。而你選擇放棄這個優勢,從而使競爭對手難以跟進或者不在意你的策略,進而形成差異化。

關鍵在于組織體系龐大的車企,是否有勇氣為了建立新的競爭優勢而摒棄已經建立起來的一切。

之所以互聯網造車來勢洶洶,也正是因為它們看到了趨勢和市場需求,敢于大膽做一些傳統車企不太敢輕易嘗試的事。

4)開發評估,可用性測試

設計接近尾聲,乙方設計團隊也會做自我設計評測報告,對設計進一步改良,制定評測規則后,以理性打分方式,測評各個體驗模塊的分數,然后逐一優化。

整個項目過程會經歷概念設計、設計團隊支持和交互效果驗收。

在這個環節中,會制作交互demo和搭建虛擬演示臺架,并且在此增加一輪設計走查,模擬設計執行落地后的測試工作。

這也是占用人力最多的深入交付階段,往下推進會比較順利。

完成整套HMI設計時,我們會在汽車模擬臺架測試交互效果。通過臺架仿真測試,或者提供特定評價用車和培訓用車以及進一步的分析和質保路試。

進行體驗驗證之后是系統開發、硬件開發、軟件開發、整車測試與評價。即可開始生產批量試制(PVS)。

5)迭代優化,修改反饋

最后是工程開發驗證階段,跟進實車功能測評,生產批量試制流程凍結后,會進行批量生產前總演習(OS),全面驗證批產。所有流程環節都驗證成功凍結后,產品則開始投入批量生產(SOP)。

即使上市后的產品是基于前面精心規劃、具體分析、不斷調整后的結晶,但必須要承認,它仍然不是完美的。

因為用戶總會有新的需求出現,并且真實的用戶需求是在用戶使用產品中被不斷發現和滿足的,所以迭代對于汽車廠商或者HMI設計師來說,是提升用戶體驗的最佳階段。

2. 汽車HMI設計人員布置

設計要知道!-如何著手車載設計

二、設計分析

產品設計保證充分的搜集、整理、歸納、分析、總結,產品才可能具備持續性的競爭力。

所以,積極跟蹤市場反饋,及時整理分析、迭代是不斷提升用戶體驗的必經之路。

隨著造車新勢力而且用戶研究與設計流程整合的方式能夠幫助汽車制造商在競爭激烈的汽車行業中先人一步博得用戶喜愛。

HMI設計師這個職業,最忌諱的就是“我認為”這三個字,所設計的產品都不知道什么樣的用戶在用,即是再好看,也是沒有靈魂的空殼。借用老舍先生的一句話,那就是:等著瞎貓碰上死耗子。

總而言之,找準目標用戶,透過現象看本質。

1. 用戶研究

用戶訪談數據挖掘是兩個了解用戶最常用的方式。

設計要知道!-如何著手車載設計

關于用戶訪談需要小心判斷用戶的真偽需求,經過判斷的需求求才是需要耐心挖掘或經過分析后的核心需求。

用戶屬性信息,是分析用戶畫像的基礎。比如一款車付款用戶是男性,使用用戶是女性,所以在用戶訪談之前就需要加上甄別條件。

關于數據,首先設計師自己需要有一個明確的目的,不同的目的獲取結果的途徑或者方式不一。

不同用戶數據可以幫助設計師做出判斷,但是需要經過過濾后的數據。數據還有一個透析需求(需求來自規劃、用研、反饋、競品分析、產品數據分析等)的重要作用,可以用來幫助尋找痛點、優化迭代、辨別需求真偽等等。

2. 競品分析

對于競品可以分為直接競品間接競品,競品分析的幾個思考維度基本在戰略、行業競爭、運營角度、技術層面、用戶角度、盈利模式、產品定位、交互方式、信息架構、功能這幾個層次。

設計要知道!-如何著手車載設計

建議設計師不僅可以從直接競品對比入手,新交互、新設計也可以從間接競品入手,可能會更多啟發。

競品分析的方式:

  • 展廳體驗
  • 車展
  • 國內外汽車論壇
  • 網上汽車設計

3. 趨勢分析

?????????????????????????????????????????????????????????????????????????????????????????????????????????????汽車HMI設計是個多元化的學科,談及趨勢,所涉及到的問題包羅萬象:

  • 技術趨勢
  • 功能趨勢
  • 系統應用趨勢
  • 用戶行為趨勢
  • 環境趨勢
  • 視覺風格趨勢
  • ……

一切前瞻性趨勢的分析都是在定基調、定方向。?????????????????????????????????????????????????????????????????????????????????????????????????????????????

1)用車場景可能性的問題

車作為用戶生活的第二空間,與汽車之間的粘性遠比我們現在所能想象的要更強。

上下班出勤場景、接送孩子場景、情侶戀愛場景、車內聚會場景、車輛出借場景、長途出行場景、自動駕駛場景、共享租賃場景、車外交互場景、智能家居互聯場景等,都在我們與汽車的粘性范圍之內,都需要交互設計師深度挖掘。

設計要知道!-如何著手車載設計

本質上通過座艙內軟硬件協調營造出特定的互動場景模式,增強智能座艙的空間娛樂屬性。

在不同的用車場景下可以滿足用戶的不同需求。以及根據場景、用戶情緒分析推薦適合的路線和目的地,根據用戶情緒推薦音樂分類。

當然,想象空間不僅僅是在座艙內部, 外部也有很多創意思考。

主要的方法論就是通過結合視聽觸嗅的感官基礎觸發,把相應用到的功能整合在一起提供完善的一整套座艙體驗設計。多個應用服務能力結合完成一個完整的體驗過程。

未來的萬物互聯肯定是要到來的,是家空間和?空間更多的硬件、信息互聯互動。

有時候通過?機終端的賬戶或者 APP 達到打通后,讓兩個場景下的更多智能硬件可以互聯衍?出各種有趣的信息交互。

設計要知道!-如何著手車載設計

尤其是自主系統下的生態的完善,比如做的很好的蘋果生態,基于兩個空間中智能硬件的互聯可以衍生出許許多多的新交互場景,讓人們可以更加便利的控制兩個空間的互動。用戶在統一的生態下操作也更便捷,體驗也更好。

3)多模態交互的問題

新的交互技術諸如語音交互、手勢交互和眼動交互等,有效 用戶在駕乘中的用戶體驗。人-車-信息-環境。

設計要知道!-如何著手車載設計

無論是傳統汽車還是無人智能駕駛汽車,都是通過協調或優化四者之間的關系,來獲得最優的駕駛交互體驗。

就人車關系而言,智能無人駕駛在不斷弱化人對車的操控性,強化環境和信息感知處理能力,這是其中的一個轉變。

三、設計原則

車載HMI設計和普通C端產品不一樣,每款車都有特定的人群定位,比如轎跑型和商務型的不同車型,在視覺設計和交互設計的時候就會有區別。

所以項目立項時就需要做大量調研的工作。從多次的需求討論會中可以腦暴出一些想法,并可嘗試多種風格方案,最終得出調研與評審結果。

1. 視覺原則

在視覺設計上我們主要注意一下五個視覺層面。

設計要知道!-如何著手車載設計

1)顏色設計

顏色設計上以國標為基礎為大前提,設定符合車載場景的取色類型。

顏色對比度符合,圖文對比大于7:1,背景建議使用深色。

飽和度和明度這兩個因素的值之和盡量小于180,輔助色和表狀態顏色可參考設計原則的文章。

設計要知道!-如何著手車載設計

圖片來源于百度車機平臺

2)字體

中控與駕駛員的距離處在70cm-85cm之間,用戶在掃一眼的過程中即可準確地看到重點信息。

保證易讀性。界面文字需滿足以下要求:

  • 最小可識別文字尺寸:5.4mm
  • 字體層級:區分文本主副層級,字號差距需保持4-6sp
  • 需要用戶閱讀和處理的重要段落文字不超過20個字(700字/分鐘,2秒內讀完)
  • 對于需要用戶關注的文本信息可通過增加字重的方式突出內容

設計要知道!-如何著手車載設計

3)ICON

ICON的設計形式,可更多結合應用的內容,應注意在內容與形式結合時,視線上要保持一致性,可有助于在一秒的安全時間內讓用戶快速瀏覽并判斷信息。

點擊是交互行為中最為常用的動作,為確保用戶點擊操作的易用性和成功率,操作按鈕及熱區需滿足以下規則:

  • 圖標:最小的圖標尺寸為6.9mm,推薦圖標大小為9.2mm。
  • 熱區:最小10.7mm,推薦熱區15.3mm以上,熱區間隔3mm以上。

設計要知道!-如何著手車載設計

圖片來源于百度車機平臺

4)內容排版

車載以駕駛員的操作為主,功能布局盡量設計在離手最近的位置,縮短操作距離,盡可能將熱區放大,展示信息放在右側。

層級最多不可超過3-4層,所有信息按照使用場景、功能分組展示。

閱讀瀏覽要滿足Z字型和F字型?;炫诺臅r候建議使用一種字體。

設計要知道!-如何著手車載設計

圖片來源于百度車機平臺

5)品牌IP

智能汽車,搭載了一個智能系統,除了駕駛需求,對于HMI融入品牌元素也相當重要,品牌化是智能座艙視覺設計重要的發展趨勢之一。

現在主要品牌的體現形式是車載的IP管家,他有具體的名字,可以用語音喚醒。

設計要知道!-如何著手車載設計

2. 交互原則

設計要知道!-如何著手車載設計

整個車載HMI設計過程中,最基本的六個原則

  1. 安全性原則(HMI設計首先考慮的必須是以安全為第一導向?? ?? ?? ?? ??
  2. 及時反饋原則(時刻保障關鍵信息是最高優先級的,更要有能力面對復雜的應用場景,比如如油耗、故障、雨雪天、超速、疲勞等需要更加敏感。)
  3. 完整性原則(頁面信息根據某些關聯性,分區塊進行顯示,這將有助于用戶更容易的建立信息位置記憶)
  4. 簡單學習原則(隨著屏幕越做越大,需要駕駛員操做的功能也越來越多,所以駕駛員會因為復雜操做,面臨交通路況擁擠的情況下的額外壓力。)
  5. 信息可視化原則(盡可能的采用圖像化/擬物化風格,避免或減少使用復雜的、過于專業的、技術性的圖標和術語。)
  6. 情感化原則(情感化需求也是必然的需求。可以根據用戶的情感化狀態來處理車內的情感化系統)

3. 場景化設計

在討論如何對超寬一體屏進行體驗設計前,我們需要對人在不同場景下的多樣化需求有大致的了解。為此,我們將人與車空間關系的場景劃分為四大方向依次是:生活、娛樂、辦公和共享。

如:

  • 生活、娛樂場景下,全家出游,疲憊的人可以直接在車上睡覺休息,無聊的人可以玩游戲,車內空間采用多音道技術,不同的音道技術可以避免彼此干擾。除此之外,還可以起到保護隱私的作用,滿足每個人對個人空間的需求。
  • 在辦公場景下,人可以在駕艙內進行各項辦公活動,諸如:視頻會議、電腦辦公、商務信息處理等。
  • 在共享場景下,車不僅可以是運輸人的移動工具,還能成為運輸貨物的移動工具、移動商城、移動酒店等等。

設計要知道!-如何著手車載設計

3. 交互方式

多模態交互的方式未來肯定是大趨勢,現有最常見的有觸控、語音、手勢

觸控一種是通過按鍵控制;一種是通過觸屏控制。

都是通過不斷的觸控功能按鈕行程鍛煉肌肉記憶,現在的趨勢越來越趨向重觸屏,輕按鈕,這樣不僅系統迭代成本小,功能可以動態分布。

但是對于一些精準調節的功能還是按鍵控制好一些。

語音交互被認為是車內場景下最自然的交互方式,而語音交互需要一個載體來傳達多樣化的情感。

語音控制的前景主要在于兩個因素:

  1. 一是可以把除了界面以外的利用起來,與HMI自由交談
  2. 二是最小化HMI手動操作產生的干擾,增加安全性

設計要知道!-如何著手車載設計

手勢交互是對語音交互、觸控交互的很好補充,能夠讓車主通過簡單的手勢和語音就能完成車內的交互任務,也是能夠增加交互趣味性、表達情感、傳達情緒的另一個自然交互方式。

常用的手勢:

  • 單指滑動(上下左右)
  • 雙指滑動(左右)
  • 五指抓取

設計要知道!-如何著手車載設計

HMI的交互手勢不同于手機和IPAD,手機和IPAD握在手里,左右手都可以操作,多指組合的可能性也多,而HMI的手勢定義,更多的是需要滿足駕駛員的使用場景,屏幕是固定在車上的,要規避掉一些不方便的手勢。

比如雙指往上滑動就很不方便,向上推不靈活,也有阻力。

四、設計資源

1. 字體庫(蒙納字庫)

快速獲取信息比時速60英里每小時要重要得多!

汽車屏幕使用的字體必須具有視覺吸引力和品牌一致性,同時還要一目了然,清晰易讀。

本篇文章展示了一系列可以輕松閱讀的字體,這些字體還能夠幫助駕駛員在行駛過程中保持注意力。

1)Avenir Next

設計要知道!-如何著手車載設計

Adrian Frutiger是從過去和未來汲取的靈感而設計的Avenir?(avenir在法語里意為“未來”)。Frutiger在他的設計中加入了一種有機的人文主義元素,將Avenir從早期字體僵硬的幾何風格中解放出來。

2004年,Frutiger與Linotype公司字體設計師小林章先生(Akira Kobayashi)一起復刻了Avenir字體家族,解決了其屏幕顯示的問題,它就是Avenir Next。

幾何元素與人文元素的結合使得Avenir Next字體的易讀性極高,這使其成為汽車HMI儀表盤和顯示器等快速掃視環境下最理想的選擇。

2)Burlingame

設計要知道!-如何著手車載設計

Burlingame?字體是一種相對較新的字體,它設計堅實,外形開放、清晰,易讀性非常高。

這款字體體現了人文主義及手工質感,它是根據Monotype委托開展的汽車用戶界面易讀性研究所得到的結果而進行的修改,使Burlingame成為任何車輛數字儀表盤的不二選擇。

Burlingame字體為了滿足汽車顯示器的需求融合了多種特性:平整的切口,銳利的拐角,超橢圓的(super-elliptical)字碗以及寬松的字間距。

其簡單的形狀和深三角形切口還有助于確保小尺寸字體的清晰度和易讀性,尤其是在低分辨率屏幕上。

3)Frutiger

設計要知道!-如何著手車載設計

AdrianFrutiger是世界知名的字體設計師。他的同名字體設計獨具特色,而且用途廣泛。

Frutiger?字體最初用于機場導視牌,在遠距離及多種角度下閱讀都非常清晰。

作為一種經典字體,Frutiger是人文主義無襯線字體的易讀性與具有優美幾何線條的早期無襯線字體(Grotesque Sans)的結合。

Frutiger因其現代、溫暖的外觀被許多公司和政府采用。這種字體的開放性使其非常醒目,其獨特的字形避免了與其他字體相互混淆。

4)Tipperary

設計要知道!-如何著手車載設計

Tipperary?是一種單線的人文主義無襯線體,具有清晰、開放的字形。

其簡潔的字符十分易于閱讀,也非常適合數字UI顯示。為了制作這款字體,許多經典字體設計被重新詮釋、組合。

于是就有了一款在現代顯示屏技術受限的范圍內仍然表現出色的字體,保留了原有設計的比例和形式,使其成為印刷業最受歡迎的字體。

Tipperary字形的拐角近似幾何形狀的方形,是快速掃視環境下(如汽車儀表,顯示器和界面)的最佳字體之一。

5)Daytona

設計要知道!-如何著手車載設計

Daytona?是由Monotype公司的Jim Wasco遵循易讀性原則而設計的一款字體。

其方正堅實的字符特征遵循的是人文主義的形狀和比例。

Daytona的字形偏窄,可以最大限度地利用空間而且還可以提高閱讀舒適性。圓潤的拐角、開放的字懷以及簡單的字符形狀使Daytona成為Monotype字體庫中最易讀的字體之一。

Daytona字體幾乎在所有的屏幕環境(包括汽車用戶界面、數字儀表盤以及GPS設備)中都能表現得非常出色。

6)Akko

設計要知道!-如何著手車載設計

Akko?及AkkoRounded字體通常會用兩個不太可能放到一起的詞來描述——“工業的”和“精致的”,這其實得益于設計師小林章先生(Akira Kobayashi)對最初嚴謹的工業概念的弱化。

Akko這個名字來源于著名設計者名字和姓氏的前兩個字母。

Akko設計友好且非?,F代化,清晰易讀而且又非常時尚。Akko字形的“裸骨”骨架降低了其他設計風格中出現的視覺擁擠現象。

7)Mayberry

設計要知道!-如何著手車載設計

Mayberry最初是為了模仿Tiresias?字體家族的技術而設計的,以便用于機頂盒電視設備和用戶界面。比起Tiresias,Mayberry在美學和功能方面都有顯著的改進。

Mayberry包含真正的意大利斜體以及多種字重,可以在低分辨率設備上提供高質量的閱讀和最好的可讀性,同時它還具有一系列能夠吸引專業人士的OpenType功能。

Mayberry是一款字寬被輕微壓縮了的人文主義無襯線字體,這樣可以在較窄的文本欄顯示更多的可讀文本。開放的字懷與垂直的應力都有助于在低分辨率的情況下保持Mayberry設計的可讀性。

8)TradeGothic

設計要知道!-如何著手車載設計

TradeGothic字體家族是美國平面設計作品的主打產品,自1948年由Jackson Burke發布以來在一直不斷地被使用。這一設計在國際上也很受歡迎,而且曾一度被視為Helvetica ?家族的競爭對手。

2008年的版本名為TradeGothic Next,這款字體改進并擴展經典系列,還將它引入到一個流行的新時代。這種不和諧卻為Trade Gothic設計增添了一點質樸的自然主義色彩,這也是許多設計師回歸的原因之一。

TradeGothic Next是最清晰的早期無襯線字體類型。該設計具有開放的字形及寬松的字間距,讓人感覺容易接近,這些都使其在需要掃視的閱讀環境下表現良好。

9)Slate

設計要知道!-如何著手車載設計

Slate字體家族將出色的功能及視覺的優雅融合成一種卓越的交流工具。很少有字體具有這種設計的美感和力量。

Slate是RodMcDonald的作品,Rod McDonald是一位屢獲殊榮的字體設計師和刻字藝術家。在四十年的職業生涯中,McDonald參與了加拿大國家盲人研究所(CNIB)開展的字體易讀性和可讀性研究項目。

在那里,McDonald了解到哪些設計特征更適合最大限度地提高字符易讀性及文本可讀性。

Slate是一款風格化的人文主義字體,提供了一種溫暖的視覺體驗。即使在具有挑戰性的技術環境中,Slate也能為用戶提供舒適的閱讀環境。

10)Unitext

設計要知道!-如何著手車載設計

HendrikWeber的Unitext字體設計清晰、簡潔,是一款適應性強、識別效率高的無襯線字體,風格介于怪誕與人文主義之間。

Unitext深入研究了設計機構對于品牌字體的需求,以及設計師Hendrik Weber本人為公司定制字體的經驗。

由于了解用于品牌推廣的無襯線字體的流行度——還有它們的缺點 —— Weber開始著手創作一些可以適應不同環境但又不放棄友好性的字體。可讀性也是一個重要的考慮因素。

Unitext是一種新型混合風格的字體,它具有現代感及前瞻性的外觀,可讀性高,并且極具未來主義的優雅。

完美的易讀性。無與倫比的設計。

Monotype的字體創意總監Steve Matteson將這些字體組織到一起來展示一系列可以輕松閱讀、并可以幫助駕駛員在行駛過程中保持注意力的字體樣本。

通過為儀表板或HMI選擇合適的字體,您將能夠確保您的汽車顯示屏清晰易讀,并且擁有觀眾喜愛的無與倫比的設計。

2. 組件庫(這里)

和正常的搭建C端、B端組件庫一樣的,先是把頁面中的元素按這些維度拆分散成原子、分子、組件、模塊、頁面。

設計要知道!-如何著手車載設計

1)制定組件庫框架

框架可以從現有界面上按功能模塊梳理。

設計要知道!-如何著手車載設計

2)每個頁面拆分組件

設計要知道!-如何著手車載設計

3. 走查表

設計走查自測表:阿里車載-設計走查自測表。

為方便車載小程序設計,提供輕量化的小程序設計走查表以供參考。

可用于:

  • 項目前期設計自測
  • 項目中研發自測檢查
  • 項目上線后設計/產品協同開發同學完成自測問題
  • 查缺補漏規避風險點

設計要知道!-如何著手車載設計

五、設計適配

1. 主流設計屏幕尺寸

1)橫屏尺寸

經過對主要車企車型的分辨率收集與分析,目前市面上主流屏幕分辨率比例以 16:9 和 8:3 居多,能覆蓋到72.39%的車型。并以此為縮放的基準屏。

設計要知道!-如何著手車載設計

2)豎屏尺寸

設計要知道!-如何著手車載設計

2. 尺寸和適配

1)橫屏適配

以高度為基準,等比例縮放尺寸中高度不變的情況下,橫向寬度縮放只需要填充內容。

比如:1280*720設計稿要適配到1824*1200時,高度按比例縮放到1200的尺寸為2133*1200,高度不變,只需要把橫向內容2133壓縮至1824.橫向的占比按照1824處理。

特定情況下適配導航會出現運營文案少的情況,針對于此可以單獨針對此車機刪減右側的功能入口icon。

設計要知道!-如何著手車載設計

2)豎屏適配

寬度一致時:固定寬度時,屏幕高度上適配,導航欄固定,播放器位置固定在頁面底部展示,中間內容填充區域適配。

寬度不一致時:等比縮放寬度,在向高度上適配。

設計要知道!-如何著手車載設計

設計要知道!-如何著手車載設計

參考鏈接:

  • https://www.zhihu.com/question/28078272/answer/39551206
  • http://www.aharts.cn/u/371477
  • http://www.itas-hk.com/news/yjyb/448.html
  • https://baijiahao.baidu.com/s?id=1652700903627827020&wfr=spider&for=pc
  • https://www.zhihu.com/question/326120874/answer/697093219

圖片來源于網絡,侵刪

小插曲

我在參加人人都是產品經理2021年度作者評選,希望喜歡我的文章的朋友都能來支持我一下~

點擊下方鏈接進入我的個人參選頁面,點擊紅心即可為我投票。

每人最多可投3票,投票即有機會獲得百萬驚喜禮品&起點課堂千元豪禮哦!

投票傳送門:http://996.pm/7drpK

#專欄作家#

郝小七,微信公眾號:七醬設計筆記,人人都是產品經理專欄作家。蜻蜓FM高級UI設計師,5年工作經驗。專注于體驗設計,歡迎各位同學一起交流。

本文原創發布于人人都是產品經理,未經作者許可,禁止轉載。

題圖來自Unsplash,基于 CC0 協議。

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 干貨滿滿!請問,這個阿里車載設計走查表可以分享一下嗎,或者哪里可以下載

    來自福建 回復