Apple Watch應用設計(上)

Apple Watch
Apple Watch

目前我的工作基本上不大可能會需要設計一款Apple Watch應用,不過我覺得在Apple Watch上設計開發一款應用應該是一件很酷的事情,所以最近看了一些相關文章,也在這里分享下。
我還沒買Apple Watch,也沒有親身體驗一款Apple Watch,我只是看看文章或視頻,我寫的內容也許有錯誤。買Apple Watch前提還需要買一個iPhone6,事實上我現在用的iPhone5已經兩年多了,最近屏幕碎了也懶得去修。雖然我是個蘋果產品粉絲,不過我是個理性消費的人。(恩,我不會告訴你其實這是因為窮。)
先簡單了解下Apple Watch應用。

一、導航

Watch支持兩種界面導航方式:

  1. 層級式導航
    適用于功能和數據較為復雜的產品,用戶需要層層遞進的訪問某些功能或內容。大多數應用,比如聊天類、購物類,都適合使用這種導航方式。
  2. 頁面式導航
    適用于那些信息模型相對簡單、不同模塊之間不存在直接數據關聯的產品。比如天氣類應用,在不同的城市切換可以使用這種頁面式導航方式。

你必須在這兩種導航方式中選擇一種來設計你的應用。

二、交互

  1. 輕點
    和iOS App一樣,列表、按鈕、切換等控件都可以通過輕點來操作,這是Watch應用的主要交互方式。
  2. 手勢
    你不能在Watch應用里擅自添加任何定制的手勢操作,系統已經自帶了一些手勢操作:
    也許是考慮到屏幕太小,Apple Watch不支持多指手勢,比如在iPhone上兩指捏合能縮小地圖是不支持的。
  • 垂直方向滑動可以滾動當前屏幕;
  • 在頁面式導航應用,水平方向滑動能切換不同的頁面;
  • 在層級式導航應用,從屏幕左邊緣向右滑動可以返回到父級頁面;
  1. 按壓(Force Touch)
    這是蘋果帶來的一種全新的交互方式,Watch的屏幕能感知到用戶的按壓,從而呼喚出相應的菜單。Force Touch據說會運用在下一代iPhone上。

  2. 數碼表冠(The Digital Crown)
    前文提到垂直方向滑動手指可以達到滾動當前屏幕的效果,但是在Watch如此小的屏幕上滑動手指,屏幕的內容往往會被手指遮擋,所以蘋果發明了數碼表冠,轉動數碼表冠就可以滾動當前頁面。
    曾經給手表上弦的表冠,在智能手表上被保留并賦予了新的交互方式,這樣的設計既是一種產品傳承,也體現了做為新事物的獨特創新和靈感。

三、應用組件

Apple Watch應用除去App本身外,還包括Notification和Glance模塊。

  1. 通知(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的目的了。

  1. 一瞥(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官網。

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 228,030評論 6 531
  • 序言:濱河連續發生了三起死亡事件,死亡現場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發現死者居然都...
    沈念sama閱讀 98,310評論 3 415
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 175,951評論 0 373
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 62,796評論 1 309
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 71,566評論 6 407
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上,一...
    開封第一講書人閱讀 55,055評論 1 322
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,142評論 3 440
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 42,303評論 0 288
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當地人在樹林里發現了一具尸體,經...
    沈念sama閱讀 48,799評論 1 333
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 40,683評論 3 354
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 42,899評論 1 369
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 38,409評論 5 358
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發生泄漏。R本人自食惡果不足惜,卻給世界環境...
    茶點故事閱讀 44,135評論 3 347
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 34,520評論 0 26
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 35,757評論 1 282
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 51,528評論 3 390
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 47,844評論 2 372

推薦閱讀更多精彩內容