鍍金池/ 教程/ iOS/ 圖標(biāo)和圖形
錢(qián)包
iCloud
控件
適應(yīng)性和布局
編輯菜單(Edit Menu)
從概念到產(chǎn)品
啟動(dòng)與停止
3D 觸摸
VoiceOver
Live Photos
HomeKit
臨時(shí)視圖
游戲中心(Game Center)
快速查看(Quick Look)
交互性與反饋
與 iOS 的整合
鍵盤(pán)和輸入頁(yè)面(Keyboards and Input Views)
iAd 富媒體廣告(iAd Rich Media Ads)
術(shù)語(yǔ)和措辭
HealthKit
案例學(xué)習(xí):從桌面到 iOS
導(dǎo)航
撤銷與重做(Undo and Redo)
研究型應(yīng)用程序
社交媒體
蘋(píng)果的移動(dòng)支付平臺(tái)
圖標(biāo)和圖形
iOS 應(yīng)用解析
為 iOS 而設(shè)計(jì)
路線選擇(Routing)
設(shè)計(jì)原則
應(yīng)用內(nèi)購(gòu)買(mǎi)服務(wù)(In-App Purchase)
品牌推廣
動(dòng)畫(huà)
聲音(Sound)
多任務(wù)處理
內(nèi)容視圖
應(yīng)用擴(kuò)展
通知
訪問(wèn)用戶數(shù)據(jù)(Accessing User Data)
無(wú)線打印 (AirPrint)
模態(tài)情境
顏色與字體

圖標(biāo)和圖形

應(yīng)用圖標(biāo)

每個(gè)應(yīng)用都需要一個(gè)漂亮的圖標(biāo)。用戶常常會(huì)在看到應(yīng)用圖標(biāo)的時(shí)候便建立起對(duì)應(yīng)用的第一印象,并以此評(píng)判應(yīng)用的品質(zhì)、作用以及可靠性。

以下幾點(diǎn)是你在設(shè)計(jì)應(yīng)用圖標(biāo)時(shí)應(yīng)當(dāng)記住的。當(dāng)你確定要開(kāi)始設(shè)計(jì)時(shí),請(qǐng)參考 App Icon來(lái)獲取更詳細(xì)的設(shè)計(jì)規(guī)格與指導(dǎo)。(譯者注:App Icon 處在 iOS Human Interface Guidelines 的 Icon and Image Design 部分,翻譯將在后續(xù)更新中放出,煩請(qǐng)各位耐心等候。)

  • 應(yīng)用圖標(biāo)是整個(gè)應(yīng)用品牌的重要組成部分。將圖標(biāo)設(shè)計(jì)當(dāng)成一個(gè)講述應(yīng)用背后的故事,以及與用戶建立情感連接的機(jī)會(huì)。
  • 最好的應(yīng)用圖標(biāo)是獨(dú)特的,整潔的,打動(dòng)人心的,讓人印象深刻的。
  • 一個(gè)好的應(yīng)用圖標(biāo)應(yīng)該在不同的背景以及不同的規(guī)格下都同樣美觀。為了豐富大尺寸圖標(biāo)的質(zhì)感而添加的細(xì)節(jié)有可能讓圖標(biāo)在小尺寸時(shí)變得不清晰。

小圖標(biāo)

iOS 提供了一系列小的 icon,用以代表各種常見(jiàn)任務(wù)與操作,它們常用在標(biāo)簽欄(Tab Bar)、工具欄(Toolbars)與導(dǎo)航欄(Navigation Bar)中。用戶通常都已經(jīng)了解這些內(nèi)置圖標(biāo)的含義了,因此可以盡可能的多使用它們。

http://wiki.jikexueyuan.com/project/ios-9-human-computer-interface-guidelines/images/12.jpg" alt="" />

如果需要自定義動(dòng)作或者內(nèi)容,你也可以設(shè)計(jì)自定義圖標(biāo)。設(shè)計(jì)這些小的線性圖標(biāo)與設(shè)計(jì)應(yīng)用圖標(biāo)有很大的區(qū)別,請(qǐng)參考 Bar Button Icons來(lái)了解更多內(nèi)容。(譯者注:Bar Button Icons 章節(jié)處在 iOS Human Interface Guidelines 的 Icon and Image Design 部分,翻譯將在后續(xù)更新中放出,煩請(qǐng)各位耐心等候。)

請(qǐng)注意,你有時(shí)候也可以用文字來(lái)代替工具欄和導(dǎo)航欄的圖標(biāo)。 就像 iOS 的日歷里面,工具欄上便是使用”今天”,”日歷”和”收件箱”來(lái)代替圖標(biāo)進(jìn)行表意的。

http://wiki.jikexueyuan.com/project/ios-9-human-computer-interface-guidelines/images/39.jpg" alt="" />

想要決定在工具欄和導(dǎo)航欄中到底是用圖標(biāo)還是文字,可以優(yōu)先考慮一屏中最多會(huì)同時(shí)出現(xiàn)多少個(gè)圖標(biāo)。同一屏幕中圖標(biāo)的數(shù)量過(guò)多可能會(huì)讓整個(gè)應(yīng)用看起來(lái)難以理解。使用圖標(biāo)還是文字還取決于屏幕方向是橫向還是縱向,因?yàn)樗揭晥D下通常會(huì)擁有更多的空間,可以承載更多的文字。

圖形

iOS 應(yīng)用大多數(shù)圖形豐富。無(wú)論是你需要展示用戶的照片,還是需要?jiǎng)?chuàng)建自定義圖片,以下這些需求都應(yīng)該遵守:

  • 支持 Retina 顯示屏。確保你應(yīng)用中的所有圖片資源都提供了高分辨率規(guī)格。尤其需要注意的是,iPhone 6 Plus 需要提供@3x規(guī)格的圖片,而所有其他的高分辨率 iOS 設(shè)備都需要提供@2x規(guī)格的圖片。

  • 顯示照片或圖片時(shí)請(qǐng)使用原始尺寸,并不要將它拉伸到大于100%。你不會(huì)希望在你的應(yīng)用中看到拉伸和變形的圖片??梢宰層脩糇约簛?lái)選擇他們是否想要縮放圖片。 不要使用從蘋(píng)果系列產(chǎn)品中復(fù)制的圖形。這些圖形均受版權(quán)保護(hù),而且產(chǎn)品的設(shè)計(jì)可能會(huì)頻繁改變。

不要將蘋(píng)果的應(yīng)用圖標(biāo),圖像或者截圖用于你的設(shè)計(jì)中。所有蘋(píng)果的設(shè)計(jì)均受版權(quán)保護(hù)并且不允許出現(xiàn)在你的 UI 中,除非它們是由系統(tǒng)直接提供的。

上一篇:交互性與反饋下一篇:聲音(Sound)