iOS 9 人機(jī)界面指南(五):圖標(biāo)與圖形設(shè)計(jì)

0 評(píng)論 6940 瀏覽 557 收藏 25 分鐘

文章索引

  • 5.1 圖標(biāo)與圖像尺寸(Icon?and?Image?Sizes)
  • 5.2 應(yīng)用圖標(biāo)(App?Icon)
  • 5.2.1 文檔圖標(biāo)(Document?Icons)
  • 5.2.2 用于Spotlight和設(shè)置的圖標(biāo)(Spotlight?and?Settings?Icons)
  • 5.3 啟動(dòng)畫面(Launch?Files)
  • 5.4?模板圖標(biāo)(Template?Icons)
  • 5.5 網(wǎng)頁圖標(biāo)(Web?Clip?Icons)
  • 5.6 創(chuàng)建可縮放圖片(Creating?Resizable?Images)

譯者注:本章是iOS Human Interface Guideline的最后一章,文末附上全文PDF下載地址。譯文如有任何疏漏之處,或任何意見或建議,請(qǐng)不吝指出,翻譯組感謝大家長久以來的關(guān)注和支持!

5.1 圖標(biāo)與圖像尺寸(Icon?and?Image?Sizes)

每個(gè)app都需要icon,以及啟動(dòng)畫面,此外一些app需要一些自定義圖標(biāo)用于導(dǎo)航欄、工具欄和標(biāo)簽欄中,來代表app特有的內(nèi)容、功能或模式。表格45-1所羅列出來的尺寸可以為自定義圖標(biāo)和圖片做參考。

表格45-1?:自定義圖標(biāo)和圖像的尺寸(像素)

[ISUX譯]iOS 9 人機(jī)界面指南(五):圖標(biāo)與圖形設(shè)計(jì)

注意:

如果你需要在主屏幕快捷操作上創(chuàng)建自定義icon,請(qǐng)參考主屏幕快捷操作?。

除了AppStore的icon,你必須把命名為iTunesArtwork之外,你可以任意命名你的icon。在xcode工程中可以使用圖片資源目錄來組織你的圖片icon文件。如果要添加icon,在工程圖片資源目錄下添加對(duì)應(yīng)的圖片文件。在編譯時(shí),xcode添加合適的密鑰到你的應(yīng)用Info.plist文件中并且把圖片打包進(jìn)應(yīng)用中。iOS會(huì)根據(jù)設(shè)備尺寸選擇一個(gè)合適的icon。關(guān)于asset?catalogs想要知道更多,可以查閱Asset?Catlog?Help

所有的圖片和icon建議使用png格式,避免使用交錯(cuò)的png。icon和圖像的標(biāo)準(zhǔn)位深(bit?depth)是24位。

5.2 應(yīng)用圖標(biāo)(App?Icon)

每一個(gè)app都需要一個(gè)精美、辨識(shí)度高的icon來讓自己在App?Store和用戶桌面中脫穎而出。在iOS中,各個(gè)不同尺寸的icon將被用于Game?Center,搜索結(jié)果,設(shè)置之中,還會(huì)用于代表由這個(gè)app創(chuàng)建的文檔。

[ISUX譯]iOS 9 人機(jī)界面指南(五):圖標(biāo)與圖形設(shè)計(jì)

為了讓icon達(dá)到最好的效果,你可以求助于專業(yè)設(shè)計(jì)師。一個(gè)有經(jīng)驗(yàn)的設(shè)計(jì)師可以為你的app建立統(tǒng)一的視覺風(fēng)格,同時(shí)把這種風(fēng)格延續(xù)和濃縮到icon的設(shè)計(jì)中。

使用通用的易于辨識(shí)的圖形。一般來說,避免使用意義不明的視覺元素,或者使用元素的次要含義。舉個(gè)例子,郵件App會(huì)使用信封作為icon元素,而不會(huì)用郵箱、郵遞員的郵包、或者郵局的標(biāo)志。

追求簡(jiǎn)約。尤其是避免把一大堆不同的圖形都塞到你的icon中去。找到一個(gè)簡(jiǎn)單的、可以代表你的app精髓的元素,然后把它設(shè)計(jì)成一個(gè)簡(jiǎn)單而獨(dú)特的圖形。添加細(xì)節(jié)時(shí)請(qǐng)慎重,如果一個(gè)icon的樣式或形狀過于復(fù)雜,它的細(xì)節(jié)可能會(huì)讓用戶迷惑,在小尺寸的icon中更可能會(huì)顯示模糊。

注意:

想要測(cè)試你的圖標(biāo)在小尺寸下的顯示效果,可以把它移動(dòng)到主屏的文件夾下。最好是再往文件夾中多放幾個(gè)不同的icon,然后看看你的app?icon好看是否好看和突出。

在icon中為你的app設(shè)計(jì)一個(gè)抽象釋義。在icon設(shè)計(jì)中照片或者截圖效果通常都會(huì)很糟糕,那是因?yàn)檫@些相片級(jí)的細(xì)節(jié)在小尺寸中非常難以辨識(shí)。因此,我們最好以藝術(shù)的方式來詮釋現(xiàn)實(shí),因?yàn)檫@樣能夠讓用戶很容易領(lǐng)悟到你想他們注意到的方面。

如果你堅(jiān)持完全擬物化,請(qǐng)務(wù)必做到十分精確。代表真實(shí)物品的icon或者圖像應(yīng)該精確地描摹出實(shí)物的特征,如織物、玻璃、紙張、金屬等等,還要能表達(dá)實(shí)物的重量和質(zhì)感。

保證你的icon在不同的背景圖中都是好看的。不要只是單一在淺色或者深色背景中測(cè)試你的icon效果,因?yàn)槟銦o法預(yù)料你的用戶會(huì)使用什么樣的墻紙。

避免使用透明度。App?icon必須是不透明的。如果icon的邊界小于推薦尺寸,又或者你創(chuàng)建了透明區(qū)域,那么你的icon下面就會(huì)出現(xiàn)黑色背景,你的icon將會(huì)浮于黑背景之上,這在用戶所用的漂亮壁紙上看起來不美觀。

不要在圖標(biāo)中使用iOS的界面元素。你一定不希望用戶會(huì)把你的app?icon或圖形與iOS的系統(tǒng)UI搞混。

不要在icon中使用蘋果的硬件產(chǎn)品標(biāo)志。代表蘋果產(chǎn)品的各個(gè)標(biāo)志都是受版權(quán)保護(hù)的,不允許復(fù)用到你的icon或者圖形中。一般來說,要避免在你的icon中復(fù)用任何特定設(shè)備標(biāo)志,因?yàn)檫@些標(biāo)志的設(shè)計(jì)常常變化,而基于這些設(shè)計(jì)的icon和圖形很容易就會(huì)過時(shí)。

不要在你的界面中復(fù)用iOS自帶的app?icon。同樣的icon含義卻有輕微不同,還同時(shí)出現(xiàn)在整個(gè)系統(tǒng)的不同位置之中,這會(huì)讓用戶非常困惑。

為不同設(shè)備準(zhǔn)備不同大小的icon。你需要確保你的應(yīng)用icon支持所有的設(shè)備。對(duì)于不同設(shè)備應(yīng)該選用的icon尺寸,可以參考表格45-1。

當(dāng)icon出現(xiàn)在iOS桌面上的時(shí)候,它會(huì)自動(dòng)疊加圓角。請(qǐng)保證你的icon四個(gè)角都是90°,這樣它們?cè)趫A角處理后仍然很好看。舉個(gè)例子:

[ISUX譯]iOS 9 人機(jī)界面指南(五):圖標(biāo)與圖形設(shè)計(jì)

創(chuàng)建一個(gè)大尺寸的app?icon,用于顯示在App?Store上。雖然讓你的用戶能輕易認(rèn)出你的icon這點(diǎn)很重要,但相比之前這些尺寸,這個(gè)尺寸的icon允許你添加更多精巧的細(xì)節(jié)。這個(gè)尺寸的app?icon顯示在App?Store上時(shí)將不再額外添加任何視覺效果。

如同表格45-1所示,更大尺寸1024×1024像素的icon應(yīng)該被命名為iTunesArtWork@2x(如果需要支持@1x的設(shè)備,創(chuàng)建一個(gè)大小為512×512像素的icon,并且命名為iTunesArtWork)

注意:

iOS可能會(huì)把大尺寸icon用于其它用途。比如在iPad?app中,iOS會(huì)用大尺寸icon來生成大的文檔圖標(biāo)。

如果你正在開發(fā)一個(gè)臨時(shí)發(fā)布的App(也就是說,它只是內(nèi)部發(fā)布沒有放在Appstor上),你必須提供一個(gè)大尺寸的App?icon,這個(gè)icon將會(huì)提高它在iTunes中的辨識(shí)度。

5.2.1 文檔圖標(biāo)(Document?Icons)

如果你的iOS?app會(huì)創(chuàng)建自定義類型的文件,而你希望用戶一眼就能看出這些文件是由你的app生成的。你不需要為這些文檔重新設(shè)計(jì)圖標(biāo),因?yàn)閕OS會(huì)自動(dòng)把你的app?icon來作為這些文檔的圖標(biāo)。

5.2.2 用于Spotlight和設(shè)置的圖標(biāo)(Spotlight?and?Settings?Icons)

每個(gè)app都應(yīng)該提供一個(gè)小尺寸的圖標(biāo),用于在spotlight搜索結(jié)果中展示。同樣地,每個(gè)app都應(yīng)該提供一個(gè)小尺寸的圖標(biāo),用于在系統(tǒng)內(nèi)置的設(shè)置頁面中展示。

這些icon應(yīng)該易于辨識(shí),方便用戶在搜索結(jié)果列表或者設(shè)置頁的app列表中一眼就可以看出來。舉個(gè)例子,在下圖設(shè)置界面中,這些icon雖然很小,但每一個(gè)都清晰可辨:

[ISUX譯]iOS 9 人機(jī)界面指南(五):圖標(biāo)與圖形設(shè)計(jì)

和app?icons一樣,你可以任意命名這些小icon,因?yàn)閕OS在使用的時(shí)候通常會(huì)照慣例自動(dòng)選擇合適尺寸的icon。

對(duì)于所有的設(shè)備,請(qǐng)分別為Spotlight搜索結(jié)果和設(shè)置界面單獨(dú)提供icon。如果你沒有提供這些icon,在這些位置iOS可能會(huì)縮小你的應(yīng)用icon。表格45-1顯示了不同尺寸的詳細(xì)信息。

注意:

如果你的icon底色是白色的,不需要增加灰色遮罩來增強(qiáng)app在設(shè)置界面的可見度。iOS會(huì)自動(dòng)為icon增加1像素的描邊,來保證在白色背景的設(shè)置界面中所有icon都能達(dá)到良好的顯示效果。

5.3 啟動(dòng)畫面(Launch?Files)

啟動(dòng)畫面是在你的應(yīng)用啟動(dòng)時(shí)展示的簡(jiǎn)單占位圖。由于啟動(dòng)畫面會(huì)在用戶啟動(dòng)你的app時(shí)立刻出現(xiàn),并且很快地被app的首屏取代,它會(huì)讓用戶認(rèn)為你的app運(yùn)行和響應(yīng)的速度都非??臁C恳粋€(gè)應(yīng)用都要提供一個(gè)啟動(dòng)文件或至少一張靜態(tài)圖片。

在?iOS8?以后,你可以使用一個(gè)?XIB?或故事板文件來替代靜態(tài)的啟動(dòng)圖片。在?Interface?Builder?中創(chuàng)建啟動(dòng)文件后,使用尺寸歸類來為不同的界面環(huán)境定義不同的層,你還可以使用自動(dòng)布局來進(jìn)行細(xì)節(jié)調(diào)整。利用尺寸歸類和自動(dòng)布局,你可以只創(chuàng)建一個(gè)啟動(dòng)文件,就可以在所有設(shè)備里都有不錯(cuò)的呈現(xiàn)。(如果要了解呈現(xiàn)環(huán)境和尺寸歸類的概覽,參見1.3.1 為自適應(yīng)而開發(fā)?;了解如何在?Interface?Builder?中使用尺寸歸類,可參見Size?Classes?Design?Help?。)

?如果你需要支持早期的?iOS?版本,除啟動(dòng)文件外可以繼續(xù)使用靜態(tài)啟動(dòng)圖片。

重要:

使用?XIB?或故事板的文件,表示你的應(yīng)用程序在iPhone?6?Plus?或?iPhone?6上運(yùn)行。

以下的設(shè)計(jì)規(guī)范,適用于啟動(dòng)文件及靜態(tài)圖片:

簡(jiǎn)單的啟動(dòng)圖片可以提升用戶體驗(yàn)。通常情況下,啟動(dòng)圖片不需要提供如下內(nèi)容:

  • “進(jìn)入應(yīng)用的過程”,例如載入進(jìn)程圖。
  • 帶有“關(guān)于信息”的窗口。
  • 品牌元素,除非它們是?app?第一屏的靜態(tài)內(nèi)容。

由于用戶會(huì)在?app?之間頻繁地切換,所以你應(yīng)該盡可能地縮短加載時(shí)間,通過設(shè)計(jì)降低用戶對(duì)啟動(dòng)過程的感知,而不是加重用戶對(duì)啟動(dòng)的印象。

我們也可以設(shè)計(jì)一個(gè)與APP首屏一樣的啟動(dòng)畫面。除非:

  • 文本。啟動(dòng)圖片是靜態(tài)的,所以啟動(dòng)圖片中的任何文本都不會(huì)有局限。
  • 可能會(huì)變化的?UI?元素。如果?app?啟動(dòng)完成后有元素發(fā)生可見的變化,用戶可能會(huì)對(duì)啟動(dòng)畫面和第一屏之間的變化感到不適應(yīng)。

如果你認(rèn)為遵循這些規(guī)范,往往只會(huì)設(shè)計(jì)出平凡而乏味的啟動(dòng)圖片,倒也沒說錯(cuò)。請(qǐng)記住,啟動(dòng)圖片不意味著需要你在里面炫技,它的目標(biāo)只是增強(qiáng)用戶對(duì)應(yīng)用可以被快速啟動(dòng)并開始使用的感受。例如系統(tǒng)設(shè)置和天氣應(yīng)用都僅僅提供了一個(gè)相當(dāng)于背景的啟動(dòng)圖片。

系統(tǒng)設(shè)置的啟動(dòng)圖片

[ISUX譯]iOS 9 人機(jī)界面指南(五):圖標(biāo)與圖形設(shè)計(jì)

天氣應(yīng)用的啟動(dòng)圖片

[ISUX譯]iOS 9 人機(jī)界面指南(五):圖標(biāo)與圖形設(shè)計(jì)

如果你需要使用靜態(tài)啟動(dòng)圖片,你需要準(zhǔn)備尺寸不同的啟動(dòng)畫面以適應(yīng)不同的設(shè)備,且所有設(shè)備上的靜態(tài)啟動(dòng)圖片都必須包含狀態(tài)欄的區(qū)域。具體尺寸請(qǐng)查閱表格?45-1?。

雖然最好在?iPhone?6?和?iPhone?6?Plus?上使用啟動(dòng)文件,但需要的話,你也可以替換為靜態(tài)啟動(dòng)圖片。如果你需要為?iPhone?6?和?iPhone?6?Plus?創(chuàng)建靜態(tài)啟動(dòng)圖片,請(qǐng)使用以下尺寸:

For?iPhone?6:

  • 縱向:?750?x?1334?像素(@2x)
  • 橫向:?1334?x?750?像素(@2x)

For?iPhone?6?Plus:

  • 縱向:?1242?x?2208?像素?(@?3X)
  • 橫向:?2208?x?1242?像素?(@?3X)

 

5.4?模板圖標(biāo)(Template?Icons)

你為工具欄或主屏幕快速操作創(chuàng)建的自定義圖標(biāo),也就是模板圖標(biāo)或圖片,因?yàn)楫?dāng)你的?app?運(yùn)行時(shí),iOS?將它作為一個(gè)?mask(iOS的一個(gè)開發(fā)相關(guān)名詞)來介紹你所看到的圖標(biāo)。

iOS?定義了很多標(biāo)準(zhǔn)的小圖標(biāo),例如刷新、操作、增加及收藏等。如果可能的話,你應(yīng)當(dāng)使用這些按鈕和圖標(biāo)來表示?app?里的常規(guī)任務(wù)。(了解更多可以使用的標(biāo)準(zhǔn)按鈕及圖標(biāo),可參見4.1.4 工具欄與導(dǎo)航標(biāo)準(zhǔn)按鈕4.1.6 標(biāo)簽欄標(biāo)準(zhǔn)圖標(biāo)章節(jié)。)

如果你的app中包含標(biāo)準(zhǔn)按鈕圖標(biāo)不能代表的任務(wù)或者模式——又或者標(biāo)準(zhǔn)按鈕與你的app風(fēng)格相差太遠(yuǎn)——你可以設(shè)計(jì)自己的欄按鈕圖標(biāo)。以更高的要求來看,你應(yīng)該以下列幾點(diǎn)為目標(biāo)來設(shè)計(jì)icon:

  • 簡(jiǎn)單明了。太多的細(xì)節(jié)會(huì)令圖標(biāo)看起來過于草率且識(shí)別度低。
  • 不容易與系統(tǒng)圖標(biāo)混淆。用戶應(yīng)該一眼就在你的圖標(biāo)和系統(tǒng)圖標(biāo)中區(qū)分出來?。
  • 易于理解并被廣泛接受。嘗試創(chuàng)造多數(shù)用戶都能正確理解的標(biāo)志,并不讓它們感到攻擊性。

重要:

確保你的設(shè)計(jì)中沒有復(fù)用蘋果官方產(chǎn)品的圖形。這些標(biāo)志受版權(quán)保護(hù),而且相關(guān)產(chǎn)品的設(shè)計(jì)會(huì)頻繁變化。

無論你是只使用自己設(shè)計(jì)的圖標(biāo),或者是與系統(tǒng)標(biāo)準(zhǔn)圖標(biāo)混用,所有你的app中出現(xiàn)的圖標(biāo)都應(yīng)該看起來屬于同一種風(fēng)格:它們看起來擁有同樣的尺寸、細(xì)節(jié)精度以及視覺權(quán)重。

舉個(gè)例子,下圖中的iOS欄標(biāo)準(zhǔn)圖標(biāo),你會(huì)注意到他們之間在尺寸、細(xì)節(jié)和重量上都擁有很高的相似性,從而形成了一個(gè)協(xié)調(diào)的聯(lián)合體:

[ISUX譯]iOS 9 人機(jī)界面指南(五):圖標(biāo)與圖形設(shè)計(jì)

想要設(shè)計(jì)一套風(fēng)格協(xié)調(diào)連貫的圖標(biāo),一致性是關(guān)鍵:盡量讓每個(gè)圖標(biāo)都使用相同的透視和粗細(xì)相同的線條。為了保證所有的icon尺寸視覺上統(tǒng)一,你可能需要設(shè)計(jì)一些實(shí)際上尺寸并不相同的icon。舉個(gè)例子,下面這組系統(tǒng)標(biāo)準(zhǔn)圖標(biāo)看起來大小一致,但實(shí)際上收藏夾和語音郵箱的icon比其它三個(gè)略大一些。

[ISUX譯]iOS 9 人機(jī)界面指南(五):圖標(biāo)與圖形設(shè)計(jì)

如果你在設(shè)計(jì)用于標(biāo)簽欄的圖標(biāo),你應(yīng)該提供圖標(biāo)的兩種狀態(tài)——未選中態(tài)和選中態(tài)。通常選中態(tài)是非選中態(tài)填充了顏色的樣子,但有些設(shè)計(jì)需要在此方法的前提下進(jìn)行一些變化:

[ISUX譯]iOS 9 人機(jī)界面指南(五):圖標(biāo)與圖形設(shè)計(jì)

創(chuàng)建有內(nèi)部細(xì)節(jié)的圖標(biāo)的選中態(tài)版本時(shí)(例如收音機(jī)圖標(biāo)),將內(nèi)部細(xì)節(jié)反過來填充,以確保這些細(xì)節(jié)在選中態(tài)依然突出。鍵區(qū)圖標(biāo)雖然也擁有一些內(nèi)部細(xì)節(jié),但如果對(duì)選中態(tài)的背景進(jìn)行填充,并在圓圈上增加白色邊線,就會(huì)令用戶感到混淆。

[ISUX譯]iOS 9 人機(jī)界面指南(五):圖標(biāo)與圖形設(shè)計(jì)

有時(shí)候給予選中態(tài)一些細(xì)微的變化令其有更好的顯示效果。例如計(jì)時(shí)器和播客的圖標(biāo)都包含一些開放的區(qū)域,所以選中態(tài)將其描邊略微縮小并放在了一個(gè)圓圈內(nèi)。

如果圖標(biāo)在填充后會(huì)讓人難以辨認(rèn),好的替代方案就是使用更重的描邊來表示選中態(tài)。例如語音郵箱和閱讀列表的圖標(biāo)的選中態(tài)就是使用了?2?點(diǎn)的描邊,而未選中態(tài)是用?1?點(diǎn)來描邊的。

[ISUX譯]iOS 9 人機(jī)界面指南(五):圖標(biāo)與圖形設(shè)計(jì)

有些圖標(biāo)由于形狀細(xì)節(jié)的關(guān)系,增加描邊后看起來并不好。例如這幾個(gè)案例——音樂和藝術(shù)家的圖標(biāo)——兩種狀態(tài)都使用填充效果。用戶很簡(jiǎn)單就能分辨出選中態(tài)和未選中態(tài),因?yàn)檫x中態(tài)有顏色,視覺表現(xiàn)更重一些。

[ISUX譯]iOS 9 人機(jī)界面指南(五):圖標(biāo)與圖形設(shè)計(jì)

設(shè)計(jì)模板圖標(biāo)時(shí),需要遵循以下規(guī)則:

  • 使用帶的透明度的純色來繪制圖標(biāo)。iOS會(huì)去除所有的顏色信息,所以不需要使用超過?1?種填充色。
  • 不要使用陰影。
  • 圖形需要平滑無鋸齒。

如果你要設(shè)計(jì)一個(gè)看起來足夠有?iOS?原生感的圖標(biāo),你可以使用細(xì)描邊來繪制它。具體來說,使用?1-point?描邊(也就是在?@2x?分辨率下是?2?像素描邊)

不管圖標(biāo)的是怎樣的視覺風(fēng)格,都需要按照尺寸表表格?45-1來創(chuàng)建自定義工具欄、導(dǎo)航欄以及標(biāo)簽欄的圖標(biāo)。如果你設(shè)計(jì)的是主屏幕快速操作的模板圖標(biāo),詳情參見3.1.2 主屏幕快捷操作?。

不要在自定義標(biāo)簽欄圖標(biāo)中包含文本,而是使用標(biāo)簽欄的?API?來為每一個(gè)標(biāo)簽設(shè)置標(biāo)題(例如initWithTitle:image:tag:?)。如果你需要調(diào)整標(biāo)題的自動(dòng)布局,你可以使用標(biāo)題?API?例如setTitlePositionAdjustment:?)。

5.5 網(wǎng)頁圖標(biāo)(Web?Clip?Icons)

對(duì)于網(wǎng)頁應(yīng)用或網(wǎng)站,你可以提供一個(gè)定制圖標(biāo),讓你的用戶通過網(wǎng)頁剪輯(Web?clip)將你的app展現(xiàn)在主屏幕上。用戶只需要點(diǎn)擊這個(gè)icon便可直接獲取你的網(wǎng)頁內(nèi)容。你可以創(chuàng)建一個(gè)可以代表你的整個(gè)網(wǎng)站或某個(gè)單獨(dú)網(wǎng)頁的圖標(biāo)。

iOS也會(huì)在Safari的收藏夾中展示網(wǎng)頁圖標(biāo),當(dāng)用戶點(diǎn)擊Safari的URL欄或者打開一個(gè)新的網(wǎng)頁標(biāo)簽時(shí),這些網(wǎng)頁圖標(biāo)就會(huì)以矩陣的形式出現(xiàn)。

如果你的網(wǎng)頁內(nèi)容使用了常用的圖像或容易辨認(rèn)的配色方案,你的icon也應(yīng)該融入這些特征。然而,為了確保圖標(biāo)在設(shè)備中更加漂亮,你應(yīng)該同時(shí)遵循以下這些指南:(想要了解如何在你的網(wǎng)頁內(nèi)容中增加代碼來提供自定義圖標(biāo),請(qǐng)參考Specifying?a?Webpage?Icon?for?Web?Clip)。

對(duì)于的尺寸的圖標(biāo),請(qǐng)參考表格?45-1。

注意:

盡量避免把你的icon命名為apple-touch-icon-precomposed.png.

5.6 創(chuàng)建可縮放圖片(Creating?Resizable?Images)

你可以通過制作可縮放圖片來定制一些標(biāo)準(zhǔn)UI元素的背景,如彈窗,按鈕,導(dǎo)航欄,標(biāo)簽欄等,還包括這些欄上的項(xiàng)。提供這些元素的可縮放圖片會(huì)優(yōu)化app的整體性能。

對(duì)于許多界面元素,你可以使用端蓋來替代背景。端蓋可定義圖像內(nèi)的一個(gè)不被放大或縮小的區(qū)域。例如,你可以創(chuàng)建一個(gè)包含?4?個(gè)端蓋的可拉伸圖片,將其作為一個(gè)按鈕的?4?個(gè)角。當(dāng)圖片被縮放來適應(yīng)按鈕大小時(shí),被端蓋指定的四個(gè)角則不會(huì)發(fā)生變化。

據(jù)你所提供的可縮放圖片,iOS會(huì)進(jìn)行拉伸或者平鋪,直到圖片可以正確填充當(dāng)前UI元素的背景區(qū)域。拉伸指的是在不考慮圖片原始比例的情況下放大圖片。拉伸圖片的性能較高,但對(duì)于多像素圖片來說,會(huì)出現(xiàn)失真現(xiàn)象。平鋪指的是按照?qǐng)D片的原始尺寸多次復(fù)制圖片,直到填充目標(biāo)區(qū)域。平鋪的性能較低,但它是能夠準(zhǔn)確實(shí)現(xiàn)紋理和圖案的唯一方法。

一般來說,提供一張不包含端蓋的最小尺寸可縮放圖像即可達(dá)到想要的效果,比如:

  • 如果你需要不包含漸變的實(shí)色圖,制作1×1像素的圖片。
  • 如果你需要垂直簡(jiǎn)便的效果,制作一個(gè)寬度為1像素,高度與UI元素背景區(qū)域高度相等的圖像。
  • 如果你需要重復(fù)的紋理效果,你需要制作一個(gè)尺寸與紋理最小重復(fù)部分尺寸相等的圖像。
  • 如果你需要不重復(fù)的紋理效果,你需要制作一個(gè)與你的UI元素背景區(qū)域大小相等的靜態(tài)圖像。

 

本章英文原文訪問地址iOS Human Interface Guidelines

中文翻譯PDF下載:

下載鏈接:http://pan.baidu.com/s/1c1vHrUC

密碼:eo5v

相關(guān)閱讀:

iOS 9人機(jī)界面指南(一):UI設(shè)計(jì)基礎(chǔ)

iOS 9人機(jī)界面指南(二):設(shè)計(jì)策略

iOS 9人機(jī)界面指南(三):iOS 技術(shù) (上)

iOS 9人機(jī)界面指南(三):iOS 技術(shù) (中)

iOS 9人機(jī)界面指南(三):iOS 技術(shù) (下)

iOS 9人機(jī)界面指南(四)UI元素

來源@騰訊ISUX

文章鏈接:https://isux.tencent.com/ios9-guideline-ch5.html

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 目前還沒評(píng)論,等你發(fā)揮!