欄按鈕圖標(biāo)

iOS 定義了很多標(biāo)準(zhǔn)的欄按鈕的圖標(biāo)，如刷新、開始、增加及收藏。你應(yīng)該盡量使用這些標(biāo)準(zhǔn)按鈕和圖標(biāo)來定義應(yīng)用中一些標(biāo)準(zhǔn)的任務(wù)。（學(xué)習(xí)更多有關(guān)可以使用的標(biāo)準(zhǔn)按鈕和圖標(biāo)，參見 Toolbar and Navigation Bar Buttons and Tab Bar Icons。）

若應(yīng)用中所包含的任務(wù)或模式不能僅僅通過標(biāo)準(zhǔn)圖標(biāo)來呈現(xiàn)，或者這些標(biāo)準(zhǔn)的圖標(biāo)與你的應(yīng)用的風(fēng)格不符合，你可以設(shè)計(jì)自己的欄按鈕圖標(biāo)。在設(shè)計(jì)時(shí)，你需要最大限度地滿足以下要點(diǎn)：

• 簡單的線性圖標(biāo)。太多的細(xì)節(jié)會(huì)讓一個(gè)圖標(biāo)顯得令人不舒服且難以辨認(rèn)。
• 不容易被誤認(rèn)為是系統(tǒng)提供的圖標(biāo)。用戶應(yīng)該能夠很輕易地辨認(rèn)你的圖標(biāo)和系統(tǒng)圖標(biāo)。
• 易于理解和接受。創(chuàng)建一個(gè)大多數(shù)用戶都能正確理解的圖標(biāo)，不要讓用戶感到這個(gè)圖標(biāo)太過侵略性。

重要
避免在設(shè)計(jì)中使用 Apple 產(chǎn)品的復(fù)制圖片，這些標(biāo)志都是具有版權(quán)的，并且由于這些標(biāo)志的設(shè)計(jì)會(huì)頻繁地更新，基于它們而設(shè)計(jì)的圖標(biāo)很快就會(huì)顯得過時(shí)。

不論你是只使用自定義圖標(biāo)還是將自定義圖標(biāo)與標(biāo)準(zhǔn)圖標(biāo)混合使用，應(yīng)用中的所有圖標(biāo)都應(yīng)該在尺寸感覺、細(xì)節(jié)層次以及視覺權(quán)重上看起來具有一致性。

例如，觀察 iOS 的欄圖標(biāo)，可以發(fā)現(xiàn)尺寸、細(xì)節(jié)以及權(quán)重的相似性會(huì)呈現(xiàn)一種整體的和諧感。

http://wiki.jikexueyuan.com/project/ios-human-interface-guidelines/images/icon_family_2x.png" alt="" />

要?jiǎng)?chuàng)建一組圖標(biāo)，一致性是關(guān)鍵：盡可能讓每個(gè)圖標(biāo)都使用相同的透視效果及相同的權(quán)重。為了保證所有的圖標(biāo)從感覺上有一致的大小，你需要?jiǎng)?chuàng)建一些實(shí)際尺寸不同的圖標(biāo)。例如，下面展示的系統(tǒng)提供的圖標(biāo)集，即使 Favorites 和 Voicemail 的圖標(biāo)實(shí)際上會(huì)比其他三個(gè)圖標(biāo)要大，但還是讓人感覺所有圖標(biāo)具有相同的大小。

http://wiki.jikexueyuan.com/project/ios-human-interface-guidelines/images/balanced_icons_2x.png" alt="" />

當(dāng)你在設(shè)計(jì)一個(gè)自定義的標(biāo)簽欄圖標(biāo)時(shí)，你需要考慮兩種版本：一種表示未選中狀態(tài)，一種表示選中狀態(tài)。選中狀態(tài)的圖標(biāo)通常是將未選中進(jìn)行填充，但在設(shè)計(jì)時(shí)這種方法往往需要一些變通。

http://wiki.jikexueyuan.com/project/ios-human-interface-guidelines/images/invert_or_fill_2x.png" alt="" />

創(chuàng)建一個(gè)內(nèi)部有一些細(xì)節(jié)的圖標(biāo)的填充版本時(shí)（如 Radio 圖標(biāo)），將細(xì)節(jié)部分顛倒，確保選中狀態(tài)可以保持這些細(xì)節(jié)。Keypad 圖標(biāo)也擁有一些內(nèi)部細(xì)節(jié)，但如果在創(chuàng)建選中狀態(tài)時(shí)，將它的背景部分進(jìn)行填充，而每個(gè)圓圈加上白色的邊緣，就會(huì)變得很難理解。

http://wiki.jikexueyuan.com/project/ios-human-interface-guidelines/images/alternate_design_2x.png" alt="" />

有時(shí)，在設(shè)計(jì)選中狀態(tài)時(shí)，添加一些細(xì)微的變動(dòng)會(huì)有更好的效果。例如，Timer 和 Podcasts 圖標(biāo)都包含一些開放的區(qū)域，而對(duì)于選中狀態(tài)，將圖標(biāo)縮小一個(gè) bit 放入一個(gè)封閉的圓中反而會(huì)有更好的效果。

http://wiki.jikexueyuan.com/project/ios-human-interface-guidelines/images/thicker_stroke_2x.png" alt="" />

如果一個(gè)圖標(biāo)填充后會(huì)變得難以辨認(rèn)，那就使用深的描邊來表現(xiàn)選中狀態(tài)，例如 Voicemail 和 Reading List 圖標(biāo)的選中狀態(tài)就是將原來未選中時(shí)的 2 像素的描邊增加到了 4 像素。

http://wiki.jikexueyuan.com/project/ios-human-interface-guidelines/images/filled_in_both_states_2x.png" alt="" />

有的圖標(biāo)的形狀的細(xì)節(jié)在增加描邊后會(huì)變得分辨不清，如 Music 和 Artists 圖標(biāo)，這時(shí)，未選中和選中狀態(tài)都可以使用填充模式，但選中狀態(tài)的填充應(yīng)比未選中狀態(tài)更深，且使用顏色填充，這樣一來用戶便能很容易的從外觀上區(qū)別這兩個(gè)狀態(tài)。

為工具欄、導(dǎo)航欄、標(biāo)簽欄所創(chuàng)建的自定義圖標(biāo)也稱之為模板圖片，iOS 會(huì)使用這些圖片來制作應(yīng)用運(yùn)行時(shí)的一些圖標(biāo)。如果你創(chuàng)建了一個(gè)用顏色填充的模板圖標(biāo)，iOS 會(huì)忽視這些顏色。

設(shè)計(jì)自定義欄圖標(biāo)時(shí)，你需要遵循一下守則：

• 使用帶有合適的透明度的純白色
• 不要使用陰影
• 使用圖形保真

如果你想要設(shè)計(jì)一個(gè)看起來與 iOS 的圖標(biāo)集類似的圖標(biāo)，那么在設(shè)計(jì)時(shí)為你的圖標(biāo)添加一條非常細(xì)的描邊。對(duì)于細(xì)節(jié)豐富的圖標(biāo)，使用 2 像素的描邊（高分辨率）會(huì)有較好的效果，而對(duì)與無過多細(xì)節(jié)的圖標(biāo)，可以使用 3 像素的描邊。

不論是何種樣式的圖標(biāo)，都要嚴(yán)格按照尺寸表 來創(chuàng)建自定義工具欄、導(dǎo)航欄、標(biāo)簽欄的圖標(biāo)。

不要在自定義的標(biāo)簽欄圖標(biāo)中包含文本，而是使用標(biāo)簽欄元素的 API 來為每一個(gè)標(biāo)簽設(shè)置標(biāo)題（如 initWithTitle:image:tag:）。同時(shí)，使用標(biāo)題調(diào)整 API 來調(diào)整標(biāo)題的自動(dòng)布局（如 setTitlePositionAdjustment:）。