Apple Watch 人機交互指南對于除了對交互和UI元素進行了詳細的說明之外，還單獨開辟了一章來規范圖標和圖片的使用，這個部分的內容并不多，但是非常重要。一套系統的規范可靠與否，往往都是從這些細節的要求中體現出來的。

上一部分人機交互指南：
《干貨速遞！APPLE WATCH人機交互指南之UI設計基礎(1)》
《干貨速遞！APPLE WATCH人機交互指南之UI設計基礎(2)》
《第二波來了！APPLE WATCH人機交互指南之UI元素設計》

1、圖標與圖像尺寸

每個應該用都需要有一顆美觀獨特且便于記憶的主屏圖標。因為在主屏屏幕上，辨識應用的全部手段就是它的圖標，你的圖標應該是可識別的且與你iOS應用圖標相似，因為它仍然傳達你的應用的目標。

圖標尺寸

主屏圖標是正圓形，表20-1列出了每顆圖標適宜的直徑及用途。創建圖標時使用全出血正方形圖像，其邊長為下表中給定的直徑。系統會自動創建圓形遮罩。

所有的圖像資源應該都是@2x的圖像。不需要在你的Watch應用程序包中包含非@2x資源。

所有的圖像和圖標推薦使用PNG格式。不要使用交錯PNG。

圖像和圖標的標準位深是24位——也就是紅、綠、藍各8位。你也可以包含8位透明通道，但是這不是必須的。你還可以帶有索引顏色的PNG圖像來節約圖像所占空間。

主屏圖標

Apple Watch的主屏圖標是獨一無二但令人熟悉的。主屏圖標與其iOS圖標相呼應，但沒有相應文字。在如此之小的空間中，這些圖標需要足夠清晰，才能識別它們所代表的應用。Apple Watch應用在功能上與其兄弟iOS app非常相似，因此圖標也應在視覺上保持一致。但是當Watch應用作為iOS應用的補充或遙控器時，圖標設計也會有所不同。

為了獲得最佳效果，盡量找到專業平面設計師的幫助。一位有經驗的平面設計師可以幫你制定應用的整體視覺風格，并將其應用在所有圖像及圖標中。

使用人們很容易識別的通用標示。一般情況下，避免二元的或令人費解的元素。比如，郵件圖標使用信封，而不是鄉村郵箱、郵包或郵局圖標。

擁抱簡潔。尤其是避免在圖表中塞入大量圖像。找到捕捉到你應用本質的單一元素，并把這一元素表達為簡單、獨特的形狀。謹慎添加細節。如果圖標內容或形狀過于復雜，那么細節就會混在一起，在小尺寸中看起來會渾濁不清。

為你應用的核心思想創建抽象解釋。通常情況下，最好用藝術的方式解釋現實，因為這樣可以讓用戶注意到你希望他們注意的方面。

讓你的圖標與你iOS應用的圖標相似。保持相似的外觀可以幫助用戶把你的Watch應用于iOS應用聯系起來。

為兩種Apple Watch顯示尺寸創建不同尺寸的主屏圖標。你需要確保你的圖標在兩種Apple Watch設備尺寸中都能良好顯示。具體的設備及尺寸請參見表20-1。

2、菜單圖像

用力點擊菜單的圖標是模板圖像，圖像中包含透明通道，形成最終的形狀。圖像中的顏色信息被忽視。

菜單圖像的畫布尺寸比其內容大。你內容周圍的額外區域確保菜單圖標邊界和你的內容之間有足夠的距離。

在設計你菜單圖像中的形狀時，根據設備尺寸和圖形復雜程度使用合適的線寬。線寬最少為4像素，以免模糊。

菜單圖像推薦使用PNG格式。避免使用交錯PNG。

結語

到這里，Apple Watch 人機交互指南就告一段落了。雖然指南對很多設計項目作出了明確的指示，但是給予設計師的設計空間還是非常大的。接下來，就看你的了，設計師。

【新手必備的指南類好文強烈推薦】

每個網站都有的404頁面創建指南！
《超實用！不容錯過的優秀404頁面設計指南》

配色弱、非科班的設計師童鞋必備！
《設計師配色寶典！教你從零開始學配色（一）》

專為設計師寫的Github學習方法！
《超方便！專為設計師而寫的GITHUB快速入門教程》

原文地址：Developer.apple
優設網譯者：@阿布

本文由優設網原創翻譯，請尊重版權和譯者成果，轉摘請附上優設鏈接，違者必究。謝謝各位編輯同仁配合。

【優設網 原創文章 投稿郵箱：2650232288@qq.com】

================關于優設網================
"優設網uisdc.com"是國內人氣最高的網頁設計師學習平臺，專注分享網頁設計、無線端設計以及PS教程。
【特色推薦】
設計師需要讀的100本書：史上最全的設計師圖書導航：http://hao.uisdc.com/book/。
設計微博：擁有粉絲量86萬的人氣微博@優秀網頁設計 ，歡迎關注獲取網頁設計資源、下載頂尖設計素材。
設計導航：全球頂尖設計網站推薦，設計師必備導航：http://hao.uisdc.com
———————————————————–
想在手機上、被窩里獲取設計教程、經驗分享和各種意想不到的"福利"嗎？
添加 優秀網頁設計 微信號：【youshege】優設哥的全拼
您也可以通過掃描下方二維碼快速添加：