給蘋果表做 app?先看看這 11 個(gè)小技巧

給蘋果表做 app赘理?先看看這 11 個(gè)小技巧

對于設(shè)計(jì)者來說宦言,Apple Watch 是一個(gè)全新的玩意。與網(wǎng)頁商模、桌面客戶端和移動應(yīng)用的設(shè)計(jì)相比奠旺,Apple Watch 的設(shè)計(jì)引入了許多新的限制,但同時(shí)也帶來了無窮的可能性施流。

最近我去了趟舊金山响疚,參加了蘋果的 WWDC,并學(xué)習(xí)了如何為 Apple Watch 設(shè)計(jì)應(yīng)用瞪醋。我很樂意與大家分享這些小技巧忿晕,來幫助各位做出更棒的產(chǎn)品。

在這篇文章中提到的大多數(shù)東西趟章,都可以在這兩個(gè) WWDC 2015 的視頻里找到:
為 Apple Watch 做設(shè)計(jì) & Apple Watch 設(shè)計(jì)中的小技巧杏糙。你還可以看看蘋果官方的 Apple Watch 人機(jī)界面指南慎王。

請時(shí)刻牢記,你的設(shè)計(jì)要考慮性能

譯注:蛤蛤蛤宏侍,蘋果表的爛性能已經(jīng)開始倒逼設(shè)計(jì)師改設(shè)計(jì)了赖淤。

通過分析蘋果官方在 WWDC 上的演示情況,看見平均每一次用戶與 Watch 的交互操作所耗費(fèi)的時(shí)間谅河,在 2 到 5 秒之間咱旱。假如你只能從這篇文章中記住一點(diǎn),那它應(yīng)該是——為用戶提供信息時(shí)绷耍,要盡可能的快吐限。這一點(diǎn)對于 Watch 來說真的非常非常重要。

1. 優(yōu)化 JPG 圖片

Apple Watch 的用戶通常是在行走過程中褂始,瞥一眼那塊 4 厘米大小的屏幕诸典。所以他們需要的是更快的加載速度,而不是高清圖片崎苗。

降低 JPG 的質(zhì)量
使用大小正好的圖片

2. 優(yōu)化 PNG 圖片

使用 PNG-8 替代 PNG-24

使用 PNG-8 替代 PNG-24 能顯著減少圖片大小狐粱。

此外你還可以使用黑色背景來替代透明背景。我不會在網(wǎng)頁和移動設(shè)備上這么做胆数,但在 Watch 上肌蜻,我們對于圖片的展示擁有更多控制力。并且 90% 的情況下必尼,這些圖片都將在黑色的背景下展現(xiàn)蒋搜。

使用 ImageOptim 來壓縮圖片,效果拔群判莉。

ImageOptim 截圖

3. 使用逐步加載

若你需要加載一些大東西的時(shí)候豆挽,如一張照片或者地圖,請同時(shí)向用戶展示其他的信息券盅。不要讓用戶傻等祷杈。

在加載的同時(shí)給用戶看其他的信息

4. 確保缺省圖片占位符與圖片大小一致

否則,圖片加載出來的瞬間渗饮,剩余的內(nèi)容就會「向下跳」一下,這會干擾到用戶的當(dāng)前操作宿刮,特別是當(dāng)用戶正在向下滑動屏幕的時(shí)候互站。

缺省圖片占位符
圖片加載出來后,右側(cè)因?yàn)閳D片比缺省圖片占位符要高僵缺,內(nèi)容被擠到下面

5. 內(nèi)容排序有講究

考慮到用戶與 Watch 只有很短的交互時(shí)間胡桃,所以要盡可能快的展示重要的信息。

信息排序有講究

6. Watch 上的后退按鈕的標(biāo)簽不是父界面的標(biāo)題磕潮,而是當(dāng)前界面的標(biāo)題翠胰。

Watch 上的后退按鈕與標(biāo)簽
iPhone 上的后退按鈕與標(biāo)簽

在 iPhone/iPad 上容贝,通常既有當(dāng)前界面的標(biāo)題,也有后退按鈕的標(biāo)簽之景,它們并存在屏幕的頂部導(dǎo)航欄里斤富。而 Watch 沒有空間顯示兩者,所以蘋果決定只留下當(dāng)前界面的標(biāo)題——這也是用戶更關(guān)注的锻狗。

7. 把元素做大

越大越好满力。確保每一個(gè)可以點(diǎn)擊的元素至少有 75 px(38 毫米 Watch)或者 80 px (42 毫米 Watch)。

確保元素足夠大轻纪,以便點(diǎn)擊

8. 使用正確的字體(SF Compact)

San Francisco 字體

蘋果官方為移動/桌面設(shè)備和 Watch 提供了兩種字體油额。在 Watch 上,請使用 San Francisco 的 Compact 版本刻帚。與常規(guī)的版本相比較潦嘶,它在字符間留有更多的留白,這使得小字體看起來更清晰崇众。

9. 為 Watch 調(diào)整圖標(biāo)

Apple Watch 上的應(yīng)用圖標(biāo)是圓形的掂僵,并且比移動端上的明顯要小。大多數(shù)情況下校摩,僅僅縮小移動 app 里的圖標(biāo)來適應(yīng) Watch 的尺寸并不合適看峻。這有一些小技巧幫助你保持你的 app 在 Watch 的識別度。

移除文字衙吩,使圖形更簡潔
簡化圖形并縮小尺寸
展示手表的功能

你的 Watch 應(yīng)用與手機(jī)應(yīng)用的功能一樣嗎互妓?有些 Watch 應(yīng)用僅提供輔助功能,例如相機(jī)應(yīng)用的 Watch 版只提供了手機(jī)版的快門功能坤塞》朊悖可以通過調(diào)整圖標(biāo)來展示這個(gè)功能上差異。

相機(jī)應(yīng)用的 Watch 版只有快門功能摹芙,右側(cè)為 Watch 上的相機(jī)應(yīng)用圖標(biāo)

10. 在 Sketch/PS 里設(shè)計(jì)時(shí)灼狰,不用擔(dān)心 padding 的問題

Apple Watch 自帶 padding

當(dāng)我在為 Watch 做設(shè)計(jì)時(shí),內(nèi)容到邊框的距離曾讓我很困惑浮禾。對于 Apple Watch 的設(shè)計(jì)來說交胚,請牢記表盤的邊框會為 app 提供一個(gè)天然的 padding。

11. 留意色盲用戶

譯注:考慮到電池續(xù)航問題盈电,蘋果官方的 Apple Watch 人機(jī)界面文檔鼓勵(lì)使用黑色作為 app 的背景蝴簇。為了在黑色上顯眼,大量 app 使用紅綠等強(qiáng)對比色匆帚,但這在色盲/色弱用戶看起來熬词,也許并沒有什么差別。

色盲用戶所見到的世界

時(shí)刻反思你的界面在色盲用戶看起來是如何的


以上譯文僅代表原作者觀點(diǎn)互拾。
原作者 Artiom Dashinsky
原文 11 Tips For Designing Apps for Apple Watch
由 設(shè)計(jì)譯言 原創(chuàng)翻譯歪今,如需轉(zhuǎn)載請先聯(lián)系我,并注明出處及本文地址颜矿。
如對文章翻譯版權(quán)有異議寄猩,請聯(lián)系我。
If you have any problem about the translation rights, please contact me.

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末或衡,一起剝皮案震驚了整個(gè)濱河市焦影,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌封断,老刑警劉巖斯辰,帶你破解...
    沈念sama閱讀 216,496評論 6 501
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異坡疼,居然都是意外死亡彬呻,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,407評論 3 392
  • 文/潘曉璐 我一進(jìn)店門柄瑰,熙熙樓的掌柜王于貴愁眉苦臉地迎上來闸氮,“玉大人,你說我怎么就攤上這事教沾∑芽纾” “怎么了?”我有些...
    開封第一講書人閱讀 162,632評論 0 353
  • 文/不壞的土叔 我叫張陵授翻,是天一觀的道長或悲。 經(jīng)常有香客問我,道長堪唐,這世上最難降的妖魔是什么巡语? 我笑而不...
    開封第一講書人閱讀 58,180評論 1 292
  • 正文 為了忘掉前任,我火速辦了婚禮淮菠,結(jié)果婚禮上男公,老公的妹妹穿的比我還像新娘。我一直安慰自己合陵,他們只是感情好枢赔,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,198評論 6 388
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著拥知,像睡著了一般糠爬。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上举庶,一...
    開封第一講書人閱讀 51,165評論 1 299
  • 那天,我揣著相機(jī)與錄音揩抡,去河邊找鬼户侥。 笑死镀琉,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的蕊唐。 我是一名探鬼主播屋摔,決...
    沈念sama閱讀 40,052評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼替梨!你這毒婦竟也來了钓试?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 38,910評論 0 274
  • 序言:老撾萬榮一對情侶失蹤副瀑,失蹤者是張志新(化名)和其女友劉穎弓熏,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體糠睡,經(jīng)...
    沈念sama閱讀 45,324評論 1 310
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡挽鞠,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,542評論 2 332
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了狈孔。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片信认。...
    茶點(diǎn)故事閱讀 39,711評論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖均抽,靈堂內(nèi)的尸體忽然破棺而出嫁赏,到底是詐尸還是另有隱情,我是刑警寧澤油挥,帶...
    沈念sama閱讀 35,424評論 5 343
  • 正文 年R本政府宣布潦蝇,位于F島的核電站,受9級特大地震影響喘漏,放射性物質(zhì)發(fā)生泄漏护蝶。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,017評論 3 326
  • 文/蒙蒙 一翩迈、第九天 我趴在偏房一處隱蔽的房頂上張望持灰。 院中可真熱鬧,春花似錦负饲、人聲如沸堤魁。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,668評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽妥泉。三九已至,卻和暖如春洞坑,著一層夾襖步出監(jiān)牢的瞬間盲链,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,823評論 1 269
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留刽沾,地道東北人本慕。 一個(gè)月前我還...
    沈念sama閱讀 47,722評論 2 368
  • 正文 我出身青樓,卻偏偏與公主長得像侧漓,于是被迫代替她去往敵國和親锅尘。 傳聞我的和親對象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,611評論 2 353

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