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

上一部分人機(jī)交互指南：
《干貨速遞！APPLE WATCH人機(jī)交互指南之UI設(shè)計(jì)基礎(chǔ)(1)》
《干貨速遞！APPLE WATCH人機(jī)交互指南之UI設(shè)計(jì)基礎(chǔ)(2)》

1、標(biāo)簽

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

標(biāo)簽：

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

標(biāo)簽是你應(yīng)用中最常見的元素。使用標(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)類型的信息，參見[顏色和字體]，后續(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è)置合適的大小以適用于每款A(yù)pple 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)信息，參見[菜單圖像]，譯文稍等呦，我們會(huì)盡快完成的。 ^_^

【新手必備的指南類好文強(qiáng)烈推薦】

每個(gè)網(wǎng)站都有的404頁(yè)面創(chuàng)建指南！
《超實(shí)用！不容錯(cuò)過(guò)的優(yōu)秀404頁(yè)面設(shè)計(jì)指南》

配色弱、非科班的設(shè)計(jì)師童鞋必備！
《設(shè)計(jì)師配色寶典！教你從零開始學(xué)配色（一）》

專為設(shè)計(jì)師寫的Github學(xué)習(xí)方法！
《超方便！專為設(shè)計(jì)師而寫的GITHUB快速入門教程》

原文地址：Developer.apple
優(yōu)設(shè)網(wǎng)譯者：@阿布

本文由優(yōu)設(shè)網(wǎng)原創(chuàng)翻譯，請(qǐng)尊重版權(quán)和譯者成果，轉(zhuǎn)摘請(qǐng)附上優(yōu)設(shè)鏈接，違者必究。謝謝各位編輯同仁配合。

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：2650232288@qq.com】

================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是國(guó)內(nèi)人氣最高的網(wǎng)頁(yè)設(shè)計(jì)師學(xué)習(xí)平臺(tái)，專注分享網(wǎng)頁(yè)設(shè)計(jì)、無(wú)線端設(shè)計(jì)以及PS教程。
【特色推薦】
設(shè)計(jì)師需要讀的100本書：史上最全的設(shè)計(jì)師圖書導(dǎo)航：http://hao.uisdc.com/book/。
設(shè)計(jì)微博：擁有粉絲量86萬(wàn)的人氣微博@優(yōu)秀網(wǎng)頁(yè)設(shè)計(jì) ，歡迎關(guān)注獲取網(wǎng)頁(yè)設(shè)計(jì)資源、下載頂尖設(shè)計(jì)素材。
設(shè)計(jì)導(dǎo)航：全球頂尖設(shè)計(jì)網(wǎng)站推薦，設(shè)計(jì)師必備導(dǎo)航：http://hao.uisdc.com
———————————————————–
想在手機(jī)上、被窩里獲取設(shè)計(jì)教程、經(jīng)驗(yàn)分享和各種意想不到的"福利"嗎？
添加 優(yōu)秀網(wǎng)頁(yè)設(shè)計(jì) 微信號(hào)：【youshege】?jī)?yōu)設(shè)哥的全拼
您也可以通過(guò)掃描下方二維碼快速添加：