国外亚洲成av人片在线观看,热99re久久精品这里都是精品,天堂网在线最新版www,国产成人av区一区二区三,51久久成人国产精品麻豆

導(dǎo)語：本文作者入行做車載HMI已有2年余久，沉淀輸出了一些行業(yè)內(nèi)容的內(nèi)容。HMI行業(yè)還是一片藍(lán)海，很多設(shè)計(jì)師都不敢輕易的進(jìn)入這個(gè)新型的行業(yè)，覺得有難度、門檻、視覺要求高。這篇文章先帶你入行，文章以一些HMI基礎(chǔ)知識(shí)作為講解，在設(shè)計(jì)規(guī)范的內(nèi)容作者會(huì)添加很多干貨，結(jié)合實(shí)際案例講解。

三、布局規(guī)范

HMI的設(shè)計(jì)和其余終端設(shè)計(jì)，最大的差異就在與布局，布局是整個(gè)頁面設(shè)計(jì)的框架，也是最重要的內(nèi)容之一，在講該模塊內(nèi)容，我會(huì)從實(shí)際項(xiàng)目案例出發(fā)。

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

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

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

1）特斯拉（Tesla）

Model3 1920*1200 ?15英寸（底部控件的尺寸為120像素是固定 ）Model S/X 用豎屏設(shè)計(jì) 分辨率 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控屏在目前汽車產(chǎn)品中屬于分辨率較高的梯隊(duì) 2400×1200 精度超過2K（普及一下 2K分辨率標(biāo)準(zhǔn)為2048×1080像素）。

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

CarPlay系統(tǒng)分辨率：?800 * 480、 1280 * 720、960 * 540、 1920 * 720。

相信大家已經(jīng)找出規(guī)律了，在設(shè)計(jì)橫屏的時(shí)候高度基本都為720px，其余橫屏幕按照比列縮小。

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

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

2. 間距的規(guī)范制定

制定一組間距值，用于布局中元素和組件之間的固定縱向和橫向的間距，參考規(guī)格布局8像素點(diǎn)網(wǎng)格上構(gòu)建，這意味著規(guī)范中的UI組件和元素之間相隔8px的倍數(shù)。

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

注意事項(xiàng)：提供4px、12px間距大小，是為了對(duì)齊較小的元素之間的距離，這兩個(gè)數(shù)值謹(jǐn)慎使用，在大屏幕車載系統(tǒng)內(nèi)，也有很多間距需要大于96px，因此在對(duì)于這些數(shù)值制定規(guī)范的要求就是8px的倍數(shù)即可使用。

說到這邊肯定會(huì)有人有疑問，我們?cè)谧鲆?guī)范能不能將間距不設(shè)定成8的倍數(shù)，4、5、6……倍數(shù)是否可行呢，當(dāng)然是可以的，“規(guī)矩是死的，人是活的“。只要是按照倍數(shù)疊加完全都OK，如果選定一種倍數(shù)，就不能加入其他倍數(shù)，如果頁面出現(xiàn)多種間距會(huì)使得頁面沒有節(jié)奏感，打破了親密性原則，下面干貨來了：

3. 車載模塊中布局

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

4. 自適應(yīng)布局

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

下面拿實(shí)際做過的案列來陳述：拋出一個(gè)問題：我們?nèi)绾螌⒎直媛?920×720頁面的內(nèi)容 轉(zhuǎn)變成1280×720 呢？

（有同學(xué)說 直接丟開發(fā)然他們寫自適應(yīng)布局）導(dǎo)航相關(guān)頁面需要調(diào)用地圖的接口，這個(gè)開發(fā)是可以直接去寫自適應(yīng)，但其余元素還是需設(shè)計(jì)師重新來排版。

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

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

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

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

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

謹(jǐn)慎重新改變布局 ： 第一是增加開發(fā)工作量，其次就是增加用戶的學(xué)習(xí)成本，當(dāng)然，屏幕是豎屏的時(shí)候則就需要重新布局，因?yàn)闄M寬比列變成了相反數(shù)值（旋轉(zhuǎn)屏幕大家可以去看看比亞迪的唐、漢車型）。

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

四、圓角的規(guī)范

1. 如何制定圓角的大小規(guī)則

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

對(duì)主要?jiǎng)幼骱徒M件使用更圓的角（更大的角半徑 or 全圓角），是需要重點(diǎn)突出的，圓形對(duì)大多數(shù)直線形狀具有更大的視覺影響，如果在頁面有足夠空間的前提下，全圓角形式會(huì)更加，和其他按鈕做出反差，鼓勵(lì)用戶去點(diǎn)擊。

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

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

對(duì)于不需要 or 低強(qiáng)調(diào)的元素，使用較低角半徑 or 0px圓角=直角。

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

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

3）谷歌對(duì)于圓角的定義

在設(shè)定圓角規(guī)則時(shí)，需要注意一個(gè)事項(xiàng)：大小種類不宜太多，不然顯得雜亂無章。

注意：即使應(yīng)用布局是在8dp網(wǎng)格上構(gòu)建的，但仍會(huì)提供4dp的半徑大小，以幫助在較小的組件中成形元素。該值應(yīng)謹(jǐn)慎使用，因?yàn)樗皇?dp的倍數(shù)。

總結(jié)：圓角還是直角沒有對(duì)錯(cuò)之分，合適的才是最好的。

五、圖標(biāo)規(guī)范

1.?圖標(biāo)的種類（車載圖標(biāo)分為應(yīng)用程序圖標(biāo)、系統(tǒng)性圖標(biāo)）

1）應(yīng)用程序圖標(biāo)

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

我自己也負(fù)責(zé)過有應(yīng)用程序圖標(biāo)的項(xiàng)目，在1920×720中 為160px 分辨率和蘋果@3x 分辨率相同 ；在相對(duì)較小的屏幕中應(yīng)該按照比例同比縮小，如同800×480分辨率中 首頁中的應(yīng)用程序圖標(biāo) 為80px ，這是如何計(jì)算的呢？

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

2）系統(tǒng)性圖標(biāo)（后續(xù)HMI組件庫搭建文章中我會(huì)詳細(xì)的講解）

該系統(tǒng)提供了許多小圖標(biāo)（代表常見任務(wù)和內(nèi)容類型），供導(dǎo)航欄和選項(xiàng)卡欄中使用。最好盡可能使用這些內(nèi)置圖標(biāo)，因?yàn)樗鼈兪侨藗兪煜さ摹?/p>

2. 圖標(biāo)的尺寸

1）大廠是如何制定圖標(biāo)尺寸

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

根據(jù)百度IDX 駕駛體驗(yàn)中心，在對(duì)于《車載HMI界面效果客觀指標(biāo)實(shí)驗(yàn)報(bào)告》在基于視距為50cm，計(jì)算出最小圖標(biāo)為9mm 推薦使用12mm。

視覺上的1cm的實(shí)際像素是多少呢？這就是一個(gè)錯(cuò)誤的想法，上面文章中也有提到屏幕分辨率無法與物理長度單位進(jìn)行轉(zhuǎn)換（實(shí)際項(xiàng)目工作經(jīng)驗(yàn)告訴我，因?yàn)橄嗤钠聊淮笮?但是分辨率不一樣 所以得出的結(jié)果不能共用）。

2）PPI的計(jì)算

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

3）最小圖標(biāo)尺寸計(jì)算

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

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

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

得出結(jié)論：視覺上的1cm的實(shí)際像素是有所差距的。

按照設(shè)計(jì)規(guī)則 ?按照4的倍數(shù)來制定，因此最小圖標(biāo)為40px（這個(gè)結(jié)論只是作為推薦使用，在做項(xiàng)目的時(shí)候，變數(shù)有很多，甲方爸爸就喜歡超級(jí)大的，你也沒辦法，所以還是按照項(xiàng)目來制定）。

為了計(jì)算這個(gè)我還特地的回顧 高中學(xué)習(xí)的開根號(hào)、初中的最大公約數(shù)都搬出來了 幸好當(dāng)時(shí)數(shù)學(xué)還算是個(gè)小學(xué)霸，哈哈哈??♂???♂???♂?

4）下面展示一下

谷歌Android Auto 圖標(biāo)大小規(guī)范：

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

這邊還要說一下，對(duì)于大圖標(biāo)的尺寸設(shè)定，會(huì)有很多尺寸icon，后續(xù)我還會(huì)在輸出關(guān)于在車載圖標(biāo)詳細(xì)的內(nèi)容，盡請(qǐng)關(guān)注吧。

3. 圖標(biāo)的點(diǎn)擊區(qū)域

1）圖標(biāo)觸摸區(qū)域分為?駕駛中使用?和?靜止中使用?

例如說駕駛中需要調(diào)節(jié)空調(diào)的內(nèi)外循環(huán)，原本老車機(jī)的硬按鍵替換成了屏幕中的按鈕，原有的硬按鍵已經(jīng)通過長期使用已經(jīng)有了記憶性，并且有觸感并且操作硬按鍵大小適中，所以在操作中減少了操作時(shí)間降低了危險(xiǎn)系數(shù)。

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

靜止使用例如：在設(shè)置頁面中調(diào)節(jié)車輛設(shè)置中的屬性，巡航模式、電動(dòng)尾門打開百分比的調(diào)節(jié)等等。

2）谷歌制定觸摸區(qū)域的規(guī)則

最小觸摸目標(biāo)尺寸為76 x 76px ?，需要在單個(gè)圖標(biāo)設(shè)計(jì)基礎(chǔ)上再額外增加一塊觸摸區(qū)域，易于駕駛中可操作，在靜止使用的話，我們可以遵循蘋果設(shè)計(jì)規(guī)范中最小手指觸摸的區(qū)域?yàn)?4x44px。

這是我根據(jù)實(shí)際項(xiàng)目并在車內(nèi)進(jìn)行路測(cè)（路測(cè)：駕駛中測(cè)試）中得出結(jié)論。還有一種特殊情況：文字+圖標(biāo)組合點(diǎn)擊區(qū)域，在icon很小的時(shí)候也可以考慮將文字也組合一起，增大點(diǎn)擊區(qū)域。

4. 圖標(biāo)設(shè)計(jì)的統(tǒng)一規(guī)則

1. 統(tǒng)一風(fēng)格
2. ?統(tǒng)一光源
3. 統(tǒng)一線條粗細(xì)
4. 統(tǒng)一圓角/直角
5. 統(tǒng)一傾斜角度
6. 斷點(diǎn)的距離、大小統(tǒng)一

5. 最后最一個(gè)小插曲：命名的規(guī)范

之前經(jīng)常有小伙伴問我，落地項(xiàng)目的icon切圖命名規(guī)范怎么制作？就拿我之前做的風(fēng)格稿首頁來說，首頁音樂卡片中的“下一首”的圖標(biāo)如何命名。

首先分析這個(gè)icon在那個(gè)頁面當(dāng)中 or 用在哪里，接下來就是他的屬性是什么 icon 還是button ，其次就是這個(gè)icon代表什么，這個(gè)icon的大小，因?yàn)樵谝粋€(gè)系統(tǒng)里面會(huì)有重復(fù)功能icon，所以是有必要增加大?。ㄟ@塊內(nèi)容是選填項(xiàng)），最后在增加這個(gè)icon是處于什么狀態(tài)下，狀態(tài)分為：禁用、常態(tài)、按下、選中。

最后呈現(xiàn)：首頁_音樂_下一首_常態(tài) ? ，對(duì)接開發(fā)應(yīng)該是翻譯成英文。

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

總結(jié)：

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

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

上篇：《如何搭建HMI：設(shè)計(jì)規(guī)范（上）》

作者：設(shè)計(jì)界的影帝

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

本文由@設(shè)計(jì)界的影帝 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。

題圖來自Unsplash，基于CC0協(xié)議