第二波來了！APPLE WATCH人機交互指南之UI元素設計

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

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

1、標簽

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

標簽：

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

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

讓你的標簽清晰易讀

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

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

盡可能使用內置樣式

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

2、圖像

圖像對象展示單張靜態(tài)圖像或多張動態(tài)圖像。

圖像對象：

- 自身沒有外觀；它只呈現(xiàn)圖像
- 不支持用戶交互
- 提供程序來控制動畫開始/停止

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

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

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

沒有必要建立非Retina圖像。

3、群組

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

群組：

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

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

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

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

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

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

4、表格

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

表格對象：

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

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

使用一致的行類型

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

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

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

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

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

不要在群組中嵌入表格

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

5、按鈕

按鈕執(zhí)行一個應用定義操作。

按鈕

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

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

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

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

盡可能嘗試匹配按鈕高度

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

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

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

6、切換

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

切換

- 表示一個項的二元狀態(tài)
- 永遠包含一個標簽

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

7、滑塊

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

滑塊

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

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

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

8、地圖

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

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

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

不創(chuàng)建超過可用內容區(qū)域大小的地圖對象

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

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

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

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

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

9、日期和時間

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

日期標簽：

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

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

時鐘標簽：

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

務必使用時鐘標簽來實現(xiàn)精確倒計時或計時

10、菜單

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

菜單展示一到四個操作

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

菜單操作應用于當前屏幕

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

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

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

菜單是可選的

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

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

【新手必備的指南類好文強烈推薦】

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

配色弱、非科班的設計師童鞋必備！
《設計師配色寶典！教你從零開始學配色（一）》

專為設計師寫的Github學習方法！
《超方便！專為設計師而寫的GITHUB快速入門教程》

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

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

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

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