圖標(biāo)的圓角和光暈效果
圓角效果。圖標(biāo)的圓角效果是系統(tǒng)自動(dòng)加上的,我們不能控制。這也是為什么我們看到的每個(gè)圖標(biāo),其圓角效果是完全相同的。
光暈效果。光暈效果也是系統(tǒng)加上的,和“圓角”不同的是,光暈效果是一個(gè)可選項(xiàng)。我們可以通過(guò)設(shè)置app的光暈參數(shù)(uiprerenderedicon),告訴系統(tǒng)是否要為我們的圖標(biāo)打上光暈效果。
總結(jié):1)設(shè)計(jì)圖標(biāo)時(shí)請(qǐng)記得,圖標(biāo)的圓角效果是系統(tǒng)自動(dòng)加上的,且是我們無(wú)法控制的。 2)設(shè)計(jì)圖標(biāo)前先決定,是否要使用系統(tǒng)內(nèi)建的“光暈效果”。
每個(gè)圖標(biāo)都有相同的圓角。左邊的兩個(gè)圖標(biāo)有光暈效果,右邊的兩個(gè)沒(méi)有。
啟動(dòng)畫(huà)面
我們可以為app設(shè)置啟動(dòng)畫(huà)面,以便在app啟動(dòng)的時(shí)候顯示。蘋(píng)果在其開(kāi)發(fā)文檔中,很明確地表示:?jiǎn)?dòng)畫(huà)面的作用是給使用者一種錯(cuò)覺(jué),一種app啟動(dòng)很快速的錯(cuò)覺(jué)。即,啟動(dòng)畫(huà)面的初衷不是為了給用戶某種“視覺(jué)上的沖擊”。所以,蘋(píng)果建議開(kāi)發(fā)者使用app的“空白”界面作為啟動(dòng)畫(huà)面。蘋(píng)果自己的app就是這樣做的。如果我們無(wú)視這種約定,而是使用和app界面完全無(wú)關(guān)的“插畫(huà)”作為啟動(dòng)畫(huà)面(很多app都是這樣),那么一般情況下,會(huì)有“地?cái)傌?rdquo;的嫌疑。雖然大多數(shù)的普通用戶不清楚啟動(dòng)畫(huà)面“應(yīng)該”是什么樣子:或許用戶會(huì)喜歡有“視覺(jué)沖擊力的”插畫(huà);或許用戶會(huì)奇怪為何到了4月,啟動(dòng)畫(huà)面卻仍舊是春節(jié)的主題;又或許用戶什么感覺(jué)也沒(méi)有。如果一定要使用插畫(huà),那么不妨先回答這樣一個(gè)問(wèn)題:考慮到蘋(píng)果開(kāi)發(fā)的app,其啟動(dòng)畫(huà)面使用的都是樸素的“空白”界,那么我們的app是否有足夠充分的理由,來(lái)支持使用插畫(huà)呢?
如果要讓啟動(dòng)畫(huà)面漂亮,我們可以先讓app的界面漂亮;app的界面漂亮,那app的“空白”界面也就漂亮;app的“空白”界面漂亮,啟動(dòng)畫(huà)面也就漂亮了。
系統(tǒng)自帶的“時(shí)鐘”app。第一張是啟動(dòng)畫(huà)面:使用的是app的“空白”界面。第二張是app運(yùn)行時(shí)的截圖。
app的界面漂亮 = app的“空白”界面漂亮,啟動(dòng)畫(huà)面也就自然漂亮。比如,tweetbot的啟動(dòng)畫(huà)面。
retina
iphone 4和ipod touch 4有一個(gè)新的特性:在屏幕尺寸不變的前提下,分辨率提升一倍(320 x 480 =》 640 x 960)。蘋(píng)果將這個(gè)特性命名為retina。
用蘋(píng)果的話講:
retina顯示屏的超高像素密度已超過(guò)人眼能分辨的范圍。
retina對(duì)圖像設(shè)計(jì)(圖標(biāo)、啟動(dòng)畫(huà)面和其它所有像素有關(guān)的東西)有什么影響呢?如果我們的app要支持retina,就要提供高分辨率的(寬x2,高x2)的圖片。同時(shí),為了支持沒(méi)有retina的設(shè)備,仍舊要準(zhǔn)備低分辨率的版本。換言之,我們要準(zhǔn)備兩套圖。
針對(duì)不同分辨率的圖片,蘋(píng)果規(guī)定了一個(gè)命名規(guī)范:假如一個(gè)普通分辨率的圖片,文件名是“abc.png”,那么與其對(duì)應(yīng)的高分辨率的文件名就應(yīng)該是“abc@2x.png”,多了“@2x”。
舉一個(gè)例子:
icon.png
icon@2x.png
這里需要注意的是,雖然在瀏覽器中,第二張圖片的面積是第一張的4倍,但是在支持retina的iphone中,顯示的大小是一樣的。
格式和尺寸
圖標(biāo)和啟動(dòng)畫(huà)面的格式:推薦使用png格式,可以是標(biāo)準(zhǔn)的24位顏色(紅、綠和藍(lán)各用8位),外加alpha通道的8位。不要在app圖標(biāo)上使用透明色。
圖標(biāo)的尺寸:蘋(píng)果有一份完整的文檔,列出了app所需的全部圖標(biāo)尺寸,和其各自的使用環(huán)境。
technical q&a qa1686: app icons on ipad and iphone
app程序包必須包含以下標(biāo)記為“必須”的圖標(biāo)。
圖片尺寸的單位是px。
表格一:只支持iphone的app圖標(biāo)要求。
尺寸文件名用途是否必須備注
512×512itunesartworkad hoc itunes可選,但建議加入文件應(yīng)該是png格式,但文件名不要使用.png后綴。
57×57icon.pngiphone/ipod touch的app store和主屏幕(home screen)
114×114icon@2x.png高分辨率的iphone 4主屏幕可選,但建議加入
72×72icon-72.png主屏幕,為了兼容ipad可選,但建議加入
29×29icon-small.pngspotlight和設(shè)置app可選,但建議加入
50×50icon-small-50.pngspotlight,為了兼容ipad如果app有設(shè)置程序包,那么建議加入。否則可選,但建議加入。
58×58icon-small@2x.png高分辨率的iphone 4的spotlight和設(shè)置app如果app有設(shè)置程序包,那么建議加入。否則可選,但建議加入。
表格二:只支持ipad的app圖標(biāo)要求。
尺寸文件名用途是否必須備注
512×512itunesartworkad hoc itunes可選,但建議加入文件應(yīng)該是png格式,但文件名不要使用.png后綴。
72×72icon-72.pngipad的app store和主屏幕
50×50icon-small-50.pngipad的spotlight可選,但建議加入。
29×29icon-small.pngipad的設(shè)置app如果app有設(shè)置程序包,那么建議加入。否則可選,但建議加入。
表格三:universal的app圖標(biāo)要求。
尺寸文件名用途是否必須備注
512×512itunesartworkad hoc itunes可選,但建議加入文件應(yīng)該是png格式,但文件名不要使用.png后綴。
57×57icon.pngiphone/ipod touch的app store和主屏幕(home screen)
114×114icon@2x.png高分辨率的iphone 4主屏幕可選,但建議加入
72×72icon-72.pngipad的app store和主屏幕
29×29icon-small.pngipad和iphone的設(shè)置app,iphone的spotlight如果app有設(shè)置程序包,那么建議加入。否則可選,但建議加入。
50×50icon-small-50.pngipad的spotlight可選,但建議加入。
58×58icon-small@2x.png高分辨率的iphone 4的spotlight和設(shè)置app如果app有設(shè)置程序包,那么建議加入。否則可選,但建議加入。
啟動(dòng)畫(huà)面的尺寸:
尺寸單位是px,寬x高。
iphone/ipod touch的啟動(dòng)畫(huà)面是全尺寸,ipad的則要去掉“狀態(tài)欄”(status bar)的高度(20px)。
ipad的啟動(dòng)畫(huà)面是分模式的:豎排(portrait)和橫排模式(landscape)。