- 進階版零基礎學UI
- 田海
- 5134字
- 2020-03-23 14:41:30
02 重要的應用圖標
2.1 28種應用圖標設計模式
應用圖標不同于功能圖標,它和其他許許多多的應用圖標展示排列在手機主屏幕上,用戶通過點擊應用圖標進入應用界面。在各大應用市場中,數以千萬的應用圖標分門別類等候用戶下載,即使是同類型應用也數不勝數。由于應用市場不限制應用圖標的風格設計,導致應用圖標設計同質化非常嚴重,隨處可見設計相似的應用圖標。因此,如何設計個性鮮明、區別于其他同類應用、讓用戶一眼就能記住的應用圖標尤其重要。縱覽國內外應用市場中最主流的優秀應用,本篇歸納出28種最常見且最易設計的應用圖標設計模式。
單形
單形是指應用圖標只展示單個的剪影圖形。通常有兩種設計方式,在深色的背板上讓圖形反白,背板可以是單色也可以是漸變色;在淺色的背板上讓圖形填充顏色,圖形可以是單色也可以是漸變色,或是其他視覺效果。這種設計模式的優點是直觀醒目和簡潔大方,視覺沖擊力強,用戶易于在眾多的應用圖標陣列中快速找到目標。


WWDC

滴滴出行

Tinder
雙形
雙形的設計模式與單形相似,區別在于它由兩個剪影圖形組成,形成正負圖形的組合。組合后新的圖形被賦予了多一層的含義,通常是主圖形表意,副圖形描述特點。例如Messenger,對話氣泡告訴用戶這是即時通訊的應用,氣泡中的閃電則說明它具有快速、及時等特點;又例如陌陌,坐標告訴用戶這是基于地理位置的應用,坐標中的氣泡則表明它的社交屬性。

Messenger

陌陌

iMovie

Goodshop
萬能的圓形
圓形是最完美的形狀,它能讓視覺的重心更加聚焦,對于這一點蘋果的設計師毋庸置疑。在iOS 6中標志性的開關按鈕被設計成圓角矩形,而在iOS 7中開關按鈕被設計成圓形,這一調整也正是因為這個原因。在iOS應用設計中隨處可見圓形的設計,即使是普通的形狀只要和圓形進行組合,新的圖形都能提升整個應用圖標的設計感。通常圓形作為背景,可以是單色也可以是漸變色,或是其他視覺效果。

Lofter

音樂神搜

Paper

QQ音樂
復形
復形是重復簡單的剪影圖形進行有序的排列,可以相同大小地重復,也可以等比縮小地重復,還可以不透明度遞減地重復。復形的優點是一方面重復的圖形更加飽滿并能避開同類應用的相似設計,另一方面它能傳遞出應用的核心賣點。例如Todoist,重復的縱向對鉤圖形排列告訴我們這是一個記事本的應用,它比只有一個對鉤圖形的應用圖標更能傳遞正確的信息。又例如Slo Mo,三角形代表著播放,與音樂、圖片或視頻相關,重復的橫向排列則說明這是一個動態播放或處理的應用。

Todoist

文件夾

Slo Mo

OVLA
拼接
拼接是將兩個互不相干的圖形進行完美的拼接,組合成為新的圖形,它同時包含了這兩種圖形所傳遞的信息,這種設計模式在Logo設計中常常使用,它是一種創意的表現形式,能給用戶帶來深刻的記憶。例如網易云課堂,對話氣泡與書本拼接在一起,傳遞出在線課堂的屬性。又例如QQ瀏覽器,云與圓拼接在一起形成大寫字母Q,傳遞出云存儲和大數據的屬性。

HomeAdvisor

網易云課堂

朝夕

QQ瀏覽器
線形
線形的設計模式與單形相似,也分為兩種設計方式。在深色的背板上讓圖標反白,背板可以是單色也可以是漸變色;在淺色的背板上讓圖標填充顏色,圖標可以是單色也可以是漸變色,或是其他視覺效果。纖細的線框圖形傳遞出簡潔輕快的氣質,適合于文藝、清新的應用,在界面設計時保持這種干凈明快的風格,才能與應用圖標設計表里如一。

Airbnb

網易云音樂

Boomerang

次元相機
負形
負形的設計模式與雙形形似,都是正負圖形的組合,區別在于負形的圖形更加具有設計感,一切的設計元素都只服務于負形圖形,從這種角度上看,它又與雙形恰好相反——在這里,負形圖標傳遞產品信息。例如NPR One,圖標中的負形圖形是對話氣泡告訴我們這是一個媒體或社交的應用,而正形圖形強調產品氣質。又例如Gostar,圖標中的負形圖形是三角形告訴我們這是一個視頻相關的應用,而構成三角形的三個不同漸變色強調產品特征。

NPR One

行程助手

Gostar

Palm Reading
傾斜
大多數的應用圖標中的圖形都是水平展示,一些簡單的圖形經過旋轉后保持一定的傾斜角度,會更加跳脫,令人過目不忘。但不應為了傾斜而傾斜,需符合產品的屬性,當傾斜的圖形投射到人們大腦中產生聯想時,這種聯想是否與產品本身的特征相符合,符合則給產品加分,反之用戶則難以理解這樣設計的目的。例如Popcarte,現實生活中我們常常把信件隨意放在桌上,因此傾斜的信封是合理的。又例如Horizon,在攝影中常常擺出傾斜的拍攝角度,當用戶看到傾斜的構圖就會馬上產生聯想并對此認可。

ROBLOX

Popcarte

Horizon

Topbuzz
中文設計
中文是我們的母語,每一個漢字都令人記憶深刻,因此中文設計的應用圖標比圖形更加具有親和力和識別性。中文設計模式即字體設計,提取應用名稱中的一個或多個漢字,再將字體進行設計變形,變形后的字體圖形具有產品屬性的外貌特征。例如人人中彩票,“彩”字的右偏旁部首被設計成紙張的形象,我們能聯想到彩票和禮花。又例如學霸君,“霸”字的右下角使用的矩形和對鉤元素,我們能聯想到答題、考試和成績等。

網易郵箱大師

珍品網

人人中彩票

學霸君
填充字母
填充字母是指填補字母的缺口,使之成為面形圖形,同時又具備字母本身的識別性。對新的字母圖形進行填充背景色,可以是單色也可以是漸變色,或是其他的視覺效果。填充字母非常具有藝術感,通常是提取應用名稱的首寫或全部字母進行設計。例如Poto,它是一款拍攝與圖像處理應用,因此字母填充絢麗的漸變色能與產品屬性相契合。又例如Distiller,它是一款紅酒應用,紅色的酒滴巧妙地填補了字母D的缺口。

Pandora

Poto

Read4Kids

Distiller
英文設計
英文設計與中文設計的設計模式相似,通常是提取應用名稱的首寫字母融合產品的功能賣點或行業屬性進行創意加工,新的字母圖形依舊保持本身的識別性。例如Documents 5,它是一款PDF文檔應用,將字母D的左上角設計成卷頁的造型,因此這種視覺表現符合應用的產品屬性。又例如Musement,它是一款旅游應用,在應用圖標設計時,巧妙地將愛心圖形與字母M結合在一起,愛心圖形代表著心愿清單,因此在它的應用界面中隨處可見這顆愛心圖形的身影。

Farfetch

Documents 5

Musement

Zeek
絢麗背景
色彩比任何圖形都更能抓住用戶的注意力,同時色彩更加具有情緒,能傳遞出應用的產品氣質。將背板全部填充絢麗的色彩,即使是最簡單的圖形在其襯托下也能使設計感飆升。背景色的視覺效果千姿百態:可以是多角度的漸變色,例如Instagram;也可以是環狀向外擴張的線性漸變色,例如UP;可以是棱鏡式的色彩疊加,例如美妝相機;也可以是筆刷式的濃墨重彩,例如Vango Art。


UP

美妝相機

Vango Art
不居中
在iOS中,應用圖標由圖形和背板組成,大多數應用圖標的圖形都是與背板形成居中,而一些不居中圖形往往能傳遞出一種獨有的氣質,令人浮想聯翩,并能在眾多的圖標陣列中跳脫出來。例如Autosleep,圖標的畫面表現是一輪圓月懸掛在天空,傳遞出一種安詳靜謐的美感,如果圓形居中放置就難以讓人聯想到月夜。例如雨時,居左下放置垂直排列的襯線字體透出濃濃的中國傳統文化氣息,如果居中放置就會缺失其中的氣質。

Autosleep

雨時

Mend

健康
透明白色
透明白色是指在深色背板上的一組白色圖形,呈現不透明度遞減形成一種特殊的視覺效果,它比單純的剪影圖形更加通透和具有設計感。不透明度帶來的層次感可以構建出新的圖形,而無須過多的修飾。例如Paypal,透過上層半透明可以清晰可見下層的字母P。例如Fliboard,三個白色不透明度遞減的矩形構成了應用名稱的首寫字母F。

LINE DECO

Paypal

Fliboard

Musixmatch
白色漸變
白色漸變的設計模式與透明白色相似,都是通過白色不透明度來構建出圖形的立體空間感,它比單純的剪影圖形更加具有質感,這種質感帶給了我們視覺上的享受。例如印象筆記·圈點,它是一支白色的鵝毛形象,垂直的線性漸變使鵝毛富有了生命力一般,顯得更加輕柔。又例如美拍,原本普通的剪影圖形在關鍵性位置進行漸變處理后,設計感和質感都得到了大大提升。

印象筆記·圈點

美拍

為知筆記

迅雷
色彩疊加
色彩疊加是指在淺色的背板上將一組色塊進行疊加,重疊區域共同擁有的色彩令兩者之間的層級關系變得模糊不清,即使是最簡單的色彩經過疊加后都能發生神奇的視覺變化。像透明白色一樣,色彩疊加的設計模式令圖形更加清澈透亮。例如Momento GIFs,圖標雖然是兩座山脈的形象,但完全感受不到它們的厚重。又例如Zola Wedding,它是一款婚禮應用,清新的色塊經過疊加后能看到彼此連接的愛心,令人十分愉悅。

Momento GIFs

日日煮

Labelbox

Zola Wedding
笑臉
笑臉是一種表情符號,我們看到這種表情會產生愉快的心情。任何圖形一旦融入了笑臉符號就會變得親切、可愛,具有了生命力。例如良倉,小屋子有了笑臉就不再是冷冰冰的屋子,它可以體現產品的服務和品質,歡笑也帶給人們對美好生活的想象。又例如網易噠噠,倒置的笑臉讓圖形更加俏皮和歡樂,符合應用輸出趣味內容的產品定位。

良倉

Moovit

網易噠噠

To Me
極簡
極簡是永恒的設計模式,看似簡單的設計卻蘊含深刻的含義,這就是極簡設計的魔力。極簡不是簡陋,需要精心雕琢每一個細節,大面積的留白是為了更加突出內容,減少周圍環境的視覺噪音。采用極簡設計模式的應用需由外而內都始終保持風格統一。例如Solar,應用圖標與主界面高度一致,全屏漸變色,白色的圖文信息言簡意賅,沒有一絲繁冗,帶給用戶一致的使用體驗。

想去

Prisma

Solar

HotelTonight
晶格化
晶格化是指圖形像晶體一般具有棱角分明的塊狀,這是一種藝術的表現形式。晶格化的圖形由于不同飽和度的色塊拼接,可以營造一種立體空間感,適合于塑造本身就具有晶格化特征的物體。例如SellerLab,它的應用圖標是一枚鉆石,鉆石本身就具有棱鏡的外觀,晶格化的鉆石圖形既美觀又符合其本身的特征,同樣的例子還有松果生活。

Blur

SellerLab

松果生活

Youtube Gaming
擬人化
擬人化是利用應用的產品屬性與可愛的人物形象相結合,強調以賣萌的形象獲取用戶的好感,它比笑臉的設計模式在細節刻畫上更加豐富,視覺形象上也更加飽滿。例如Piku Piku,將相機鏡頭設計成眼睛,與開懷大笑的嘴構成一幅萌萌的畫面,既可以與同類應用形成差異化,又可以增加應用的記憶點。又例如Threes!,給方塊畫上眼睛和嘴,用戶在游戲過程中被這種歡樂的情緒所感染,拉近了用戶與產品之間的情感距離。

Piku Piku

iMark

360兒童衛士

Threes!
中國風
中國風的設計模式強調輸出中國傳統文化價值觀,在視覺表現上,淡雅的色調、素樸的筆墨;在元素運用上,筆墨紙硯、花鳥蟲魚、日月星云。例如每日故宮,祥云是古代帝王的象征,亦是中國傳統文化里最常見的元素。又例如一束,豎排的黑色宋體漢字,橫豎撇捺之間散發著濃濃的中國文化氣息。

詞

每日故宮

素記

一束
紅黃綠藍
紅黃綠藍是萬能的色彩搭配,紅黃藍是三原色,黃藍混合成綠色,這四種色彩搭配在一起既能讓視覺畫面豐富飽滿彼此之間又能和諧共處。紅黃綠藍的搭配順序更加和諧,因為這是色環上的色彩順序,例如Polaris Office和掌閱;如果打亂這個色彩搭配順序,則畫面活潑跳躍,例如Folioscope和58同城。

Folioscope

Polaris Office

58同城

掌閱
卡通形象
以卡通形象作為應用圖標也是最常見的設計模式之一,一個可愛的卡通形象有助于加深用戶對產品的印象。例如Bear,這是一款閱讀應用,它的卡通形象是一頭潔白的北極熊,簡潔的形象設計與產品的高效閱讀體驗一致。又例如印象筆記,這是一款多功能筆記應用,在美國有一個說法,“An elephant never forgets”(大象永遠不會忘記事情),因此使用大象形象作為應用圖標更加符合用戶的認知。

今天玩什么

Bear

印象筆記

多鄰國
折紙
折紙是通過規則的幾何形狀的明暗關系表現出來的一種視覺效果,它與晶格化的設計模式區別在于畫面更加簡潔,能構建出干凈明快的立體空間感,但這種空間感會產生一種錯覺,亦正亦反,反而令人著迷。例如Zoosk,愛心圖形被分成左右明暗兩半,我們很難分辨它究竟是凹陷還是凸起,但這又有什么關系呢?

Zoosk

V

Sprout Social

掃描寶
趣味
趣味是時下流行的文化現象,搞怪、逗趣、夸張、個性的形象能快速吸引用戶的注意力。趣味的設計模式適合定位于年輕用戶的應用,他們樂于嘗試新鮮事物,更加忠實。例如暴走漫畫,制造了許許多多的網絡語言和表情包,籠絡了一批又一批的年輕人群。又例如小咖秀,這是一款對嘴應用,夸張的形象將產品核心功能表現得淋漓盡致。

爆炸投

花椒直播

暴走漫畫

小咖秀
旋轉
簡單重復的圖形繞中心點旋轉,疊加后呈現的視覺效果宛若綻放的花朵,異常美麗。這種近乎完美且規則的幾何式構圖美學,常常給人留下非常深刻的印象。旋轉的角度必須是360的約數,即可以被360除以后是整數。疊加圖形可以是半透明的單色,例如開眼和Parrot Flower;也可以是漸變色,例如Photos。

開眼

Blur Chats

Photos

Parrot Flower
氣質
美好的事物總是能帶給人們愉悅的視覺享受,一個漂亮的應用圖標設計同樣能獲得用戶的好感,從第一印象開始就建立起對產品的認同感。例如UC頭條,這是一款提供優質內容的閱讀應用,其應用圖標無論從圖形、色彩或設計手法都傳遞出無可比擬的氣質。令人驚嘆的創意表現也是打造產品氣質的關鍵。又例如網易美學,兩顆桃心一左一右構成艷麗動人的紅唇,深刻而又有內涵。

UC頭條

每日故宮

網易美學

Pillow
無
無,即沒有設計,除了背板什么也沒有。雖然這樣的設計模式容易引起話題,但我們并不鼓勵,因為用戶很難從一個顏色上得到有用的信息。YO可能是第一個僅使用顏色作為應用圖標的先驅者,它的功能極簡到只能收發“YO”,因此它的應用圖標設計也不無道理。

YO

Yellow

Nox

黃油相機
- 做好PPT就靠這幾招:圖解力+吸引力+說服力
- WordPress 2.7 Cookbook
- Photoshop CC實戰從入門到精通
- AutoCAD 2020中文版從入門到精通(標準版)
- Photoshop圖形圖像設計案例教程(高等院校計算機任務驅動教改教材)
- Adobe Photoshop 網頁設計與制作標準實訓教程(CS5修訂版)
- 中文版 Photoshop CC 從入門到精通
- JBoss RichFaces 3.3
- UG NX 12.0中文版從入門到精通
- Pluggable Authentication Modules: The Definitive Guide to PAM for Linux SysAdmins and C Developers
- Mastercam軟件應用技術基礎(X2版)
- phpBB: A User Guide
- Building Websites with ExpressionEngine 2
- Photoshop+Illustrator+After Effects UI動效設計3合1
- GraphPad Prism學術圖表(全彩)