其實(shí),我們?cè)谠O(shè)計(jì)軟件啟動(dòng)圖標(biāo)的過程中是有一定共性的設(shè)計(jì)方法的,這些能夠幫助我們提升圖標(biāo)的點(diǎn)擊率。
1. 運(yùn)用視覺隱喻的同時(shí),需要保證圖標(biāo)的可識(shí)別性如圖一,這里很多圖標(biāo)設(shè)計(jì)是沒有經(jīng)過仔細(xì)思考而設(shè)計(jì)運(yùn)用的。我們通過App商店去查找,會(huì)發(fā)現(xiàn)有非常少的app圖標(biāo)的設(shè)計(jì)是吸引眼球的。 例如, “繞口令”的搜索,你會(huì)看到這樣的圖標(biāo)分類:
圖一的第一行第五個(gè)圖標(biāo),表現(xiàn)方式是將繞口令的英文文字寫在漸變的圖標(biāo)背景色塊上,視覺效果表現(xiàn)很平,沒缺乏設(shè)計(jì)感。
為了吸引用戶去使用app軟件, 我們必須設(shè)計(jì)出吸引用戶眼球的圖標(biāo)!
我們可以運(yùn)用隱喻的設(shè)計(jì)表現(xiàn)手法,傳達(dá)給用戶“繞口令”的信息,讓用戶看到圖標(biāo)能夠感知、想象、理解圖標(biāo)的意思。圖一右側(cè)被放大的圖標(biāo),在這幾種圖標(biāo)設(shè)計(jì)中,比較吸引用戶去使用。它的設(shè)計(jì)采用的就是隱喻的視覺表現(xiàn)手法,讓用戶理解繞口的含義,再加上有趣的形象設(shè)計(jì),讓用戶容易理解圖標(biāo)的含義,這樣的精致隱喻的圖標(biāo)容易在第一時(shí)間吸引用戶的眼球,受用戶的喜愛。 如圖二,這是星巴克的一款應(yīng)用程序圖標(biāo)設(shè)計(jì)。星巴克的標(biāo)志設(shè)計(jì)是非常好的,但是,星巴克的消費(fèi)卡的app圖標(biāo)設(shè)計(jì)中星巴克的標(biāo)志比較小, 在App Store上看這枚圖標(biāo)設(shè)計(jì),圈形的星巴克標(biāo)志是難以辨認(rèn)的。其實(shí)設(shè)計(jì)時(shí),應(yīng)該放大星巴克的商標(biāo),提高標(biāo)識(shí)的可識(shí)別。
因此,我們?cè)谑褂靡曈X隱喻的手法去表現(xiàn)圖標(biāo)的同時(shí),需要確保圖標(biāo)設(shè)計(jì)的識(shí)別性。 2.分析同類app圖標(biāo),整理設(shè)計(jì)思路注重圖標(biāo)創(chuàng)新 我們?cè)趇tunes里搜索效率軟件會(huì)發(fā)現(xiàn)很多相似的圖標(biāo)。如圖三所示,這里面哪些圖標(biāo)會(huì)吸引用戶的眼球呢?過目之后,我們會(huì)發(fā)現(xiàn),那些有層次設(shè)計(jì)感、和特定質(zhì)感的精致圖標(biāo)會(huì)吸引用戶關(guān)注。
設(shè)計(jì)app圖標(biāo)的另一種方法是增加圖標(biāo)的層次感設(shè)計(jì)和質(zhì)感表現(xiàn)。設(shè)計(jì)好圖標(biāo)后,放在同類別app圖標(biāo)中,去審視自己設(shè)計(jì)的圖標(biāo)是否能夠抓住用戶的眼球。
下面是圖三中的幾個(gè)能夠第一時(shí)間抓住用戶眼球的圖標(biāo):
2Do -這個(gè)圖標(biāo)就像一堆文件有序處理的感覺??p制的皮革質(zhì)地和潔凈便條形成質(zhì)感的對(duì)比,圖標(biāo)整體質(zhì)感表現(xiàn)細(xì)膩飽滿。 Put Things Off -是一個(gè)很好設(shè)計(jì)。設(shè)計(jì)者經(jīng)過仔細(xì)的思考,表現(xiàn)方式與眾不同,富有創(chuàng)造性和趣味性。圖標(biāo)采用文件箱子和“前進(jìn)”的箭頭的視覺元素表現(xiàn),表達(dá)事件處理的迅速效率的感覺;色彩上,運(yùn)用了純度很高的鮮亮的色彩去設(shè)計(jì),能夠抓住了用戶的眼球,讓用戶很快的理解了這款軟件的功能特性。 Taska -圖標(biāo)看起來像一堆辦公桌整齊地堆放在一個(gè)文件。 視覺表現(xiàn)上沒有給人留下很深刻的印象,但是這個(gè)圖標(biāo)畫的非常精致,紙張的堆積效果表現(xiàn)出了圖標(biāo)的層次感,背景木材紋理的效果表現(xiàn)提升了圖標(biāo)設(shè)計(jì)的質(zhì)感。
3. 運(yùn)用軟件界面中的圖形元素,體現(xiàn)圖標(biāo)設(shè)計(jì)的連續(xù)性 有一種設(shè)計(jì)方法,可以確保圖標(biāo)的表現(xiàn)和軟件具有連續(xù)性。方法是啟動(dòng)圖標(biāo)的設(shè)計(jì)運(yùn)用和應(yīng)用程序界面圖形相匹配的設(shè)計(jì)元素。 Expenditure是一個(gè)很好圖標(biāo)設(shè)計(jì)例子,非常準(zhǔn)確地描述了跟蹤功能的應(yīng)用程序。
4.采用用戶好奇的圖形元素設(shè)計(jì),抓住用戶的好奇心 用高雅的輪廓、優(yōu)美的線條去表現(xiàn)一款瑜伽應(yīng)用程序圖標(biāo)。喚起用戶的好奇心,吸引用戶使用。
5.突出品牌,抓住用戶眼球 如果你正在設(shè)計(jì)一個(gè)知名品牌的應(yīng)用程序,請(qǐng)恰當(dāng)使用它的品牌LOGO! 生活中,這些品牌標(biāo)志已經(jīng)留給用戶很深刻的印象,非常容易從眾多app的圖標(biāo)中勝出。因此,在設(shè)計(jì)知名品牌的app啟動(dòng)圖標(biāo)時(shí),應(yīng)該充分使用它的品牌LOGO。
不管你想設(shè)計(jì)成什么,不要浪費(fèi)了一個(gè)知名品牌的現(xiàn)有的元素!
例如,瀏覽幾個(gè)圖標(biāo),是很容易被辨認(rèn)的:
但是,圖標(biāo)的設(shè)計(jì)中,如果你沒有突出知名品牌的元素,會(huì)是什么樣子呢?如圖六的圖標(biāo)設(shè)計(jì),在圖七的眾多的app圖標(biāo)界面中,圖六的這些圖標(biāo)顯得很無力,無法與其他圖標(biāo)競(jìng)爭(zhēng)。
如果,調(diào)整圖標(biāo)設(shè)計(jì)的局部,改進(jìn)設(shè)計(jì):
我們把新的圖標(biāo)放在界面中,試看效果: 通過思考和實(shí)驗(yàn),調(diào)整設(shè)計(jì),讓品牌特性抓住用戶的眼球。
6. 設(shè)備測(cè)試預(yù)覽圖標(biāo)的效果,微調(diào)色彩或亮度達(dá)到最佳效果 采用在設(shè)備上測(cè)試你的圖標(biāo)設(shè)計(jì),是一個(gè)很好的方法。 Photoshop里查看或者iphone模擬器里查看效果是不夠的。圖標(biāo)在實(shí)際設(shè)備上的視覺效果和電腦上是不同的。 為什么呢? 有幾個(gè)原因:
電腦顯示器的色彩和亮度與觸摸屏移動(dòng)設(shè)備不同。
并非所有的觸摸屏顯示器是一樣的。 例如, iPhone屏幕質(zhì)量高于iPod觸摸屏的顯示質(zhì)量。 因此,設(shè)備測(cè)試是很有必要的。
7.多場(chǎng)景測(cè)試,保證圖標(biāo)設(shè)計(jì)的上線質(zhì)量。
App的商店有: itunes電腦商店;
iPhone 不同分辨率的商店;
itouch 不同分辨率的商店;
iPad平板電腦商店。 這意味著圖標(biāo)的應(yīng)用環(huán)境有多種,因此在圖標(biāo)上線前,設(shè)計(jì)師需要在多種圖標(biāo)的應(yīng)用場(chǎng)景中進(jìn)行設(shè)計(jì)測(cè)試。盡可能做到在多種商店場(chǎng)景下,在同類產(chǎn)品的用戶查看界面,都能吸引用戶的眼球。 以上幾點(diǎn)app軟件圖標(biāo)設(shè)計(jì)的方法你在設(shè)計(jì)時(shí)都用到了么?沒用過的方法可以嘗試使用。
這些共性的圖標(biāo)設(shè)計(jì)方法能夠幫助設(shè)計(jì)師控制圖標(biāo)設(shè)計(jì)的效果和市場(chǎng)中的用戶體驗(yàn),能真正的從用戶的角度去設(shè)計(jì)一枚圖標(biāo),能提升你的app軟件的用戶體驗(yàn),從視覺設(shè)計(jì)的角度去提升軟件圖標(biāo)的用戶點(diǎn)擊率。