近期發現這個 (2022.05)
APP Icon Generator
這個網站提供ios及Andriod兩個系統的APP Icon Generator
過去我iOS及Android是使用不同的方式。
如果也想要知道過去的使用方式,或是相關原理,可以往下繼續閱讀 :)
給iOS系統
首先,如果你合作的工程師人很nice的話,他會直接給你一張圖。以下這張圖
對。沒錯。就是需要這麼多不同尺寸的APP icon。(因為要支援不同裝置上面APP icon所呈現的解析度及大小都是符合你本身所設計出來的。如果只使用一種尺寸的話,在不同裝置上的呈現有些會太大、有些會、太小或是解析度變很差等)。
但是隨著科技這麼進步了,我們所需要做的,就只是
設計一種尺寸!( 1024 x 1024px )
原因為這是APP icon所需要的最大尺寸。
另外由於現在Apple會自動將你的APP icon包成方圓角,因此在設計圖檔的時候直接做方形的icon就可以囉!不需要再自己畫成方圓角~
接下來需要更小的尺寸的話,就只要往下裁切就可以了!
是這個網站:https://makeappicon.com/ (有時候寄信到你所填的信箱會需要一點時間,給他的5–10分鐘)
MakeAppIcon
這個網站支援ios及Android系統 App icon的大小調整。意思是把你的APP icon丟進去這個可愛的麵包機裡面,它就會替你生出你所需要的所有尺寸!是不是超方便的呢?!
不過這裡要提醒一下,這個網站在檔案完成前會問你三個問題。
- 你的APP叫什麽名字?
- 這是個什麼類型的APP?
- 這個APP的關鍵字是什麼?
並需要提供你的Email讓它把調整好的APP icon一次打包寄給你呦!(會直接寄給你ios及Android的)
收到郵件後會有資料夾標示ios及android的。接下來只要把圖給工程師就大功告成囉!
Android系統呢?
由於市面上android的手機實在是太多太多了。有些手機的APP icon是圓角的,有些是方角的,甚至也有水滴型的!而設計師如果要因應這些不同裝置輸出APP icon,那真的是沒完沒了。因此Android開發出了
自動調整圖示
的功能。
不過要注意的是這個功能只支援Android 8.0 (API 等級 26)以上的開發系統呦!意思是26以下的還是需要使用在這個新功能出來前所使用的出圖方法。(如果不知道開發的APP支援到幾等級的系統,記得去問一下你家的工程師呦)
如果是Android 8.0 (API 等級 26)以下的話,我的做法是選一或兩種較多製造商(也就是手機牌子)在用的APP icon形狀。例如:圓型及方圓角的,然後使用剛剛我上面介紹的MakeAppIcon網站,輸出Android APP icon不同尺寸的圖檔給工程師使用。
而如果你能使用自動調整圖示的功能的話,真的是恭喜你呀!
你所要做的就只是輸出兩張圖
兩張圖檔都是108x108px。一張為前景:108x108px的 Logo透明背景圖檔(Logo圖像須控制在置中72x72px內)。另一張為後景:108x108px的背景色。
這個自動調整圖示功能的概念為看是哪個製造商,就套用哪個製造商系統預設的遮罩。簡單來說,如果Google pixel app icon使用的是圓形的icon,那麼自動調整功能就會自動幫你套上圓形遮罩。讓你的App icon看起來是圓形的。
想更近一步了解相關資訊,可以參考Android寫給開發者的官方網站內容,裡面會有更詳細的介紹(只不過我看了蠻久才看懂的哈哈哈):https://developer.android.com/guide/practices/ui_guidelines/icon_design_adaptive?hl=zh-tw
另外Android也有錄一個影片介紹什麼是自動調整圖示以及在coding的時候要如何操作。歡迎有興趣的朋友去看看那部影片 :) 只不過現在只有英文版本呦!
以上的前景及後景圖都輸出給你家工程師後,再麻煩RD去開發系統做一些設定
上面那張程式碼圖有看到keyword:background及foreground嗎?那就是我們要提供的前景及背景兩張圖。
也可以參考這個影片看看工程師們要如何做設定https://www.youtube.com/watch?v=ts98gL1JCQU
以上是我自己遇到問題後查找資料和RD試過之後得出的作法 :) 如果你覺得這篇文章有幫助到你,可以幫我拍個手哦!:)