国产亚洲精_丰满老熟好大的大bbb_男男激情做爰视频免费观看_欧美一区二区三区精品国产

Carplay 設計規范(下)

2021-3-8    資深UI設計者

3.5、觸摸屏交互

用戶可以通過內置的觸摸屏來與 Carplay 直接進行交互。高保真屏幕可能會比低保真屏幕,在交互效率上更高,更低延遲,支持更多手勢。Carplay 的交互基本采用的都是單指交互,具體可以參考下方列表:

想做好車載設計?先掌握這份 Carplay 設計規范(下)

在設計交互的時候,盡可能少地使用觸摸交互,避免用戶在駕駛過程中分心。

3.6、Siri

Siri 是 Carplay 的基本功能,無干擾的語音讓用戶和程序之間的交互更加自然和安全

即使看不到 Carplay 的屏幕,依然可以使用方向盤上的語音命令按鈕來激活 Siri。激活后,Siri 會針對語言進行處理和分析,并且轉換為可用的指令。

想做好車載設計?先掌握這份 Carplay 設計規范(下)

  • 快速響應,最大程度地減少交互。
  • 使用自定義詞匯表,提升 Siri 的識別準確度。用戶可以通過特定的術語來提升語音識別準確度。

具體可以參與 SiriKit 編程指南

4.1、動畫

動畫可以讓屏幕上的元素,擁有一層附加的視覺效果。如果方法得當,動畫還能呈現狀態,提供反饋,增加用戶直接操控時候的感覺,并且告知用戶可視化操作的結果。

4.2、品牌設計

成功的品牌設計并不只是把 LOGO 塞到 APP 當中,出色的 APP 能夠巧妙地使用字體、配色和圖像來構建獨特的品牌形象。

關于這方面的設計,可以詳細參考 iOS 設計規范中的 配色、版式以及 圖標和圖像 這三個章節。

在品牌設計上,Carplay 要求設計師:

  • 盡可能將品牌設計以精致醒目的方式呈現出來。由于車內的使用場景,人們不會使用 Carplay 來查看廣告,最佳的用戶體驗則是他們最需要的東西。
  • 著重呈現品牌的一致性和功能性。確保你的 Carplay 界面是直觀且易于導航的,并且提供駕駛時真正有用的功能。
  • 遵守 Apple 的品牌設計準則。具體可參考:Apple Trademark List 和 Guidelines for Using Apple Trademarks

4.3、配色

通常,配色可以提供交互性,提供視覺連貫性,并且對界面賦予生命力。

  • 你需要選擇和你的品牌LOGO可以搭配使用的配色方案。
  • 避免讓交互性元素和非交互性元素使用相同的配色。
  • 在實際汽車環境下,對你的配色方案進行測試。
  • 盡量使用深色背景。
  • 注意不同文化對于色彩的理解,以及色盲用戶的需求。
  • UI中采用足夠明顯的色彩對比。

4.4、布局

Carplay 支持不同像素密度不同縱橫比的顯示,但是這也意味著在實際布局設計的時候,要格外小心,盡量讓你的設計在不同的屏幕分辨率和長寬比之下,都顯得足夠正常。

想做好車載設計?先掌握這份 Carplay 設計規范(下)

  • 以整潔的布局提供有用的信息,讓駕駛者可以一目了然地掃視到信息。
  • 在整個 APP 內部保持一致的外觀。

想做好車載設計?先掌握這份 Carplay 設計規范(下)

  • 確保主要內容足夠清晰醒目,并且感覺上是可用的。
  • 使用對齊的方式來保持清晰的層次結構,一目了然。
  • 為交互元素留出足夠的間距和交互空間。
  • 基于駕駛員的位置來排布元素,盡可能順手。
  • 考慮物理控件對于界面的影響。

4.5、字體版式

Carplay 采用的字體是蘋果的 SF 字體。你可以在這里下載到字體

想做好車載設計?先掌握這份 Carplay 設計規范(下)

  • 最小程度使用文本,使用圖像信息傳遞速度更快。
  • 強調重要信息。通過色彩和字體粗細,來凸顯最重要的信息。
  • 避免使用自定義字體。
  • 盡可能使用內置的文本樣式。
  • 使用正文文本樣式作為主要內容的字體。
  • 使用 SF 字體的時候,Carplay 會根據最佳的文本大小自動適配間距。

想做好車載設計?先掌握這份 Carplay 設計規范(下)

5.1、圖片尺寸和分辨率

和 iOS 類似,在 Carplay 當中,屏幕分辨率也分為 1x 2x 和 3x。

想做好車載設計?先掌握這份 Carplay 設計規范(下)

5.2、APP 圖標

想做好車載設計?先掌握這份 Carplay 設計規范(下)

每個 Carplay APP 都應該有一個顯著突出的圖標,確保在駕駛的時候可以輕松點擊到。

  • 可以直接使用 iPhone 的 應用圖標。
  • 不要使用黑色作為圖標的底色。
  • 設計圖標的時候,圖標應該有視覺焦點。
  • 采用簡單且易于理解的圖標設計。
  • 確保圖標本身是不透明的,并且讓圖標背景足夠簡單。
  • 不要在圖標當中使用照片、截圖或者其他界面元素。
  • 不要在APP的具體界面當中使用 APP 圖標,避免混淆。
  • 設計完成的圖標應該是方形的,系統會使用蒙版將邊緣處理為圓角矩形。
  • Carplay 的圖標尺寸分別為 @1x 60x60px ;@2x 120x120px ;@3x 180x180px

5.3、自定義圖標

如果你設計的 APP 當中,需要的圖標并不存在于系統圖標當中,或者系統圖標與你的 APP 并不匹配,可以自定義圖標設計。

  • 創建簡單的,可識別的圖標設計。不要加入過多的細節,確保可讀性。
  • 設計圖標的時候,使用透明背景、抗鋸齒且無陰影的純色圖標。
  • 保持圖標在風格、尺寸以及各個規格上的高度一致。
  • 在設計選項卡圖標的時候,選擇兩種不同版本的圖標,分別是選中狀態和未選中狀態的。

想做好車載設計?先掌握這份 Carplay 設計規范(下)

想做好車載設計?先掌握這份 Carplay 設計規范(下)

  • 不要在標簽欄圖標當中使用文本,如果需要,則在標簽欄下方的標題中說明。
  • 自定義圖標尺寸要求如下:

想做好車載設計?先掌握這份 Carplay 設計規范(下)

5.4、系統圖標

系統本身內置了許多小圖標,服務于日常各種不同的任務,通常這些小圖標會使用在導航欄和標簽欄當中,盡可能使用這些內置的圖標。

  • 按照用戶習慣和預期來使用這些系統圖標。
  • 如果找不到滿足需求的圖標,就請使用自定義圖標。
  • 在導航欄中使用圖標的時候,具體可參閱這份文檔:UIBarButtonItem

想做好車載設計?先掌握這份 Carplay 設計規范(下)

  • 在標簽欄中使用圖標,請參考這份文檔:UITabBarItem

想做好車載設計?先掌握這份 Carplay 設計規范(下)

6.1、上拉菜單(Action Sheets)

上拉菜單是一種特定的彈出菜單,通常從屏幕底部彈出,并且包含2個以上的選項。不過在 Carplay 當中應該盡量避免使用上拉菜單,在 iPhone 上倒是可以使用它,但是不要在 Carplay 中顯示。

想做好車載設計?先掌握這份 Carplay 設計規范(下)

6.2、活動指示器(Activity Indicators)

在內容加載的過程當中,請勿讓屏幕保持靜止,或者空白,使用活動指示器確保它看起來沒有靜止。

想做好車載設計?先掌握這份 Carplay 設計規范(下)

如果可以的話,可以在加載過程中提供對用戶有幫助的信息。具體可以參考 UIActivityIndicatorView

6.3、警告(Alerts)

警告會用來通知用戶一些關鍵性的信息,警告通常由標題、可選信息以及一個或者多個按鈕組成。除此之外,警報的視覺系統是靜態的,無法自定義。

想做好車載設計?先掌握這份 Carplay 設計規范(下)

警告最小化呈現。由于警告本身會破壞用戶體驗,所以請在重要的情況下使用警報。
相關開發人員可以參考這份文檔:UIAlertController

  • 盡可能編寫足夠簡單的、描述性的文本標題。
  • 請盡量使用簡短完整的句子。
  • 避免讓文本聽起來上指責、評判或者侮辱。
  • 不要對警報按鈕進行解釋。
  • 單鍵警告僅僅具備通知的作用,通常采用有2個選項的兩鍵警告。
  • 給警告按鈕以足夠簡明的邏輯和標題。
  • 在右側放置常用的選項,在左側放置取消按鈕。
  • 對取消按鈕采用正確的文本標簽。
  • 對于涉及刪除的破壞性操作,應該采用特別的樣式標識出來,具體可以參考
  • UIAlertActionStyleDestructive 和 UIAlertAction 這兩份文檔。
  • 允許通過點擊「Home」按鈕來消除警告。

6.4、按鈕(Buttons)

按鈕通常可以用來觸發一些特定的操作,具有可自定義的背景,并且可以包含標題和圖標。和 iOS 不同,Carplay支持的按鈕樣式非常有限。

想做好車載設計?先掌握這份 Carplay 設計規范(下)

  • 在按鈕標簽中使用動詞。
  • 保持標題足夠簡短
  • 僅在必要的時候,添加邊框和背景
  • 更具體的開發參考 UIButtonTypeSystem 和 UIButton

6.5、標簽(Labels)

標簽是推送到屏幕上的一條短消息,這個標簽可以顯示任意數量的靜態文本。在設計標簽的時候,盡量保持標簽清晰易讀。具體開發可參考UILabel

想做好車載設計?先掌握這份 Carplay 設計規范(下)

6.6、導航欄

導航一般在屏幕的頂部,通常導航欄右側會有返回按鈕,中央是標題。有時右側會有其他的可交互的控件。

想做好車載設計?先掌握這份 Carplay 設計規范(下)

  • 在導航欄中間顯示當前視圖的標題。
  • 避免在導航欄上放過多的控件。
  • 不要包含多段式面包屑導航。
  • 導航欄標題應該給按鈕留下足夠的空間。
  • 使用標準的返回按鈕。
  • 開發請參考 UINavigationBar 這份文檔

6.7、滾動視圖(Scroll Views)

滾動視圖讓用戶可以瀏覽到更多的內容,用戶可以用滑動或者輕拂來進行瀏覽信息。

  • 不要將一個滾動視圖嵌套到另外一個滾動視圖當中。
  • 通常,一次只顯示一個滾動視圖。
  • 開發可以參考文檔:UIScrollView

6.8、標簽欄(Tab Bars)

標簽欄通常出現在屏幕頂端,并且用戶可以借此快速切換。邏輯上標簽欄可以包含無限多的 Tab,但是可見的標簽數量,會根據實際顯示尺寸而有所不同。

想做好車載設計?先掌握這份 Carplay 設計規范(下)

  • 通常標簽欄展現的是平鋪的信息層次結構。
  • 選項卡功能不可用的時候,不要刪除或者禁用該選項卡。
  • 嚴格使用標簽欄來進行導航。
  • 通常使用 3 個到 5 個選項卡。
  • 使用圖標來標示標簽欄,會更加通俗易懂。
  • 具體開發可參考文檔:UITabBar

6.9、表格(Tables)

表單通常會以單列的樣式存在,干凈有效地呈現大量信息。

想做好車載設計?先掌握這份 Carplay 設計規范(下)

  • 考慮表單的寬度,避免難以讀取。
  • 盡可能快速地顯示表單的內容。
  • 在加載的時候,結合活動指示器呈現進度。
  • 具體參考開發文檔:UITableView

在具體的表單條目的設計上,也有詳細的規格要求。

想做好車載設計?先掌握這份 Carplay 設計規范(下)

默認樣式,左側可放置圖片,并且標題也是靠左對齊的。具體參考文檔:UITableViewCellStyleDefault 以及 UITableViewCell

想做好車載設計?先掌握這份 Carplay 設計規范(下)

副標題樣式。這是包含標題和副標題的一種樣式,兩者靠左對齊,上下排布。具體參考文檔:UITableViewCellStyleSubtitle 和 UITableViewCell

想做好車載設計?先掌握這份 Carplay 設計規范(下)

Value1 樣式。標題靠左對齊,副標題靠右對齊。具體參考文檔:UITableViewCellStyleValue1 和 UITableViewCell

想做好車載設計?先掌握這份 Carplay 設計規范(下)

Value2 樣式。標題和副標題文本都靠右對齊,具體參考文檔:UITableViewCellStyleValue2 和 UITableViewCell

  • 保持文本足夠簡介,避免無法完整顯示。
  • 點擊選擇之后,記得顯示反饋。
  • 為非標準表格設置自定義樣式。


文章來源:優設 作者:陳子木

藍藍設計paul-jarrel.com )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 平面設計服務




日歷

鏈接

個人資料

藍藍設計的小編 http://paul-jarrel.com

存檔