Image Image Image Image Image Image Image Image Image

10 一月

By

No Comments

給你的網站設計一個行動版icon

2013/01/10 | By | No Comments

越來越多人使用行動裝置,除了讓你的網站方便使用者閱讀外,別忘了設計一個行動版的icon,讓使用者加到主畫面時,增加好印象!

一開始,先了解一下所謂行動版icon是什麼?不是App唷,是給網站用的。當我們使用行動裝置瀏覽網頁時,除了可以分享,還有一個【加到主畫面】的功能,如下圖:


原本預設,就是這樣破破的,所以才有設計專屬icon的需求阿。讓我們開始吧!

/Before You Star 開始之前/
開始之前,幾個小提醒(特別是for Apple的裝置):
1.設計請用【正方形】:iOS會自動處理【圓角】效果,不用自己作,預設最自然啦。
2.不要加太多【效果】:iOS會自動幫你的icon加上【陰影】還有增加【反射光】。
3.icon要有代表性:讓使用者容易辨識,且跟網站logo相似,不要設計過頭,成了反效果。

/Apple Device Icon Sizes 確認尺寸/
開始設計前,先確認裝置所需的icon尺寸,為了確保每種裝置看起來都是漂亮的,
最好的方法,當然是直接為各裝置設置不同大小的icon囉。
※註:不用另外設計Andoid的icon,語法通用,且裝置會自動辨識調整大小。

iPhone and iPod Touch (Retina Display)
Icon size: 114px by 114px
iPhone and iPod Touch (None Retina Display)
Icon size: 57px by 57px
iPad (Retina Display)
Icon size: 144px by 144px
iPad (None Retina Display)
Icon size: 72px by 72px
(via: http://webdesign.tutsplus.com/ )

/Adding Your Own Effects 增加效果/
當你設計好的icon,iOS會自動幫你進行【圓角】、【陰影】的效果,
所以設計的icon效果要拿捏好,以免畫蛇添足。
至於【反射光】的部分,則可以透過語法被隱藏:

※註:rel=apple-touch-icon,會有反射光,加上了-precomposed,就可以隱藏囉。

via:http://kulturbanause.de/

/Naming Conventions 命名方式/
要怎麼命名icon檔案(如:apple-icon-114x114px.png),大家都有自己的方式,
但因應有不同尺寸的icon,建議還是在命名上作提醒比較好阿。

/Linking the Icons to Your Website 套用icon/
要套用icon,只需要加幾句語法就OK囉。如下:

※註:如果要隱藏反射光,記得改用apple-touch-icon-precomposed喔。

/A Note about Android 關於Android/
Android也支援apple-touch-icon-precomposed的屬性,
所以不需作更動,也不需要額外設計for Android的尺寸。
※註:Android預設是抓網站網址列上的小圖來當成主畫面的圖標。

/Prompting Your Users 提示使用者/
想要提醒使用者使用【加到主畫面】的功能,
網路上有一些JavaScript可以使用,會跳出文字提醒,
不過使用的同時,也要考慮使用js對性能的影響喔。

比起App,要讓使用者瀏覽網頁加到主畫面的機會似乎不多齁,至少我的使用習慣是這樣,
也可能是大家通通都去作App了,所以使用者根本就不需要用到這個功能。
但是,有沒有發現很多App搞得跟網站一樣,沒什麼功能,
之所以花錢作App,只是為了讓行動裝置使用者容易閱讀?加了一些地圖就算功能?
如果只是這樣的需求,增加行動版網頁就OK啦,節省時間也節省荷包阿。

《文章 via Give Your Website an iOS Home Screen Icon
《Photo via © Ricky Romero/Flickr

Submit a Comment

發表迴響