iOS 9 人機界面指南(五):圖標與圖形設計
iOS 9 人機界面指南(五):圖標與圖形設計-移動閱讀二維碼

iOS 9人機界面指南(二):設計策略
譯者注:本章是iOS Human Interface Guideline的最后一章,文末附上全文PDF下載地址。譯文如有任何疏漏之處,或任何意見或建議,請不吝指出,翻譯組感謝大家長久以來的關注和支持!

往期:
iOS 9人機界面指南(一):UI設計基礎
iOS 9人機界面指南(二):設計策略
iOS 9人機界面指南(三):iOS 技術 (上)
iOS 9人機界面指南(三):iOS 技術 (下)
iOS 9人機界面指南(四):UI元素

文章索引

 

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

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

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

[ISUX譯]iOS 9 人機界面指南(五):圖標與圖形設計

注意:

如果你需要在主屏幕快捷操作上創建自定義icon,請參考主屏幕快捷操作?。

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

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

 

5.2 應用圖標(App?Icon)

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

[ISUX譯]iOS 9 人機界面指南(五):圖標與圖形設計

為了讓icon達到最好的效果,你可以求助于專業設計師。一個有經驗的設計師可以為你的app建立統一的視覺風格,同時把這種風格延續和濃縮到icon的設計中。

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

追求簡約。尤其是避免把一大堆不同的圖形都塞到你的icon中去。找到一個簡單的、可以代表你的app精髓的元素,然后把它設計成一個簡單而獨特的圖形。添加細節時請慎重,如果一個icon的樣式或形狀過于復雜,它的細節可能會讓用戶迷惑,在小尺寸的icon中更可能會顯示模糊。

注意:

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

在icon中為你的app設計一個抽象釋義。在icon設計中照片或者截圖效果通常都會很糟糕,那是因為這些相片級的細節在小尺寸中非常難以辨識。因此,我們最好以藝術的方式來詮釋現實,因為這樣能夠讓用戶很容易領悟到你想他們注意到的方面。

如果你堅持完全擬物化,請務必做到十分精確。代表真實物品的icon或者圖像應該精確地描摹出實物的特征,如織物、玻璃、紙張、金屬等等,還要能表達實物的重量和質感。

保證你的icon在不同的背景圖中都是好看的。不要只是單一在淺色或者深色背景中測試你的icon效果,因為你無法預料你的用戶會使用什么樣的墻紙。

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

不要在圖標中使用iOS的界面元素。你一定不希望用戶會把你的app?icon或圖形與iOS的系統UI搞混。

不要在icon中使用蘋果的硬件產品標志。代表蘋果產品的各個標志都是受版權保護的,不允許復用到你的icon或者圖形中。一般來說,要避免在你的icon中復用任何特定設備標志,因為這些標志的設計常常變化,而基于這些設計的icon和圖形很容易就會過時。

不要在你的界面中復用iOS自帶的app?icon。同樣的icon含義卻有輕微不同,還同時出現在整個系統的不同位置之中,這會讓用戶非常困惑。

為不同設備準備不同大小的icon。你需要確保你的應用icon支持所有的設備。對于不同設備應該選用的icon尺寸,可以參考表格45-1。

當icon出現在iOS桌面上的時候,它會自動疊加圓角。請保證你的icon四個角都是90°,這樣它們在圓角處理后仍然很好看。舉個例子:

[ISUX譯]iOS 9 人機界面指南(五):圖標與圖形設計

創建一個大尺寸的app?icon,用于顯示在App?Store上。雖然讓你的用戶能輕易認出你的icon這點很重要,但相比之前這些尺寸,這個尺寸的icon允許你添加更多精巧的細節。這個尺寸的app?icon顯示在App?Store上時將不再額外添加任何視覺效果。

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

注意:

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

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

5.2.1 文檔圖標(Document?Icons)

如果你的iOS?app會創建自定義類型的文件,而你希望用戶一眼就能看出這些文件是由你的app生成的。你不需要為這些文檔重新設計圖標,因為iOS會自動把你的app?icon來作為這些文檔的圖標。

 

5.2.2 用于Spotlight和設置的圖標(Spotlight?and?Settings?Icons)

每個app都應該提供一個小尺寸的圖標,用于在spotlight搜索結果中展示。同樣地,每個app都應該提供一個小尺寸的圖標,用于在系統內置的設置頁面中展示。

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

[ISUX譯]iOS 9 人機界面指南(五):圖標與圖形設計

和app?icons一樣,你可以任意命名這些小icon,因為iOS在使用的時候通常會照慣例自動選擇合適尺寸的icon。

對于所有的設備,請分別為Spotlight搜索結果和設置界面單獨提供icon。如果你沒有提供這些icon,在這些位置iOS可能會縮小你的應用icon。表格45-1顯示了不同尺寸的詳細信息。

注意:

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

5.3 啟動畫面(Launch?Files)

啟動畫面是在你的應用啟動時展示的簡單占位圖。由于啟動畫面會在用戶啟動你的app時立刻出現,并且很快地被app的首屏取代,它會讓用戶認為你的app運行和響應的速度都非???。每一個應用都要提供一個啟動文件或至少一張靜態圖片。

在?iOS8?以后,你可以使用一個?XIB?或故事板文件來替代靜態的啟動圖片。在?Interface?Builder?中創建啟動文件后,使用尺寸歸類來為不同的界面環境定義不同的層,你還可以使用自動布局來進行細節調整。利用尺寸歸類和自動布局,你可以只創建一個啟動文件,就可以在所有設備里都有不錯的呈現。(如果要了解呈現環境和尺寸歸類的概覽,參見1.3.1 為自適應而開發?;了解如何在?Interface?Builder?中使用尺寸歸類,可參見Size?Classes?Design?Help?。)

如果你需要支持早期的?iOS?版本,除啟動文件外可以繼續使用靜態啟動圖片。

重要:

使用?XIB?或故事板的文件,表示你的應用程序在iPhone?6?Plus?或?iPhone?6上運行。

以下的設計規范,適用于啟動文件及靜態圖片:

簡單的啟動圖片可以提升用戶體驗。通常情況下,啟動圖片不需要提供如下內容:

  • “進入應用的過程”,例如載入進程圖。
  • 帶有“關于信息”的窗口。
  • 品牌元素,除非它們是?app?第一屏的靜態內容。

由于用戶會在?app?之間頻繁地切換,所以你應該盡可能地縮短加載時間,通過設計降低用戶對啟動過程的感知,而不是加重用戶對啟動的印象。

我們也可以設計一個與APP首屏一樣的啟動畫面。除非:

  • 文本。啟動圖片是靜態的,所以啟動圖片中的任何文本都不會有局限。
  • 可能會變化的?UI?元素。如果?app?啟動完成后有元素發生可見的變化,用戶可能會對啟動畫面和第一屏之間的變化感到不適應。

如果你認為遵循這些規范,往往只會設計出平凡而乏味的啟動圖片,倒也沒說錯。請記住,啟動圖片不意味著需要你在里面炫技,它的目標只是增強用戶對應用可以被快速啟動并開始使用的感受。例如系統設置和天氣應用都僅僅提供了一個相當于背景的啟動圖片。

系統設置的啟動圖片

[ISUX譯]iOS 9 人機界面指南(五):圖標與圖形設計

天氣應用的啟動圖片

[ISUX譯]iOS 9 人機界面指南(五):圖標與圖形設計

 

如果你需要使用靜態啟動圖片,你需要準備尺寸不同的啟動畫面以適應不同的設備,且所有設備上的靜態啟動圖片都必須包含狀態欄的區域。具體尺寸請查閱表格?45-1?。

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

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?模板圖標(Template?Icons)

你為工具欄或主屏幕快速操作創建的自定義圖標,也就是模板圖標或圖片,因為當你的?app?運行時,iOS?將它作為一個?mask(iOS的一個開發相關名詞)來介紹你所看到的圖標。

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

如果你的app中包含標準按鈕圖標不能代表的任務或者模式——又或者標準按鈕與你的app風格相差太遠——你可以設計自己的欄按鈕圖標。以更高的要求來看,你應該以下列幾點為目標來設計icon:

  • 簡單明了。太多的細節會令圖標看起來過于草率且識別度低。
  • 不容易與系統圖標混淆。用戶應該一眼就在你的圖標和系統圖標中區分出來?。
  • 易于理解并被廣泛接受。嘗試創造多數用戶都能正確理解的標志,并不讓它們感到攻擊性。

重要:

確保你的設計中沒有復用蘋果官方產品的圖形。這些標志受版權保護,而且相關產品的設計會頻繁變化。

無論你是只使用自己設計的圖標,或者是與系統標準圖標混用,所有你的app中出現的圖標都應該看起來屬于同一種風格:它們看起來擁有同樣的尺寸、細節精度以及視覺權重。

舉個例子,下圖中的iOS欄標準圖標,你會注意到他們之間在尺寸、細節和重量上都擁有很高的相似性,從而形成了一個協調的聯合體:

[ISUX譯]iOS 9 人機界面指南(五):圖標與圖形設計

想要設計一套風格協調連貫的圖標,一致性是關鍵:盡量讓每個圖標都使用相同的透視和粗細相同的線條。為了保證所有的icon尺寸視覺上統一,你可能需要設計一些實際上尺寸并不相同的icon。舉個例子,下面這組系統標準圖標看起來大小一致,但實際上收藏夾和語音郵箱的icon比其它三個略大一些。

[ISUX譯]iOS 9 人機界面指南(五):圖標與圖形設計

如果你在設計用于標簽欄的圖標,你應該提供圖標的兩種狀態——未選中態和選中態。通常選中態是非選中態填充了顏色的樣子,但有些設計需要在此方法的前提下進行一些變化:

[ISUX譯]iOS 9 人機界面指南(五):圖標與圖形設計

創建有內部細節的圖標的選中態版本時(例如收音機圖標),將內部細節反過來填充,以確保這些細節在選中態依然突出。鍵區圖標雖然也擁有一些內部細節,但如果對選中態的背景進行填充,并在圓圈上增加白色邊線,就會令用戶感到混淆。

[ISUX譯]iOS 9 人機界面指南(五):圖標與圖形設計

有時候給予選中態一些細微的變化令其有更好的顯示效果。例如計時器和播客的圖標都包含一些開放的區域,所以選中態將其描邊略微縮小并放在了一個圓圈內。

如果圖標在填充后會讓人難以辨認,好的替代方案就是使用更重的描邊來表示選中態。例如語音郵箱和閱讀列表的圖標的選中態就是使用了?2?點的描邊,而未選中態是用?1?點來描邊的。

[ISUX譯]iOS 9 人機界面指南(五):圖標與圖形設計

有些圖標由于形狀細節的關系,增加描邊后看起來并不好。例如這幾個案例——音樂和藝術家的圖標——兩種狀態都使用填充效果。用戶很簡單就能分辨出選中態和未選中態,因為選中態有顏色,視覺表現更重一些。

[ISUX譯]iOS 9 人機界面指南(五):圖標與圖形設計

設計模板圖標時,需要遵循以下規則:

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

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

不管圖標的是怎樣的視覺風格,都需要按照尺寸表表格?45-1來創建自定義工具欄、導航欄以及標簽欄的圖標。如果你設計的是主屏幕快速操作的模板圖標,詳情參見3.1.2 主屏幕快捷操作?。

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

 

5.5 網頁圖標(Web?Clip?Icons)

對于網頁應用或網站,你可以提供一個定制圖標,讓你的用戶通過網頁剪輯(Web?clip)將你的app展現在主屏幕上。用戶只需要點擊這個icon便可直接獲取你的網頁內容。你可以創建一個可以代表你的整個網站或某個單獨網頁的圖標。

iOS也會在Safari的收藏夾中展示網頁圖標,當用戶點擊Safari的URL欄或者打開一個新的網頁標簽時,這些網頁圖標就會以矩陣的形式出現。

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

對于的尺寸的圖標,請參考表格?45-1。

注意:

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

 

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

你可以通過制作可縮放圖片來定制一些標準UI元素的背景,如彈窗,按鈕,導航欄,標簽欄等,還包括這些欄上的項。提供這些元素的可縮放圖片會優化app的整體性能。

對于許多界面元素,你可以使用端蓋來替代背景。端蓋可定義圖像內的一個不被放大或縮小的區域。例如,你可以創建一個包含?4?個端蓋的可拉伸圖片,將其作為一個按鈕的?4?個角。當圖片被縮放來適應按鈕大小時,被端蓋指定的四個角則不會發生變化。

據你所提供的可縮放圖片,iOS會進行拉伸或者平鋪,直到圖片可以正確填充當前UI元素的背景區域。拉伸指的是在不考慮圖片原始比例的情況下放大圖片。拉伸圖片的性能較高,但對于多像素圖片來說,會出現失真現象。平鋪指的是按照圖片的原始尺寸多次復制圖片,直到填充目標區域。平鋪的性能較低,但它是能夠準確實現紋理和圖案的唯一方法。

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

  • 如果你需要不包含漸變的實色圖,制作1×1像素的圖片。
  • 如果你需要垂直簡便的效果,制作一個寬度為1像素,高度與UI元素背景區域高度相等的圖像。
  • 如果你需要重復的紋理效果,你需要制作一個尺寸與紋理最小重復部分尺寸相等的圖像。
  • 如果你需要不重復的紋理效果,你需要制作一個與你的UI元素背景區域大小相等的靜態圖像。

 

本章英文原文訪問地址:iOS Human Interface Guidelines
全文中文翻譯PDF下載:點此下載

感謝你的閱讀,本文出處?騰訊ISUX

本文鏈接:http://www.casaleticia.com/ios-9-interface-guidelines-icons-and-graphic-design.html
本文標簽: , , , , , , ,