請為App打點好“門臉”!

1 評論 8242 瀏覽 1 收藏 8 分鐘

每個App都有自己的門臉!

“門臉”,小哈認為這是對App手機桌面圖標一個簡單粗暴(十分貼切)的描述。

“門”,桌面圖標是訪問一款應用的必經之路。

“臉”,無論是在應用商城,還是已安裝到設備上,桌面圖標都將在一定程度上傳達該應用的功能,風格,水準…..

因此,可以想象其對于一款應用是多么的重要。如何才能設計出一款高,大,上的桌面圖標呢?這個問題讓我聯想到了設計學,美學,傳播學,品牌學,心理學……顯然,這些都不懂(小哈就是愛扯淡)。

簡單總結下現在的那些App桌面圖標都是怎樣的:

把Logo直接放上去。

這種情況一般發成在兩類App身上:

559443-8f1000f849c8c5e5

1,本身是PC端應用。它們在電腦端有一致應用的桌面圖標,在長期的改版下,基本上也變成了其產品Logo,在手機端,這個圖標自然而然就被延續下來了。如QQ、優酷等。

2,以移動互聯網為主要業務的公司。這些公司以一款或幾款App為公司的主要業務。因此,在公司商標注冊,Logo設計上會無意識與App桌面圖標綜合考慮。這種情況下產生的Logo和圖標基本就是一個了(也許是設計Logo時候其實是在做圖標,也許是拿桌面圖表直去申請了商標……)。如,餓了么,陌陌等

把Logo稍作修改。

559443-9130bc5041d6fe83

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

像對待Logo一樣的去設計一個。

559443-c92564dc9cf2b41c

當設計聽到客戶說:直接用Logo就行!估計會感動的哭出來;在Logo基礎上改動下!還好,應該的。重新搞一個!……聽了太多設計師對一個圖標設計的抱怨,不過有時候沒辦法。因為直接放Logo上真的不合適……

忘了是哪一天,一個朋友興奮的叫住我:“你看,天貓的圖標上加了金邊。”最開始是在ipad上,圖標出現了“雙11”等的角標,和剛開始看起來很不習慣的金邊??赡苁乾F在的手機屏幕逐漸變大,圖標也更能”放東西了”。他們,這是在圖標上插播廣告?。〔恍?,你看!

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

結合以上情況,我認為要從四個方面處理好一個桌面圖標:形式,樣式,色彩,風格。

形式上,符合平臺形式。

這是的形式,是指要滿足各大平臺的桌面圖標的設計規范。以Andriod與iOS為例。

Andriod 平臺雖然也有自己一套設計規范,但似乎大家都在各自盡情的發揮自己的設計天賦。所以現階段安卓端在形式規則上可以不用太介意。另外,國內很多手機廠商會根據高度定制自己的系統,如Flyme,MIUI等。它們會根據自己的ui特性為您的桌面圖標進行修改和定制,如果不是,請考慮定制后系統的圖標設計規范。

559443-605ffc5bd4acf186

?Andriod

Ios,相對安卓的隨意。蘋果對ui的嚴禁,在桌面圖標也有提現,App store上架的應用的桌面圖標不僅要嚴格遵循其規范,還要提交多個尺寸標準的文件。

559443-3a1dd0475322af46

iOS

點擊下載:ios8 全套圖標一鍵生成導出(PSD文件,教程在第一個圖層上)。

樣式上,注重識別。

這里的樣式就是點線面,字體等組成的圖形了。對品牌Logo進行修改,或者重新設計,一枚App的桌面圖標應該能傳遞產品的理念,具有很高的識別度,具有個性。當能很好的融合在手機桌面上,需要的時候又能一眼找到。此時我想就成功了。

559443-bdde7eb898da90fb

色彩上,統一色調。

色彩在品牌識別體系和產品ui上都是基本要素之一。App的桌面圖標的色彩要與App UI主色調一致。

風格上,連貫一致。

與色彩相似,一款App UI 在視覺上都有其獨特的風格。如iOS上盛行的扁平化風格與Andriod5.0開始的材料風格,它們都有其自己的視覺特征。作為App的桌面圖標,請與他們保持一致。

559443-078b67847df6e190

559443-61f31397db062754

最后

如果看到這里,你就會發現,小哈在本文要說是如何為自己的App設計桌面圖標(一個,一個App),而不是討論如何設計手機主題(一套,多個App)。這樣,就會有人說,一款手機主題就會滅掉手機所有桌面圖標!何必呢! 我只想說,做好自己的“門臉”,讓用戶換去吧!

點我!看看有這么多的圖標!

 

本文為作者@HelloApp 投稿發布,轉載請注明來源于人人都是產品經理并附帶本文鏈接

 

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 測試用例,不用回復

    來自河北 回復