UI設計基礎的內容占據了Apple Watch 人機交互指南文檔中40%的篇幅，它不僅詳細解釋了UI設計的規則，還仔細講述了這么設計的原因所在，你可以從這些稍顯拗口的文字中看到Apple Watch的另一個側面：嚴謹。這些深思熟慮的細節（哪怕你不喜歡），和那些野生的“智能手表”有著巨大的差別。

5、Modal Sheets

Modal Sheets 的優缺點都很明顯。它讓用戶可以無干擾地完成任務、獲取信息或者繼續在Force Touch菜單中做選擇。為了實現這一點，Modal Sheets會暫時阻止用戶同APP的其他部分進行交互。

在設計的時候，你最好能將APP的模式體驗盡可能最小化，一般而言，在以下情況下可考慮創建模式內容：

?當吸引用戶的注意力成為至關重要的事情
?當為了避免用戶數據處于模棱兩可的狀態，而需要完成一個獨立的任務，或者需要明確地放棄某個任務的時候

模式界面包含單個屏幕界面，或者包含多個分頁屏幕界面。兩種界面唯一的區別是后者在分頁底部有小圓點指示。

在模式界面的左上方的位置留給關閉按鈕。當用戶點擊點擊左上角這個按鈕（或者在做邊緣互動操作的時候），系統會關閉模式界面而不會進行更多的操作。 關閉按鈕是系統強制顯示的，不會被隱藏，但是你可以改變顯示的內容（比如close改成cancel）。這也意外著你無需再往下方的內容主體中再單獨添加 關閉按鈕，尤其是當左上方的按鈕顯示的是“關閉”或者“取消”的時候。左上方按鈕通常是白色的。

如果所涉及任務需要確認或者接受，那么可以在模式界面的內容主體中添加“接受”或者“確認”按鈕。除了執行適當的操作之外，點擊了這些按鈕之后還會解除當前的模式界面。

盡量確保任務界面簡單直接。避免從一個模式界面跳轉到第二個模式界面。

6、布局

布局指南

限制界面中并排控件的數目。當使用并排按鈕的時候，請使用icon而非文本按鈕。并排放置的按鈕數量不能超過3個，界面中包含項目過多會讓用戶因目標過小而不便操作。

充分運用屏幕空間。由于Apple Watch的邊框已經對主體內容的邊緣進行了填充，所以設計的時候無需再包含屏幕邊緣和內容之間的空白。注意這些多余的邊緣也不會在模擬器中顯示。

APP的項目間會使用相對位置。由于APP會在不同尺寸的Apple Watch上顯示相同的界面，相對位置會讓它們根據不同的屏幕而擴展填充多余的空間。

布局會優先使用左對齊。你的界面中的元素排布方式是從上到下，從左到右來布局的。界面元素采用左對齊，可以確保有足夠的空間來擴展和展示內容。

確保文本按鈕占據全部寬度。使用文本按鈕的時候，應該確保按鈕占據全部寬度，這樣能使得按鈕標簽始終可見。

使用上下文菜單來展示二級操作。使用上下文菜單來展示使用頻率不高的操作，而不是在界面中直接添加按鈕。

屏幕尺寸

無論屏幕尺寸如何，Apple Watch應當展示相同的內容。在設計屏幕布局的時候，務必讓各項目能自然擴展收縮，填補可用空間。

根據不同尺寸的屏幕提供圖片素材。如果內容在兩個尺寸的屏幕上展示效果都很好，那么可以使用相同的圖片素材，否則需要為不同尺寸屏幕提供不同的圖片素材。

7、色彩與排版

色彩

色彩可以為你的APP的提供視覺的連續性和品牌化設計。

使用黑色作為APP的背景色。黑色背景可以讓界面和設備邊緣無縫融合，讓用戶產生設備沒有屏幕邊緣的錯覺。盡量避免在界面中使用明亮的背景色。

使用APP的主色調來彰顯品牌和身份。每個APP都有主色調，系統會將主色調應用到屏幕左上角的標題字符和通知界面中，突出APP的名稱和其他關鍵信息，你應該以類似的方式來進行APP的品牌設計。

使用高對比度色彩的文本。高對比度色彩會使得文字更加易讀。

避免使用色彩來展示交互性?？梢栽贏PP的品牌設計上酌情上色，但是不要單獨使用色彩來指示用戶與按鈕以及其他控件來交互。

務必考慮到色盲用戶。大部分色盲用戶是紅綠色盲，所以請測試一下你的APP，確保紅綠色不是其中區分不同狀態和值的唯一配色方案。（一些圖片編輯軟件中會包含色盲校對工具）

使用色彩來交流，不過不要始終用你習慣的方式。每個人對于色彩的認知不盡相同，而且很多文化對色彩賦予的意義也不一樣。所以，你需要花費一點時間來研究APP配色如何能讓其他的國家和文化接受。盡可能確保你的APP中的色彩傳遞合適的信息。

排版設計

首先，文字要清晰易讀。如果用戶不能清晰地閱讀APP中的文本，字體再漂亮也是白搭。

為了提高Apple Watch的文本易讀性，Apple專門為此設計了名為“舊金山”的系統字體。在較大的屏幕上，字體間隙被輕微壓縮，如此緊密排列以占用較少的水平空間。 但是在較小平面上，松散的字母排列會更加易讀。當字體變小的時候，標點符號會按照一定比例放大。任何時候對文本大小進行調整，Apple Watch都會為了保持文本的清晰度和易讀性而進行動態調整。

所以，APP應該始終使用動態類型（Dynamic Type）。當你使用動態類型的時候，你可以做到以下幾點：
?讓APP中的字母的字符間距和行距自動調整
?讓不同語義文本可以被指定不同的文本類型，比如主體、注腳或者標題。
?讓文本可以隨著不同的文本設置而響應式地調整（包括無障礙文本的大小）

注意:如果你使用了自定義字體，仍可以根據字體的系統設置縮放文本樣式。當用戶更改設置時，你的APP適當地進行響應式調整。

如果你使用內置的文本類型，那么你將直接獲得動態類型（Dynamic Type）支持。如果你使用自定義字體，那么你需要對其進行調整以采用這種特性。學習如何使用文本類型，并確保在用戶更改文本大小設置時，你的APP能得 到了通知，請參看 Text Programming Guide for iOS中Text Styles一節。

盡可能使用內置的文本類型。內置的文本類型自動支持動態類型（Dynamic Type），并且內置文本類型可以更好地在Apple Watch上展示。

盡量在APP中使用單一字體類型。出于品牌化設計的需求，APP中可以使用附加字體，但盡量少用?；旌鲜褂枚喾N字體會讓APP看起來支離破碎和草率。根據語義用法，比如主體和標題，可以使用UIFont文本樣式API來定義不同的文本區域。

當手動設定系統字體大小的時候，磅值決定了正確尺寸。為文本選San Francisco 文本字體的時候，字體大小為19點，或者略小一點。為文本選擇San Francisco Display文本字體的時候，字體大概是20點，或者更大一點。

8、動效

精細漂亮的動效遍布Apple Watch的每個角落，并為用戶引入充滿活力的用戶體驗。恰如其分的動效能帶來如下效果：

?表明狀態并提供反饋
?以更加視覺化的方式幫用戶了解操作的結果

使用一系列靜態圖片創造渲染動效。你可以在Apple Watch 的APP中儲存錄制好的動畫(Canned Animations)，這樣可以向用戶快速展示。錄制好的動畫可以讓你交付更為流暢的高幀動畫。你可以從WatchKit擴展中動態地創建動畫，再將其 轉移到Apple Watch，在回放之前添加一定的延遲就好了。

僅有圖片和分組對象(Group Objects)可以使用回放控件。大部分界面對象是以無限循環的方式來展示動態圖像序列的。要終止動畫，或從動畫中回放一組特定的幀，你必須使用圖片或者分組對象。

9、品牌化設計

成功的品牌化設計所涉及的內容，遠不止于在APP中添加品牌素材。最好的APP將現有素材和獨特的外觀與感覺結合在一起，為用戶提供了一個令人愉悅而難忘的體驗。

品牌化你的APP有多種途徑，其中包括icon、配色、自定義按鈕、自定義字體以及所使用的版權內容等。在你設計APP的圖形元素時，務必記得讓每 個自定義元素都要看起來很好，并其本身的功能也一樣運行良好，最重要的是，每個元素看起來也應當和APP中的其他元素一直，不管它是否是定制的。

以優雅不違和的方式整合品牌素材。用戶使用你的APP來完成任務或者娛樂，但他們不想被強迫觀看廣告。為了獲得最佳的用戶體驗，你可能需要通過色彩、精心選擇的字體或者意像來潛移默化地提高用戶對品牌的辨識度。

抵制在APP或Glance中展示Logo的誘惑。Apple Watch上的空間非常寶貴，每次展示logo都會占用內容的空間，并且在APP中展示Logo的目的與在網頁中展示Logo有所不同：很多時候，用戶會 進入某個的網頁并不會意識到它的所有者，但用戶在打開APP之前通常會查看APP icon，并且明白它屬于誰。

結語

看完UI設計基礎之后，你需要開始了解Apple Watch 人機交互指南的第二個部分 UI元素設計的細節了。

原文來自：優設

譯文地址：Developer.apple.com

優設網譯者：@陳子木

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

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

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

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

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

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