第三波來了！APPLE WATCH人機(jī)交互指南之圖標(biāo)與圖片設(shè)計(jì)

Apple Watch 人機(jī)交互指南對于除了對交互和UI元素進(jìn)行了詳細(xì)的說明之外，還單獨(dú)開辟了一章來規(guī)范圖標(biāo)和圖片的使用，這個(gè)部分的內(nèi)容并不多，但是非常重要。一套系統(tǒng)的規(guī)范可靠與否，往往都是從這些細(xì)節(jié)的要求中體現(xiàn)出來的。

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

1、圖標(biāo)與圖像尺寸

每個(gè)應(yīng)該用都需要有一顆美觀獨(dú)特且便于記憶的主屏圖標(biāo)。因?yàn)樵谥髌疗聊簧希孀R(shí)應(yīng)用的全部手段就是它的圖標(biāo)，你的圖標(biāo)應(yīng)該是可識(shí)別的且與你iOS應(yīng)用圖標(biāo)相似，因?yàn)樗匀粋鬟_(dá)你的應(yīng)用的目標(biāo)。

圖標(biāo)尺寸

主屏圖標(biāo)是正圓形，表20-1列出了每顆圖標(biāo)適宜的直徑及用途。創(chuàng)建圖標(biāo)時(shí)使用全出血正方形圖像，其邊長為下表中給定的直徑。系統(tǒng)會(huì)自動(dòng)創(chuàng)建圓形遮罩。

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

所有的圖像和圖標(biāo)推薦使用PNG格式。不要使用交錯(cuò)PNG。

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

主屏圖標(biāo)

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

為了獲得最佳效果，盡量找到專業(yè)平面設(shè)計(jì)師的幫助。一位有經(jīng)驗(yàn)的平面設(shè)計(jì)師可以幫你制定應(yīng)用的整體視覺風(fēng)格，并將其應(yīng)用在所有圖像及圖標(biāo)中。

使用人們很容易識(shí)別的通用標(biāo)示。一般情況下，避免二元的或令人費(fèi)解的元素。比如，郵件圖標(biāo)使用信封，而不是鄉(xiāng)村郵箱、郵包或郵局圖標(biāo)。

擁抱簡潔。尤其是避免在圖表中塞入大量圖像。找到捕捉到你應(yīng)用本質(zhì)的單一元素，并把這一元素表達(dá)為簡單、獨(dú)特的形狀。謹(jǐn)慎添加細(xì)節(jié)。如果圖標(biāo)內(nèi)容或形狀過于復(fù)雜，那么細(xì)節(jié)就會(huì)混在一起，在小尺寸中看起來會(huì)渾濁不清。

為你應(yīng)用的核心思想創(chuàng)建抽象解釋。通常情況下，最好用藝術(shù)的方式解釋現(xiàn)實(shí)，因?yàn)檫@樣可以讓用戶注意到你希望他們注意的方面。

讓你的圖標(biāo)與你iOS應(yīng)用的圖標(biāo)相似。保持相似的外觀可以幫助用戶把你的Watch應(yīng)用于iOS應(yīng)用聯(lián)系起來。

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

2、菜單圖像

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

菜單圖像的畫布尺寸比其內(nèi)容大。你內(nèi)容周圍的額外區(qū)域確保菜單圖標(biāo)邊界和你的內(nèi)容之間有足夠的距離。

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

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

結(jié)語

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

【新手必備的指南類好文強(qiáng)烈推薦】

每個(gè)網(wǎng)站都有的404頁面創(chuàng)建指南！
《超實(shí)用！不容錯(cuò)過的優(yōu)秀404頁面設(shè)計(jì)指南》

配色弱、非科班的設(shè)計(jì)師童鞋必備！
《設(shè)計(jì)師配色寶典！教你從零開始學(xué)配色（一）》

專為設(shè)計(jì)師寫的Github學(xué)習(xí)方法！
《超方便！專為設(shè)計(jì)師而寫的GITHUB快速入門教程》

原文地址：Developer.apple
優(yōu)設(shè)網(wǎng)譯者：@阿布

本文由優(yōu)設(shè)網(wǎng)原創(chuàng)翻譯，請尊重版權(quán)和譯者成果，轉(zhuǎn)摘請附上優(yōu)設(shè)鏈接，違者必究。謝謝各位編輯同仁配合。

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：2650232288@qq.com】

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