應用圖標的設計表現形式很多,本文總結了36種圖表設計形式與你分享,希望能夠對你有所啟發(fā)。
當我們決定要去App Store、Google Play這樣的應用市場(chǎng)下載某個(gè)App應用時(shí),首先映入眼簾的便是Icon,即應用圖標。
一個(gè)App應用圖標設計的美感與吸引力,決定了用戶(hù)對產(chǎn)品的第一印象。一個(gè)有吸引力的APP應用圖標,可以讓用戶(hù)愿意去了解你,下載你的App。
通過(guò)分析大量的應用圖標,結合自己的專(zhuān)業(yè)認知,總結了以下設計方法。
方法論描述僅代表個(gè)人認知經(jīng)驗,設計的方法有很多種,以下僅為拋磚迎玉,希望大家能找到適合自己的方法。
一. 中文字體
1. 單個(gè)字體設計
提取產(chǎn)品名稱(chēng)中最具代表性的獨立文字,進(jìn)行字體設計。通過(guò)對筆畫(huà)及整體骨架進(jìn)行設計調整,以達到符合產(chǎn)品特性和視覺(jué)差異化的目的。作為國人對漢字的敏感度,這樣的設計形式大大降低了用戶(hù)對品牌的認知成本。
優(yōu)點(diǎn):擁有特征性的字體設計可以一目了然的傳遞產(chǎn)品信息,讓用戶(hù)在自己的手機桌面上快速找到應用所在。如支付寶、網(wǎng)易郵箱大師、知乎等應用圖標,識別性很強。
獨立文字的提取難度較大,只能應用于產(chǎn)品名稱(chēng)中有特征性含義的產(chǎn)品,如果提取不當很容易達不到市場(chǎng)差異化,與很多相同字體混淆在一起,干擾用戶(hù)對產(chǎn)品的記憶。
2. 多個(gè)字體設計
多個(gè)字體設計通常為產(chǎn)品名稱(chēng)直接運用在設計中,如有道、閑魚(yú)、當當、小紅書(shū)等。多個(gè)字體設計需要注意的是整體的協(xié)調與可讀性,一排出現兩個(gè)漢字屬于比較理想的可讀范圍,極限值為3個(gè)漢字并排,最多兩行為宜。
由此推算,適合運用字體作為應用圖標的產(chǎn)品名稱(chēng)最多6個(gè)字為宜,超出這個(gè)數量,將會(huì )大大降低用戶(hù)對產(chǎn)品的識別能力。
優(yōu)點(diǎn):可以更加直接的告知用戶(hù)產(chǎn)品名稱(chēng),便于品牌推廣,減少用戶(hù)的記憶成本。
對產(chǎn)品名稱(chēng)有一定限制因素,以1~4個(gè)漢字為最佳,超過(guò)6個(gè)漢字組合將會(huì )影響用戶(hù)的識別能力。
3. 字體加輔助圖形組合設計
為了突出產(chǎn)品特有的氣質(zhì)和屬性,通過(guò)字體與輔助圖形組合來(lái)烘托這樣的氛圍也是設計方式之一。如頭條字體和文章剪影圖形組合形成內容豐富的氛圍,利用紙張折痕的效果突出文藝氣質(zhì),購物袋的圖形運用烘托購物的氛圍等等。
優(yōu)點(diǎn):相比單純的文字設計,適當輔助一些帶有產(chǎn)品特性的圖形,可以更加靈活的突出產(chǎn)品氣質(zhì)和屬性。
圖形運用不當容易對字體信息的傳達造成干擾,需要在字體設計比重和圖形難易度之間做好權衡。
4. 字體加幾何圖形組合設計
幾何圖形的運用可以增加圖標的形式感,如矩形與字體設計組合可以強調局部信息;圓潤的形狀可以使圖標風(fēng)格更加活潑有趣;三角形的運用有一定的引導性。
優(yōu)點(diǎn):幾何圖形的運用可以增加應用圖標的形式感和趣味性。
常用的幾何圖形形式單一,難以形成獨有的視覺(jué)差異。
英文、數字、特殊符號
5. 單個(gè)英文字母設計
英文字母設計通常是提取產(chǎn)品名稱(chēng)首字母進(jìn)行設計,由于英文字母本身造型簡(jiǎn)潔,結合產(chǎn)品特點(diǎn)進(jìn)行創(chuàng )意加工,很容易達到美感和識別性兼備。
優(yōu)點(diǎn):利于設計師發(fā)揮,很容易做出具備美感的應用圖標。
很容易創(chuàng )意雷同,視覺(jué)差異化很難保障。
6. 多個(gè)英文字母設計
多個(gè)英文字母通常是產(chǎn)品名稱(chēng)全稱(chēng)或幾個(gè)單詞首字母組合而成,在國內也會(huì )提取漢語(yǔ)拼音和拼音首字母等方式進(jìn)行組合。在進(jìn)行字母組合設計的時(shí)候,需要考慮組合字母的識別性,單排字母為1~3個(gè)為宜,字母越多,識別性越低。
優(yōu)點(diǎn):組合字母很容易形成獨有的產(chǎn)品簡(jiǎn)稱(chēng),方便用戶(hù)記憶,如OFO,YY等。
熱門(mén)的組合字母容易雷同,對產(chǎn)品差異化形成挑戰。
7. 字母加背景圖案組合設計
通過(guò)添加背景圖案,結合字母設計組合呈現,既可以增加應用圖標的視覺(jué)層次感,也能豐富視覺(jué)表現力。這里需要注意背景圖案的色相和繁簡(jiǎn)度的處理,需要和字母設計形成強對比,使信息傳達不受影響。
優(yōu)點(diǎn):可以豐富應用圖標的視覺(jué)層次感和視覺(jué)表現力。
字母數量過(guò)多時(shí),背景圖案的設計繁簡(jiǎn)度會(huì )影響信息的傳達。
8. 字母加圖形組合設計
字母加圖形組合設計應用比較廣泛,圖形分為幾何圖形和生活映象提煉的圖形。如酷狗音樂(lè )就是結合圓形組合而成,QQ瀏覽器則是與生活中云朵的提煉圖形結合而成。通過(guò)字母與圖形進(jìn)行創(chuàng )意加工,可以使應用圖標視覺(jué)表現更加飽滿(mǎn)。
優(yōu)點(diǎn):圖標視覺(jué)表現飽滿(mǎn),對字母的設計要求相對較低。
如果選取的圖形為常用圖形,不易形成特征性元素。
9. 數字設計
數字對于我們來(lái)說(shuō)是非常敏感的,利用數字進(jìn)行設計能給人親和力。由于數字的識別性很強,易于品牌傳播與用戶(hù)記憶。
優(yōu)點(diǎn):自帶親和力,識別性強,易于傳播和記憶。
針對性較強,數字與品牌關(guān)聯(lián)性密合度控制較難。
10. 特殊符號設計
特殊符號在應用圖標的設計案例中相對較少,由于符號本身的含義會(huì )對產(chǎn)品屬性有一定限制,所以針對性比較強。如「¥」符號可代表與錢(qián)財有關(guān)聯(lián)性的產(chǎn)品,無(wú)法運用在與此屬性無(wú)關(guān)的產(chǎn)品上面。
優(yōu)點(diǎn):圖形特征明顯,自身有很強的屬性,可以很好的詮釋關(guān)聯(lián)的產(chǎn)品屬性。
圖形屬性針對性較強,獨立圖形無(wú)法在同類(lèi)產(chǎn)品中形成差異化,需要結合產(chǎn)品特征進(jìn)行組合設計。
三. 圖形
11. 幾何圖形設計
幾何圖形的運用設計給人簡(jiǎn)約、現代、個(gè)性、富有空間感等視覺(jué)感覺(jué),從單個(gè)具象圖形到復雜的空間感營(yíng)造,幾何圖形的表現形式非常豐富。
不同的形狀給人的情感表達不同,如三角形給人傳達個(gè)性、穩定、現代、時(shí)尚等,添加圓角后又會(huì )更加親民、可愛(ài)。我們可以結合產(chǎn)品特征,合理的選擇適合的形狀圖形進(jìn)行創(chuàng )意。
優(yōu)點(diǎn):構圖簡(jiǎn)潔,設計形式豐富多樣,不同的形狀和細節處理可以營(yíng)造不同的氛圍。
過(guò)于簡(jiǎn)約的形狀容易創(chuàng )意雷同,無(wú)法形成差異化,考驗設計師的圖形創(chuàng )意能力。
12. 抽象圖形設計
通過(guò)提取品牌信息、產(chǎn)品服務(wù)、功能模塊等關(guān)鍵詞進(jìn)行圖形創(chuàng )意,形成的圖形不屬于生活中大家常見(jiàn)的基本圖形,是對品牌進(jìn)行高度提煉形成的抽象圖形。通過(guò)暗喻的形式傳達品牌文化和產(chǎn)品特點(diǎn),品牌獨特性較強。
優(yōu)點(diǎn):抽象圖形品牌獨特性較強,容易形成視覺(jué)差異化。
用戶(hù)認知記憶成本較高,品牌推廣難度較大。
13. 動(dòng)物剪影設計
動(dòng)物剪影通常是提取動(dòng)物外部輪廓進(jìn)行單色填充,可以提取動(dòng)物整體形象或者局部特征部位作為設計元素。這類(lèi)應用圖標背景為單色或者漸變色,少量的會(huì )輔助一些圖形作為背景元素,動(dòng)物采用單色填充,以白色填充居多。
優(yōu)點(diǎn):?jiǎn)紊畛涞膭?dòng)物形象與背景對比強烈,整體視覺(jué)效果直觀(guān)醒目、簡(jiǎn)潔大方。
常見(jiàn)的動(dòng)物形象容易雷同,生僻的動(dòng)物造型對用戶(hù)的認知能力有一定的挑戰。
14. 其它剪影設計
除了動(dòng)物剪影以外,生活中可以作為剪影設計的元素很多。如食物、工具、生活用品、學(xué)習用品、娛樂(lè )道具等等??梢元毩⑿纬杉粲皥D形,也可以根據產(chǎn)品特點(diǎn)進(jìn)行創(chuàng )意加工,最終形成應用圖標獨有的造型圖案。
15. 相同圖形重復設計
將相同的圖形進(jìn)行有序的排列,排列形式有梯度漸變、等大均排、規律性重復、配色差異、大小錯落等。這樣的設計方式可以給單調的圖形增加層次感和構圖飽滿(mǎn),有一定梯度漸變和規律性重復的圖形組合可以傳遞一定的韻律感和動(dòng)感。
優(yōu)點(diǎn):給單調的圖形增加層次感,也能增強整體的構圖飽滿(mǎn)度。
對于沒(méi)有特征性的圖形容易形成單調乏味。
16. 正負形設計
正負形的設計在logo圖形設計中是比較常見(jiàn)的表現手法,運用在圖標設計中,以正形為底突出負形特征,以負形表達產(chǎn)品屬性。利用正負形進(jìn)行設計,圖形設計感較強,正形與負形可以更加充分的表達產(chǎn)品特征與服務(wù)。
優(yōu)點(diǎn):圖形設計感較強,可以更加充分的表達出產(chǎn)品特征與服務(wù)。
對圖形設計能力要求較強,正形與負形銜接必須順暢,不然無(wú)法清晰的傳達產(chǎn)品特征。
17. 線(xiàn)形設計
線(xiàn)性設計風(fēng)格的圖標給人簡(jiǎn)潔輕快的感覺(jué),線(xiàn)性設計的方式分閉合式和開(kāi)放式,可以是一條連續的線(xiàn)條或者幾條線(xiàn)段組成。在有色背景上面線(xiàn)條通常反白處理,背景設計可以是單色、漸變色、其他輔助圖形設計等。
優(yōu)點(diǎn):傳遞簡(jiǎn)潔輕快的產(chǎn)品屬性,適合文藝、小清新、簡(jiǎn)約風(fēng)格的應用。
僅用于表現簡(jiǎn)約的圖形,對于造型復雜的圖形將會(huì )影響識別度。
18. 白色漸變圖形設計
白色漸變是利用白色漸變填充,不透明度100%到X%「X透明度在100%到0%之間」之間設置完成。白色漸變圖形具有空間感、質(zhì)感,視覺(jué)效果較好,被廣泛運用在應用圖標設計中。
優(yōu)點(diǎn):比單純的剪影圖形更具空間感和質(zhì)感,傳遞更多的細節表現。
圖形本身僅為白色填充,必須在深色背景才能清晰的呈現,不適合淺色背景。
19. 彩色漸變圖形設計
彩色漸變是利用多種顏色進(jìn)行漸變,比起白色漸變圖形,彩色漸變圖形的色彩表現更加豐富。多種顏色進(jìn)行漸變銜接的時(shí)候要注意色相的對比,營(yíng)造空間感。應用圖標的背景需要和圖形的色彩形成對比,最佳的背景為白色或者淺色。
優(yōu)點(diǎn):圖形色彩表現更加豐富細膩,圖標表現出更多的細節。
多種顏色的搭配色彩絢麗,色彩組合處理不當容易使圖標整體過(guò)于花俏,很難形成獨有的品牌色認知。
20. 動(dòng)物形象設計
動(dòng)物作為圖標設計元素是比較常見(jiàn)的方式之一,動(dòng)物給人的印象比較可愛(ài),有助于加深用戶(hù)對產(chǎn)品的印象。動(dòng)物的表現形式有剪影、線(xiàn)性描邊風(fēng)格、面性風(fēng)格等。
優(yōu)點(diǎn):動(dòng)物形象給人可愛(ài)的印象,有助于加深用戶(hù)對產(chǎn)品的印象。
常見(jiàn)的動(dòng)物形象容易雷同,罕見(jiàn)的動(dòng)物對用戶(hù)的推廣成本較高。
21. 動(dòng)物局部設計
利用動(dòng)物局部進(jìn)行圖形設計,可以讓元素特征更加明顯。比起展示整個(gè)動(dòng)物形象,局部特征展示視覺(jué)表現力更強。
優(yōu)點(diǎn):圖形特征元素更加明顯,視覺(jué)表現力更強。
動(dòng)物局部的選擇需要擁有更加明顯的特征,否則無(wú)法正確識別動(dòng)物形象。
22. 人體局部設計
利用人體局部作為圖形設計元素,比較常用的有眼睛、嘴巴、手掌、頭部等。利用人體的元素進(jìn)行設計,用戶(hù)對圖形的敏感度更強,易于傳播和記憶。
優(yōu)點(diǎn):用戶(hù)對于人體局部元素創(chuàng )意的圖形敏感度高,容易形成記憶。
常用的局部特征容易雷同,必須從表現手法上面加以區分,挑戰設計師的設計能力。
23. 卡通形象設計
卡通形象與動(dòng)物形象容易混淆,因為很多卡通形象都是基于動(dòng)物設計演變而來(lái)。這里單獨提取出來(lái)是為了歸類(lèi)一些單純以動(dòng)物外形為設計元素的表現手法??ㄍㄐ蜗笤O計在應用圖標的設計中是非常常見(jiàn)的,很容易對用戶(hù)形成記憶。
優(yōu)點(diǎn):形象可愛(ài)、親民,易于用戶(hù)記憶與傳播。
卡通形象的設計難度較大,對設計師的要求較高。
24. 卡通形象臉部設計
卡通形象臉部設計是通過(guò)只展示臉部信息來(lái)進(jìn)行設計,以圖標整體輪廓作為臉部外形,突出卡通形象的表情特征。
優(yōu)點(diǎn):卡通形象表情特征明顯,視覺(jué)沖擊力和圖標的識別性較強。
表情特征處理要求較高,處理不到位容易使整個(gè)形象呆板無(wú)趣。
25. 擬人化圖形設計
通過(guò)對接近圓形或者構圖飽滿(mǎn)的圖形添加眼睛等元素,可以使整個(gè)圖形擬人化。給原本冰冷的圖形賦予其生命,擁有一定的情感表達,讓產(chǎn)品更加親民,更容易被用戶(hù)所接受和記憶。
優(yōu)點(diǎn):使圖形更加情感化,更容易打動(dòng)用戶(hù),拉進(jìn)與用戶(hù)的距離。
對圖形本身的造型要求極高,并非通用于大部分圖形。
26. 從功能服務(wù)提煉圖形
為了更加清晰的傳遞產(chǎn)品的某項功能與服務(wù),根據產(chǎn)品的功能服務(wù)提取元素進(jìn)行圖形設計也是比較常用的表現手法,如計算器、日歷、導航等直接提取相關(guān)聯(lián)的圖形元素進(jìn)行設計,一目了然的傳遞出產(chǎn)品信息。也可以從產(chǎn)品服務(wù)內容入手進(jìn)行提煉,如教育類(lèi)產(chǎn)品,提取學(xué)士帽為元素進(jìn)行設計。
優(yōu)點(diǎn):能夠清晰直接的傳遞產(chǎn)品信息,減少用戶(hù)的認知成本。
相同功能的產(chǎn)品之間無(wú)法形成差異化,如日歷,很難讓用戶(hù)對某個(gè)品牌推出的日歷產(chǎn)生記憶。
27. 擬物圖標設計
隨著(zhù)扁平風(fēng)格的盛行,擬物圖標的表現手法出現在少數產(chǎn)品和游戲類(lèi)的產(chǎn)品中,如錘子推出的系列應用,依然保留著(zhù)這樣的風(fēng)格。在超質(zhì)感擬物風(fēng)格和抽象的扁平風(fēng)格之間進(jìn)行取舍,便出現了微質(zhì)感的設計表現形式,也得到很多設計師的青睞。
優(yōu)點(diǎn):光影與質(zhì)感的處理使得圖標設計展現出更多的細節,還原真實(shí)場(chǎng)景。
對很多剛入行的設計師來(lái)說(shuō)設計成本較大,在如今快節奏的生活中使得整個(gè)產(chǎn)品不夠輕快。
四. 色彩
28. 色環(huán)運用設計
圖形設計以環(huán)形構圖為主,配色為多種顏色形成如同色環(huán)一般,這樣的圖標設計構圖飽滿(mǎn)、色彩豐富,給用戶(hù)傳遞輕松、愉快、可愛(ài)、親和、熱情的產(chǎn)品形象。
優(yōu)點(diǎn):構圖飽滿(mǎn),色彩豐富,給用戶(hù)傳遞更加輕松愉快的體驗。
界面風(fēng)格必須和圖標多彩的風(fēng)格保持一致,界面配色的設計難度較大。
29. 單色背景
單色背景的應用圖標非常常見(jiàn),其顏色的選擇通常是品牌色為主,烘托出圖形的視覺(jué)表現。圖形的處理方式以反白、白色漸變、輔助色點(diǎn)綴等較為常見(jiàn)。
優(yōu)點(diǎn):突出品牌色,便于圖形的視覺(jué)表現。
配色單調,圖形的視覺(jué)表現形式較少,圖形配色需要結合背景色做出對比。
30. 漸變色背景
漸變色背景的運用越來(lái)越受到設計師青睞,相對于單色的背景視覺(jué)表現力更加豐富,整體色彩給人通透的感覺(jué)。漸變色可以是雙色漸變,也可以是多色漸變,根據產(chǎn)品的氣質(zhì)靈活的運用。
優(yōu)點(diǎn):色彩的視覺(jué)表現力更加豐富,整體色彩給人通透的感覺(jué)。
漸變色的運用過(guò)多會(huì )使圖標整體花俏,對于配色「度」的把控需要注意。
31. 文藝風(fēng)格設計
文藝風(fēng)格圖標設計配色清新、復古、簡(jiǎn)約,適合帶有文藝風(fēng)格類(lèi)的產(chǎn)品。設計方向為簡(jiǎn)約的圖形組合或者文藝風(fēng)格的字體設計為主,圖標整體留白較多,配色簡(jiǎn)約,白色背景居多。如果是深色背景則采用黑色、復古色為主。
優(yōu)點(diǎn):圖形造型簡(jiǎn)約,配色清新,文藝風(fēng)格特征明顯。
這種風(fēng)格僅適合特定的用戶(hù)群體和產(chǎn)品。
32. 活動(dòng)氛圍設計
在一些購物類(lèi)產(chǎn)品中,經(jīng)常會(huì )對應用圖標進(jìn)行特定的活動(dòng)氛圍包裝。會(huì )保留原本的圖形面貌,進(jìn)行整體的氛圍營(yíng)造,以突出購物火爆的場(chǎng)景感。如即將到來(lái)的雙十一活動(dòng),很多平臺都進(jìn)行相應的氛圍營(yíng)造。
優(yōu)點(diǎn):突出活動(dòng)氛圍,營(yíng)造購物火爆的場(chǎng)景感。
時(shí)效性較短,活動(dòng)結束便恢復原貌。
五. 板式
33. 對稱(chēng)設計
受到傳統文化的影響,國人比較喜歡對稱(chēng)設計,如古代建筑、生活器具、裝飾圖案等,對稱(chēng)圖形帶給人的感覺(jué)是穩重、安靜、平和、莊嚴、正式等。在應用圖標的設計中,對稱(chēng)的運用是非常常見(jiàn)的設計手法,有左右對稱(chēng)、上下對稱(chēng)、斜角對稱(chēng)等表現形式。
優(yōu)點(diǎn):對稱(chēng)形式歷史悠久,被廣大用戶(hù)所喜歡,構圖也比較飽滿(mǎn)穩重。
對稱(chēng)兩邊的圖形設計保持一致,可以充分利用對稱(chēng)形成的負空間,讓圖形寓意更加豐富。
34. 打破常規
設計初期我們需要學(xué)會(huì )對齊,設計排版整齊規整,隨著(zhù)設計師設計功底的成熟穩定,打破對齊也將體現出一位老司機的功底。在進(jìn)行應用圖標的設計布局時(shí),設計師為了突出產(chǎn)品的獨特性,會(huì )選擇打破常規,也許會(huì )得到不一樣的視覺(jué)效果。
優(yōu)點(diǎn):打破常規,擁有獨特的視覺(jué)特征,傳遞給用戶(hù)不一樣的視覺(jué)體驗。
需要設計師更強的設計把控力,把握好圖標整體的形式感。
35. 圓形的運用
圓形的運用在應用圖標的設計中非常常見(jiàn),有圓形外圈的運用、整體構圖呈現圓形、圖形創(chuàng )意結合圓形進(jìn)行創(chuàng )意加工、以圓形作為背景突出特征圖形等表現形式。圓形的設計構圖飽滿(mǎn),表現形式更具親和力,被廣大用戶(hù)所喜愛(ài)。
優(yōu)點(diǎn):可以將瑣碎的圖形規整,整體構圖更加飽滿(mǎn),表現形式更具親和力。
圓形營(yíng)造的構圖穩重、平和,需要通過(guò)夸張的圖形來(lái)增強視覺(jué)沖擊力。
六. 游戲
36. 游戲角色運用設計
游戲類(lèi)應用圖標設計需要設計師具備較強的寫(xiě)實(shí)圖標設計功底,設計方向主要有:游戲角色、純文字、道具或標識、明星頭像、輔助圖形或元素等。設計表現力需要顏色鮮艷、角色表情和動(dòng)作夸張、設計精美有質(zhì)感等。
一個(gè)好的游戲應用圖標需要設計風(fēng)格和游戲內畫(huà)風(fēng)一致,視覺(jué)表現對玩家的吸引力直接影響到游戲是否吸量。
優(yōu)點(diǎn):設計精美有質(zhì)感,視覺(jué)沖擊力大,吸引用戶(hù)眼球。
缺點(diǎn):設計功底要求較強,整體圖標的視覺(jué)表現力需要結合游戲整體風(fēng)格,考驗設計師的綜合設計能力。
總結
應用圖標的設計表現形式很多,以上總結僅為個(gè)人所見(jiàn)部分,希望大家能發(fā)現更多的表現手法并加以總結歸納。設計的方法與技巧需要不斷的總結與分享,才能發(fā)現不足與進(jìn)步的方向,希望能與同樣熱愛(ài)設計的朋友一起進(jìn)步,做出美感與可用性兼備的設計作品。