iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 26
0
自我挑戰組

Android API超初學!!系列 第 26

[番外篇] [Day 26] iOS Human Interface (5) APP icon設計

  • 分享至 

  • twitterImage
  •  

Icon絕對是APP的第一門面,重要性可想而知。對於icon,蘋果官網也有一些建議:
(若非特別標記,本文的icon圖片皆來自蘋果官網)

簡單

使用簡易且而準確代表的圖樣,太過複雜會讓人失焦,且小尺寸看不清楚。

單一焦點

圖樣設計時,重點只需一個,而且擺在正中間。

圖樣要看得懂

例如mail APP使用信封當icon,不要自己發明太奇怪、需要聯想很久的圖樣。

雖然蘋果說過盡量不要使用漸層,如下

Minimal use of bezels, gradients, and drop shadows keep the interface light and airy, while ensuring that content is paramount.

不過icon可能不在此限吧...

背景簡單

主體圖樣不透明,背景簡單,跟其他的APP icon相比不要太突兀,且設計不需占滿整個icon。例如下圖:

若非必要不要在icon上面使用文字

嗯,沒錯。這不太需要多做解釋。

不要使用照片、螢幕截圖和UI介面

這...不好意思,我就是犯了這個錯誤啊啊啊!
https://ithelp.ithome.com.tw/upload/images/20181105/20112439fvGMyTvC2P.jpg
這就是懶得設計icon的人最愛用的招數啊!這個準則是為了避免照片在小尺寸的時候看不清楚,而且太複雜,也沒有單一焦點,根本就是綜合上面幾點錯誤於一身啊Q_Q

不要使用Apple產品的照片或設計

  1. 因為有版權
  2. 產品外型常更新,icon會過時

Icon就是icon,不要放在UI其他地方

Icon的目的要明確,太常出現會混淆。且icon跟UI的顏色需統一(這句不確定理解正不正確,不過APP顏色統一倒也合理)。

測試APP icon在不同的桌布下看起來如何

小聲說...這我覺得不行,有些桌面又花又醜,icon好看也沒用。不過正常的幾個預設桌面倒是可以試試看看啦。

確保icon是方型的

iOS會自己套用圓角。

/images/emoticon/emoticon30.gif
上面講了一堆,不理的人也拿他沒轍。現在來看真正該遵守的spec,再不理...就算了。

Icon Spec

  • PNG 檔案
  • 顏色是sRGB或P3
  • 無圖層且不透明
  • 遵守解析度規則還有尺寸大小規則(底下說明)
  • 要是方型,不需自己加圓角

Icon尺寸大小

需提供不同大小的icon,例如根據裝置的不同,iphone要180px × 180px (@3x),ipad要 152px × 152px (@2x)等。
就算是同一個裝置,icon出現的位置的有很多地方,如spotlight icon、settings icon、notification icon等。如果不提供相對應大小的icon,系統會自動縮小你的icon。
另外,也需注意使用alternate功能時,icon的大小變化。

使用者可自訂的icon

這個功能我目前沒看過,等有需要使用再說。


上一篇
[番外篇] [Day 25] iOS Human Interface (4) 圖片解析度
下一篇
[番外篇] [Day 27] iOS Human Interface (6) APP icon設計 (cont.)
系列文
Android API超初學!!30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言