目前我的工作基本上不大可能會需要設計一款Apple Watch應用,不過我覺得在Apple Watch上設計開發一款應用應該是一件很酷的事情,所以最近看了一些相關文章,也在這里分享下。
我還沒買Apple Watch,也沒有親身體驗一款Apple Watch,我只是看看文章或視頻,我寫的內容也許有錯誤。買Apple Watch前提還需要買一個iPhone6,事實上我現在用的iPhone5已經兩年多了,最近屏幕碎了也懶得去修。雖然我是個蘋果產品粉絲,不過我是個理性消費的人。(恩,我不會告訴你其實這是因為窮。)
先簡單了解下Apple Watch應用。
一、導航
Watch支持兩種界面導航方式:
- 層級式導航
適用于功能和數據較為復雜的產品,用戶需要層層遞進的訪問某些功能或內容。大多數應用,比如聊天類、購物類,都適合使用這種導航方式。 - 頁面式導航
適用于那些信息模型相對簡單、不同模塊之間不存在直接數據關聯的產品。比如天氣類應用,在不同的城市切換可以使用這種頁面式導航方式。
你必須在這兩種導航方式中選擇一種來設計你的應用。
二、交互
- 輕點
和iOS App一樣,列表、按鈕、切換等控件都可以通過輕點來操作,這是Watch應用的主要交互方式。 - 手勢
你不能在Watch應用里擅自添加任何定制的手勢操作,系統已經自帶了一些手勢操作:
也許是考慮到屏幕太小,Apple Watch不支持多指手勢,比如在iPhone上兩指捏合能縮小地圖是不支持的。
- 垂直方向滑動可以滾動當前屏幕;
- 在頁面式導航應用,水平方向滑動能切換不同的頁面;
- 在層級式導航應用,從屏幕左邊緣向右滑動可以返回到父級頁面;
按壓(Force Touch)
這是蘋果帶來的一種全新的交互方式,Watch的屏幕能感知到用戶的按壓,從而呼喚出相應的菜單。Force Touch據說會運用在下一代iPhone上。數碼表冠(The Digital Crown)
前文提到垂直方向滑動手指可以達到滾動當前屏幕的效果,但是在Watch如此小的屏幕上滑動手指,屏幕的內容往往會被手指遮擋,所以蘋果發明了數碼表冠,轉動數碼表冠就可以滾動當前頁面。
曾經給手表上弦的表冠,在智能手表上被保留并賦予了新的交互方式,這樣的設計既是一種產品傳承,也體現了做為新事物的獨特創新和靈感。
三、應用組件
Apple Watch應用除去App本身外,還包括Notification和Glance模塊。
- 通知(Notification)
Notification類似于iPhone當中的通知,Notification分為“普通”與“可交互”兩種模式,類似于iPhone會在屏幕頂端默認呈現“普通”的通知橫幅,下拉后便會將其切換至可交互模式,提供回復一類的操作。在Watch端,這兩種模式分別叫做“Short Look”與“Long Look”。
Short Look
為了讓用戶可以在最短時間做出判斷,同時也為了保護隱私,Short Look只提供最少量的必要信息。界面簡單至極,形式完全由系統模板定義,包括應用圖標、消息標題以及應用名稱三個組成部分,全部在一屏當中顯示,不支持滾動。
當一條通知過來,Watch先以Short Look形式展示給用戶,如果用戶對當前消息沒興趣,只需要把手放下,通知會自動從屏幕消失。如果用戶保持手腕姿勢不變,Watch就會認為用戶有了解更多信息的想法,進而自動將Short Look轉換為Long Look,以提供更加詳細的內容和可交互的選擇。如此的智能和人性化,這才是好的設計。Long Look
相比于Short Look,Long Look內容形式稍微豐富,屏幕當然會更long,所以支持滾屏了呢。雖然內容相對豐富,但仍要遵循系統提供的標準框架:頂部欄由系統提供,用于顯示app的圖標及名稱(可自定義背景色);最底部的Dismiss按鈕同樣由系統輸出,用來關閉Notification;而這兩者之間的區域則可以由app自己來定義,包括內容和互動功能兩部分。
在Long Look里最多可以放置4個定制化的功能按鈕,如果用戶看到通知后需要有進一步的操作,那么你的應用應該盡可能讓用戶在這個4個按鈕中完成,避免讓用戶再拿出iPhone,這就不是Apple Watch的目的了。
- 一瞥(Glance)
自從 19 世紀手表誕生以來,瞥一眼手腕查看時間,已經成了人們的習慣動作,有了 Apple Watch,這個習慣性的一瞥可以給你更多訊息。我們開發了Glance,這個功能可以將你查看最頻繁的訊息提煉出來,使你常用的 app 更加適合在手腕上瀏覽操作。要查看相關訊息時,你只需用手指向上輕掃一下,就能立即瀏覽天氣預報、查看日歷上的下一步安排,或在地圖上查找當前位置。你可以通過左右輕掃來翻閱不同的 Glance,或輕點其中一個,即可打開相應的 app 查看詳情。
這是蘋果對Glance的介紹,相信即便你沒有Apple Watch也能感受到Glance到底是什么東西。
Glance有點類似于iPhone通知中心里的Widget,它是一個可選組件,每個App最多只能擁有一個Glance視圖。由于它可以非常輕松的喚出,只需要手指從手表屏幕向上輕掃一下,所以你應該把用戶最關心最常用的信息放在Glance里,比如一個to-do類應用顯示用戶接下來要做的事情,航旅應用可以顯示用戶當前航班的信息,理財應用可以顯示用戶昨天的收益情況。
Glance具有以下幾方面的特性:
- 基于模板。Glance界面的上下兩部分有各自獨立的模板。你可以在Xcode當中挑選合適的模板,并按照相應的規格設計你的內容。 - 不可滾動。所有信息都要集中呈現在一屏當中。
- 只讀。輕點Glance界面當中的任何地方都會打開相應的應用。 - 非強制。不是所有的應用都需要Glance視圖,用戶可以自主選擇在Glance(s)中顯示哪些應用的信息。
以上是對Apple Watch應用的一些基本了解,接下來我會寫什么情況我們需要做一款Watch應用,為什么要做。并且會自己設計一款Apple Watch應用。
(本篇完)
一些有幫助的文章
Apple Watch平臺認知與產品設計
http://www.beforweb.com/node/695
Apple Watch Design Resources
http://www.tuicool.com/articles/Z77JJbm
關于Watch應用的導航、通知、復雜任務及動效
http://www.beforweb.com/node/717
為Soundwave設計Watch應用時學到的五件事
http://www.beforweb.com/node/701
Apple Watch界面設計規范(預發布版本)
http://beforweb.com/node/596
為Apple Watch簡化現有產品的設計思路
http://www.beforweb.com/node/709
初識WatchKit
http://www.cocoachina.com/ios/20141121/10276.html
題圖來自Apple官網。