模板圖標(biāo)
你為欄或者主屏幕快捷操作創(chuàng)建的自定義圖標(biāo)也稱為模板圖標(biāo)或者圖像,因為iOS將其用于產(chǎn)生當(dāng)你app運行時你看到的圖標(biāo)。
iOS定義了很多標(biāo)準(zhǔn)的小圖標(biāo),比如刷新、動作、添加和喜歡。你應(yīng)該盡可能地使用這些按鈕和圖標(biāo)來代表你app中的標(biāo)準(zhǔn)任務(wù)。(查看Toolbar and Navigation Bar Buttons和Tab Bar Icons來學(xué)習(xí)更多關(guān)于你可以在欄中使用的標(biāo)準(zhǔn)按鈕和圖標(biāo)的內(nèi)容。)
如果你的app包含了不能被標(biāo)準(zhǔn)圖標(biāo)代表的任務(wù)或模式——或者如果標(biāo)準(zhǔn)圖標(biāo)與你的app風(fēng)格不協(xié)調(diào)——你可以設(shè)計你自己的小圖標(biāo)。在高層面上,你應(yīng)該以這樣的圖標(biāo)為目標(biāo):
- 簡單合理。太多的細(xì)節(jié)會讓圖標(biāo)顯得草率或者難以辨認(rèn)。
- 不會很容易被誤認(rèn)為系統(tǒng)提供的圖標(biāo)之一。用戶應(yīng)該能夠一眼區(qū)分你的自定義圖標(biāo)和標(biāo)準(zhǔn)圖標(biāo)。
- 易于理解并且廣泛接受。盡量創(chuàng)建一個大部分用戶都能正確理解且沒有用戶會覺得被冒犯的符號。
IMPORTANT
確保不要在你的設(shè)計中使用復(fù)制蘋果產(chǎn)品的圖像。這些符號是有版權(quán)的,并且產(chǎn)品的設(shè)計可能會頻繁地更改。
無論你只使用自定義的圖標(biāo)還是混合自定義和標(biāo)準(zhǔn)的,你的app中所有的圖標(biāo)應(yīng)該在感知尺寸、細(xì)節(jié)等級和視覺分量上看起來屬于同一個系列。
比如說,看一看iOS欄圖標(biāo)系列,注意它們在尺寸、細(xì)節(jié)和分量上是如何相似來產(chǎn)生一種和諧統(tǒng)一的感覺的。
為了創(chuàng)建連貫的系列圖標(biāo),一致性是關(guān)鍵:每個圖標(biāo)都應(yīng)該盡可能地使用相同的透視和筆畫粗細(xì)。為了確保所有的圖標(biāo)都有一只的感知尺寸,你可能需要創(chuàng)建一些不同實際尺寸的圖標(biāo)。比如說,下面顯示的系統(tǒng)提供的圖標(biāo)集合都有相同的感知尺寸,機(jī)智喜歡和語音信箱比其他三個圖標(biāo)實際上要大一點點。
如果你設(shè)計一個自定義的標(biāo)簽欄圖標(biāo),你應(yīng)該提供兩個版本——一個未選中的外觀和一個選中后的外觀。選中后的外觀往往是未選中外觀的填充版本,但是一些設(shè)計需要改變這一方式。
創(chuàng)建一個與未選中圖標(biāo)內(nèi)部細(xì)節(jié)反轉(zhuǎn)的填充版本的圖標(biāo)(例如收音機(jī)圖標(biāo)),這樣它們就會在選中版中維持特征。鍵盤圖標(biāo)也有內(nèi)部細(xì)節(jié),但是如果把背景填充并將圓形變成白線,這樣的選中版會變得迷惑并且難以識別。
有時候,設(shè)計需要輕微的修改來使選中時好看。比如說,因為計時器和廣播圖標(biāo)包含開放區(qū)域,所以選中版濃縮了一點筆觸來融入圓形外殼。
如果一個圖標(biāo)填充后變得不好辨認(rèn),一個好的替代是使用粗一點的筆觸來繪制選中版。比如說,語音郵箱和閱讀清單圖標(biāo)就使用了2 point的筆觸,而不是用來繪制未選中版的1point筆觸。
有時候,在筆觸描繪輪廓時圖標(biāo)的形狀有些細(xì)節(jié)不太好看。當(dāng)這種情況時——比如音樂和藝術(shù)家圖標(biāo)——你可以為圖標(biāo)的兩個版本都使用填充外觀。對用戶來說區(qū)分選中和未選中的外觀很容易,因為選中的外觀顏色深并且有配色。
要設(shè)計一個自定義的小圖標(biāo),要遵循下面的規(guī)則:
- 使用透明來定義圖標(biāo)的形狀。iOS忽略所有的顏色信息,所以不必要使用超過一個以上的填充色。
- 不要包含陰影。
- 使用反鋸齒。
如果你想要設(shè)計一個看起來與iOS圖標(biāo)系列相關(guān)的小圖標(biāo),那就使用非常細(xì)的筆觸來繪制它。特別是1point的筆觸(即@2x分辨率用2 pixel筆觸)對大部分圖標(biāo)都會非常好。
不管圖標(biāo)的視覺風(fēng)格是什么,都要使用Icon and Image Sizes中的尺寸來創(chuàng)建自定義工具欄、導(dǎo)航欄和標(biāo)簽欄的圖標(biāo)。如果你為主屏幕快捷操作設(shè)計自定義圖標(biāo),查看Home Screen Quick Actions獲取細(xì)節(jié)。
不要在自定義的標(biāo)簽欄圖標(biāo)中包含文本。用標(biāo)簽欄元素API來設(shè)置每個標(biāo)簽的標(biāo)題(查看initWithTitle:image:tag:獲取示例)。如果你需要調(diào)整標(biāo)題的自動布局,你可以使用標(biāo)題調(diào)整的API,比如setTitlePositionAdjustment:。
本文翻譯自蘋果官方開發(fā)文檔