本文為 Artiom Dashinsky 文章的翻譯 原文鏈接:原文鏈接
蘋果手表包含新的約束及可能性,是我們以往做web、桌面及移動端設計時沒有碰到過的全新類型的設備。
最近,我去舊金山旅游,從WWDC學到了一些蘋果手表應用設計方面的東西。希望將這些小技巧與大家分享,從而幫助大家創建更好的產品。
這篇文章中提到的大部分建議都可以在WWDC 2015的Designing for Apple Watch&Apple Watch Design Tips and Tricks章節中找到解釋。你可以查看蘋果官方文檔 Watch Human Interface Guidelines。
始終銘記你是為性能而做的設計
蘋果在WWDC上的分析表明,用戶與手表的平均交互時間是2~5秒。如果有一件事是你必須記住的,那就是本文這些內容。始終以最快的速度為用戶顯示所要的內容。相較于其他平臺這個是最重要的。
1、優化你的JPG
圖
蘋果用戶使用折4cm
大小的屏幕不斷移動瀏覽,相較于高質量的圖片用戶可能更專注加載速度的快慢。
使用較低質量的JPG
圖
盡量使用圖片的實際尺寸,避免裁剪
2、優化你的PNG
圖片資源
使用PNG-8
代替PNG-24
使用PNG-8
代替PNG-24
幫助你顯著降低文件的大小。另外,使用黑色背景來代替透明也是一個可行的方法。對于web/移動端
時應盡量避免這樣做,但是在手表上我們應該對顯示資源做盡可能多的控制。并且在90%的情況下,這些資源會顯示在黑色背景上。
在保存未來動畫的圖像序列是,這項技術可以尤為顯著提高性能。
使用ImageOptim 壓縮你的圖片,效果更優。
3、使用漸進式加載
如果你要加載類似于圖片、地圖之類的重內容資源,同時顯示用戶內容的其余部分。不要因為等待圖片的加載而占用整個屏幕。
4、確保占位圖與要顯示的圖片尺寸一致
否則的話,一旦圖片加載完成,其余的內容就是出現跳躍,同時會讓用戶感到迷惑(特別是當他已經開始了滾動的時候)
【此處原文為視頻】
5、將內容進行更明智的排序
將正確的內容以最快的方式顯示非常重要,對于如此短的交互時間更甚。
6、手表上的返回按鈕不在包含標簽,取而代之的是屏幕的標題
在iPhone/iPad
中我們習慣于在屏幕頂部同時使用標題和返回標簽。在手表上沒有足夠的空間用于同時使用,所以蘋果決定只留下屏幕的標題也就是用于現在看到的樣子
7、使用大的元素
越大越好。確保每一個可點擊元素在38mm
屏上至少75px
,42mm
屏幕上至少80px
。
8、使用恰當的字體(SF緊湊型
)
蘋果針對移動/桌面設備和手表設備有兩套不同的字體。針對于手表有專門的San Francisco
字體系列的緊湊版本。與普通版本相比,緊湊版本字體相鄰字符間有更多的空間,從而可以在小字號時顯示的更清楚。
9、針對手表調整你的圖標
蘋果手表上的應用圖片以圓形顯示,并且相較于移動設備尺寸更小。而且縮小你普通應用圖標的方法在手表上是不奏效的。這里有一些建議可以幫助你確保識別你的應用在手表上依然被識別出。
移除文本,使標志更簡約
簡化的小尺寸圖形
適應手表的功能
你是否想讓你的手表應用擁有與移動端應用相同的功能?有時,手表應用僅僅只是完成一個功能,例如在iPhone上的照相應用在手表上僅僅只是一個快門。嘗試從功能的不同來呈現你的圖標。
10、不用擔心在Sketch/Photoshop
上的填充
在Photoshop/Sketch
文檔中為手表進行設計時,內容與邊緣的距離讓我非常困擾。在web或者移動設備設計上是沒有這種困擾的。對于蘋果手表謹記它有一個硬件擋板為應用提供天然填充。
11、考慮色盲用戶
在次可以查閱文檔--check how your interface will be seen by color blind users
這是我的第一篇翻譯,難免有不妥之處,望批評指正!!