編者按：豆腐得趁熱吃，好東西也得趕緊學(xué)起來(lái)，這篇人機(jī)交互指南19號(hào)剛有的英文版，優(yōu)設(shè)幾位譯者分工合作，兩天搞定了一大半，今天放出第二波，熱愛(ài)學(xué)習(xí)新東西的同學(xué)們，該收貨咯！

1、標(biāo)簽

標(biāo)簽呈現(xiàn)靜態(tài)文本。

標(biāo)簽：

– 呈現(xiàn)任意數(shù)量的靜態(tài)文本
– 不允許直接的用戶交互
– 可以通過(guò)程序升級(jí)
– 可以跨越多行

標(biāo)簽是你應(yīng)用中最常見(jiàn)的元素。使用標(biāo)簽向用戶呈現(xiàn)簡(jiǎn)短的消息。標(biāo)簽最適合呈現(xiàn)相對(duì)少量的文字。

讓你的標(biāo)簽清晰易讀

對(duì)你的標(biāo)簽文字使用高對(duì)比的顏色，并使用動(dòng)態(tài)類型（Dynamic Type）確保標(biāo)簽文字的大小適合用戶。

Apple Watch內(nèi)置的系統(tǒng)字體提供了最佳可讀性，我們推薦使用它。如果你選擇使用用戶字體，不要使用花體字母或者艷麗的色彩。（關(guān)于在app中使用文字的指導(dǎo)，包含使用動(dòng)態(tài)類型的信息，參見(jiàn)[顏色和字體]，后續(xù)將發(fā)布譯文，稍等呦。

盡可能使用內(nèi)置樣式

內(nèi)置樣式的設(shè)計(jì)可讀性很好，而且易于使用。

2、圖像

圖像對(duì)象展示單張靜態(tài)圖像或多張動(dòng)態(tài)圖像。

圖像對(duì)象：

– 自身沒(méi)有外觀；它只呈現(xiàn)圖像
– 不支持用戶交互
– 提供程序來(lái)控制動(dòng)畫開始/停止

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

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

將所有圖像資源設(shè)為@2x。

沒(méi)有必要建立非Retina圖像。

3、群組

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

群組：

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

群組是你在Xcode中實(shí)現(xiàn)設(shè)計(jì)的主要工具。然而，鑒于群組可以擁有自己的背景顏色或圖像的這一事實(shí)，你也可以將其用為視覺(jué)元素。

不要在群組中放置群組以創(chuàng)建復(fù)雜布局

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

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

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

4、表格

表格在單一列中分行展現(xiàn)數(shù)據(jù)。使用表格呈現(xiàn)會(huì)動(dòng)態(tài)改變的內(nèi)容。

表格對(duì)象：

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

你要在設(shè)計(jì)的時(shí)候?yàn)槟愕谋砀裥蓄愋投x布局。所有行都要預(yù)先設(shè)計(jì)。在運(yùn)行時(shí)，你可以選擇你實(shí)際想要使用的行類型。

使用一致的行類型

你可以創(chuàng)建不同的行類型來(lái)實(shí)現(xiàn)你的內(nèi)容、頭部、頁(yè)腳。在使用那些行的時(shí)候保持一致。

避免將明顯不同類的內(nèi)容混在行內(nèi)

當(dāng)呈現(xiàn)內(nèi)容時(shí)，使用一致的行類型呈現(xiàn)內(nèi)容。只有在需要做分節(jié)符或組織內(nèi)容行時(shí)使用其他行類型。為內(nèi)容使用相同的行類型可以確保行尺寸一致，并易于導(dǎo)航。

限制同時(shí)呈現(xiàn)的表格的行數(shù)

超過(guò)20行內(nèi)容的表格會(huì)變得不好滾動(dòng)。只呈現(xiàn)直接相關(guān)行的子集，并為用戶提供加載更多行的選項(xiàng)。

不要在群組中嵌入表格

表格會(huì)根據(jù)其包含的行數(shù)動(dòng)態(tài)調(diào)整大小。因此，表格忽視所有群組對(duì)它們的高度限制。

5、按鈕

按鈕執(zhí)行一個(gè)應(yīng)用定義操作。

按鈕

– 有可自定義的背景
– 有圓角
– 可以包含標(biāo)簽或群組對(duì)象

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

創(chuàng)建跨越屏幕寬度的按鈕

強(qiáng)烈推薦使用全寬按鈕。如果你必須在水平方向放置超過(guò)一個(gè)按鈕，要把按鈕數(shù)量限制為兩個(gè)。

盡可能嘗試匹配按鈕高度

如果你在屏幕上有多個(gè)按鈕，為所有按鈕使用相同高度。

按鈕有圓角，以便和其他元素區(qū)別開

按鈕的標(biāo)準(zhǔn)圓角半徑為6點(diǎn)。

6、切換

切換提供了兩個(gè)互斥的選擇或狀態(tài)。

切換

– 表示一個(gè)項(xiàng)的二元狀態(tài)
– 永遠(yuǎn)包含一個(gè)標(biāo)簽

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

7、滑塊

滑塊允許用戶在一系列不連續(xù)值的范圍內(nèi)調(diào)整值。用戶通過(guò)輕擊滑塊條兩側(cè)的圖像改變其值。

滑塊

– 包含一個(gè)水平條，兩邊各有一個(gè)圖像用于操作滑塊值
– 可以以一系列離散條或一個(gè)連續(xù)條顯示當(dāng)前值
– 總是以預(yù)定量增加或減少
– 不對(duì)用戶顯示當(dāng)前數(shù)值

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

如果你不提供自定義圖像，系統(tǒng)會(huì)顯示加號(hào)和減號(hào)。

8、地圖

地圖向用戶展現(xiàn)某個(gè)地理目標(biāo)的信息。使用地圖展示目的地或感興趣的地點(diǎn)。地圖是靜態(tài)快照，并無(wú)法在應(yīng)用中產(chǎn)生交互。輕擊地圖會(huì)讓用戶轉(zhuǎn)移到地圖應(yīng)用。

將地圖區(qū)域設(shè)為包含周圍相關(guān)地點(diǎn)的最小區(qū)域

地圖區(qū)域在顯示之前，通過(guò)你的WatchKit插件設(shè)置。選擇的區(qū)域應(yīng)該包含所有需要的地點(diǎn)，但同時(shí)也要足夠小，便于用戶使用。

不創(chuàng)建超過(guò)可用內(nèi)容區(qū)域大小的地圖對(duì)象

地圖大小應(yīng)該適用于當(dāng)前Apple Watch屏幕，用戶應(yīng)該可以不通過(guò)滾動(dòng)條而看到整個(gè)地圖。

使用標(biāo)注在地圖上高亮地點(diǎn)

標(biāo)注是顯示在地圖上方的圖像，用于標(biāo)記地點(diǎn)或者呼出信息。不要同時(shí)展示超過(guò)五個(gè)標(biāo)注。

地圖提供內(nèi)建的綠色、紅色和紫色圖釘。使用綠色圖釘標(biāo)記起點(diǎn)，紅色圖釘標(biāo)記重點(diǎn)，紫色圖釘標(biāo)記感興趣的地點(diǎn)。

你還可以使用自定義圖像定義標(biāo)注。圖像會(huì)如下放置，其下邊緣位于目標(biāo)坐標(biāo)。

9、日期和時(shí)間

日期和事件對(duì)象是用于在Apple Watch上顯示時(shí)間相關(guān)值的專用標(biāo)簽。

日期標(biāo)簽：

– 顯示日期、時(shí)間或同時(shí)顯示二者
– 可以使用多種格式顯示日期及時(shí)間，日歷和時(shí)區(qū)
– 無(wú)需通過(guò)WatchKit插件更新

當(dāng)你想要展示當(dāng)前日期或時(shí)間時(shí)使用日期對(duì)象。

時(shí)鐘標(biāo)簽：

– 倒計(jì)時(shí)到指定時(shí)間或從指定時(shí)間計(jì)時(shí)
– 可以使用多種格式設(shè)置顯示計(jì)時(shí)值
– 無(wú)需通過(guò)WatchKit插件更新

務(wù)必使用時(shí)鐘標(biāo)簽來(lái)實(shí)現(xiàn)精確倒計(jì)時(shí)或計(jì)時(shí)

10、菜單

在Apple Watch的Retina屏上用力點(diǎn)擊的手勢(shì)可以呼出當(dāng)前屏幕的上下文菜單。菜單包含當(dāng)前屏幕的相關(guān)操作，而無(wú)需占據(jù)你界面的空間。

菜單展示一到四個(gè)操作

操作按照它們的添加順序展示，從左上角到右下角排列。菜單沒(méi)有分級(jí)無(wú)法滾動(dòng)。你可以在設(shè)計(jì)的時(shí)候或有計(jì)劃地定義菜單操作。

菜單操作應(yīng)用于當(dāng)前屏幕

每個(gè)屏幕可以擁有其自己的菜單或者根本沒(méi)有菜單。操作并不適合于對(duì)滾動(dòng)界面的當(dāng)前畫面或當(dāng)前選中項(xiàng)的任務(wù)。

每個(gè)操作都需要有有一張圖和一個(gè)標(biāo)簽字符串

菜單圖像是系統(tǒng)風(fēng)格的線條圖案，應(yīng)用于標(biāo)準(zhǔn)背景上。標(biāo)簽字符串必須適合一到兩行。

菜單是可選的

只有在當(dāng)前屏幕有相關(guān)操作的時(shí)候才包含菜單。在沒(méi)有菜單可展示的時(shí)候，系統(tǒng)會(huì)顯示一個(gè)合適的動(dòng)畫。

關(guān)于創(chuàng)建菜單中所使用的圖標(biāo)信息，參見(jiàn)[菜單圖像]，譯文稍等呦，我們會(huì)盡快完成的。 ^_^

原文來(lái)自：優(yōu)設(shè)

原文地址：Developer.apple

優(yōu)設(shè)網(wǎng)譯者：@阿布

APPLE WATCH人機(jī)交互指南系列文章

apple watch 人機(jī)交互指南UI設(shè)計(jì)基礎(chǔ)(1)

APPLE WATCH人機(jī)交互指南之UI設(shè)計(jì)基礎(chǔ)(2)

APPLE WATCH人機(jī)交互指南之圖標(biāo)與圖片設(shè)計(jì)

Apple Watch界面設(shè)計(jì)規(guī)范 – 模態(tài)表單

APPLE WATCH人機(jī)交互指南之UI元素設(shè)計(jì)