UI設計基礎

為Apple Watch而設計

重要
這是一份API或技術開發的初步文檔。蘋果公司提供這份文檔來幫助你使用在此描述的技術和編程接口開發的應用,使之運行在蘋果系列產品上。文檔可能發生變化,參照此文檔開發的軟件應根據最終操作系統和文檔進行測試。更新的文檔可能隨API或技術的測試版一起提供。

Apple Watch包含以下主題:

個人。因為Apple Watch是戴在手上的, 它的UI是根據佩戴者所處的環境調整的。抬起手腕顯示時間和新提醒。Digital Touch—特別是它的心跳和素描功能—開啟了一種全新的交流方式. 加速計和心率傳感器提供佩戴者每天活動的個人信息。從來沒有一款蘋果設備跟佩戴者如此連接。當你為Apple Watch設計應用時,應留心這種連接。

整體. Apple Watch模糊了物理設備和軟件的邊界。Digital Crown是一個精心調整的硬件控制器,能夠進行精細軟件導航。Taptic Engine產生與提醒和屏幕交互有關的,細微物理反饋。Force Touch—一個由硬件翻譯的物理手勢—展現了軟件上下文控制的新維度。即便考慮到Retina的物理邊框,邊到邊UI設計有效地渲染邊框不可見。考慮周全的應用設計應該致力于這種硬件和軟件的無區別體驗。

輕量。Apple Watch上的應用為快速、輕量的交互而設計。最大限度的利用屏幕尺寸和手表位置在手腕上的特性 。考慮到隱私和可用性,信息獲取和解散應快速、容易。例如,short-look通知是最小限度的提醒,僅當佩戴者持續使用時才展現更多信息。Glances通過易獲取、可滑動的界面提供應用信息。為Apple Watch設計的應用應當考慮佩戴者使用的環境:短暫,頻繁,狹小的屏幕。

WatchKit應用補充它所包含的iOS應用,而不是代替它。如果你評估iOS應用交互以分鐘為單位,那么你評估WatchKit應用以秒鐘為單位。所以保持交互的簡單和界面的簡單。

應用剖析

Apple Watch必須與用戶的iPhone配合來運行你的應用。

界面導航風格

WatchKit應用支持兩種導航模式:

  • 層級。這種風格符合iOS的導航風格,并且是最適合層級結構的應用。在層級結構應用中,用戶通過在每一頁面做一個決定來最終到達目的頁面。如果要去其他目的頁面,用戶必須退回一些或者所有之前經過的頁面,重新做出選擇。

對交互較為復雜的應用來說,層級模式尤其比扁平、任意翻頁的導航模式強。

  • 基于頁面(page-based)。任意翻頁的界面使用戶通過水平滑動,在不同內容頁面進行瀏覽。基于頁面的界面最適合數據模型簡單,且每一頁的數據與其他頁的數據沒有直接聯系。

每一頁底部的點指示器告訴用戶其當前位置。為了簡化導航,盡可能保持總頁數小。

你不能將層級和基于頁面的界面風格結合起來。在設計時,你必須選擇最適合你應用內容的風格并為之設計。

應用使用兩者之中任意一個界面風格都可以將內容模態話地呈現出來。模態界面給用戶提供一個完成任務或者無干擾地獲取信息的方式,但是用戶暫時不能與應用的其他部分進行交互。查看模態表單。

用戶交互

  • 基于動作事件(action-based events)。點擊(tap)意味著選擇或交互。單擊手勢是用戶與你的應用交互的主要方法。列表行,按鈕,開關(switches)以及其他控件都是通過點擊來操作的。這些點擊隨后傳送給了WatchKit擴展中的代碼。

  • 手勢。系統替你處理所有的手勢,你可以使用它們來執行標準操作:
    · 垂直滑動,滾動當前頁。
    · 在基于頁面的界面中,水平滑動,展示上一頁或下一頁。
    · 在左邊(left edge)滑動,返回父頁面。
    Apple Watch不支持多手指手勢,例如捏合。

  • Force Touch。在感測觸碰的同時,Retina屏幕也在探測用戶手指使用的力量。當探測到這種觸碰與力量的結合時,系統顯示與當前頁有關的上下文菜單(如果有的話)。應用使用這個菜單顯示與當前頁有關的操作。查看菜單。

  • Digital Crown。設計用于精心調整的,加速滾動-而不妨礙Apple Watch顯示-Digital Crown讓用戶在長頁面滾動時變得簡單。第三方應用只能使用Digital Crown滾動頁面。

Glances

一處瀏覽(viewed together),Glance是從用戶喜歡的應用收集一系列可瀏覽的,與時間、環境相關的時刻。尤其,Glance是一種快速查看你應用的最重要內容的方式。Glance的底部區域是保留給頁面點指示器。

Glances是:

  • 基于模版。Glance上、下部分分別有不同的模板。使用Xcode選擇你喜歡的模板并根據你的內容進行對應設計。
  • 不可滾動。所有內容在一頁顯示。
  • 與一個動作有關。點擊Glance任意地方,在適當頁面打開應用。
  • 可選擇。不是所有應用都需要Glance,并且由用戶選擇顯示哪個Glance。

根據用戶當前環境配置Glance。陳舊的或不相關信息會使Glance價值降低。使用時間和地點來判斷與用戶當前相關的內容。

利用handoff建立深鏈接(deep link)到WatchKit應用。當用戶點擊時,Glance通過handoff告訴它們的應用Glance剛剛在展示什么。然后,WatchKit擴展包可以使用這些信息來配置對應的用戶界面。

給用戶提供有價值的內容。不要僅僅使用Glance來方便運行應用。

通知

Apple Watch上的通知使本地和遠程通知變得快速、輕量交互。這些交互發生在兩種場景下,分別是short-look和long-look界面。當本地或遠程通知最初到達的時候,出現short-look界面。short-look展現謹慎、最少量的信息給用戶——考慮到隱私。如果佩戴者降低手腕,short-look界面消失。當佩戴者抬高手腕或點擊short-look界面時,long-look界面出現。long-look提供更多細節信息和功能——它必須由佩戴者主動解除。

注意給用戶發送通知的頻率。用戶可能討厭頻繁的通知從而禁止你的應用在Apple Watch上的通知。一定要確保通知與用戶想要的內容相關。

Short-look通知

short-look讓用戶了解哪款應用收到了通知并且信息簡潔明了。short-look界面是基于模版的,包含了應用名稱,應用圖標(icon)以及通知標題。系統使用應用主色(key color)顯示應用名稱。

保持標題短小精干。顯示標題的空間是最小的,所以保持它們短小精干。標題不要提供通知的細節。他們提供僅僅是一個簡潔的提示。

自定義Long-Look通知

long-look提供更多關于即將到來通知的細節。系統提供默認long-look的界面,但你可以使用定制圖片和商標進行自定義。long-look界面的結構對所有應用都相同。在界面頂部是系統提供的sash,用來顯示應用圖標和應用名稱。在界面的底部是解散(dismiss)按鈕。在中間的是你的定制內容和任何應用指定的動作按鈕。

提供一個靜態和動態(可選擇)界面。動態界面相比靜態更可配置,但兩者都使用你的圖片和商標顯示相同的通知類型。當動態界面不可用時,使用靜態界面。

最多增加四個自定義動作按鈕。Apple Watch利用由iOS應用注冊的可交互通知,在long-look界面顯示動作按鈕。系統根據通知種類自動顯示動作按鈕,這些按鈕不包括由系統提供的解散按鈕。

配置sash顏色來匹配你的品牌。sash區域的顏色和透明度可以在自定義界面進行配置。

了解更多關于靜態和動態界面,以及如何配置自定義按鈕,查看Apple Watch Programming Guide

模態表單

模態表單給用戶提供一個完成任務或者無干擾地獲取信息的方式,或者繼續某個在菜單控件中開始的選擇。模態表單通過暫時阻止用戶與應用其他部分交互來達成此目的。

最好使應用中的模態體驗最少。總的來說,考慮使用模態環境,僅當:

  • 緊急需要引起用戶注意。
  • 一個自我包含的任務必須被完成-或者明確放棄-避免使用戶數據陷入模糊不清的狀態。

模態界面包含一個或多個頁面,顯示在一個基于頁面的布局中。兩者界面唯一的不同是基于頁面界面底部的點指示器。模態界面左上角為關閉按鈕保留。當用戶點擊這個按鈕(或執行左邊滑動)時,系統直接解散模態界面。

不要在你的內容中增加單獨的關閉按鈕。系統提供的關閉按鈕是強制的,但是你可以改變它的文字來傳達意圖。典型的關閉按鈕文字為關閉和取消。關閉按鈕的顏色永遠是白色。

為需要征求同意的任務提供允許按鈕。允許操作使用標準按鈕。點擊按鈕應該執行合適的動作,然后解散模態界面。

確保模態任務簡單。避免從一個模態界面中顯示另一個模態界面。

布局

應用在所有型號的Apple Watch中顯示相同的界面。相對定位使控件可以根據需要放大來填充可用空間。

一般原則

限制在你界面中邊到邊(side-by-side)的控件數量。當邊到邊放置按鈕時,使用圖標代替文字。絕不放置超過三個邊到邊控件。包含越多控件,用戶可點擊目標越小。

利用屏幕全寬(full width)。因為 Apple Watch的藍寶石屏幕在你內容的周圍增加了視覺填充(padding),你不需要在屏幕邊緣和內容之間包含頁邊距(需要指出的是,填充沒有在iOS模擬器中顯示)。

使用左對齊。你界面上的元素按照從上到下,從左到右排列。從左邊(left edge)對齊元素,確保它們有空間放大并顯示全部內容。

使文字按鈕利用屏幕全寬。顯示文字標簽的按鈕應該是全寬,這樣整個按鈕標簽才總是可見。

使用上下文菜單顯示次要操作。比起在界面中增加按鈕,為操作使用上下文菜單這種做法更常見。

屏幕大小

在不同的屏幕中,提供相同的內容。當設計布局時,使用相對尺寸和字間距選項,以便部件自然地放大或縮小來適應可用空間。

僅當需要時,為不同的屏幕尺寸提供圖片資源。如果在不同的屏幕尺寸上效果都很好,使用相同的圖片資源文件;否則,為每個尺寸提供獨立的圖片資源文件(相同的圖片內容)。

顏色和字體

在應用中使用顏色和字體的指導原則是可讀。

顏色

顏色幫助你的應用提供視覺連續性和品牌認知。

使用黑色做為應用的背景色。黑色背景無縫地與藍寶石屏幕融合,造成一種無屏幕邊框的感覺。在界面中避免鮮明的背景色。

使用應用主色(key color)來表現品牌或狀態信息。每個應用都應定義主色。頁面和通知界面左上角的標題,系統使用主色來強調應用的名稱或其他重要的信息。同樣地,使用主色作為應用品牌認知的一部分。

文字使用強對比色。強對比色使文字可讀性更好。

避免使用顏色作為表明交互的唯一方法。適當地使用顏色作為品牌認知元素,但是不要僅僅為表明按鈕和其他控件而使用顏色。

注意色盲。大多數色盲患者很難分清紅色和綠色。測試你的應用,確保沒有僅僅使用紅色和綠色作為唯一區別兩種狀態或值的地方(一些圖片編輯軟件包含測試色盲的工具)。

研究你是用的顏色在其他國家或文化中如何被理解。每個人看待顏色的含義都不同,許多文化都對顏色賦予了不同的意義。盡可能多的確保應用中使用的顏色傳達了適當的信息。

字體

首先,文字必須可讀。如果用戶在應用中無法閱讀,字體再漂亮也沒用。

系統字體是為了使字體在Apple Watch上具有可讀性而設計的。大字體時,字體的字母輕微壓縮且緊密,這樣就占領了更少的水平空間。但是小字體時,字體間更寬松,而且像a和e這樣的字母有更大的開口,使文字一瞥之間更容易辨認。字體變小時,標點也會成比例放大。當字體大小改變時,Apple Watch動態切換字體,始終保持清晰和可讀性。

總是使用動態類型。動態類型使你的應用:

  • 自動調整每種尺寸字體的字母間距和行高,
  • 給語意不同的文字塊指定不同的字體風格,例如主體腳注標題
  • 文字恰當的響應用戶在設置中對字體的改變(包括所有字體大小)。

注意
如果使用自定義字體,也可以根據系統設置中字體的大小做出調整。當用戶改變設置時,應用負責做出適當響應。

如果使用內建字體,你便免費獲得了動態類型支持。如果使用自定義字體,你必須為適配做一些工作。了解如何使用字體風格,以及確保應用在用戶改變設置中的字體時獲得通知,查看字體風格。

盡可能使用內建字體風格。內建字體自動支持動態類型且在Apple Watch上好看。

在應用中使用單一字體。混用許多不同字體使你的應用看起來零碎且草率。

當手動指定系統字體時,選擇基于鎊值的字體。為19鎊或更小的文字,選擇San Francisco文本字體。為20鎊或更大的文字,選擇San Francisco顯示字體。

動畫

Apple Watch上遍布漂亮、精細的動畫,使用戶體驗更迷人和動態。適當的動畫:

  • 傳達狀態并提供反饋。
  • 幫助用戶形象化操作結果。

使用一系列靜態圖片制作提前渲染的動畫。將預制的動畫存儲在你的WatchKit應用程序包中,這樣就可以快速的呈現給用戶了。預制的動畫同時使你提供高幀率和更流暢的動畫。通過WatchKit擴展包動態制作動畫并將它們轉交給Apple Watch會在開始重放前增加延遲。

當你想要為動畫增加回放控件時,使用圖片或組對象(group object)。多數界面對象無限循環地顯示動畫圖像。只有圖片或組對象提供用程序開始和結束動畫的方法。

品牌

有許多方法推廣你應用,包括你在應用中使用的圖標,顏色,自定義按鈕,自定義字體以及文本。當你設計應用的圖像元素時,記住每一個自定義元素應該看起來漂亮并且自身運轉良好,但它也應該看起來與應用中的其他元素(無論是自定義的還是標準控件)有關。

用一種精良的、不突出的方法包含品牌價值。用戶使用你的應用是為了完成一些事情或娛樂;他們不希望感覺像在被強迫看廣告。最佳用戶體驗是,通過選擇字體,顏色和圖像,悄悄提醒用戶品牌識別。

抵制在應用或Glance中顯示logo的誘惑。Apple Watch上的空間很寶貴,每個logo的出現都會占用用戶想看到內容的空間。而且,在應用中顯示logo的目的跟網頁不同:用戶經常會在不知道品牌的情況下進入網頁,但用戶一般會在打開應用前看到應用圖標。

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容