[譯]《iOS Human Interface Guidelines》——Template Icons

模板圖標(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 ButtonsTab 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)一的感覺的。

image

為了創(chuàng)建連貫的系列圖標(biāo),一致性是關(guān)鍵:每個圖標(biāo)都應(yīng)該盡可能地使用相同的透視和筆畫粗細(xì)。為了確保所有的圖標(biāo)都有一只的感知尺寸,你可能需要創(chuàng)建一些不同實際尺寸的圖標(biāo)。比如說,下面顯示的系統(tǒng)提供的圖標(biāo)集合都有相同的感知尺寸,機(jī)智喜歡和語音信箱比其他三個圖標(biāo)實際上要大一點點。

image

如果你設(shè)計一個自定義的標(biāo)簽欄圖標(biāo),你應(yīng)該提供兩個版本——一個未選中的外觀和一個選中后的外觀。選中后的外觀往往是未選中外觀的填充版本,但是一些設(shè)計需要改變這一方式。

image

創(chuàng)建一個與未選中圖標(biāo)內(nèi)部細(xì)節(jié)反轉(zhuǎn)的填充版本的圖標(biāo)(例如收音機(jī)圖標(biāo)),這樣它們就會在選中版中維持特征。鍵盤圖標(biāo)也有內(nèi)部細(xì)節(jié),但是如果把背景填充并將圓形變成白線,這樣的選中版會變得迷惑并且難以識別。

image

有時候,設(shè)計需要輕微的修改來使選中時好看。比如說,因為計時器和廣播圖標(biāo)包含開放區(qū)域,所以選中版濃縮了一點筆觸來融入圓形外殼。

image

如果一個圖標(biāo)填充后變得不好辨認(rèn),一個好的替代是使用粗一點的筆觸來繪制選中版。比如說,語音郵箱和閱讀清單圖標(biāo)就使用了2 point的筆觸,而不是用來繪制未選中版的1point筆觸。

image

有時候,在筆觸描繪輪廓時圖標(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ā)文檔

查看完整合集


查看作者首頁

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 179,094評論 25 709
  • iOS 9設(shè)計規(guī)范 中文版 完整版譯者注:本文譯自蘋果官方人機(jī)界面指南 iOS Human Interface G...
    海寧Hennie閱讀 13,643評論 2 60
  • 5. 圖像(Graphics) 5.1 應(yīng)用圖標(biāo)(App Icon) 5.2 自定義圖標(biāo)(Custom Icons...
    70dd80205ba0閱讀 1,034評論 0 7
  • 目光所及之處 所有的妄想 在灰燼里的期盼 斑駁陸離 隱約模糊 都是幻覺 都是想象 心動是一瞬 怎樣才能抹去 這些飄...
    Kari_閱讀 185評論 0 0
  • 1 沒有課的日子很寧靜,躺在床上,讀著剛找到的夏至未至的資源,好多年前的作品了吧,我記得曾經(jīng)在圖書館看到這本書已經(jīng)...
    如何是好閱讀 290評論 0 0

友情鏈接更多精彩內(nèi)容