【翻譯】蘋果手表應用設計的11個建議

本文為 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

Paste_Image.png

盡量使用圖片的實際尺寸,避免裁剪

Paste_Image.png

2、優化你的PNG圖片資源
使用PNG-8代替PNG-24

Paste_Image.png

使用PNG-8代替PNG-24幫助你顯著降低文件的大小。另外,使用黑色背景來代替透明也是一個可行的方法。對于web/移動端時應盡量避免這樣做,但是在手表上我們應該對顯示資源做盡可能多的控制。并且在90%的情況下,這些資源會顯示在黑色背景上。

在保存未來動畫的圖像序列是,這項技術可以尤為顯著提高性能。

使用ImageOptim 壓縮你的圖片,效果更優。

Paste_Image.png

:png8與png24的區別

3、使用漸進式加載

如果你要加載類似于圖片、地圖之類的重內容資源,同時顯示用戶內容的其余部分。不要因為等待圖片的加載而占用整個屏幕。

Paste_Image.png

4、確保占位圖與要顯示的圖片尺寸一致

否則的話,一旦圖片加載完成,其余的內容就是出現跳躍,同時會讓用戶感到迷惑(特別是當他已經開始了滾動的時候)

【此處原文為視頻】

5、將內容進行更明智的排序

將正確的內容以最快的方式顯示非常重要,對于如此短的交互時間更甚。

Paste_Image.png

6、手表上的返回按鈕不在包含標簽,取而代之的是屏幕的標題

Paste_Image.png
Paste_Image.png

iPhone/iPad中我們習慣于在屏幕頂部同時使用標題和返回標簽。在手表上沒有足夠的空間用于同時使用,所以蘋果決定只留下屏幕的標題也就是用于現在看到的樣子

7、使用大的元素

越大越好。確保每一個可點擊元素在38mm屏上至少75px,42mm屏幕上至少80px

Paste_Image.png

8、使用恰當的字體(SF緊湊型

Paste_Image.png

蘋果針對移動/桌面設備和手表設備有兩套不同的字體。針對于手表有專門的San Francisco字體系列的緊湊版本。與普通版本相比,緊湊版本字體相鄰字符間有更多的空間,從而可以在小字號時顯示的更清楚。

9、針對手表調整你的圖標

蘋果手表上的應用圖片以圓形顯示,并且相較于移動設備尺寸更小。而且縮小你普通應用圖標的方法在手表上是不奏效的。這里有一些建議可以幫助你確保識別你的應用在手表上依然被識別出。

移除文本,使標志更簡約

Paste_Image.png

簡化的小尺寸圖形

Paste_Image.png

適應手表的功能
你是否想讓你的手表應用擁有與移動端應用相同的功能?有時,手表應用僅僅只是完成一個功能,例如在iPhone上的照相應用在手表上僅僅只是一個快門。嘗試從功能的不同來呈現你的圖標。

10、不用擔心在Sketch/Photoshop上的填充

Paste_Image.png

Photoshop/Sketch文檔中為手表進行設計時,內容與邊緣的距離讓我非常困擾。在web或者移動設備設計上是沒有這種困擾的。對于蘋果手表謹記它有一個硬件擋板為應用提供天然填充。

11、考慮色盲用戶

Paste_Image.png

在次可以查閱文檔--check how your interface will be seen by color blind users

這是我的第一篇翻譯,難免有不妥之處,望批評指正!!

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 173,523評論 25 708
  • 發現 關注 消息 iOS 第三方庫、插件、知名博客總結 作者大灰狼的小綿羊哥哥關注 2017.06.26 09:4...
    肇東周閱讀 12,252評論 4 61
  • 你們看小別離嗎? 看到方圓去做藥代,我心堵,心疼
    帥zyc閱讀 213評論 0 0
  • 影評:《Her》(中文名:她) “就好像我正在閱讀一本書那樣,一本我深愛的書,可現在我閱讀的速度慢了下來,于是詞語...
    白卿諾依閱讀 789評論 0 1