作者在參加完WWDC2015后撩独,整理出11條針對Apple Watch產(chǎn)品設(shè)計的11個小貼士浸策,可以幫助我們更好地設(shè)計針對Apple Watch的APP。以下是重點條目摘錄翻譯摸柄。
原文:11 Tips For Designing Apps for Apple Watch
1卸察、優(yōu)化你的JPG圖像
Apple Watch用戶在持續(xù)移動的場景下查看4厘米大小的屏幕時她倘,更希望圖片加載更快而不是質(zhì)量更高。也就是說作箍,你需要:
讓JPG圖片質(zhì)量降低
使用大小合適的圖片而不是讓其被裁減
2帝牡、優(yōu)化你的PNG資源
使用PNG-8替代PNG-24
使用PNG-8代替PNG-24能顯著降低文件大小。此外你還可以用黑色背景代替透明背景蒙揣,盡管我不會在網(wǎng)頁/移動設(shè)計中這么做,但在手表上我們可以對資源顯示位置做更多控制开瞭,而90%的情況下我們都會把圖片資源置于黑色背景上懒震。
當你為未來的動畫效果保存圖片序列時,這個技術(shù)能顯著提升性能嗤详。
使用ImageOptim壓縮更多
3. 采用逐步加載方式
如果你需要加載像圖片或地圖那樣的大型資源个扰,那就在加載的同時給用戶展示其他內(nèi)容。不要因為等待圖片加載就阻塞了整個屏幕顯示區(qū)域葱色。
4. 確定圖片占位符和原圖尺寸一致
如果尺寸不一致递宅,一旦圖片加載完成,其他內(nèi)容就會“跳走”苍狰,讓用戶感到摸不著頭腦(尤其是他開始滾動屏幕時)
5. 有序排版你的內(nèi)容
在極短的交互時間里办龄,盡可能快地為用戶展示他想要看的內(nèi)容尤為重要。
6. 手表上的返回鍵沒有標簽淋昭,需要讓其顯示當前屏幕主題俐填。
在iPhone或iPad上,我們可以在屏幕頂部同時看到返回標簽和當前主題翔忽。但手表上沒有足夠的空間讓二者同時顯示英融,所以Apple打算僅顯示用戶當前所在屏幕主題。
7. 讓頁面元素更大
越大越好歇式。確保每個可點擊元素在38mm手表上至少75px驶悟,在42mm手表上至少80px。
8. 使用正確的字體 (San Francisco 壓縮版)
針對移動端/桌面端和手表材失,Apple提供了兩種不同的字體痕鳍。針對手表端,San Francisco font family提供了壓縮版本豺憔。和常規(guī)版相比额获,它提供了更寬的字間距,使之確保在小屏幕上顯示的更清晰恭应。
9. 為手表適配你的icon
Apple Watch上的應用icon是圓形的抄邀,而且明顯比在移動端顯示的尺寸更小。當你把常規(guī)icon尺寸縮小到手表的尺寸后昼榛,它可能看起來并不那么好看境肾。這里有幾個方法能夠確保你的app圖標在手表上是可識別的剔难。
去掉文字,讓圖形更簡約
化簡小尺寸的圖像
設(shè)計一個表現(xiàn)手表功能的圖標
你的寶貝Watch應用能做的事和你的手機端應用一樣么奥喻?有時Watch應用僅是一個(手機端應用)功能上的補充偶宫,比如Camera在手表端是用來當iPhone版相機快門用的。試著把你的圖標設(shè)計成能反映它功能差異性的樣式环鲤。
10. 不用擔心在Sketch/Photoshop中的邊距問題(padding)
在Photoshop/Sketch中設(shè)計手表應用時纯趋,內(nèi)容距離邊框過近讓我感覺很不舒服,而我絕不會讓這種事在Web或移動端發(fā)生冷离,但對于Apple Watch而言吵冒,有一件事則要爛熟于心——手表的硬件底座會為app形成天然的邊距。
11. 要考慮色盲者
記得檢查下你的界面色盲者看到的效果如何西剥。