UI設計師要如何出 App icon 的圖給 iOS及Android系統呢?

Joyceh
Jan 16, 2020

--

嗨大家好,我現在是一名在科技公司工作的UI設計師。

由於我是使用Adobe XD的設計師,因此對於很多人介紹的Zeplin並不是很了解。也因此沒有辦法直接使用很多設計師在網路上或其他文章所提供已設計好的資源….

因此在這裡整理了我平常如何出APP icon給工程師的方法供大家參考。( PS. 其實輸出圖檔給工程師有很多種方法,在這邊我只是提供我做了一些research後使用的方法給大家做參考。)

近期發現這個 (2022.05)

APP Icon Generator

這個網站提供ios及Andriod兩個系統的APP Icon Generator

app icon generator

過去我iOS及Android是使用不同的方式。
如果也想要知道過去的使用方式,或是相關原理,可以往下繼續閱讀 :)

給iOS系統

首先,如果你合作的工程師人很nice的話,他會直接給你一張圖。以下這張圖

ios App Icon Sizes
ios App Icon Sizes

對。沒錯。就是需要這麼多不同尺寸的APP icon。(因為要支援不同裝置上面APP icon所呈現的解析度及大小都是符合你本身所設計出來的。如果只使用一種尺寸的話,在不同裝置上的呈現有些會太大、有些會、太小或是解析度變很差等)。

但是隨著科技這麼進步了,我們所需要做的,就只是

設計一種尺寸!( 1024 x 1024px )

原因為這是APP icon所需要的最大尺寸。

另外由於現在Apple會自動將你的APP icon包成方圓角,因此在設計圖檔的時候直接做方形的icon就可以囉!不需要再自己畫成方圓角~

接下來需要更小的尺寸的話,就只要往下裁切就可以了!

是這個網站:https://makeappicon.com/ (有時候寄信到你所填的信箱會需要一點時間,給他的5–10分鐘)

MakeAppIcon

MakeAppIcon website
MakeAppIcon網站

這個網站支援ios及Android系統 App icon的大小調整。意思是把你的APP icon丟進去這個可愛的麵包機裡面,它就會替你生出你所需要的所有尺寸!是不是超方便的呢?!

不過這裡要提醒一下,這個網站在檔案完成前會問你三個問題。

  1. 你的APP叫什麽名字?
  2. 這是個什麼類型的APP?
  3. 這個APP的關鍵字是什麼?

並需要提供你的Email讓它把調整好的APP icon一次打包寄給你呦!(會直接寄給你ios及Android的)

收到郵件後會有資料夾標示ios及android的。接下來只要把圖給工程師就大功告成囉!

Android系統呢?

android app different masks
Android APP 不同裝置上面顯示的icon示意圖

由於市面上android的手機實在是太多太多了。有些手機的APP icon是圓角的,有些是方角的,甚至也有水滴型的!而設計師如果要因應這些不同裝置輸出APP icon,那真的是沒完沒了。因此Android開發出了

android adaptive icon
自動調整圖示功能

自動調整圖示

的功能。

不過要注意的是這個功能只支援Android 8.0 (API 等級 26)以上的開發系統呦!意思是26以下的還是需要使用在這個新功能出來前所使用的出圖方法。(如果不知道開發的APP支援到幾等級的系統,記得去問一下你家的工程師呦)

如果是Android 8.0 (API 等級 26)以下的話,我的做法是選一或兩種較多製造商(也就是手機牌子)在用的APP icon形狀。例如:圓型及方圓角的,然後使用剛剛我上面介紹的MakeAppIcon網站,輸出Android APP icon不同尺寸的圖檔給工程師使用。

Android App icon different sizes
Android App icon 不同的尺寸

而如果你能使用自動調整圖示的功能的話,真的是恭喜你呀!

你所要做的就只是輸出兩張圖

兩張圖檔都是108x108px。一張為前景:108x108px的 Logo透明背景圖檔(Logo圖像須控制在置中72x72px內)。另一張為後景:108x108px的背景色。

這個自動調整圖示功能的概念為看是哪個製造商,就套用哪個製造商系統預設的遮罩。簡單來說,如果Google pixel app icon使用的是圓形的icon,那麼自動調整功能就會自動幫你套上圓形遮罩。讓你的App icon看起來是圓形的。

android adaptive icon masks
自動調整圖示遮罩功能

想更近一步了解相關資訊,可以參考Android寫給開發者的官方網站內容,裡面會有更詳細的介紹(只不過我看了蠻久才看懂的哈哈哈):https://developer.android.com/guide/practices/ui_guidelines/icon_design_adaptive?hl=zh-tw

另外Android也有錄一個影片介紹什麼是自動調整圖示以及在coding的時候要如何操作。歡迎有興趣的朋友去看看那部影片 :) 只不過現在只有英文版本呦!

以上的前景及後景圖都輸出給你家工程師後,再麻煩RD去開發系統做一些設定

adaptive icon foreground and background coding
自動調整圖示的程式碼

上面那張程式碼圖有看到keyword:background及foreground嗎?那就是我們要提供的前景及背景兩張圖。

Configure Image Asset settings
Configure Image Asset 設定

也可以參考這個影片看看工程師們要如何做設定https://www.youtube.com/watch?v=ts98gL1JCQU

以上是我自己遇到問題後查找資料和RD試過之後得出的作法 :) 如果你覺得這篇文章有幫助到你,可以幫我拍個手哦!:)

--

--

Joyceh

嗨!你好 我是一名UI設計師。致力於設計出兼具美感及易用性的產品及服務。