天天看點

Apple Watch人機互動指南--UI設計基礎(一)

為Apple Watch而設計

本文檔是開發過程中使用的API或者技術的初步文檔。蘋果提供該文檔以幫助你按照文檔中描述的方式為将來采用蘋果産品上使用的技術和界面設計做好準備。後期該文檔中資訊可能會有所變動,是以依據本文檔開發的軟體應使用最終的作業系統軟體和最終文檔進行測試。該文檔可能會根據相關API或技術進行更新。

Apple Watch人機互動指南--UI設計基礎(一)

Apple Watch主要展現如下主題:

1.個體化.Apple Watch屬于可穿戴裝置,其UI需要适應可穿戴的場景,使用者擡起手腕即可展示時間和最新的提醒。Digital Touch-尤其是其Heartbeat和Sketch功能,能夠啟用新的通信類型,這是難以令人置信的個體化表現。加速計和心率傳感儀針對使用者一天天的活動提供了個人化資訊,沒有其他蘋果裝置以此種方式和使用者聯系在一起。這種連接配接方式很重要,因為你是在為Apple Watch而設計。

2.整體性.Apple Watch的設計目的是模糊實體對象和軟體之間的邊界。Digital Crown是一個微調硬體控件,能夠進行精确的軟體導航。内置的Taptic Engine振動模組可以産生與提醒和螢幕互動相關的微妙的實體回報。Force Touch開拓了上下文環境中軟體控制的新次元。甚至Retina顯示屏的實體邊框也被考慮在内,進而産生了可高效渲染無形邊界的全屏UI設計。深思熟慮的app設計有助于模糊軟體和硬體之間的體驗。

3.輕量級.Apple Watch上的應用程式專為快速和輕量級的互動而設計,進而能充分利用顯示屏尺寸和其在手腕上的位置。對于使用者來說,Watch app的資訊應該是可快速簡單地通路和解除的,并且也具備隐私性和易用性。比如Notification Short Look是為了提供最小化的提醒,如果佩戴者繼續使用,則會展示更多資訊。Glances在一個簡單易通路的可滑動界面中展示來自應用程式的資訊。針對Apple Watch的應用程式設計應當遵守佩戴者使用的上下文環境:簡單地、頻繁地,以及在一個小顯示屏上使用。

Watch app是對iOS app的補充,但并非取代它。如果你可以在數分鐘内衡量使用者與iOS app的互動,那麼你可以期待下在數秒内衡量應用程式的互動,是以Watch app的互動應該是簡練的、直覺的以及簡單的。

App 剖析

AppleWatch必須與使用者的iPhone配合使用來運作應用程式。

界面類型

Watchapps支援兩種導航方法:

Hierarchical.該類型與iOS中的導航類型相比對,最适合包含分層資訊的應用程式。在一個hierarchicalapp中,使用者需要在每屏上做出一個選擇來導航,直到到達目的地。如果想導航到另一個目的地,那麼使用者必須折回部分或者全部步驟并做出不同的選擇。

Hierarchical模型要好于扁平化的模型,分頁導航模型适合更複雜的應用程式互動。

"Page-based.分頁界面可讓使用者通過水準方向上的滑動來實作内容頁之間的導航。基于分頁的界面最适合包含簡單資料模型的應用程式,每一頁上的資料并不是直接關聯到其他頁面上的資料。每頁底部的圓點訓示器可展示使用者的位置。要盡可能地通過控制頁面總數來簡化導航。

你不能同時使用分層和分頁的界面類型。在設計時。你必須選擇最适合應用程式内容的類型,并針對該類型進行設計。

不管使用哪一種類型,應用程式都能以模态形式展示内容。模态頁面為使用者提供了一個無幹擾的方式來完成任務或者獲得資訊,但這種方法會暫時阻止使用者與app的其他部分進行互動。更多資訊,請檢視ModalSheets。

使用者互動

"Action-basedevents(基于動作的事件).在AppleWatch中,單點手勢是使用者與應用程式互動的主要方式。表格行、按鈕、開關以及其他控件都通過點選操作,這些點選随後會被報告給你的WatchKit擴充中的代碼。

"Gestures(手勢).您不能為應用程式添加手勢識别,相反系統會為你處理任何手勢,并使用手勢執行标準行為:

· 在豎直方向上滑動滾動目前螢幕。

· 在一個分頁界面中,水準滑動展示上一個或者下一個頁面。

· 向左滑動導航回到父界面控制器。

· 點選(Taps)表示選擇或互動。系統會處理點選手勢并報告給你的WatchKit擴充的操作方法。

AppleWatch不支援多手指手勢,比如捏合操作。

"ForceTouch.小尺寸螢幕容納的控件數量有限,這也是為什麼蘋果會引入一種全新的互動模式--ForceTouch。Retina顯示屏在感覺到使用者點選的同時也感覺到了壓力。ForceTouch互動模式展示與目前螢幕相關的上下文菜單。應用程式則使用該菜單來展示與目前内容相關的操作。更多内容,請參看Menus。

"DigitalCrown.為更細微的調整和加速滾動而設計,而不會妨礙AppleWatch顯示。DigitalCrown可以更簡單地滾動長頁面。

Glances

在Apple Watch上, Glance可以快速檢視你在應用程式中所關注的内容。理想情況下,Glance是及時的,并且是與上下文環境相關的。集中檢視時,Glances是佩戴者最愛app的可浏覽有意義時刻的集合。Glances是pul而不是push,是以它不像裝置上的提醒推送,并且是由佩戴者決定是否通路它們。

Apple Watch人機互動指南--UI設計基礎(一)

Glances是:

·Template-based(基于模闆的). 有适用于Glance 螢幕上部分和下部分的單獨模闆。使用Xcode選擇你需要的模闆,并根據規格設計你的内容。

·Not scrollable(不可滾動).所有内容必須位于單個螢幕中。

·Read-only(隻讀).點選glance上任何地方可打開應用程式。 

·Optional(可選).不是所有的應用程式都需要Glance,并且使用者也可以選擇展示哪個Glances。

Glance底部的區域是留給頁面訓示器圓點的。

基于使用者目前的上下文環境配置Glance。過時的或不相幹的資訊會降低glance的有用性,使用時間和位置來展現目前與使用者相關的内容。

Glances可以深度連結到對應的應用程式。Glances可利用Handoff來通知應用程式--當使用者點選時Glance會展示什麼樣的内容。然後應用程式可使用該資訊來展示一個不同的界面或者相應地配置現有的界面。

Glances必須為使用者提供有用的内容。不要提供一個僅用來鼓勵使用者打開應用程式的Glance。

通知

Apple Watch上的通知以Short Look和Long Look兩種形式推動使用者進行快速、輕量級的互動。當有本地或遠端通知需要展示給使用者時出現Short Look。Short Look提供了深思熟慮的最小化的資訊-保護一定程度的隐私。如果使用者壓低手腕,Short Look則會消失。當使用者手腕擡高或者點選界面中的short look則展示Long Look。Long Look提供了更多詳細資訊和更多功能,必須由使用者積極解除。

謹慎向使用者頻繁發送通知。使用者可能會将頻繁推送的資訊看做騷擾資訊,并禁用您的應用程式在Apple Watch上的資訊功能,是以要確定通知内容與使用者心中所想是相關的。

Short Look通知

Short Looks可以讓使用者知曉哪款應用程式收到了通知,并且隻能簡略地展示。Short Look界面是基于模闆的,并且包含app的名稱、icon以及通知标題。系統使用app的主色展示app的名稱。

Apple Watch人機互動指南--UI設計基礎(一)

标題字元串保持簡短,并突出重點。螢幕上留給标題字元串的可用空間很小,是以标題要簡潔并直指要點。标題字元串并沒有提供通知的細節,隻提供一個簡短的提示。

自定義Long Look 通知

Long Looks對進來的通知提供了更多細節。系統提供了預設的Long look外觀,但是app可以自定義Long Look來包含自定義的圖形/圖像和品牌。Long Look的結構對所有應用程式都一樣。系統在Long Look頂部提供了一個sash和疊加的app圖示以及app名稱。Long Look通知底部也添加了一個解除按鈕和任何app定義的操作按鈕,這中間是你的自定義内容。

Apple Watch人機互動指南--UI設計基礎(一)

應用程式的内容可以和sash疊加覆寫,也可以位于其下。照片和其他圖形内容可使用underlapping(疊加/重疊)選項。對于以文本為主的通知界面來說,啟用Xcode中的Offset Notification Content讓内容位于sash之下。

Apple Watch人機互動指南--UI設計基礎(一)

對于自定義Long Look界面,app必須提供一個靜态界面并可以有選擇地提供一個動态界面。動态界面比靜态界面更有可配置性,但是這兩種方法都使用你的圖像和品牌展示相同的通知類型。靜态界面提供了一個退路以防出現動态界面不可用的情況。

Long look通知最多可展示4個操作按鈕。Apple Watch利用您的iOS app已經注冊的互動式通知在Long Look界面展示操作按鈕。這些操作按鈕會基于通知類型自動展示。

解除按鈕始終存在。該按鈕是您提供的4個操作按鈕之外的按鈕。

關于靜态和動态界面的更多内容,以及如何配置操作按鈕,請參看WatchKit Programming Guide.

模态頁面和布局

Modal sheets利弊兼有,它為使用者提供了一種無幹擾的方式來完成任務或者擷取資訊,或者繼續先前在Force Touch菜單中做的選擇。Modal sheets通過臨時阻止使用者與app其他部分進行互動來達到該結果。

最好能最小化你在app的模态體驗,一般而言,隻有以下情況可考慮建立模态内容:

·得使用者的注意是至關重要的。

·須完成一個獨立的任務,或者明确地放棄某項任務,以避免使用者資料處于模棱兩可的狀态。

模态界面包含單個螢幕,或者在一個分頁布局中包含多個螢幕。兩種界面類型之間的不同之處在于分頁布局界面底部有圓點訓示器。

Apple Watch人機互動指南--UI設計基礎(一)

模态界面左上角用來防止關閉按鈕。當使用者點選該按鈕(或者執行left-edge滑動), 系統則會接觸模态界面無需進一步操作。關閉按鈕是強制展示的,但你可以改變其文本。你無需在目前内容主體中單獨添加關閉按鈕,尤其是當關閉按鈕的文本是"關閉"或"取消"時。關閉按鈕的顔色通常是白色的。

如果任務需要接受,那可在模态界面的主體部分提供一個接受按鈕。為接受操作提供一個标準的按鈕。除了執行适當的操作,點選按鈕還應該解除模态界面。

模态任務要持簡單。避免從第一個模态界面中展示第二個模态界面。

-----------------------------------------------------------------------------------------------------------------------

布局

布局指南

限制界面中并排控件的數量。當并排放置按鈕時,使用icon而不是文本來識别按鈕。并排放置的按鈕數量決不能超過3個。界面中包含多個項目會讓使用者因可點選目标過小而不便操作。

充分使用螢幕上的空間。無需包含螢幕邊緣和内容之間的空白部分,因為Apple Watch的邊框已經在你内容的周圍進行了填充。

應用程式使用相對位置。應用程式在不同尺寸的Apple Watch上展示相同的界面,而相對位置可以讓它們根據不同尺寸螢幕擴充以填充可用的空間。

優先使用左對齊。界面中的元素排列是從上到下從左到右的。将界面中的元素按左對齊,以確定有空間來完整地擴充和展示内容。

文本按鈕全寬。展示标簽的按鈕應該是全寬的,以確定整個按鈕标簽是可見的。

使用下下文菜單展示二級操作。使用上下文菜單包含那些使用頻率不高的操作,而不是在界面中添加按鈕。

螢幕尺寸

無論裝置螢幕尺寸如何,展示在Apple Watch上的内容應該是一樣的。當設計布局時,請讓項目能自然擴充或收縮,以填充可用的空間。

Apple Watch人機互動指南--UI設計基礎(一)

根據需要為不同尺寸的螢幕提供圖檔資産。如果在兩個螢幕尺寸上展示的都非常好,那可以使用相同的圖檔資産,否則要為每個尺寸提供不同的圖檔資産。

顔色和字型

顔色可以為您的應用程式提供視覺連續性和品牌化。

Apple Watch人機互動指南--UI設計基礎(一)

使用黑色作為app的背景色。黑色的背景可以和裝置的邊框無縫融合,并讓使用者産生裝置沒有螢幕邊緣的錯覺。避免在界面中使用明亮的背景色。

使用app的主色彰顯品牌和身份。每款應用程式都定義了一個主色。系統将該主色用在螢幕右上角的标題字元串和通知界面中,以突出app的名稱或者其他主要資訊。您應該同樣使用作色作為app品牌的一部分。

文本使用高對比度顔色。高對比度的顔色可以讓文本更加清晰易讀。

避免使用顔色展示互動性。可在app的品牌上酌情應用顔色,但不要單獨使用顔色來訓示使用者與按鈕或者其他控件的互動。

将色盲使用者考慮在内。大部分色盲群體很難分辨紅色和綠色。測試你的應用程式,以確定沒有在應用程式中唯一使用紅色和綠色來區分兩種狀态或者值(一些圖檔編輯軟體包含可以幫你校對色盲的工具)。

使用顔色交流,但并不總是你想要的方式。每個人對顔色的看法是不同的,并且很多文化賦予顔色的意義也是不一樣的。花點時間調研究如何使用顔色才可能被其他國家和文化接受。盡可能地,確定您應用程式中的顔色傳遞了适當的資訊。

字型

首先字型要清晰易讀。如果使用者不能閱讀應用程式中的文本,那他們也不在乎你使用了多漂亮的字型。

系統字型的主要目的是為提高Apple Watch上文本的易讀性。在較大尺寸螢幕上,字母間輕微壓縮排列緊湊以占用較少的水準空間。在較小尺寸螢幕上,字母排列略松散更易讀。當字型變小時,标點符号會成比例放大。任何時候随着文本大小的更改,Apple Watch會在保持文本清晰和易讀間動态調整。

應用程式通常應當使用動态類型(Dynamic Type),當使用動态類型時,你可以:

· 為每種字型自動調整字元間距和行高。

· 為不同語義文本指定不同的文本類型,比如主體、注腳或者标題。

· 文本适當地響應使用者對字型大小的設定(包括無障礙文本大小)。

注意:如果你使用了自定義字型,你仍可以根據字型的系統設定縮放樣式。當使用者更改設定時,你的應用程式負責适當地進行響應。

如果使用内置的文本類型,那您将免費獲得Dynamic Type支援。如果使用自定義字型,那麼你必須做一些工作來适應這個特性。學習如何使用文本類型,并確定在使用者更改文本大小設定時你的app得到了通知,請參看 Text Programming Guide for iOS中Text Styles一節。

隻要可能,請使用内置的文本類型。内置的文本類型自動支援Dynamic Type,并且内置文本類型可以很好地展示在Apple Watch上。

Apple Watch人機互動指南--UI設計基礎(一)

盡量在app中使用單一字型類型。App出于品牌化目的可使用附加字型,但盡量少用。混合使用多種字型會讓app看起來支離破碎和草率。根據語義用法,比如主體或标題,使用UIFont文本樣式API來定義不同的文本區域。

當手動指定系統字型大小時,磅值決定了正确尺寸的使用。為文本選San Francisco Text字型-19 points或者略小一點。為文本選擇San Francisco Display字型,這種字型大概是20 points或者更大一點。