給蘋果表做 app?先看看這 11 個小技巧
對于設計者來說,Apple Watch 是一個全新的玩意。與網頁、桌面客戶端和移動應用的設計相比,Apple Watch 的設計引入了許多新的限制,但同時也帶來了無窮的可能性。
最近我去了趟舊金山,參加了蘋果的 WWDC,并學習了如何為 Apple Watch 設計應用。我很樂意與大家分享這些小技巧,來幫助各位做出更棒的產品。
在這篇文章中提到的大多數東西,都可以在這兩個 WWDC 2015 的視頻里找到:
為 Apple Watch 做設計 & Apple Watch 設計中的小技巧。你還可以看看蘋果官方的Apple Watch 人機界面指南。
請時刻牢記,你的設計要考慮性能
譯注:蛤蛤蛤,蘋果表的爛性能已經開始倒逼設計師改設計了。
通過分析蘋果官方在 WWDC 上的演示情況,看見平均每一次用戶與 Watch 的交互操作所耗費的時間,在 2 到 5 秒之間。假如你只能從這篇文章中記住一點,那它應該是——為用戶提供信息時,要盡可能的快。這一點對于 Watch 來說真的非常非常重要。
1. 優化 JPG 圖片
Apple Watch 的用戶通常是在行走過程中,瞥一眼那塊 4 厘米大小的屏幕。所以他們需要的是更快的加載速度,而不是高清圖片。
降低 JPG 的質量
使用大小正好的圖片
2. 優化 PNG 圖片
使用 PNG-8 替代 PNG-24
使用 PNG-8 替代 PNG-24 能顯著減少圖片大小。
此外你還可以使用黑色背景來替代透明背景。我不會在網頁和移動設備上這么做,但在 Watch 上,我們對于圖片的展示擁有更多控制力。并且 90% 的情況下,這些圖片都將在黑色的背景下展現。
使用 ImageOptim 來壓縮圖片,效果拔群。
ImageOptim 截圖
3. 使用逐步加載
若你需要加載一些大東西的時候,如一張照片或者地圖,請同時向用戶展示其他的信息。不要讓用戶傻等。
在加載的同時給用戶看其他的信息
4. 確保缺省圖片占位符與圖片大小一致
否則,圖片加載出來的瞬間,剩余的內容就會「向下跳」一下,這會干擾到用戶的當前操作,特別是當用戶正在向下滑動屏幕的時候。
缺省圖片占位符
圖片加載出來后,右側因為圖片比缺省圖片占位符要高,內容被擠到下面
5. 內容排序有講究
考慮到用戶與 Watch 只有很短的交互時間,所以要盡可能快的展示重要的信息。
信息排序有講究
6. Watch 上的后退按鈕的標簽不是父界面的標題,而是當前界面的標題。
Watch 上的后退按鈕與標簽
iPhone 上的后退按鈕與標簽
在 iPhone/iPad 上,通常既有當前界面的標題,也有后退按鈕的標簽,它們并存在屏幕的頂部導航欄里。而 Watch 沒有空間顯示兩者,所以蘋果決定只留下當前界面的標題——這也是用戶更關注的。
7. 把元素做大
越大越好。確保每一個可以點擊的元素至少有 75 px(38 毫米 Watch)或者 80 px (42 毫米 Watch)。
確保元素足夠大,以便點擊
8. 使用正確的字體(SF Compact)
- 目前還沒評論,等你發揮!