乾貨速遞！Apple Watch人機交互指南之UI設計基礎(1)

千呼萬喚始出來！隨著Apple Watch開賣的日子臨近，我們終於等來了Apple Watch的官方文檔（HIG）！發布會的時候，許多用戶都對水果神教的智能手錶的設計表示懷疑，為什麼要這麼設計？答案就隱藏在官方的這份設計指南當中。

1、為Apple Watch設計

重要提示：這是一份針對API或技術的初步文檔。蘋果公司所提供的這些信息，可以幫您規劃文中所述的蘋果公司的技術和編程介面。這些信息可能隨時會被修改，根據這份文檔所設計的軟體和界面應通過最終版本的操作系統和軟體的測試。最新版本的文檔可能會提供更多測試版的API和技術。

Apple Watch 的設計專註於以下三個方面：

個人。由於Apple Watch被設計為可穿戴設備，所以它的UI設計應該適應出穿戴者的存在。當用戶抬起手腕的時候，（Apple Watch）應顯示時間和提醒。數字觸摸功能——尤其是心率和草圖功能——提供了更為個人的全新溝通方式。內置的加速度感測器和心率感測器為每個用戶提供了個性化的活動信息。從未有任何蘋果設備能夠像Apple Watch這樣同佩戴者連接在一起。當你在為Apple Watch設計APP的時候，在腦中時刻保有這種意識是非常重要的。

整體。Apple Watch 旨在模糊物理設備和軟體之間的便捷。Apple Watch的側面旋鈕，也就是Digital Crown，是一個微小的硬體控制機構，能對軟體進行細緻入微的導航操控。內置的Taptic引擎能夠針對提醒和屏幕交互產生精細的物理反饋。使用硬體控制物理手勢的Force Touch技術則使得Apple Watch 的軟體控制上升到一個新的層面。Apple Watch所使用的Retina屏幕也使得UI設計的物理邊界不再存在。體貼的APP設計使得硬體和軟體的體驗難以辨別。

輕量級。Apple Watch上的APP應當具備有快速輕便的交互，能最大限度地發揮出手腕上這塊屏幕的優勢。信息的訪問、操作應該快速而便捷，確保私密性和可用性。Short Look 旨在為用戶提供最小化的提醒，用戶需要點擊操作才能查看更多信息。而 Glances 則為用戶提供了來自APP的易於訪問，可滑動操作的界面。為Apple Watch所設計的APP應該遵循佩戴者的使用狀況：簡明、快速以及小屏幕顯示。

Apple Watch上的APP應該是iOS APP的補充，而非替代者。假使你在iOS設備上進行一個操作需要幾分鐘的時間，那麼你在Apple Watch上僅需幾秒就可以完成。因此，交互必須簡短，界面必須簡單。

2、APP 剖析

界面風格

Apple Watch的APP支持兩種導航模式:

分層模式(Hierarchical)。這種風格同iOS的導航模式一致，最適合與信息有層次的APP。在分層模式APP中，用戶通過在每一屏上做出選擇，逐層導航瀏覽找到他們要找的目標。當用戶要找另外一個目標的時候，需要回溯部分頁面，或者回溯全部，然後重新選擇。對於相對複雜的APP交互而言，這種分層模式比起扁平的、用頁碼標識的頁面模式來的更好。

頁面模式(Page-based)。通過頁碼標識的頁面模式界面，用戶只需要在頁面間滑動來實現導航。頁面模式適合包含簡單數據模型的APP，每個頁面的數據並不直接與其他頁面上的數據關聯。每個頁面底部的圓點會指示出用戶的位置。盡量減少頁面數，這樣可以簡化導航。

你不能將分層模式和頁面模式同時用到你的界面設計中。在設計的時候，你需要選擇適合這個APP的模式，並且針對這種模式來設計。

不管使用哪種界面風格，內容的呈現都是模式化的。模式化的界面使得用戶可以無干擾地完成任務或者獲取信息，但是這種方式會暫時阻止用戶同APP的其他部分進行交互，更多信息請參考ModalSheets。

用戶交互

基於動作的事件(Action-based events)。單點手勢是Apple Watch中用戶與APP進行交互的主要方式。表格、按鈕、開關以及其他的控制項都需要通過點擊來操作。這些點擊隨後會以代碼的形式反饋到WatchKit拓展中。

手勢(Gestures)。你不能為你的APP添加手勢識別，相反，系統會為你處理所有的手勢，並且使用手勢來執行標準操作：

在豎直方向上滑動以滾動屏幕。在頁面模式下，水平滑動以切換到上一頁或者下一頁。在左邊緣滑動導向父界面控制器點擊操作，表示選擇或者交互。系統會處理點擊操作，並反饋到WatchKit拓展中。

Apple Watch不支持多指手勢操作，比如雙指縮放（pinch）。

按壓觸摸（Force Touch）。小尺寸屏幕屏幕上能容納的控制項非常有限，這就是為什麼會在Apple Watch中引入按壓觸摸（Force Touch）這種全新的交互模式。正如屏幕能感應到觸摸一樣，Apple Watch的視網膜屏幕還能感知到壓力。當按壓屏幕的操作出現的時候，屏幕上會顯示與當前屏幕相關的菜單，APP可以通過這個菜單來展示與當前內容相關的操作。

Digital Crown，也就是側面旋鈕。Digital Crown是在不影響屏幕顯示的前提下，為更細微的操作和加速滾動而設計的。它可以更為簡單地滾動長頁面。

3、Glances

在Apple Watch上，Glance可以讓你快速預覽一個APP中最核心的內容。理想狀態下，Glance是即時的，且與環境信息相關。當你集中查看的時候，Glance是你最愛的APP的有意義時刻的合集。不同於系統主動推送的提醒，Glance更像是你主動獲取的信息，所以，通常是佩戴者來決定是否訪問它們。

Glance的特性：基於模板的(Template-based)。Glance擁有針對屏幕上半部分和下半部分的單獨模板。你可以使用Xcode來選擇你需要的模板，並且根據規格設計你要的內容。不可滾動的(Not scrollable)。這意味著所有的內容都需要位於屏幕中。只讀的(Read-only)。在Glance狀態下，點擊屏幕任何地方都可以打開對應的APP。可選的(Optional)。並非所有APP都需要Glance，並且用戶可以選擇需要展示哪個Glance。

Glance的底部區域預留給頁面指示圓點。

基於用戶當前環境配置Glance。過時或者不相干的信息會降低Glance的有效性，盡量藉助時間和地點信息來反映當前與用戶相關的內容。

Glance可以深度鏈接到相關的APP。Glance可以利用Handoff來通知APP，當用戶點擊Glance的時候會顯示的內容。然後APP可使用該通知信息來展示一個不同的界面，或者相應地配置現有的界面。

Glance需要為用戶提供有用的信息。不要為用戶提供一個僅僅引導用戶打開某個APP的Glance界面。

4、通知(Notifications)

Apple Watch上的通知是一種快速而輕量級的交互，它主要體現為兩種形式：Short Look和Long Look。當本地或者遠程的通知需要呈現給用戶的時候，Short Look會出現。Short Look 提供的信息相對較少也更為審慎——或者說更為私密。當佩戴者放下手腕的時候，Short Look的通知信息會自動消失。當佩戴者長時間抬高手腕查看通知的時候，或者點擊Short Look信息的時候，通知會轉為Long Look。在Long Look狀態下，通知會呈現出更多的信息，提供更多的功能，這個時候需要佩戴者手動關閉或者操作。

所以，請謹慎地控制向用戶推送通知的頻率。如果通知頻率過高的話，用戶會覺得煩躁並且禁用你APP的推送。請務必確保推送的通知是用戶想要的內容。

Short Look 通知

Short Look 通知會讓用戶知道是什麼APP推送的通知，並且內容會非常簡短。Short Look的界面是基於模板的，並且包含了相應APP的名稱、圖標以及所附通知的標題內容。系統所展示的APP的名稱，會使用APP的關鍵色。

請保持標題簡短而重點突出。由於展示文字內容的空間非常有限，所以內容請務必簡短精悍，不要塞入通知的過多細節，包含簡短的提示就好了。

自定義 Long Look 通知

Long Look 通知將會為用戶帶來更多細節。系統為默認的Long Look 通知提供了一個默認的外觀，但是APP也可以自定義其中的圖形和品牌。所有的Long Look 通知都擁有相同的結構。界面的頂部的空間可以疊加APP的圖標和名稱，最底部是系統默認的取消按鈕，在兩者之間的空間是可以自定義的內容。

APP的內容可以與頂部的空間交疊，也可以置於其下方。對於以文字為主的通知，可以在Xcode中使用直接通知內容的選項，讓內容直接在頂部欄下展示出來。

對於自定義Long Look界面，APP必須提供一個靜態的界面，並且可以選擇性地提供一個動態的界面。動態界面比靜態界面擁有更大的配置空間，但是兩者其中能夠顯示的圖片和品牌內容是一樣多。靜態界面提供了一個備用位置，以防止動態界面無法正常顯示。

Long Look通知下，最多可以容納4個自定義的按鈕。Apple Watch中Long Look通知所展示的可操作的按鈕，主要受到對應的iOS APP的影響。所顯示的按鈕會自動調用APP的通知欄按鈕。

取消按鈕是始終存在的，並且不算在4個按鈕當中。

關於靜態和動態界面的具體信息以及按鈕操作和配置信息，請參閱WatchKit編程指南。

同樣是設計規範，Material Design也值得你深入學習：

幫你挖掘設計規範中的秘密：《追隨谷歌的設計！MATERIAL DESIGN組件中的學問》

學霸幫你總結學習筆記：《學霸的自學筆記！MATERIAL DESIGN設計規範學習心得》

靠譜素材帶你加速設計：《該跟上潮流了！一大波優質的MATERIAL DESIGN資源免費下載》

原文地址：Developer.apple.com優設網譯者：@陳子木

本文由優設網原創翻譯，請尊重版權和譯者成果，轉摘請附上優設鏈接，違者必究。謝謝各位編輯同仁配合。

【優設網 原創文章 投稿郵箱：2650232288@qq.com】

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

相關文章

非特殊說明，本文版權歸原作者所有，轉載請註明出處 本文地址：http://www.uisdc.com/apple-watch-ui-guideline-1

推薦閱讀：