Apple Watch應(yīng)用設(shè)計(上)

Apple Watch
Apple Watch

目前我的工作基本上不大可能會需要設(shè)計一款A(yù)pple Watch應(yīng)用,不過我覺得在Apple Watch上設(shè)計開發(fā)一款應(yīng)用應(yīng)該是一件很酷的事情枣申,所以最近看了一些相關(guān)文章,也在這里分享下看杭。
我還沒買Apple Watch忠藤,也沒有親身體驗一款A(yù)pple Watch,我只是看看文章或視頻楼雹,我寫的內(nèi)容也許有錯誤模孩。買Apple Watch前提還需要買一個iPhone6,事實上我現(xiàn)在用的iPhone5已經(jīng)兩年多了贮缅,最近屏幕碎了也懶得去修榨咐。雖然我是個蘋果產(chǎn)品粉絲,不過我是個理性消費的人谴供。(恩块茁,我不會告訴你其實這是因為窮。)
先簡單了解下Apple Watch應(yīng)用。

一数焊、導(dǎo)航

Watch支持兩種界面導(dǎo)航方式:

  1. 層級式導(dǎo)航
    適用于功能和數(shù)據(jù)較為復(fù)雜的產(chǎn)品永淌,用戶需要層層遞進(jìn)的訪問某些功能或內(nèi)容。大多數(shù)應(yīng)用佩耳,比如聊天類仰禀、購物類,都適合使用這種導(dǎo)航方式蚕愤。
  2. 頁面式導(dǎo)航
    適用于那些信息模型相對簡單答恶、不同模塊之間不存在直接數(shù)據(jù)關(guān)聯(lián)的產(chǎn)品。比如天氣類應(yīng)用萍诱,在不同的城市切換可以使用這種頁面式導(dǎo)航方式悬嗓。

你必須在這兩種導(dǎo)航方式中選擇一種來設(shè)計你的應(yīng)用。

二裕坊、交互

  1. 輕點
    和iOS App一樣包竹,列表、按鈕籍凝、切換等控件都可以通過輕點來操作周瞎,這是Watch應(yīng)用的主要交互方式。
  2. 手勢
    你不能在Watch應(yīng)用里擅自添加任何定制的手勢操作饵蒂,系統(tǒng)已經(jīng)自帶了一些手勢操作:
    也許是考慮到屏幕太小声诸,Apple Watch不支持多指手勢,比如在iPhone上兩指捏合能縮小地圖是不支持的退盯。
  • 垂直方向滑動可以滾動當(dāng)前屏幕彼乌;
  • 在頁面式導(dǎo)航應(yīng)用,水平方向滑動能切換不同的頁面渊迁;
  • 在層級式導(dǎo)航應(yīng)用慰照,從屏幕左邊緣向右滑動可以返回到父級頁面;
  1. 按壓(Force Touch)
    這是蘋果帶來的一種全新的交互方式琉朽,Watch的屏幕能感知到用戶的按壓毒租,從而呼喚出相應(yīng)的菜單。Force Touch據(jù)說會運(yùn)用在下一代iPhone上箱叁。

  2. 數(shù)碼表冠(The Digital Crown)
    前文提到垂直方向滑動手指可以達(dá)到滾動當(dāng)前屏幕的效果墅垮,但是在Watch如此小的屏幕上滑動手指,屏幕的內(nèi)容往往會被手指遮擋蝌蹂,所以蘋果發(fā)明了數(shù)碼表冠噩斟,轉(zhuǎn)動數(shù)碼表冠就可以滾動當(dāng)前頁面。
    曾經(jīng)給手表上弦的表冠孤个,在智能手表上被保留并賦予了新的交互方式剃允,這樣的設(shè)計既是一種產(chǎn)品傳承,也體現(xiàn)了做為新事物的獨特創(chuàng)新和靈感。

三斥废、應(yīng)用組件

Apple Watch應(yīng)用除去App本身外椒楣,還包括Notification和Glance模塊。

  1. 通知(Notification)
    Notification類似于iPhone當(dāng)中的通知牡肉,Notification分為“普通”與“可交互”兩種模式捧灰,類似于iPhone會在屏幕頂端默認(rèn)呈現(xiàn)“普通”的通知橫幅,下拉后便會將其切換至可交互模式统锤,提供回復(fù)一類的操作毛俏。在Watch端,這兩種模式分別叫做“Short Look”與“Long Look”饲窿。
  • Short Look
    為了讓用戶可以在最短時間做出判斷煌寇,同時也為了保護(hù)隱私,Short Look只提供最少量的必要信息逾雄。界面簡單至極阀溶,形式完全由系統(tǒng)模板定義,包括應(yīng)用圖標(biāo)鸦泳、消息標(biāo)題以及應(yīng)用名稱三個組成部分银锻,全部在一屏當(dāng)中顯示,不支持滾動做鹰。
    當(dāng)一條通知過來击纬,Watch先以Short Look形式展示給用戶,如果用戶對當(dāng)前消息沒興趣誊垢,只需要把手放下掉弛,通知會自動從屏幕消失。如果用戶保持手腕姿勢不變喂走,Watch就會認(rèn)為用戶有了解更多信息的想法,進(jìn)而自動將Short Look轉(zhuǎn)換為Long Look谋作,以提供更加詳細(xì)的內(nèi)容和可交互的選擇芋肠。如此的智能和人性化,這才是好的設(shè)計遵蚜。

  • Long Look
    相比于Short Look帖池,Long Look內(nèi)容形式稍微豐富,屏幕當(dāng)然會更long吭净,所以支持滾屏了呢睡汹。雖然內(nèi)容相對豐富,但仍要遵循系統(tǒng)提供的標(biāo)準(zhǔn)框架:頂部欄由系統(tǒng)提供寂殉,用于顯示app的圖標(biāo)及名稱(可自定義背景色)囚巴;最底部的Dismiss按鈕同樣由系統(tǒng)輸出,用來關(guān)閉Notification;而這兩者之間的區(qū)域則可以由app自己來定義彤叉,包括內(nèi)容和互動功能兩部分庶柿。
    在Long Look里最多可以放置4個定制化的功能按鈕,如果用戶看到通知后需要有進(jìn)一步的操作秽浇,那么你的應(yīng)用應(yīng)該盡可能讓用戶在這個4個按鈕中完成浮庐,避免讓用戶再拿出iPhone,這就不是Apple Watch的目的了柬焕。

  1. 一瞥(Glance)

自從 19 世紀(jì)手表誕生以來审残,瞥一眼手腕查看時間,已經(jīng)成了人們的習(xí)慣動作斑举,有了 Apple Watch搅轿,這個習(xí)慣性的一瞥可以給你更多訊息。我們開發(fā)了Glance懂昂,這個功能可以將你查看最頻繁的訊息提煉出來介时,使你常用的 app 更加適合在手腕上瀏覽操作。要查看相關(guān)訊息時凌彬,你只需用手指向上輕掃一下沸柔,就能立即瀏覽天氣預(yù)報、查看日歷上的下一步安排铲敛,或在地圖上查找當(dāng)前位置褐澎。你可以通過左右輕掃來翻閱不同的 Glance,或輕點其中一個伐蒋,即可打開相應(yīng)的 app 查看詳情工三。

這是蘋果對Glance的介紹,相信即便你沒有Apple Watch也能感受到Glance到底是什么東西先鱼。

Glance有點類似于iPhone通知中心里的Widget俭正,它是一個可選組件,每個App最多只能擁有一個Glance視圖焙畔。由于它可以非常輕松的喚出掸读,只需要手指從手表屏幕向上輕掃一下,所以你應(yīng)該把用戶最關(guān)心最常用的信息放在Glance里宏多,比如一個to-do類應(yīng)用顯示用戶接下來要做的事情儿惫,航旅應(yīng)用可以顯示用戶當(dāng)前航班的信息,理財應(yīng)用可以顯示用戶昨天的收益情況伸但。

Glance具有以下幾方面的特性:

  • 基于模板肾请。Glance界面的上下兩部分有各自獨立的模板。你可以在Xcode當(dāng)中挑選合適的模板更胖,并按照相應(yīng)的規(guī)格設(shè)計你的內(nèi)容铛铁。 - 不可滾動隔显。所有信息都要集中呈現(xiàn)在一屏當(dāng)中。
  • 只讀避归。輕點Glance界面當(dāng)中的任何地方都會打開相應(yīng)的應(yīng)用荣月。 - 非強(qiáng)制。不是所有的應(yīng)用都需要Glance視圖梳毙,用戶可以自主選擇在Glance(s)中顯示哪些應(yīng)用的信息哺窄。

以上是對Apple Watch應(yīng)用的一些基本了解,接下來我會寫什么情況我們需要做一款Watch應(yīng)用账锹,為什么要做萌业。并且會自己設(shè)計一款A(yù)pple Watch應(yīng)用。
(本篇完)

一些有幫助的文章
Apple Watch平臺認(rèn)知與產(chǎn)品設(shè)計
http://www.beforweb.com/node/695

Apple Watch Design Resources
http://www.tuicool.com/articles/Z77JJbm

關(guān)于Watch應(yīng)用的導(dǎo)航奸柬、通知生年、復(fù)雜任務(wù)及動效
http://www.beforweb.com/node/717

為Soundwave設(shè)計Watch應(yīng)用時學(xué)到的五件事
http://www.beforweb.com/node/701

Apple Watch界面設(shè)計規(guī)范(預(yù)發(fā)布版本)
http://beforweb.com/node/596

為Apple Watch簡化現(xiàn)有產(chǎn)品的設(shè)計思路
http://www.beforweb.com/node/709

初識WatchKit
http://www.cocoachina.com/ios/20141121/10276.html


題圖來自Apple官網(wǎng)。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末廓奕,一起剝皮案震驚了整個濱河市抱婉,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌桌粉,老刑警劉巖蒸绩,帶你破解...
    沈念sama閱讀 206,839評論 6 482
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異铃肯,居然都是意外死亡患亿,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,543評論 2 382
  • 文/潘曉璐 我一進(jìn)店門押逼,熙熙樓的掌柜王于貴愁眉苦臉地迎上來步藕,“玉大人,你說我怎么就攤上這事挑格×撸” “怎么了?”我有些...
    開封第一講書人閱讀 153,116評論 0 344
  • 文/不壞的土叔 我叫張陵漂彤,是天一觀的道長乞娄。 經(jīng)常有香客問我,道長显歧,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 55,371評論 1 279
  • 正文 為了忘掉前任确镊,我火速辦了婚禮士骤,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘蕾域。我一直安慰自己拷肌,他們只是感情好到旦,可當(dāng)我...
    茶點故事閱讀 64,384評論 5 374
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著巨缘,像睡著了一般添忘。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上若锁,一...
    開封第一講書人閱讀 49,111評論 1 285
  • 那天搁骑,我揣著相機(jī)與錄音,去河邊找鬼又固。 笑死仲器,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的仰冠。 我是一名探鬼主播乏冀,決...
    沈念sama閱讀 38,416評論 3 400
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼洋只!你這毒婦竟也來了辆沦?” 一聲冷哼從身側(cè)響起亥鸠,我...
    開封第一講書人閱讀 37,053評論 0 259
  • 序言:老撾萬榮一對情侶失蹤沈堡,失蹤者是張志新(化名)和其女友劉穎酒繁,沒想到半個月后闸度,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體畜疾,經(jīng)...
    沈念sama閱讀 43,558評論 1 300
  • 正文 獨居荒郊野嶺守林人離奇死亡候齿,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,007評論 2 325
  • 正文 我和宋清朗相戀三年茶没,在試婚紗的時候發(fā)現(xiàn)自己被綠了筒占。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片妻献。...
    茶點故事閱讀 38,117評論 1 334
  • 序言:一個原本活蹦亂跳的男人離奇死亡蛛株,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出育拨,到底是詐尸還是另有隱情谨履,我是刑警寧澤,帶...
    沈念sama閱讀 33,756評論 4 324
  • 正文 年R本政府宣布熬丧,位于F島的核電站笋粟,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏析蝴。R本人自食惡果不足惜害捕,卻給世界環(huán)境...
    茶點故事閱讀 39,324評論 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望闷畸。 院中可真熱鬧尝盼,春花似錦、人聲如沸佑菩。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,315評論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至赴精,卻和暖如春佩捞,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背蕾哟。 一陣腳步聲響...
    開封第一講書人閱讀 31,539評論 1 262
  • 我被黑心中介騙來泰國打工一忱, 沒想到剛下飛機(jī)就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人渐苏。 一個月前我還...
    沈念sama閱讀 45,578評論 2 355
  • 正文 我出身青樓掀潮,卻偏偏與公主長得像,于是被迫代替她去往敵國和親琼富。 傳聞我的和親對象是個殘疾皇子仪吧,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 42,877評論 2 345

推薦閱讀更多精彩內(nèi)容