5 圖標(biāo)和圖像設(shè)計(jì)

5.1 圖標(biāo)和圖像尺寸

任何app都需要app圖標(biāo)和啟動(dòng)文件或者圖片。除此之外嗅绰，一些app需要自定義圖標(biāo)來代表app中導(dǎo)航欄舍肠、工具欄搀继、標(biāo)簽欄和其他地方的特定的內(nèi)容、功能或者模式翠语。表45-1列出了這些自定義圖標(biāo)和圖像的尺寸叽躯。

表45-1 圖標(biāo)和圖像尺寸（以像素為單位）

注意
如果你需要為主屏幕快捷操作創(chuàng)建自定義圖標(biāo)，查看Home Screen Quick Actions了解詳情肌括。你也可以從https://developer.apple.com/design/downloads/Quick-Action-Guides.zip下載Home Screen Quick Action Icon Template点骑。

除了AppStore的圖標(biāo)必須以iTunesArtwork來命名以外，你可以隨意命名圖標(biāo)谍夭。在Xcode項(xiàng)目中黑滴，你可以使用圖片資源目錄來管理app的圖標(biāo)文件。如果要添加圖標(biāo)紧索，可以將相應(yīng)的圖片添加到你的項(xiàng)目的圖片資源目錄下袁辈。在編譯過程中，Xcode會(huì)將適當(dāng)?shù)逆I值加入到app的Info.plist文件中并且將圖片打包進(jìn)app中珠漂。iOS根據(jù)所要用到的位置來選擇合適大小的圖標(biāo)晚缩。查看Asset Catalog Help了解更多資源目錄相關(guān)信息。

對(duì)于所有圖片和圖標(biāo)甘磨，推薦使用PNG格式橡羞。避免使用交錯(cuò)的PNG圖片。

圖標(biāo)和圖像的標(biāo)準(zhǔn)位深(bit depth)是24位济舆。

5.2 app圖標(biāo)

每個(gè)app都需要一個(gè)漂亮的卿泽、容易記憶的app圖標(biāo)來在AppStore中吸引用戶的注意并且在主屏幕上脫穎而出。iOS會(huì)在游戲中心滋觉、搜索結(jié)果签夭、設(shè)置和代表app的文檔中使用不同尺寸的app圖標(biāo)。

為了得到最好的效果椎侠，可以求助于專業(yè)的圖形設(shè)計(jì)師第租。 有經(jīng)驗(yàn)的圖形設(shè)計(jì)師可以為你的app形成統(tǒng)一的視覺設(shè)計(jì)風(fēng)格并且將這種風(fēng)格應(yīng)用到圖標(biāo)和圖片中。

使用便于識(shí)別的通用圖像我纪。 通常來說慎宾，避免使用視覺元素的次要意象，或者使用意義晦澀的元素浅悉。比如趟据，郵件應(yīng)用的圖標(biāo)使用一個(gè)信封的圖形，而不是郵箱术健、郵差包或者郵局標(biāo)志汹碱。

擁抱簡(jiǎn)約。 尤其是避免使用大量的圖像填滿你的app圖標(biāo)荞估。找到一個(gè)可以代表你的app精髓的單一的元素咳促，然后以簡(jiǎn)單稚新、獨(dú)特的形狀來表現(xiàn)這個(gè)元素。謹(jǐn)慎地增加細(xì)節(jié)跪腹。如果一個(gè)圖標(biāo)的內(nèi)容或形狀過于復(fù)雜褂删，那圖標(biāo)的細(xì)節(jié)就會(huì)很令人費(fèi)解而且在小尺寸下會(huì)顯得很模糊。

提示
為了測(cè)試圖標(biāo)在小尺寸下的效果尺迂，可以將它移到主屏幕上的一個(gè)文件夾里笤妙。最好可以移入更多app圖標(biāo)冒掌，然后再看你的app圖標(biāo)是否好看且仍舊與眾不同噪裕。

以較抽象的方式表達(dá)你app的意圖。 在app圖表中使用照片或者屏幕截圖并不是一個(gè)好主意股毫，因?yàn)樵谛〕叽缦潞茈y看清膳音。最好進(jìn)行一定的藝術(shù)處理，因?yàn)檫@樣才能強(qiáng)調(diào)那些你希望用戶注意到的方面铃诬。

如果一定要使用擬物化設(shè)計(jì)祭陷，一定要注意準(zhǔn)確無誤。 擬物化設(shè)計(jì)的圖標(biāo)必須準(zhǔn)確地反映對(duì)象的材質(zhì)例如布料趣席、玻璃或者金屬兵志，并且要能傳達(dá)對(duì)象的重量和質(zhì)感。

確保在各種背景下app圖標(biāo)看起來都不錯(cuò)宣肚。 不要只在淺色或深色背景下測(cè)試你的app圖標(biāo)想罕，因?yàn)槟銦o法預(yù)知用戶會(huì)使用什么樣的壁紙。

避免使用透明度霉涨。 app的圖標(biāo)應(yīng)該是不透明的按价。如果圖標(biāo)的邊界小于推薦的尺寸，或者在圖標(biāo)內(nèi)加入了透明的區(qū)域笙瑟，那么圖標(biāo)就會(huì)浮在深色的背景上楼镐，這樣在用戶的漂亮壁紙上你的app圖標(biāo)就會(huì)缺少吸引力。

不要在你的設(shè)計(jì)中使用iOS界面元素往枷。 你肯定不希望用戶混淆你的app圖標(biāo)框产、圖片和iOS的UI。

不要在你的設(shè)計(jì)中使用Apple的硬件產(chǎn)品標(biāo)志错洁。 Apple產(chǎn)品的標(biāo)志受到版權(quán)保護(hù)秉宿，所以不能在你的app圖標(biāo)或圖片中使用。通常來說墓臭，在你的設(shè)計(jì)中不要使用特定的設(shè)備標(biāo)志蘸鲸，因?yàn)樵O(shè)備的設(shè)計(jì)會(huì)頻繁改變，因而基于它們的設(shè)計(jì)也會(huì)很快過時(shí)窿锉。

不要在你的界面中復(fù)用蘋果自帶app的圖標(biāo)酌摇。 在系統(tǒng)的不同位置使用相同的圖標(biāo)來代表具有輕微不同的事物會(huì)使用戶感到困惑膝舅。

為不同的設(shè)備設(shè)計(jì)不同尺寸的app圖標(biāo)。 你肯定希望app的圖標(biāo)在所有支持的設(shè)備上看起來都非常不錯(cuò)窑多。查看表45-1仍稀，了解常用設(shè)備尺寸。

當(dāng)iOS在設(shè)備的主屏幕上顯示app圖標(biāo)時(shí)埂息，它會(huì)自動(dòng)給圖標(biāo)加上一個(gè)圓角的遮罩技潘。確保你的圖標(biāo)是90度直角，這樣加上遮罩后會(huì)比較好看千康。

準(zhǔn)備一個(gè)大尺寸的app圖標(biāo)用于AppStore展示享幽。 盡管這個(gè)尺寸的app圖標(biāo)要讓用戶能一眼認(rèn)出，但是可以適當(dāng)增加一些細(xì)節(jié)拾弃。這個(gè)尺寸的app圖標(biāo)不會(huì)增加額外的視覺效果值桩。

如表45-1所示，大尺寸app圖標(biāo)的大小為1024×1024像素豪椿，且需要命名為iTunesArtwork@2x奔坟。（如果需要適配@1x設(shè)備，可以準(zhǔn)備一個(gè)512*512像素大小的圖標(biāo)并且命名為iTunesArtwork搭盾。）查看Platform Version Information咳秉，了解更多改尺寸app圖標(biāo)的相關(guān)信息。

注意
iOS可能會(huì)把大尺寸圖片用作其他用途鸯隅。在iPad應(yīng)用中澜建，iOS會(huì)將大尺寸圖片用于生成大的文件圖標(biāo)。

如果你開發(fā)了一個(gè)以ad-hoc方式發(fā)布的app（即內(nèi)部使用滋迈，不通過AppStore）霎奢，也必須提供大尺寸的app圖標(biāo)。這個(gè)圖標(biāo)將被用于iTunes饼灿。

5.2.1 文檔圖標(biāo)

如果你的iOS app以自定義格式創(chuàng)建文檔幕侠，你肯定希望你的用戶能一眼認(rèn)出政協(xié)文檔。你不需要另外設(shè)計(jì)一個(gè)自定義圖標(biāo)碍彭，因?yàn)閕OS會(huì)使用app圖標(biāo)來為你生成文檔圖標(biāo)晤硕。

5.2.2 Spotlight和Setting的圖標(biāo)

當(dāng)app的名字匹配Spotlight的搜索詞時(shí)，app需要提供一個(gè)小尺寸的圖標(biāo)用于顯示庇忌。支持設(shè)置功能的app也需要提供一個(gè)小尺寸的圖標(biāo)用于在系統(tǒng)的設(shè)置應(yīng)用中顯示舞箍。

這些圖標(biāo)必須清楚地標(biāo)識(shí)你的app，這樣用戶才能在搜索列表或者設(shè)置應(yīng)用列表中識(shí)別出你的app皆疹。比如疏橄，盡管內(nèi)置應(yīng)用的圖標(biāo)很小，但是在設(shè)置應(yīng)用中很易辨識(shí)。

跟app圖標(biāo)一樣捎迫，你也可以任意命名這些小圖標(biāo)晃酒，因?yàn)閕OS會(huì)基于使用目的來選擇尺寸合適的圖標(biāo)。

為所有設(shè)備分別提供用于Spotlight搜索結(jié)果和設(shè)置應(yīng)用的圖標(biāo)窄绒。如果不提供贝次，iOS會(huì)縮小你的app圖標(biāo)來用于這些位置的顯示。查看表45-1彰导，了解具體尺寸蛔翅。

注意
如果你的app圖標(biāo)背景是白色的，不要為了在設(shè)置應(yīng)用中提升加辨識(shí)度而增加灰色遮罩位谋。iOS會(huì)給圖標(biāo)增加1像素的描邊山析，這樣所有圖標(biāo)在設(shè)置應(yīng)用的白色背景下都會(huì)很好看。

5.3 啟動(dòng)文件

啟動(dòng)文件（或圖片）是app啟動(dòng)時(shí)iOS顯示的簡(jiǎn)單占位圖倔幼。這樣的占位圖能夠給用戶一個(gè)app很快而且反應(yīng)靈敏的印象盖腿，因?yàn)檎嘉粓D是即刻出現(xiàn)的，而且很快會(huì)被app的第一屏取代损同。每個(gè)app都需要提供啟動(dòng)文件或者至少一張靜態(tài)圖片。

在iOS8或者更高的系統(tǒng)版本鸟款，你可以創(chuàng)建一個(gè)XIB或者故事板文件來取代靜態(tài)的啟動(dòng)圖片膏燃。當(dāng)你在Interface Builder中創(chuàng)建啟動(dòng)文件時(shí)，可以使用尺寸類型來為不同的顯示環(huán)境定義不同的布局何什，然后使用Auto Layout來作最少的適配组哩。使用尺寸類型和Auto Layout意味著你只用創(chuàng)建一個(gè)啟動(dòng)文件就能適配所有的設(shè)備和顯示環(huán)境。（查看Build In Adaptivity处渣，了解顯示環(huán)境和尺寸類型概覽伶贰；查看Size Classes Design Help，學(xué)習(xí)如何在Interface Builder中使用尺寸環(huán)境罐栈。）

如果你需要適配早期iOS版本黍衙，除了啟動(dòng)文件之外，你仍舊可以提供靜態(tài)的啟動(dòng)圖片荠诬。

重要
使用XIB或者故事板文件意味著你的app在iPhone6或者iPhone6 Plus上運(yùn)行琅翻。

一下設(shè)計(jì)規(guī)則同時(shí)適用于啟動(dòng)文件和靜態(tài)啟動(dòng)圖片。

設(shè)計(jì)簡(jiǎn)潔明了柑贞、可以提升用戶體驗(yàn)的啟動(dòng)圖片方椎。 尤其注意，啟動(dòng)圖片不適用于：

• “app啟動(dòng)體驗(yàn)”钧嘶，比如閃屏
• “關(guān)于”窗口
• 品牌元素棠众，除非它們也是app第一屏靜態(tài)內(nèi)容的一部分

用戶會(huì)在app之間頻繁切換，你需要盡可能地減少app的啟動(dòng)時(shí)間有决，你的啟動(dòng)圖片設(shè)計(jì)應(yīng)該降低用戶對(duì)啟動(dòng)過程的感知闸拿，而不是強(qiáng)調(diào)這個(gè)過程轿亮。

設(shè)計(jì)與app首屏一樣的啟動(dòng)圖片， 除非：

• 文本胸墙。 啟動(dòng)圖片是靜態(tài)的我注，所以顯示的文本沒有局限性。
• 可能會(huì)改變的UI元素迟隅。 如果包含了啟動(dòng)完成后會(huì)改變的元素但骨，用戶可能會(huì)因?yàn)閺膯?dòng)圖片到app首屏突然的變化而感到不愉快。

如果你認(rèn)為遵循了以上規(guī)則會(huì)導(dǎo)致啟動(dòng)畫面過于簡(jiǎn)單和乏味智袭，那也無可厚非奔缠。但是要記住，啟動(dòng)圖片并不是為了藝術(shù)表現(xiàn)吼野。它只是為了強(qiáng)化用戶對(duì)于app啟動(dòng)快速且打開即能使用這樣一種認(rèn)知校哎。比如，設(shè)置和天氣應(yīng)用只是將應(yīng)用的背景作為啟動(dòng)圖片瞳步。

如果你需要使用靜態(tài)啟動(dòng)圖片闷哆，你需要為不同的設(shè)備提供不同尺寸的圖片。靜態(tài)啟動(dòng)圖片需要包含狀態(tài)欄单起。具體尺寸參見表45-1.

雖然在iPhone6和iPhone6 Plus使用啟動(dòng)文件是最好的抱怔，如果需要的話，你還是可以使用靜態(tài)啟動(dòng)圖片嘀倒。如果你需要為這些設(shè)備提供靜態(tài)啟動(dòng)圖片屈留，可以參考一下尺寸信息：

iPhone6：

• 豎屏:豎屏：750 x 1334 (@2x)
• 橫屏:橫屏：1334 x 750 (@2x)

iPhone 6 Plus:

• 豎屏:1242 x 2208 (@3x)
• 橫屏:2208 x 1242 (@3x)

5.4 模板圖標(biāo)

你為欄或者主屏幕快捷操作自定義的圖標(biāo)，也稱之為模板圖標(biāo)或圖片测蘑，因?yàn)楫?dāng)你的app運(yùn)行時(shí)灌危，iOS會(huì)把它當(dāng)作遮罩來生成你看到的圖標(biāo)。

iOS定義了很多標(biāo)準(zhǔn)的小圖標(biāo)碳胳，比如刷新勇蝙、操作、增加和收藏圖標(biāo)固逗。你應(yīng)該盡量使用這些按鈕或圖標(biāo)來代表app內(nèi)的常用的標(biāo)準(zhǔn)任務(wù)浅蚪。（查看 Toolbar and Navigation Bar Buttons 和 Tab Bar Icons，了解更多你可以在欄上使用的標(biāo)準(zhǔn)按鈕和圖標(biāo)烫罩。）

如果你的app包含某些任務(wù)或模式?jīng)]有標(biāo)準(zhǔn)圖標(biāo)可以代表惜傲，或者標(biāo)準(zhǔn)圖標(biāo)與你的app樣式不匹配，你可以設(shè)計(jì)你自己的小圖標(biāo)贝攒。

• 簡(jiǎn)單和線性的盗誊。 過多的細(xì)節(jié)會(huì)使得圖標(biāo)顯得很亂且難以識(shí)別。
• 不容易與系統(tǒng)提供的圖標(biāo)相混淆。 用戶應(yīng)該能一眼就能區(qū)別你自定義的圖標(biāo)和標(biāo)準(zhǔn)圖標(biāo)哈踱。
• 易理解且被廣泛接受荒适。 努力創(chuàng)造用戶能夠正確理解的標(biāo)志，這樣才不會(huì)被用戶討厭开镣。

重要
確保不要在你的設(shè)計(jì)中使用Apple產(chǎn)品圖片刀诬。這些標(biāo)志受版權(quán)保護(hù)且產(chǎn)品設(shè)計(jì)會(huì)頻繁改變。

不管你只使用自定義圖標(biāo)邪财，還是與標(biāo)準(zhǔn)圖標(biāo)混用陕壹，app內(nèi)所有的圖標(biāo)要在視覺尺寸、細(xì)節(jié)水平和視覺重量上保持一致树埠。

比如糠馆，以下是所有的iOS欄圖標(biāo)，注意它們?nèi)绾瓮ㄟ^尺寸怎憋、細(xì)節(jié)和重量上的一致性傳達(dá)和諧的整體感：

要想設(shè)計(jì)一套條理清楚連貫的圖標(biāo)又碌，關(guān)鍵是一致性：盡可能地使用相同的透視和相同的線條粗細(xì)。為了確保所有圖標(biāo)的視覺尺寸一致绊袋，你可能需要設(shè)計(jì)一系列實(shí)際尺寸不同的圖標(biāo)毕匀。比如，以下這組系統(tǒng)圖標(biāo)視覺上大小是相同的愤炸，盡管收藏和語音郵件圖標(biāo)實(shí)際上比其他圖標(biāo)要大一些期揪。

如果你正在設(shè)計(jì)自定義標(biāo)簽欄圖標(biāo)，你需要提供兩個(gè)版本——未選中狀態(tài)和選中狀態(tài)规个。選中狀態(tài)的圖標(biāo)通常是未選中狀態(tài)圖標(biāo)填充后的樣子，但有些設(shè)計(jì)需要在此基礎(chǔ)上進(jìn)行調(diào)整姓建。

在設(shè)計(jì)帶有內(nèi)部細(xì)節(jié)的選中狀態(tài)下的圖標(biāo)時(shí)（例如收音機(jī)圖標(biāo)）诞仓，反轉(zhuǎn)細(xì)節(jié)填充的顏色，這樣在選中狀態(tài)下細(xì)節(jié)依舊能夠得到突出速兔。鍵盤圖標(biāo)也有內(nèi)部細(xì)節(jié)墅拭，但是如果對(duì)選中狀態(tài)的圖標(biāo)填充背景，圓圈增加白色描邊涣狗，那樣會(huì)使得用戶難以理解和識(shí)別谍婉。

有些時(shí)候，對(duì)選中狀態(tài)下的圖標(biāo)設(shè)計(jì)進(jìn)行略微調(diào)整會(huì)有更好的效果镀钓。比如穗熬，計(jì)時(shí)器和博客圖標(biāo)都包含一些開放區(qū)域，因此選中狀態(tài)圖標(biāo)對(duì)線條進(jìn)行壓縮然后置于一個(gè)圓形背景下丁溅。

如果圖標(biāo)填充后變得不易識(shí)別唤蔗，那選中狀態(tài)圖標(biāo)就使用較粗的線條來描繪。比如，語音信箱和閱讀列表的選中圖標(biāo)就是以2個(gè)點(diǎn)粗細(xì)的線條來繪制的妓柜，而未選中狀態(tài)圖標(biāo)使用1點(diǎn)的線條箱季。

有時(shí)，圖標(biāo)包含了不適合進(jìn)行描邊的細(xì)節(jié)棍掐。就像音樂和藝術(shù)家圖標(biāo)藏雏，你可以同時(shí)將填充效果用于兩種狀態(tài)的圖標(biāo)。用戶可以很容易地區(qū)分這類圖標(biāo)的選中和未選中狀態(tài)作煌，因?yàn)檫x中狀態(tài)的圖標(biāo)會(huì)加上更加深的顏色掘殴。

設(shè)計(jì)自定義小圖標(biāo)時(shí)，遵循以下規(guī)則：

• 使用透明度來區(qū)分圖標(biāo)的形狀最疆。iOS會(huì)過濾所有顏色信息杯巨，所以沒有必要使用一種以上的填充色。
• 不要添加陰影效果
• 使用抗鋸齒

如果你想設(shè)計(jì)類似iOS原生圖標(biāo)的小圖標(biāo)努酸，那就使用細(xì)線條來繪制服爷。具體來說，使用1點(diǎn)粗細(xì)的線條來繪制圖標(biāo)（@2x分辨率下為2個(gè)像素）获诈。

不管圖標(biāo)的視覺樣式如何仍源，都要參照表45-1的尺寸來自定義工具欄、導(dǎo)航欄和標(biāo)簽欄的圖標(biāo)舔涎。如果你在為主屏幕快捷操作設(shè)計(jì)自定義的模板圖標(biāo)笼踩，查看Home Screen Quick Actions了解更多細(xì)節(jié)。

不要在自定義標(biāo)簽欄圖標(biāo)中加入文字亡嫌。應(yīng)該使用標(biāo)簽欄API來為每個(gè)標(biāo)簽設(shè)置標(biāo)題（例如嚎于，initWithTitle:image:tag:）。如果你需要調(diào)整標(biāo)題的自動(dòng)布局挟冠，可以查看標(biāo)題調(diào)節(jié)API于购，比如setTitlePositionAdjustment:。

5.5 Web Clip圖標(biāo)

如果你有一個(gè)網(wǎng)頁app或一個(gè)網(wǎng)站知染，你可以使用Web Clip功能來創(chuàng)建一個(gè)自自定義圖標(biāo)用來顯示在主屏幕上肋僧。用戶通過一次點(diǎn)擊圖標(biāo)就能到達(dá)你的網(wǎng)頁。你可以設(shè)計(jì)一個(gè)圖標(biāo)來代表整個(gè)網(wǎng)站控淡，或者只是代表單個(gè)網(wǎng)頁嫌吠。

iOS可以在Safari的收藏中顯示W(wǎng)eb Clip圖標(biāo)，當(dāng)用戶在Safari中點(diǎn)擊URL區(qū)域或者打開一個(gè)新的標(biāo)簽時(shí)掺炭，圖標(biāo)會(huì)以格子的形式顯示辫诅。

如果你的網(wǎng)頁內(nèi)容使用了熟悉的圖像或者易識(shí)別的配色方案，你的圖標(biāo)也應(yīng)該融入這樣的特點(diǎn)竹伸。但是泥栖，為了確保圖標(biāo)在設(shè)備上的顯示效果簇宽，你也應(yīng)該遵循本章的設(shè)計(jì)規(guī)范。（查看Specifying a Webpage Icon for Web Clip吧享，了解如何在你的網(wǎng)站內(nèi)容中加入代碼來生成自定義圖標(biāo)魏割。）

查看表45-1，了解相應(yīng)的圖標(biāo)尺寸钢颂。

注意
圖標(biāo)最好命名為apple-touch-icon-precomposed.png钞它。

5.6 創(chuàng)建可縮放的圖片

你可以創(chuàng)建可縮放的圖片來定制一些標(biāo)準(zhǔn)UI元素的背景，比如彈出框殊鞭、按鈕遭垛、導(dǎo)航欄、標(biāo)簽欄和工具欄（包括這些欄上的項(xiàng)）操灿。為這些元素提供可縮放的圖片可以提升app的性能锯仪。

對(duì)于很多UI元素，你可以在背景基礎(chǔ)上指定端蓋趾盐。端蓋定義了一張圖片中不會(huì)被縮放的區(qū)域庶喜。比如，你可能會(huì)創(chuàng)建一張包含四個(gè)端蓋的可縮放的圖片救鲤，這四個(gè)端蓋定義了按鈕的四個(gè)角久窟。當(dāng)縮放圖片來填充按鈕的背景區(qū)域時(shí)，端蓋定義的部分不會(huì)發(fā)生變化本缠。

根據(jù)你提供的可縮放圖片的尺寸規(guī)格斥扛，iOS會(huì)拉伸或者平鋪來來填充UI元素的背景區(qū)域。拉伸圖片意味著不考慮圖片原始的寬高比來放大圖片丹锹。拉伸具有較好的性能稀颁，但是對(duì)于拉伸后會(huì)失真的多像素圖片來說通常并不可取。平鋪圖片就是不斷重復(fù)原始圖片直到能夠填充滿整個(gè)目標(biāo)區(qū)域楣黍。平鋪的性能要弱于拉伸峻村，但這是獲得紋理和圖案效果的唯一途徑。

通常來說锡凝，你應(yīng)該提供能夠達(dá)到想要效果的最小的圖片（除了端蓋）。比如：

• 如果你需要不包含漸變的純色圖片垢啼，可以創(chuàng)建一張1×1點(diǎn)的圖片
• 如果你需要垂直漸變的圖片窜锯，可以創(chuàng)建一張寬度為1點(diǎn)，高度與UI元素背景高度相等的圖像芭析。
• 如果你需要紋理圖片锚扎，只需創(chuàng)建一張與紋理最小重復(fù)部分大小相同的圖片。
• 如果你需要不重復(fù)的紋理圖片馁启，那就創(chuàng)建一張與UI元素背景同等大小的靜態(tài)圖片驾孔。