iOS 圖標圖像 (官方翻譯版)

廣告

歡迎大家一起交流 QQ羣 139852091 公衆號

我是jpg

圖像尺寸和分辨率

iOS用於將內容放置在屏幕上的座標系基於以點爲單位的測量,它們映射到顯示屏中的像素。在標準分辨率屏幕上,一點等於一個像素。高分辨率屏幕具有較高的像素密度。因爲在相同量的物理空間中有更多像素,所以每點有更多像素。因此,高分辨率顯示器需要具有更多像素的圖像。



爲您的應用程序的所有設備提供高分辨率圖像,適用於您的應用程序支持的所有設備。根據設備,您可以通過將每個圖像中的像素數乘以特定比例因子來實現。標準分辨率圖像的比例因子爲1.0,稱爲@
1x圖像。高分辨率圖像的比例因子爲2.0或3.0,被稱爲@2x和@3x圖像。假設你有一個標準的分辨率@1x圖像,例如100px×100px。該圖像的@2x版本將爲200px×200px。@3x版本是300px×300px。

image.png

設計高分辨率作品

使用8px×8px的網格。網格保持線條清晰,並確保內容在所有尺寸上儘可能清晰,需要較少的修飾和銳化。將圖像邊界捕捉到網格以最小化半像素,並縮小縮小時可能會出現的模糊細節。

以適當的格式製作藝術作品。一般來說,使用去隔行PNG文件進行位圖/光柵圖稿。PNG支持透明度,因爲它是無損的,壓縮僞像不會模糊重要的細節或改變顏色。對於複雜的藝術作品來說,這是一個很好的選擇,它需要像陰影,紋理和亮點這樣的效果。使用JPEG的照片。其壓縮算法通常產生比無損格式更小的尺寸,並且在照片中難以辨別僞影。但是,逼真的應用程序圖標最適合PNG。將PDF用於需要高分辨率縮放的字形和其他平面的矢量圖稿。

使用不需要完整24位顏色的PNG圖形的8位調色板。使用8位調色板可以減少文件大小,而不會降低圖像質量。此調色板不適合照片。
優化JPEG文件以找到大小和質量之間的平衡。大多數JPEG文件可以被壓縮,而不會明顯降低所得到的圖像。即使是少量的壓縮也可以節省大量的磁盤空間。在每個圖像上進行壓縮設置,以找到可以獲得可接受結果的最佳值。

提供圖像和圖標的替代文本標籤。替代文字標籤在屏幕上看不到,但是他們讓VoiceOver聽起來可以描述屏幕上的內容,使視覺障礙的人更方便導航。

應用圖標

每個應用程序都需要一個美麗而難忘的圖標,吸引App Store的關注,並在主屏幕上脫穎而出。您的圖標是第一個與您的應用程序通信的機會,一目瞭然。它也出現在整個系統中,例如在設置和搜索結果中。

image.png

擁抱簡約。找到一個單一的元素,捕捉您的應用程序的本質,並以簡單,獨特的形狀表達該元素。謹慎地添加細節。如果圖標的內容或形狀過於複雜,則細節難以辨別,特別是較小的尺寸。

提供單個焦點。設計一個單一的中心點的圖標,立即捕獲注意力並清楚地識別您的應用程序。

設計一個可識別的圖標。人們不應該分析圖標來弄清楚它代表什麼。例如,郵件應用程序圖標使用與郵件通用關聯的信封。花時間來設計一個美麗而引人入勝的抽象圖標,從而藝術化地表達您的應用程序的目的

保持背景簡單,避免透明度。確保你的圖標是不透明的,不要雜亂的背景。給它一個簡單的背景,所以它不會壓倒附近的其他應用程序圖標。您不需要填寫整個圖標的內容。

只有當它們是必需品或標誌的一部分時才使用單詞。應用程序的名稱顯示在主屏幕下方的圖標下方。不要包含重複該名稱的不重要的單詞,或告訴人們如何處理您的應用程序,例如“觀看”或“播放”。如果您的設計包含任何文本,請強調與您的應用程序提供的實際內容相關的單詞。

不要包括照片,屏幕截圖或界面元素。攝影細節在小尺寸上很難看出。屏幕截圖對於應用圖標來說太複雜了,通常不會幫助您傳達應用的目的。圖標中的界面元素具有誤導性和混淆性。

不要使用蘋果硬件產品的副本。蘋果產品受版權保護,無法在您的圖標或圖像中複製。一般來說,避免顯示設備的副本,因爲硬件設計往往會頻繁更改,並且可以使您的圖標看起來過時。

不要在應用程序圖標的整個界面。在整個應用程序中看到用於不同目的的圖標可能會令人困惑。相反,請考慮使用您的圖標的配色方案。見顏色

根據不同的壁紙測試你的圖標。您無法預測哪些壁紙會爲主屏幕選擇,所以不要只是測試您的應用程序的光或暗的顏色。看看它如何看待不同的照片。嘗試在具有動態背景的實際設備上,隨設備移動而改變透視圖。

保持圖標角落正方形。系統應用一個自動輪迴圖標角的蒙版。

應用程序圖標屬性

所有應用圖標應符合以下規格。

image.png

1、顏色管理
2、圖像大小和分辨率

應用圖標大小

每個應用程序必須提供小圖標,以便在應用程序安裝後在主屏幕和整個系統中使用,還有一個更大的圖標可在App Store中顯示。


image.png

爲不同的設備提供不同大小的圖標。確保您的應用程序圖標在您支持的所有設備上看起來都很棒。

使用App Store圖標模擬您的小圖標。雖然App Store圖標的使用方式與小型圖標不同,但它仍然是您的應用程序圖標。它應該通常與較小版本的外觀相匹配,儘管它可以更加豐富和更細緻,因爲它沒有應用視覺效果。

Spotlight,設置和通知圖標

每個應用程序還應提供一個小的圖標,當應用程序名稱與Spotlight搜索中的術語匹配時,iOS可以顯示該圖標。此外,具有設置的應用程序應提供一個小圖標,以顯示在內置的“設置”應用程序中,支持通知的應用程序應提供一個小圖標,以在通知中顯示。所有圖標應該清楚地標識您的應用 - 理想情況下,它們應該符合您的應用圖標。如果您不提供這些圖標,iOS可能會縮小您的主要應用圖標,以便在這些位置顯示。



image.png

不要在“設置”圖標上添加疊加層或邊框。iOS會自動爲所有圖標添加1像素筆畫,使其在“設置”的白色背景上看起來很好。

提示
如果您的應用程序創建自定義文檔,則不需要設計文檔圖標,因爲iOS會使用您的應用程序圖標自動創建文檔圖標。

用戶可選的應用程序圖標

對於某些應用,定製是一個喚起個人連接並增強用戶體驗的功能。如果您在應用程式中提供價值,您可以讓使用者從您應用程式中嵌入的一組預定義圖示中選擇其他應用程式圖示。例如,運動應用程序可能會爲不同的團隊提供圖標,或者具有明暗模式的應用程序可能會提供相應的明暗圖標。請注意,您的應用圖標只能根據用戶的要求進行更改,系統始終向用戶提供此類更改的確認。

提供所有必要尺寸的視覺一致的替代圖標。像您的主要應用程式圖示一樣,每個替代應用程式圖示均會傳送成不同大小的相關圖片的集合。當用戶選擇替代圖標時,該圖標的相應尺寸將替換主屏幕,Spotlight和系統其他位置的主應用程序圖標。爲了確保系統中的備用圖標始終保持一致 - 用戶不應該在主屏幕上看到圖標的一個版本,而在“設置”中則看不到完全不同的版本,請以與您爲主應用程序圖標提供的尺寸相同的尺寸提供它們(App Store圖標除外)。請參閱應用圖標大小
有關開發人員的指導,請參閱UIApplicationsetAlternateIconName方法。

注意
替代應用圖標需要通過應用程序審覈進行審覈,並且必須遵守App Store評估指南

自定義圖標

如果您的應用程序包含系統圖標無法表示的任務或模式,或者系統圖標與應用程序的風格不符,則可以創建自己的圖標。

創建可識別,高度簡化的設計。太多的細節可能會使圖標變得混亂或不可讀。努力實現一種簡單的通用設計,大多數人都會快速識別,不會發現冒犯。最好的圖標使用與他們發起的動作直接相關的熟悉的視覺隱喻或他們透露的內容。

image.png

設計圖標爲字形。字形,也稱爲模板圖像,是具有透明度,抗鋸齒功能的單色圖像,並且沒有使用掩模來定義其形狀的陰影。字形根據上下文和用戶交互自動收到適當的外觀,包括着色,突出顯示和活力。各種標準接口元素支持字形,包括導航欄,標籤欄,工具欄和主屏幕快速操作。
準備比例因子爲@ 2x的字形,並保存爲PDF格式。因爲PDF是一種允許高分辨率縮放的矢量格式,所以在您的應用程序中提供一個@ 2x版本通常就足夠了,並允許其擴展其他分辨率。

保持你的圖標一致。無論您僅使用自定義圖標還是混合使用自定義和系統圖標,應用程序中的所有圖標在細節級別,光學重量,行程重量,位置和透視度方面都應相同。

確保圖標清晰可辨。一般來說,固體圖標往往比概述的圖標更清晰。如果圖標必須包含線條,請與其他圖標和應用程序的排版協調權重。


使用顏色來傳達選擇和取消選擇的狀態。避免在兩個不同的圖標設計之間切換,如固體版本和概述版本。

避免在圖標中加入文字。 如果您需要文字,請在圖標下方顯示標籤,並相應調整其位置。

不要使用蘋果硬件產品的副本。蘋果產品受版權保護,無法在您的圖標或圖像中複製。一般來說,避免顯示設備的副本,因爲硬件設計往往會頻繁更改,並且可以使您的圖標看起來更加周到。

提供圖標的替代文字標籤。替代文字標籤在屏幕上看不到,但是他們讓VoiceOver聽起來可以描述屏幕上的內容,使視覺障礙的人更方便導航。

自定義圖標大小

最重要的是,您的應用程序的圖標系列應在大小上視覺上保持一致。如果個別圖標設計的重量不同,則某些圖標可能需要略大於其他圖標才能實現此效果。

導航欄和工具欄圖標大小

準備自定義導航欄和工具欄圖標時,請使用以下尺寸進行指導,但是根據需要進行調整以創建餘額。

image.png

標籤欄圖標大小

在縱向方向,標籤欄圖標顯示在標題標題上方。在橫向上,圖標和標題並排出現。根據設備和方向,系統會顯示常規或緊湊的標籤欄。您的應用程式應包含兩種尺寸的自訂標籤欄圖示。

啓動屏幕

啓動應用程序時,即會立即顯示啓動屏幕。您的應用程序的第一個屏幕快速替換啓動屏幕,給人的印象是您的應用程序快速響應。發射屏幕不是藝術表現的機會。它只是爲了提高您的應用程序的感覺,快速啓動並立即準備使用。每個應用程序都必須提供啓動屏幕。


啓動屏幕
啓動屏幕
第一屏
第一屏

由於設備屏幕大小不同,啓動屏幕大小也不盡相同。爲了適應這個需要,您可以爲您的應用程序支持的設備提供啓動屏幕作爲Xcode故事板或一組靜態圖像。使用Xcode故事板是推薦的方法,因爲故事板是靈活和適應性強。您可以使用單個故事板來管理所有的啓動屏幕。要了解如何實現適應性界面,請參閱自動佈局指南

設計一個幾乎與應用程序的第一個屏幕相同的啓動屏幕。如果您在應用程序完成啓動時包含看起來不同的元素,則可能會在啓動屏幕和應用程序的第一個屏幕之間遇到不愉快的閃光。

避免在啓動屏幕上包含文本。因爲啓動屏幕是靜態的,任何顯示的文本都不會被本地化。

低調發射。人們很可能會頻繁切換應用,因此設計一個不會引起對應用程序啓動體驗的啓發屏幕。

不要做廣告 發射屏幕不是品牌的機會。不要設計一個看起來像閃屏或“關於”窗口的入門體驗。不要包含徽標或其他品牌元素,除非它們是應用程序的第一個屏幕的靜態部分。

靜態啓動屏幕圖像

最好在啓動屏幕上使用Xcode故事板,但如果需要,您可以提供一組靜態圖像。爲不同的設備創建不同大小的靜態圖像,並確保包含狀態欄區域。

image.png

系統圖標

該系統提供內置的圖標,代表各種用例中常見任務和內容類型。
導航欄和工具欄圖標
標籤欄圖標
主屏幕快速操作圖標

這是一個好主意,儘可能使用這些內置的圖標,因爲他們是熟悉的人。
按照預期使用系統圖標。每個系統提供的圖像具有特定的,衆所周知的意義。爲了避免混淆用戶,必須根據其含義和推薦用法使用每張圖像。
提供圖標的替代文字標籤。替代文字標籤在屏幕上看不到,但是他們讓VoiceOver聽起來可以描述屏幕上的內容,使視覺障礙的人更方便導航。
如果您找不到符合您需求的系統提供的設計,請設計自定義圖標。設計自己比使用系統提供的圖像更好。查看自定義圖標

導航欄和工具欄圖標

導航欄工具欄中使用以下圖標。有關開發人員的指導,請參閱UIBarButtonSystemItem

提示
您可以使用文本而不是圖標來表示導航欄或工具欄中的項目。例如,日曆在工具欄中使用“今天”,“日曆”和“收件箱”。您還可以使用固定的空格元素來提供導航和工具欄圖標之間的填充。


顯示包含在當前上下文中有用的共享擴展,操作擴展和任務(如“複製”,“收藏夾”或“查找”)的模態視圖。行動

添加導航欄和標籤欄圖標
添加導航欄和標籤欄圖標

書籤導航欄和標籤欄圖標
書籤導航欄和標籤欄圖標
顯示應用專用書籤。書籤

相機導航欄和標籤欄圖標
相機導航欄和標籤欄圖標

拍攝照片或視頻,或顯示照片庫。相機取消

取消

關閉當前視圖或結束編輯模式,而不保存更改。取消

撰寫導航欄和標籤欄圖標
撰寫導航欄和標籤欄圖標
在編輯模式下打開新視圖。撰寫

完成

保存狀態並關閉當前視圖,或退出編輯模式。DONE

編輯

在當前上下文中進入編輯模式。編輯

快進導航欄和標籤欄圖標
快進導航欄和標籤欄圖標

通過媒體播放或幻燈片快進。快進

組織導航欄和標籤欄圖標
組織導航欄和標籤欄圖標
將項目移動到新的目的地,如文件夾。組織

暫停導航欄和標籤欄圖標
暫停導航欄和標籤欄圖標
暫停媒體播放或幻燈片。暫停時始終存儲當前位置,以便播放可以在以後恢復。暫停

播放導航欄和標籤欄圖標
播放導航欄和標籤欄圖標

開始或恢復媒體播放或幻燈片。開始

重做

重做已撤銷的最後一個操作。重做

刷新導航欄和標籤欄圖標
刷新導航欄和標籤欄圖標
刷新內容 請謹慎使用此圖標,因爲您的應用程式應儘可能自動刷新內容。刷新

回覆導航欄和標籤欄圖標
回覆導航欄和標籤欄圖標

發送或路由一個項目到另一個人或位置。回覆

回滾導航欄和標籤欄圖標
回滾導航欄和標籤欄圖標
通過媒體播放或幻燈片向後移動。倒帶

保存

保存當前狀態。保存

搜索導航欄和標籤欄圖標
搜索導航欄和標籤欄圖標
顯示搜索字段。搜索

停止導航欄和標籤欄圖標
停止導航欄和標籤欄圖標

停止媒體播放或幻燈片。停止

垃圾導航欄和標籤欄圖標
垃圾導航欄和標籤欄圖標

刪除當前或所選項目。垃圾

image.png

撤消上一個操作。撤消

標籤欄圖標

標籤欄中使用以下圖標。有關開發人員的指導,請參閱UITabBarSystemItem

書籤標籤欄圖標
書籤標籤欄圖標

顯示應用專用書籤。書籤

聯繫人標籤欄圖標
聯繫人標籤欄圖標

顯示該人的聯繫人。往來

下載標籤欄圖標
下載標籤欄圖標

顯示活動或最近的下載。下載

收藏夾標籤欄圖標
收藏夾標籤欄圖標

顯示該人最喜歡的項目。最愛

精選標籤欄圖標
精選標籤欄圖標

顯示應用程式特色的內容精選

歷史選項卡欄圖標
歷史選項卡欄圖標

顯示最近的行動或活動。歷史

更多標籤欄圖標
更多標籤欄圖標

顯示額外的標籤欄項目。更多

最近的標籤欄圖標
最近的標籤欄圖標

顯示在特定時間段內最近訪問的內容或項目。mostRecent

最常瀏覽的標籤欄圖標
最常瀏覽的標籤欄圖標

顯示最受歡迎的項目。最受關注

搜索標籤欄圖標
搜索標籤欄圖標

進入搜索模式。搜索

最高評分標籤欄圖標
最高評分標籤欄圖標

顯示最高評分的項目。topRated

主屏幕快速操作圖標

主屏幕快速操作菜單中使用以下圖標。有關開發人員的指導,請參閱UIApplicationShortcutIconType

添加快速動作圖標
添加快速動作圖標

創建一個新項目。

報警快速動作圖標
報警快速動作圖標

設置或顯示報警。報警

音頻快速動作圖標
音頻快速動作圖標

表示或調整音頻。音頻

書籤快速動作圖標
書籤快速動作圖標

創建書籤或顯示書籤。書籤

拍攝照片快速動作圖標
拍攝照片快速動作圖標

拍攝照片capturePhoto

捕獲視頻快速動作圖標
捕獲視頻快速動作圖標

捕獲視頻、拍攝視頻captureVideo

雲快速動作圖標
雲快速動作圖標

表示,顯示或啓動基於雲的服務。

撰寫快速動作圖標
撰寫快速動作圖標

組合新的可編輯內容。撰寫

確認快速動作圖標
確認快速動作圖標

表示一個動作完成。確認

聯繫快速圖標
聯繫快速圖標

選擇或顯示聯繫人。聯繫

日期快速動作圖標
日期快速動作圖標

顯示日曆或事件,或執行相關操作。日期

喜歡的快速動作圖標
喜歡的快速動作圖標

表示或標記最喜歡的項目。喜愛

家庭快速動作圖標
家庭快速動作圖標

指示或顯示主屏幕。指示,顯示或路由到實體家庭。

邀請快速動作圖標
邀請快速動作圖標

表示或顯示邀請。請帖

位置快速動作圖標
位置快速動作圖標

表示位置的概念或訪問當前的地理位置。位置

愛快速動作圖標
愛快速動作圖標

表示或標記一個被愛的物品。喜歡

郵件快速動作圖標
郵件快速動作圖標

創建郵件消息。郵件

標記位置快速動作圖標
標記位置快速動作圖標

標記位置、表示,顯示或保存地理位置。markLocation

消息快速動作圖標
消息快速動作圖標

創建新消息或表示使用消息傳遞。信息

暫停快速動作圖標
暫停快速動作圖標

暫停媒體播放。暫停時始終存儲當前位置,以便播放可以在以後恢復。暫停

播放快速動作圖標
播放快速動作圖標

開始或恢復媒體播放。開始

禁止快速動作圖標
禁止快速動作圖標

表示某事是不允許的。禁止

搜索快速動作圖標
搜索快速動作圖標

進入搜索模式。搜索

分享快速動作圖標
分享快速動作圖標

與他人或社交媒體分享內容。分享

隨機播放快速動作圖標
隨機播放快速動作圖標

指示或啓動隨機播放模式。拖曳

任務快速動作圖標
任務快速動作圖標

表示未完成的任務或將任務標記爲完成。任務

任務完成快速動作圖標
任務完成快速動作圖標

表示完成的任務或將任務標記爲不完整。taskCompleted

時間快動作圖標
時間快動作圖標

表示或顯示時鐘或定時器。時間

更新快速動作圖標
更新快速動作圖標

更新內容。更新

原文鏈接 https://developer.apple.com/ios/human-interface-guidelines/icons-and-images/image-size-and-resolution/

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章