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

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

先給大家打一個預防針：（規范是用來打破的，本篇文章只做為參考價值）

設計規范包含什么內容？

設計規范包含：視覺規范和交互規范，本章節先說一下視覺規范，車載交互內容會安排在后續寫作中…

視覺規范：車載端設計和移動端、web端設計顯示差別還是蠻大的的，最主要的差異就在于布局的不同，接下來我們從文字、顏色、布局、圓角、圖標 等角度講解，PS：偶爾還會穿插一些工作心得的內容。

一、文字規范

文字是UI界面設計中重要的組成元素，對于文字的使用是檢驗設計師基礎功底的時候，用的好壞會直接影響到用戶在使用產品的過程中的一個體驗，文字的使用從這幾個緯度出發：字體選擇、字號大小、顏色、字重、行高。

1. 字體選擇

我要做一個良心的博主，讓你們避免侵權問題，別在傻乎乎的犯字體侵權的錯誤了。

在做車機系統設計的時候，需要選定該款車機中文、英文、數字或多國語言需要用什么字體。

如果在乙方公司呢，客戶會指定給到你相對于的字體包，插播一段小插曲（職場心得）：當客戶選定字體后，如果該款字體是付費字體，你得先和客戶確認是否得到使用許可，避免后續官司糾紛）在甲方爸爸工作的同學一般會遇到兩種情況：

1. 公司已明確字體（請專業字體設計師設計一套）；
2. 用常規設計的字體，建議使用（中文字體：思源黑體、英文/數字：Roboto）如果有做海外項目的，對于Roboto未涵蓋的語言，建議使用Noto Sans字體。Noto Sans源自類似于Roboto的度量標準，旨在實現視覺上和諧的國際化。

這邊肯定會有人問為什么不能用蘋果字體呢？他不是免費字體嘛？

普及一下：首先該車機系統屬于商業用途，并且未得到許可使用，這就是侵權，在app store上 發布的app是可以免費使用的，因為這是在蘋果生態下使用，所以不屬于侵權。

2. 字號大小與字階

2.1 字號大小

車機端的字號大小的制定也是要循規蹈矩，字號肯定要遠大于移動端和web端，為了確保文字信息的掃描性，結合了：基于IDX & 同濟 (2020) 百度Apollo中控視覺基礎研究項目，設置清晰的文字階級參數，還有谷歌Android Automotive OS 研究，以下是用字的規范（標紅色區域是他們之間的區別）：

可參考谷歌：字體大小的遵循4px倍數大小增量

我們在做項目的時候，規定的字體大小維持在4px，這樣有助于保持一致性和視覺層次感。

2.3 用字的注意事項

字體大小要控制在20px，這個要謹慎使用，一般都是使用在小標簽輔助類的文字上，最小的正文字號為24px。

2.3 設定文字規范有兩個好處

1. 文字樣式復用，不管對于設計師還是開發同學來說，都是極大提高工作效率的一件事情；
2. 對于界面設計來說，有規可循，避免設計時降低的整體的視覺感。

3. 字體用色規則

1. 文字與背景顏色對比度要遵循WCAG的標準，需要考慮到無障礙設計需求，因此保持在4.5:1 – 7:1對比度，確保文字清晰易讀；
2. 將注意力需要集中最重要的區域內容；
3. 文本元素之間傳達視覺層次感。

4. 字體字重

字重是指一種字體的粗細樣式，下面展示字重的種類：

上實際案列講解：

謹慎使用中等字體粗細 ，盡量別用最粗的字體，這樣會使得頁面感覺差別很大，過度的不是那么自然，沒有了細膩、輕盈的感覺。

所以在制定字體規范的時候就盡量將Bold?字重去掉，如果你想通過加粗字體的方式來和下面信息作為區分，請選擇Medium字重（根據實際項目需求來定，我的規范只做參考價值）。

5. 字體行高

為什么要加這一pa，因為這個問題一直有小伙伴問到我 我就一次性解決了，文字模塊需要增加安全距離，這塊比較復雜不行我后期錄一期視屏講解，下文也有詳細的講解。

字體的文本的高度一直困擾著設計師，我該用什么方式去對接開發？在設計過程我們是否可以使用文字字號的高度進行對齊方式，而不是使用文字區域的行高，NO 肯定是不可以的。

微信朋友圈主頁作為案列：

文本的行高肯定是要大于字號的，個人動態的字號為16px（在@1x設計稿中）如果是多行文本的時候，微信是手動調整了文本行高（正常Line：22px ?微信實際Line：20px），當行高為20px的時候，需要將文本上移3px 才能使得圖片和文本視覺在一條線上面。

如果按照這個進行開發的話，開發小哥需要在CSS屬性過程中注意圖片和文本之間的實際差異，這種左右高度不一致的設計，會直接導致在開發布局過程中變得更加繁瑣。

最后的結論：按照文本的行高來對接開發 。

普及一下小知識點：車載的段落的行高一般為字號的140%-180%的視覺呈現，提供舒適的閱讀環境給到用戶（取整數）下面是一些專業性的知識了解一下：在設計字體過程中，字體設計師一般都會給字體預留安全距離，讓字體展示更加穩定。

我們在做設計的時候，將字號設置為30px，但實際字體的空間是需要包含上下部分的安全距離，最終實際高度就變成了42px（Font:pingfang）?穿插一個小干貨：在不同字體下相同字號，行高（Line Height）是不同的，Ant Design的30號字，行高為38px （詳見配圖 ?計算方式）。

二、顏色規范

1. 使用場景

場景：白天陽光暴曬（陽光強度有很多檔位早、中、下午） 、 梅雨季節陰雨連天 、夜晚模式、地下隧道等。

駕駛汽車在室外不確定因素會比較的多，光線強度的干擾尤其重要，照明會根據一天中的時間、天氣、窗戶的色調等等而有很大不同。當你設計的車載應用程序在現實世界中使用時，在設計時在計算機上看到的顏色并不總是相同。

考慮顏色亮度如何影響駕駛條件，以及低對比度的顏色在陽光直射下如何被洗掉。始終在多種光照條件下預覽您的應用，以查看顏色的顯示方式。如有必要，請進行調整以在大多數用例中提供最佳的觀看體驗。

最初車機廠商系統大多數都是偏愛深色背景，具有代表性的兩家系統谷歌的 Android Auto 系統和蘋果 Carplay 系統，我在做項目最初也是沿用了深色系。

2. 色彩中的“TF BOY”組合

我想用一句蘋果的官方話說：“配色可以提供交互性，提供視覺連貫性，并且對界面賦予生命力?！边@句話總結的真的非常到位。

集中注意力認真聽，重點來了！UI設計中顏色的使用法則，在一個頁面設計中需要講究 60-30-10法則， 在60％+30％+10％的比例下創造一種平衡感，是為了視角能夠從一個焦點舒適的過渡到下一個點，避免給駕駛中的我們產生視覺落差很大的感覺。

一個項目車載系統的色彩規范，包括了品牌色、語義色、中性色。

1）品牌色

又稱為“強調色”，通常一個車載系統只有一個品牌色，也是出現頻率較高的一種顏色，強調色一般使用場景為：tab的切換選中，按鈕開啟狀態、音樂在播放中的音符小動畫等等（拿我練習稿講解）。

2）語義色

語義色需要在UI界面中承載這具有準確的信息傳達，在復雜的場景里顏色的傾向性應十分明顯，減少用戶的理解成本和理解時間，給出行體驗者帶來良好的駕駛體驗。

根據交通標志的定義，紅色表示禁止、停止、危險，那么用戶需要在第一時間識別出這種信息，黃色為警示或不良結果等，綠色則代表通行、成功，上訴說的顏色為狀態色。下面要講一下功能色：鏈接色大家第一時間肯定想到的是藍色。

3）中性色

主要用于除文字外，還被運用到背景色、分割線、置灰填充、邊框、等場景中（注：根據背景色的變化，系統其余顏色也隨之而變，這是兩套用色規范切換）。

3. 如何制作HMI色彩規范？

盡量使用較少的顏色，顏色飽和度不要過高，避免對駕駛的視覺干擾，吸引駕駛者的注意力，讓老司機翻了車。

避免讓交互性元素和非交互性元素使用相同的配色（如果交互式和非交互式元素具有相同的顏色，則很難知道在何處點擊）。

保持色彩一致性（請勿使用不同的顏色來任意，區分單個屏幕中的重復組件。當顏色不能增加價值時，請謹慎使用）。

建立視覺層次（通過不透明度值或者是同一色系，但不要通過將過多的不透明度或對比度值應用于太多元素來過度使用它們）。

盡量使用深色背景，這是市面上很多車廠的選擇（不過蔚來、特斯拉、小鵬、carplay都相繼推出了白色版本，來適配白天，我們項目中后期也加入白天模式，經過了路測在陽光很刺眼情況下，黑色會反光，無法看清顯示屏幕內容）最終在實際各種照明條件下，對應用配色方案進行測試。

車載UI系統中使用足夠色彩對比度，上訴在使用場景中有所提到。

繼續講干貨：在后續文章安排里我會單獨拿出WCAG從感知，可操作性，易于理解和穩定性去詳細講解，這次先挑重點說。

WCAG全稱是Web Content Accessibility Guidlines（網頁內容無障礙指南）它們是一組是網頁內容更容易訪問的建議，主要針對殘疾人，一共分為三個級別?A（最低）、AA、AAA（最高）。

講個概念：兩個白色的對比度是?1:1?, 白色（#FFFFFF）與黑色（#000000）的對比度為?21:1。

做顏色對比的網站鏈接?https://next.rsuitejs.com/en/tools/palette，要滿足 AAA 級準則，文本視覺呈現及文本圖像至少要有?7:1?的對比度，針對大號文本以及大文本圖像至少有?4.5:1?的對比度。

總結：

對于顏色運用的細節，是證明了一位設計師的深度、且具備耐久力。

上訴全部闡述對于顏色的規則不適用全部的設計方案，還是具體項目具體分析，用戶人群不同，運用場景也不一致，比如駕駛者和后排人的屏幕設計內容肯定會有差別。

還有一個點在設計需要閱讀內容頁面，例如：微信發來的消息、設置中文本，最好能夠達到AAA標準。

作者：設計界的影帝

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

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

題圖來自Unsplash，基于CC0協議