APPLE WATCH人機交互指南之UI設計基礎
APPLE WATCH人機交互指南之UI設計基礎-移動閱讀二維碼

千呼萬喚始出來!隨著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編程指南。

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中的字母的字符間距和行距自動調整
?讓不同語義文本可以被指定不同的文本類型,比如主體、注腳或者標題。
?讓文本可以隨著不同的文本設置而響應式地調整(包括無障礙文本的大?。?/p>

注意:如果你使用了自定義字體,仍可以根據字體的系統設置縮放文本樣式。當用戶更改設置時,你的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元素設計的細節了,具體請戳->《第二波來了!APPLE WATCH人機交互指南之UI元素設計》

?一些早些時候的Apple Watch相關文章:
你可能需要知道的關于Apple Watch的7件事
怎樣為Apple Watch打造應用體驗
Apple Watch UI動效解析

原文地址:Developer.apple.com
來自uisdc 譯者:@陳子木

本文鏈接:http://www.casaleticia.com/apple-watch-ui-guideline-ui-design-basis.html
本文標簽: , , , , , ,