請(qǐng)為App打點(diǎn)好“門(mén)臉”!

1 評(píng)論 8237 瀏覽 1 收藏 8 分鐘

每個(gè)App都有自己的門(mén)臉!

“門(mén)臉”,小哈認(rèn)為這是對(duì)App手機(jī)桌面圖標(biāo)一個(gè)簡(jiǎn)單粗暴(十分貼切)的描述。

“門(mén)”,桌面圖標(biāo)是訪(fǎng)問(wèn)一款應(yīng)用的必經(jīng)之路。

“臉”,無(wú)論是在應(yīng)用商城,還是已安裝到設(shè)備上,桌面圖標(biāo)都將在一定程度上傳達(dá)該應(yīng)用的功能,風(fēng)格,水準(zhǔn)…..

因此,可以想象其對(duì)于一款應(yīng)用是多么的重要。如何才能設(shè)計(jì)出一款高,大,上的桌面圖標(biāo)呢?這個(gè)問(wèn)題讓我聯(lián)想到了設(shè)計(jì)學(xué),美學(xué),傳播學(xué),品牌學(xué),心理學(xué)……顯然,這些都不懂(小哈就是愛(ài)扯淡)。

簡(jiǎn)單總結(jié)下現(xiàn)在的那些App桌面圖標(biāo)都是怎樣的:

把Logo直接放上去。

這種情況一般發(fā)成在兩類(lèi)App身上:

559443-8f1000f849c8c5e5

1,本身是PC端應(yīng)用。它們?cè)陔娔X端有一致應(yīng)用的桌面圖標(biāo),在長(zhǎng)期的改版下,基本上也變成了其產(chǎn)品Logo,在手機(jī)端,這個(gè)圖標(biāo)自然而然就被延續(xù)下來(lái)了。如QQ、優(yōu)酷等。

2,以移動(dòng)互聯(lián)網(wǎng)為主要業(yè)務(wù)的公司。這些公司以一款或幾款A(yù)pp為公司的主要業(yè)務(wù)。因此,在公司商標(biāo)注冊(cè),Logo設(shè)計(jì)上會(huì)無(wú)意識(shí)與App桌面圖標(biāo)綜合考慮。這種情況下產(chǎn)生的Logo和圖標(biāo)基本就是一個(gè)了(也許是設(shè)計(jì)Logo時(shí)候其實(shí)是在做圖標(biāo),也許是拿桌面圖表直去申請(qǐng)了商標(biāo)……)。如,餓了么,陌陌等

把Logo稍作修改。

559443-9130bc5041d6fe83

有很多企業(yè)本身具有不小的品牌影響力,在業(yè)務(wù)延伸到移動(dòng)端時(shí),用自身被大多數(shù)人所熟知的品牌Logo,顯然識(shí)別度更高,但由于桌面圖標(biāo)在手機(jī)屏幕上呈現(xiàn)時(shí),本身的的局限性,直接用于桌面圖標(biāo)是不合適的(或者不是最優(yōu)解的)。為了識(shí)別度和圖表化,往往采用Logo的局部或者最具品牌特征的一部分作為桌面圖標(biāo)。大多是一些網(wǎng)站的App話(huà),如:58,搜狐,淘寶等。

像對(duì)待Logo一樣的去設(shè)計(jì)一個(gè)。

559443-c92564dc9cf2b41c

當(dāng)設(shè)計(jì)聽(tīng)到客戶(hù)說(shuō):直接用Logo就行!估計(jì)會(huì)感動(dòng)的哭出來(lái);在Logo基礎(chǔ)上改動(dòng)下!還好,應(yīng)該的。重新搞一個(gè)!……聽(tīng)了太多設(shè)計(jì)師對(duì)一個(gè)圖標(biāo)設(shè)計(jì)的抱怨,不過(guò)有時(shí)候沒(méi)辦法。因?yàn)橹苯臃臠ogo上真的不合適……

忘了是哪一天,一個(gè)朋友興奮的叫住我:“你看,天貓的圖標(biāo)上加了金邊。”最開(kāi)始是在ipad上,圖標(biāo)出現(xiàn)了“雙11”等的角標(biāo),和剛開(kāi)始看起來(lái)很不習(xí)慣的金邊。可能是現(xiàn)在的手機(jī)屏幕逐漸變大,圖標(biāo)也更能”放東西了”。他們,這是在圖標(biāo)上插播廣告??!不信,你看!

如何打理好App的“臉面”?

結(jié)合以上情況,我認(rèn)為要從四個(gè)方面處理好一個(gè)桌面圖標(biāo):形式,樣式,色彩,風(fēng)格。

形式上,符合平臺(tái)形式。

這是的形式,是指要滿(mǎn)足各大平臺(tái)的桌面圖標(biāo)的設(shè)計(jì)規(guī)范。以Andriod與iOS為例。

Andriod 平臺(tái)雖然也有自己一套設(shè)計(jì)規(guī)范,但似乎大家都在各自盡情的發(fā)揮自己的設(shè)計(jì)天賦。所以現(xiàn)階段安卓端在形式規(guī)則上可以不用太介意。另外,國(guó)內(nèi)很多手機(jī)廠(chǎng)商會(huì)根據(jù)高度定制自己的系統(tǒng),如Flyme,MIUI等。它們會(huì)根據(jù)自己的ui特性為您的桌面圖標(biāo)進(jìn)行修改和定制,如果不是,請(qǐng)考慮定制后系統(tǒng)的圖標(biāo)設(shè)計(jì)規(guī)范。

559443-605ffc5bd4acf186

?Andriod

Ios,相對(duì)安卓的隨意。蘋(píng)果對(duì)ui的嚴(yán)禁,在桌面圖標(biāo)也有提現(xiàn),App store上架的應(yīng)用的桌面圖標(biāo)不僅要嚴(yán)格遵循其規(guī)范,還要提交多個(gè)尺寸標(biāo)準(zhǔn)的文件。

559443-3a1dd0475322af46

iOS

點(diǎn)擊下載:ios8 全套圖標(biāo)一鍵生成導(dǎo)出(PSD文件,教程在第一個(gè)圖層上)。

樣式上,注重識(shí)別。

這里的樣式就是點(diǎn)線(xiàn)面,字體等組成的圖形了。對(duì)品牌Logo進(jìn)行修改,或者重新設(shè)計(jì),一枚App的桌面圖標(biāo)應(yīng)該能傳遞產(chǎn)品的理念,具有很高的識(shí)別度,具有個(gè)性。當(dāng)能很好的融合在手機(jī)桌面上,需要的時(shí)候又能一眼找到。此時(shí)我想就成功了。

559443-bdde7eb898da90fb

色彩上,統(tǒng)一色調(diào)。

色彩在品牌識(shí)別體系和產(chǎn)品ui上都是基本要素之一。App的桌面圖標(biāo)的色彩要與App UI主色調(diào)一致。

風(fēng)格上,連貫一致。

與色彩相似,一款A(yù)pp UI 在視覺(jué)上都有其獨(dú)特的風(fēng)格。如iOS上盛行的扁平化風(fēng)格與Andriod5.0開(kāi)始的材料風(fēng)格,它們都有其自己的視覺(jué)特征。作為App的桌面圖標(biāo),請(qǐng)與他們保持一致。

559443-078b67847df6e190

559443-61f31397db062754

最后

如果看到這里,你就會(huì)發(fā)現(xiàn),小哈在本文要說(shuō)是如何為自己的App設(shè)計(jì)桌面圖標(biāo)(一個(gè),一個(gè)App),而不是討論如何設(shè)計(jì)手機(jī)主題(一套,多個(gè)App)。這樣,就會(huì)有人說(shuō),一款手機(jī)主題就會(huì)滅掉手機(jī)所有桌面圖標(biāo)!何必呢! 我只想說(shuō),做好自己的“門(mén)臉”,讓用戶(hù)換去吧!

點(diǎn)我!看看有這么多的圖標(biāo)

 

本文為作者@HelloApp 投稿發(fā)布,轉(zhuǎn)載請(qǐng)注明來(lái)源于人人都是產(chǎn)品經(jīng)理并附帶本文鏈接

 

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 測(cè)試用例,不用回復(fù)

    來(lái)自河北 回復(fù)