APPLE WATCH人機交互指南之UI元素設計

1 評論 4776 瀏覽 5 收藏 12 分鐘

編者按:豆腐得趁熱吃,好東西也得趕緊學起來,這篇人機交互指南19號剛有的英文版,優設幾位譯者分工合作,兩天搞定了一大半,今天放出第二波,熱愛學習新東西的同學們,該收貨咯!

1、標簽

標簽呈現靜態文本。

image: ../Art/text_examples.png

標簽:

– 呈現任意數量的靜態文本
– 不允許直接的用戶交互
– 可以通過程序升級
– 可以跨越多行

標簽是你應用中最常見的元素。使用標簽向用戶呈現簡短的消息。標簽最適合呈現相對少量的文字。

讓你的標簽清晰易讀

對你的標簽文字使用高對比的顏色,并使用動態類型(Dynamic Type)確保標簽文字的大小適合用戶。

Apple Watch內置的系統字體提供了最佳可讀性,我們推薦使用它。如果你選擇使用用戶字體,不要使用花體字母或者艷麗的色彩。(關于在app中使用文字的指導,包含使用動態類型的信息,參見[顏色和字體],后續將發布譯文,稍等呦。

盡可能使用內置樣式

內置樣式的設計可讀性很好,而且易于使用。

image: ../Art/text_2x.png

2、圖像

圖像對象展示單張靜態圖像或多張動態圖像。

image: ../Art/images.png

圖像對象:

– 自身沒有外觀;它只呈現圖像
– 不支持用戶交互
– 提供程序來控制動畫開始/停止

為圖像設置合適的大小以適用于每款Apple Watch的顯示尺寸。

不要試圖為不同屏幕尺寸拉伸或壓縮圖像。保證圖像資源的像素尺寸對其底層設備是正確的。

將所有圖像資源設為@2x。

沒有必要建立非Retina圖像。

3、群組

群組是將內容正確布置在你界面中的重要工具。群組像是其他對象的容器。群組自身沒有默認外觀,不過用戶可以自定義背景顏色或圖像。群組還擁有定義位置、尺寸、邊距及其他布局相關的屬性。

群組:

– 可以將元件水平或垂直排列
– 包含一個或多個其他界面元素
– 有定義邊距及群組元素之間間距的屬性
– 可以將圖像或純色設為背景
– 可以為其背景或內容設置圓角半徑

群組是你在Xcode中實現設計的主要工具。然而,鑒于群組可以擁有自己的背景顏色或圖像的這一事實,你也可以將其用為視覺元素。

不要在群組中放置群組以創建復雜布局

你可以將某些內容水平布置,而另一些垂直布置。你也可以嵌套群組以利用外層群組的邊距或間距。

為不同的Apple Watch實際顯示尺寸建立不同的背景圖像

不要試圖為不同屏幕尺寸拉伸或壓縮圖像。保證圖像資源的像素尺寸對其底層設備是正確的。

4、表格

表格在單一列中分行展現數據。使用表格呈現會動態改變的內容。

image: ../Art/table_examples_2x.png

表格對象:

– 支持多行類型
– 是可滾動的
– 可以擁有背景顏色或圖像

你要在設計的時候為你的表格行類型定義布局。所有行都要預先設計。在運行時,你可以選擇你實際想要使用的行類型。

使用一致的行類型

你可以創建不同的行類型來實現你的內容、頭部、頁腳。在使用那些行的時候保持一致。

避免將明顯不同類的內容混在行內

當呈現內容時,使用一致的行類型呈現內容。只有在需要做分節符或組織內容行時使用其他行類型。為內容使用相同的行類型可以確保行尺寸一致,并易于導航。

限制同時呈現的表格的行數

超過20行內容的表格會變得不好滾動。只呈現直接相關行的子集,并為用戶提供加載更多行的選項。

不要在群組中嵌入表格

表格會根據其包含的行數動態調整大小。因此,表格忽視所有群組對它們的高度限制。

5、按鈕

按鈕執行一個應用定義操作。

image: ../Art/buttons_shot_2x.png

按鈕

– 有可自定義的背景
– 有圓角
– 可以包含標簽或群組對象

按鈕的背景就是所謂的盤(Platter)。你可以在運行時改變按鈕盤中定義的顏色或圖像。

創建跨越屏幕寬度的按鈕

強烈推薦使用全寬按鈕。如果你必須在水平方向放置超過一個按鈕,要把按鈕數量限制為兩個。

盡可能嘗試匹配按鈕高度

如果你在屏幕上有多個按鈕,為所有按鈕使用相同高度。

按鈕有圓角,以便和其他元素區別開

按鈕的標準圓角半徑為6點。

6、切換

切換提供了兩個互斥的選擇或狀態。

image: ../Art/switches_shot_2x.png

切換

– 表示一個項的二元狀態
– 永遠包含一個標簽

使用切換為用戶提供二選一的方式,比如yes/no或者on/off。

7、滑塊

滑塊允許用戶在一系列不連續值的范圍內調整值。用戶通過輕擊滑塊條兩側的圖像改變其值。

image: ../Art/sliders_shot_2x.png

滑塊

– 包含一個水平條,兩邊各有一個圖像用于操作滑塊值
– 可以以一系列離散條或一個連續條顯示當前值
– 總是以預定量增加或減少
– 不對用戶顯示當前數值

使用自定義圖像令滑塊更易于理解

如果你不提供自定義圖像,系統會顯示加號和減號。

8、地圖

地圖向用戶展現某個地理目標的信息。使用地圖展示目的地或感興趣的地點。地圖是靜態快照,并無法在應用中產生交互。輕擊地圖會讓用戶轉移到地圖應用。

將地圖區域設為包含周圍相關地點的最小區域

地圖區域在顯示之前,通過你的WatchKit插件設置。選擇的區域應該包含所有需要的地點,但同時也要足夠小,便于用戶使用。

不創建超過可用內容區域大小的地圖對象

地圖大小應該適用于當前Apple Watch屏幕,用戶應該可以不通過滾動條而看到整個地圖。

使用標注在地圖上高亮地點

標注是顯示在地圖上方的圖像,用于標記地點或者呼出信息。不要同時展示超過五個標注。

地圖提供內建的綠色、紅色和紫色圖釘。使用綠色圖釘標記起點,紅色圖釘標記重點,紫色圖釘標記感興趣的地點。

image: ../Art/map_pin_shot_2x.png

你還可以使用自定義圖像定義標注。圖像會如下放置,其下邊緣位于目標坐標。

image: ../Art/map_image_shot_2x.png

9、日期和時間

日期和事件對象是用于在Apple Watch上顯示時間相關值的專用標簽。

image: ../Art/timer_labels_2x.png

日期標簽:

– 顯示日期、時間或同時顯示二者
– 可以使用多種格式顯示日期及時間,日歷和時區
– 無需通過WatchKit插件更新

當你想要展示當前日期或時間時使用日期對象。

時鐘標簽:

– 倒計時到指定時間或從指定時間計時
– 可以使用多種格式設置顯示計時值
– 無需通過WatchKit插件更新

務必使用時鐘標簽來實現精確倒計時或計時

10、菜單

在Apple Watch的Retina屏上用力點擊的手勢可以呼出當前屏幕的上下文菜單。菜單包含當前屏幕的相關操作,而無需占據你界面的空間。

image: ../Art/context_menu_2x.png

菜單展示一到四個操作

操作按照它們的添加順序展示,從左上角到右下角排列。菜單沒有分級無法滾動。你可以在設計的時候或有計劃地定義菜單操作。

菜單操作應用于當前屏幕

每個屏幕可以擁有其自己的菜單或者根本沒有菜單。操作并不適合于對滾動界面的當前畫面或當前選中項的任務。

每個操作都需要有有一張圖和一個標簽字符串

菜單圖像是系統風格的線條圖案,應用于標準背景上。標簽字符串必須適合一到兩行。

菜單是可選的

只有在當前屏幕有相關操作的時候才包含菜單。在沒有菜單可展示的時候,系統會顯示一個合適的動畫。

關于創建菜單中所使用的圖標信息,參見[菜單圖像],譯文稍等呦,我們會盡快完成的。 ^_^

 

原文來自:優設

原文地址:Developer.apple

優設網譯者:@阿布

 

 

APPLE WATCH人機交互指南系列文章

apple watch 人機交互指南UI設計基礎(1)

APPLE WATCH人機交互指南之UI設計基礎(2)

APPLE WATCH人機交互指南之圖標與圖片設計

Apple Watch界面設計規范 – 模態表單

APPLE WATCH人機交互指南之UI元素設計

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 目前還沒評論,等你發揮!