深圳職業技術學院/SHENZHENPOLYTECHNIC三手機UI的圖標設計UI設計/主講：高博iOS系統圖標設計規則1iOS系統圖標設計規則1深圳職業技術學院/SHENZHENPOLYTECHNIC(一）程序圖標、小圖表、文檔圖標、快捷方式預備每個app都需要一個應用圖標和一個啟動畫面。此外，一些app還需要自定義導航欄、工具欄和標簽欄上的圖標以呈現app的特有的內容、功能或模式。所有圖像和圖標都推薦使用PNG格式，但要避免使用交錯的PNG圖片。圖標和圖像標準色彩深度是24位，即給8位的紅、綠、藍加上一個8位的alpha通道。你不需要強制使用web安全色。深圳職業技術學院/SHENZHENPOLYTECHNIC1.程序圖標

程序圖標常放在桌面，點擊可啟動程序，是程序有機的組成部分，是品牌宣傳和視覺設計的結合，具有高度可辨。程序圖標也會被用在GameCenter中。

設備不同要創建與其相應的程序圖標。一般會提供3中尺寸的圖標。

為iPhone和iTouch設計的圖標：57像素X57像素114像素X114像素（高分辯率）

在桌面顯示時會自動添加以下效果：

有90度角、沒有高光效果、不使用透明層iOS系統自動為圖標添加園角深圳職業技術學院/SHENZHENPOLYTECHNIC2.小圖標

iOS程序還需要一個小版本的圖標，用于在Spotlight搜索結果里展示某個程序。

在iPhone和iPodTouch中，iOS在Spotlight搜索結果和Settings里用的是同一個圖標，如果沒提供這個版本，iOS會把程序圖標壓縮做成程序展示圖標。

對于iPhone，應用圖標尺寸如下：29像素X29像素58像素X58像素（高分辯率）深圳職業技術學院/SHENZHENPOLYTECHNIC3.文檔圖標

如果iOS程序定義了自己的文檔類型，也要制作一款圖標來識別。如果沒有提供定制的文檔圖標，iOS會把程序圖標改成用作默認的文檔圖標。如果你的iOSapp建了一個自定義類型的文檔，你想讓用戶一眼就能認出這些文檔，iOS會使用你的應用圖標去生成文檔圖標。深圳職業技術學院/SHENZHENPOLYTECHNIC

可根據程序運行的平臺的不同，創建兩種尺寸的文檔圖標。對于iPhone版iOS圖標，創建兩種尺寸的文檔圖標22像素X29像素44像素X58像素

可將制作的圖標居中或縮放填充在規定的格子里。如創建完整的64素X64像素的文檔圖標，先加入Margin,創建安全區。深圳職業技術學院/SHENZHENPOLYTECHNIC疊加遮罩前的120x120像素圖標疊加遮罩后的120x120像素圖標當iOS在設備的“主屏幕”頁面中顯示一個應用圖標時，它會自動疊加一個圓角遮罩。4.Web快捷方式圖標

若制作的程序中帶有Web小程序或者網站，可為其定制一款圖標放在桌面上，點擊圖標可直接訪問網頁內容。

最好將網頁中有特色的照片或可識別的顏色主題應用到圖標里。為確保圖標在設備上更美觀

在iPhone和iPodTouch中，創建兩種尺寸的圖標57像素X57像素114像素X114像素深圳職業技術學院/SHENZHENPOLYTECHNIC創建一個大尺寸的應用圖標，以展示在AppStore中。這個版本要能立即被識別成你的應用圖標，它可以擁有更豐富的細節。AppStore需要創建兩種尺寸