中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

導語：本文作者入行做車載HMI已有2年余久，沉淀輸出了一些行業內容的內容。HMI行業還是一片藍海，很多設計師都不敢輕易的進入這個新型的行業，覺得有難度、門檻、視覺要求高。這篇文章先帶你入行，文章以一些HMI基礎知識作為講解，在設計規范的內容作者會添加很多干貨，結合實際案例講解。

三、布局規范

HMI的設計和其余終端設計，最大的差異就在與布局，布局是整個頁面設計的框架，也是最重要的內容之一，在講該模塊內容，我會從實際項目案例出發。

開始制作車載UI系統，需要和汽車廠商確認車載UI可在屏幕中，設計的尺寸區域（注：其中“屏幕”是指應用正常工作空間而不是到邊緣的全部空間，有的廠商把固定按鍵也鑲嵌這塊區域中）。

1.?屏幕尺寸有多少種類別？

我們先要了解一下熱門和主流車機分辨率：眾所周知我們車機上的屏幕尺寸和分辨率種類可以說是種類繁多，在設計過程中 設計師主要還是關注屏幕的分辨率是多少？（ 需要我們設計的屏幕為?儀表盤、中控、有的車載還包含有副駕駛和后排娛樂屏幕 。）

1）特斯拉（Tesla）

Model3 1920*1200 ?15英寸（底部控件的尺寸為120像素是固定 ）Model S/X 用豎屏設計 分辨率 1200*1920。

2）蔚來?

• ES8 10.4英寸 分辨率 1600*1200
• ES6 11.3英寸 分辨率 1600*1400

3）理想ONE?

比較特殊它擁有4塊屏幕，儀表盤12.3英寸 1920×720? / 中控屏16.2英寸 2608×720；副駕駛娛樂屏12.3英寸? 1920×720? / 再外加功能控制屏 10.1英寸的1280×720。

4）小鵬

G3 豎屏幕 15.6? 1920×1080? ?P7控屏在目前汽車產品中屬于分辨率較高的梯隊 2400×1200 精度超過2K（普及一下 2K分辨率標準為2048×1080像素）。

接下來給大家觀看蘋果的CarPlay系統分辨率和谷歌車載系統。

CarPlay系統分辨率：?800 * 480、 1280 * 720、960 * 540、 1920 * 720。

相信大家已經找出規律了，在設計橫屏的時候高度基本都為720px，其余橫屏幕按照比列縮小。

這塊內容非常重要，以至于關乎到后面整個系統的布局方式，蘋果的CarPlay、谷歌Android Auto、國內的百度carLife+等 都有著自己的車載系統，如有的車企屏幕分辨率不一致，就無法適配成功，會出現拉伸等現象，除非通過定制化服務重新按照廠商的尺寸去重新搭建一套。

我們項目中涉及到的屏幕和CarPlay尺寸大致很像，但布局方面我們有這自己的想法，后面在自適應布局會有所提到。

2. 間距的規范制定

制定一組間距值，用于布局中元素和組件之間的固定縱向和橫向的間距，參考規格布局8像素點網格上構建，這意味著規范中的UI組件和元素之間相隔8px的倍數。

谷歌Android Auto間距規范一共制定了常用的九種數值，P0 – P8：

注意事項：提供4px、12px間距大小，是為了對齊較小的元素之間的距離，這兩個數值謹慎使用，在大屏幕車載系統內，也有很多間距需要大于96px，因此在對于這些數值制定規范的要求就是8px的倍數即可使用。

說到這邊肯定會有人有疑問，我們在做規范能不能將間距不設定成8的倍數，4、5、6……倍數是否可行呢，當然是可以的，“規矩是死的，人是活的“。只要是按照倍數疊加完全都OK，如果選定一種倍數，就不能加入其他倍數，如果頁面出現多種間距會使得頁面沒有節奏感，打破了親密性原則，下面干貨來了：

3. 車載模塊中布局

對于想接觸車載設計同學非常友好講一下通用的布局，具體交互設計等待我后續更新文章，這次就簡單按照1920×720分辨率每個模塊我都會稍微帶一下。

4. 自適應布局

講完前面每個模塊的大致布局，接下來我們來探討一下自適應布局，這個真的非常非常?。?！超級重要，工作后期經常會遇到這個問題，甲方爸爸后續需要增加屏幕分辨率的需求。我們前期在布局上花費的時間相對較多，但后期維護起來可以減少你很多工作量，前期需要你規劃好基礎框架。

下面拿實際做過的案列來陳述：拋出一個問題：我們如何將分辨率1920×720頁面的內容 轉變成1280×720 呢？

（有同學說 直接丟開發然他們寫自適應布局）導航相關頁面需要調用地圖的接口，這個開發是可以直接去寫自適應，但其余元素還是需設計師重新來排版。

（還有人說直接縮放比列，調整頁面布局）這個方案在比例相差很大時候是行不通的，但同比列或者很相近是完全OK，正巧我們項目上有800×480分辨率，和1280×720 極其相似。

（還有人表示不服：折疊某塊區域內容，將該區域內容做成icon點擊后彈出來）該方法可以使用在部分內容。

有的模塊內容沒法降低層級，這個辦法就不行，遇到這類的情況我們就直接將這塊內容適配做成1280×720尺寸。

如果前兩種辦法都行不通，有的內容就得需要做彈性布局控件了，例如設置頁面，當中間空間很大的時候，放置到短屏中可以根據彈性布局拉伸該控件長度，拉至適配該屏幕的設計，如有需要請留言，后續彈性布局我會寫一篇文章詳細說明使用。

我們項目多種分辨率進行轉化基本都按照這些方案推進下去的，來一句雞湯：辦法總比困難多，真的只要用心做事情，沒有什么困難能難倒你的，還有不要做理想主義者，要做實踐者，實踐才會見真理。

謹慎重新改變布局 ： 第一是增加開發工作量，其次就是增加用戶的學習成本，當然，屏幕是豎屏的時候則就需要重新布局，因為橫寬比列變成了相反數值（旋轉屏幕大家可以去看看比亞迪的唐、漢車型）。

上訴的內容都是我們一步一個坑踩過來的，“且看且珍惜”。

四、圓角的規范

1. 如何制定圓角的大小規則

1）更圓的角和全圓角的使用

對主要動作和組件使用更圓的角（更大的角半徑 or 全圓角），是需要重點突出的，圓形對大多數直線形狀具有更大的視覺影響，如果在頁面有足夠空間的前提下，全圓角形式會更加，和其他按鈕做出反差，鼓勵用戶去點擊。

比如，全局消息通知按鈕、電話模塊中接聽、掛斷、下拉負一屏中的按鈕等 （下方是練習稿案列）：

2）較低的圓角和直角的使用

對于不需要 or 低強調的元素，使用較低角半徑 or 0px圓角=直角。

例如：工具欄或列表可以用較小的圓角，專輯封面不需要再強調，所以直接將它降到0px，我們項目音樂專輯大封面就用的直角，具體問題需要具體去分析，像音樂控件的外輪廓就是帶圓角的，因此專輯封面在容器里面就必須帶有圓角，不然設計風格則就不統一。

還有一個模塊，就是在音樂分類的情況下會有很多專輯封面，我們對比一下兩種方案：有圓角or無圓角，兩張圖對比下來，帶有圓角的專輯封面，邊角有更明顯的邊緣產生了視覺差的感覺，而直角的專輯看起來就沒有,不易突出，因此不太可能引起我們的注意。所以在網格布局中，圓角的效果更好。

3）谷歌對于圓角的定義

在設定圓角規則時，需要注意一個事項：大小種類不宜太多，不然顯得雜亂無章。

注意：即使應用布局是在8dp網格上構建的，但仍會提供4dp的半徑大小，以幫助在較小的組件中成形元素。該值應謹慎使用，因為它不是8dp的倍數。

總結：圓角還是直角沒有對錯之分，合適的才是最好的。

五、圖標規范

1.?圖標的種類（車載圖標分為應用程序圖標、系統性圖標）

1）應用程序圖標

現在HMI的設計趨勢已經去掉了應用程序圖標，取而代之的是卡片化的設計方案，簡單說一下卡片式設計有兩大好處，第一，把學習成本降至最低，第二，增大的接觸面積讓駕駛時誤觸率也降到最低，給到用戶最直觀的體驗就是簡單易用。不過有的汽車廠商對這一塊還是有需求，我們就稍微再提一下。

我自己也負責過有應用程序圖標的項目，在1920×720中 為160px 分辨率和蘋果@3x 分辨率相同 ；在相對較小的屏幕中應該按照比例同比縮小，如同800×480分辨率中 首頁中的應用程序圖標 為80px ，這是如何計算的呢？

項目中還有一款車型的屏幕分辨率為1280×720，由于屏幕變窄，應用程序圖標需要縮小到120px，高度720 and 480 有一個共同240的倍數，所以最終小屏幕的應用程序圖標為80px，圓角大小也隨之而變：R：24/18/12 。其余分辨率按照實際情況使用。

2）系統性圖標（后續HMI組件庫搭建文章中我會詳細的講解）

該系統提供了許多小圖標（代表常見任務和內容類型），供導航欄和選項卡欄中使用。最好盡可能使用這些內置圖標，因為它們是人們熟悉的。

2. 圖標的尺寸

1）大廠是如何制定圖標尺寸

很多博主在講到圖標尺寸的時候都是一筆帶過，拿到別人得出的結論，卻沒說怎么計算出來，對于車載來說，前期發布這些研究報告的內容極少，所以我對圖標的計算想找到了計算方式，如果大家想知道怎么換算的話可以查看https://zhuanlan.zhihu.com/p/158099749。

根據百度IDX 駕駛體驗中心，在對于《車載HMI界面效果客觀指標實驗報告》在基于視距為50cm，計算出最小圖標為9mm 推薦使用12mm。

視覺上的1cm的實際像素是多少呢？這就是一個錯誤的想法，上面文章中也有提到屏幕分辨率無法與物理長度單位進行轉換（實際項目工作經驗告訴我，因為相同的屏幕大小 但是分辨率不一樣 所以得出的結果不能共用）。

2）PPI的計算

我就大概講一下計算原理，這個根據屏幕的分辨率，我做過一款相同屏幕尺寸的車機，都是8寸屏幕，但分辨率一個為1280×720 另外一個則為800×480，每一個格子為一個像素。

3）最小圖標尺寸計算

接下來找一下分辨率 1280×720 最大公約數為80 最后得出結論屏幕的比列16:9，兩邊比例的平方相加 = 屏幕英寸的平方，根據勾股定理 （16X）^2 +（9X）^2=8×8 最后 x 算出的結果為0.4357。

16:9的8英寸屏幕 長度（單位：英寸）=0.4357×16 =6.9712 ?寬 =0.4357×9=3.9213，國際計算單位1英寸 = 2.54cm，所得出屏幕的長度（單位：厘米）=6.9712×2.54≈17.7cm，寬 =3.9213×2.54≈9.96cm。

• 分辨率：1280×720 寬度約等于10cm來計算，720/10 = 72px
• 分辨率：800×480 由于他們屏幕大小一致（英寸） 480/10=48px

得出結論：視覺上的1cm的實際像素是有所差距的。

按照設計規則 ?按照4的倍數來制定，因此最小圖標為40px（這個結論只是作為推薦使用，在做項目的時候，變數有很多，甲方爸爸就喜歡超級大的，你也沒辦法，所以還是按照項目來制定）。

為了計算這個我還特地的回顧 高中學習的開根號、初中的最大公約數都搬出來了 幸好當時數學還算是個小學霸，哈哈哈??♂???♂???♂?

4）下面展示一下

谷歌Android Auto 圖標大小規范：

• 基礎的圖標：主圖標：44px，次要圖標：36px，第三方圖標：24px；
• 頭像的使用：小頭像：56px，中頭像：76px，大頭像：96px；
• 百度車載生態開放平臺下載了他們組件庫，進行了研究；
• 基礎為圖標：48px ?次要圖標40px（最小圖標尺寸）。

這邊還要說一下，對于大圖標的尺寸設定，會有很多尺寸icon，后續我還會在輸出關于在車載圖標詳細的內容，盡請關注吧。

3. 圖標的點擊區域

1）圖標觸摸區域分為?駕駛中使用?和?靜止中使用?

例如說駕駛中需要調節空調的內外循環，原本老車機的硬按鍵替換成了屏幕中的按鈕，原有的硬按鍵已經通過長期使用已經有了記憶性，并且有觸感并且操作硬按鍵大小適中，所以在操作中減少了操作時間降低了危險系數。

新能源汽車在設計的時候可以通過增大觸摸區域降低誤操作、無法點擊使得駕駛員視野長時間遠離方向盤的情況，研究表明視野超過2秒以上停留就會存在危險。

靜止使用例如：在設置頁面中調節車輛設置中的屬性，巡航模式、電動尾門打開百分比的調節等等。

2）谷歌制定觸摸區域的規則

最小觸摸目標尺寸為76 x 76px ?，需要在單個圖標設計基礎上再額外增加一塊觸摸區域，易于駕駛中可操作，在靜止使用的話，我們可以遵循蘋果設計規范中最小手指觸摸的區域為44x44px。

這是我根據實際項目并在車內進行路測（路測：駕駛中測試）中得出結論。還有一種特殊情況：文字+圖標組合點擊區域，在icon很小的時候也可以考慮將文字也組合一起，增大點擊區域。

4. 圖標設計的統一規則

1. 統一風格
2. ?統一光源
3. 統一線條粗細
4. 統一圓角/直角
5. 統一傾斜角度
6. 斷點的距離、大小統一

5. 最后最一個小插曲：命名的規范

之前經常有小伙伴問我，落地項目的icon切圖命名規范怎么制作？就拿我之前做的風格稿首頁來說，首頁音樂卡片中的“下一首”的圖標如何命名。

首先分析這個icon在那個頁面當中 or 用在哪里，接下來就是他的屬性是什么 icon 還是button ，其次就是這個icon代表什么，這個icon的大小，因為在一個系統里面會有重復功能icon，所以是有必要增加大?。ㄟ@塊內容是選填項），最后在增加這個icon是處于什么狀態下，狀態分為：禁用、常態、按下、選中。

最后呈現：首頁_音樂_下一首_常態 ? ，對接開發應該是翻譯成英文。

有時候英文命名也可以用縮寫比如設置：setting 你直接可以寫成set ?icon ??ic ? button??bt（如果全局使用就使用 ?? All）。

總結：

聽完小米的發布會，是我觸動較深的一次，視頻彈幕中滿屏刷著“干翻特斯拉”，小米造車一誕生就背負著全民的期望，創始人雷軍已經功成名就，但還是愿意押上全部的聲譽和未來十年的人生，全力all in，我心中只有敬意，祝小米早日造車成功，“干翻特斯拉”，我們設計師也愿意和這個行業賭一次，行業深耕下去，砥礪前行。

文章中如有不足之處，歡迎補充交流，我們下期見 ???

上篇：《如何搭建HMI：設計規范（上）》

作者：設計界的影帝

原文鏈接：https://www.zcool.com.cn/article/ZMTIyNjAxMg==.html

本文由@設計界的影帝 原創發布于人人都是產品經理，未經作者許可，禁止轉載。

題圖來自Unsplash，基于CC0協議