圖標(biāo)設(shè)計是UI設(shè)計中非常重要的環(huán)節(jié)，也是考驗設(shè)計師基本功的重要標(biāo)準(zhǔn)驰唬。全文分為上中下三篇份汗，這是上篇（1-3）

?

圖標(biāo)是UI設(shè)計中除了文字之外最不可或缺的視覺元素，在設(shè)計中看似只占一個很小的區(qū)域精拟，但是它卻是考驗設(shè)計師基本功的重要標(biāo)準(zhǔn)燎斩，了解圖標(biāo)相關(guān)的概念，以及正確繪制的方法蜂绎，是入門 UI設(shè)計的必備條件栅表。

本文將對圖標(biāo)進行系統(tǒng)的介紹，篇幅所限师枣，本文只針對圖標(biāo)設(shè)計中最重要的設(shè)計概念 和 設(shè)計思路 為主怪瓶。大家如果對圖標(biāo)的其他方面感興趣，歡迎給留言践美，后續(xù)出相關(guān)系列內(nèi)容洗贰。過程中也有針對幾種典型的圖標(biāo)進行實操代練。想要把圖標(biāo)設(shè)計的更好陨倡，這就需要我們在平時勤加練習(xí)外敛滋，還要進行深度的思考，希望我的這篇梳理可以給大家?guī)韼椭?/p>

?

圖標(biāo)概述及發(fā)展歷程

1.1 圖標(biāo)的定義

圖標(biāo)兴革，也稱為icon或Picoto吭净，是計算機世界對現(xiàn)實世界的隱喻和概括根穷，代表軟件產(chǎn)品中的功能及操作惭婿。

?

圖標(biāo)做為國際通用性語言彬呻，生活中隨處可見，例如商場導(dǎo)視中收銀臺圖標(biāo)解阅、出口圖標(biāo)落竹、衛(wèi)生間圖標(biāo)等，又或者是日常手機里使用的那些App圖標(biāo)货抄，如微信述召、電話、短信等蟹地。的確积暖，圖標(biāo)的形式有很多種，它可以應(yīng)用在很多場景中怪与，并且表現(xiàn)方式非常豐富夺刑，有線的、有面的、還有擬物的等遍愿。

?

粗淺劃分的話存淫，UI設(shè)計中常見的圖標(biāo)大致分為兩大類，第一類我們稱之為「標(biāo)志性圖標(biāo)」沼填，比如手機中應(yīng)用啟動圖標(biāo)桅咆；第二類我們稱之為「功能性圖標(biāo)」，這類圖標(biāo)經(jīng)常出現(xiàn)于 App 或網(wǎng)站中坞笙，用于功能性指示引導(dǎo)或操作岩饼。

1.2 圖標(biāo)的重要性

對于UI設(shè)計而言，圖標(biāo)可以說是整個產(chǎn)品的點睛之筆薛夜，它甚至可以直接影響著一款產(chǎn)品的形象和氣質(zhì)籍茧。在不少 UI 界面中，圖標(biāo)幾乎是這個頁面的核心支撐體梯澜，它直接影響著產(chǎn)品的視覺體驗和產(chǎn)品調(diào)性硕糊。它有以下幾點好處：

全球通用：Windows,iOS, etc., 中文版和英文版甚至各種語言版本，在不打開菜單之前腊徙，基本上都長一樣；

節(jié)約空間：如果能用一個圖標(biāo)清楚表達含義的時候檬某，就不需要用文字撬腾，比如用一個“叉”代表「關(guān)閉」；

快速定位：圖標(biāo)可以用它獨特的形狀或者顏色讓人快速定位到一個功能恢恼；

上下文的定位：比如小飛機的圖標(biāo)單獨放出來不確定是什么民傻，但是在和收件箱在一起它就可以認(rèn)為是發(fā)件箱了。

?

1.3 起源

圖標(biāo)的發(fā)展歷程其實有些類似中文场斑、英文等語言的發(fā)展漓踢，大體也分為兩個階段：

實物 → 符號；符號 → 新符號

來看一個小例子：

?

左邊這個東西叫軟盤漏隐，可能很多小伙伴沒見過（事實上我也沒有）喧半，「保存」圖標(biāo)就是將「軟盤」符號化之后形成的圖形，「軟盤」是「保存」圖標(biāo)的實體青责。但隨著時間的推移挺据，人們逐漸將長期接觸的符號本身作為一種新的實體，在大家的眼里脖隶，它不再是一個具象事物的抽象符號扁耐，而是直接當(dāng)成一個實體來使用，甚至這個符號的實體已經(jīng)淡出歷史产阱，但人們還在習(xí)慣性使用這個符號婉称。

如你所知，圖標(biāo)、標(biāo)識都不是界面設(shè)計師所創(chuàng)造的概念王暗，它的存在可以追溯到人類文明誕生之初悔据，在漫長的歷史長河當(dāng)中，早期用來傳達信息的圖標(biāo)演變?yōu)橄到y(tǒng)的文字瘫筐，而在地圖蜜暑、圖書、壁畫和建筑等各種各樣的地方策肝，還存在著用來代表和傳達特定概念的圖標(biāo)和標(biāo)識肛捍。

?

隨著技術(shù)的發(fā)展，計算機誕生了之众，而顯示器的出現(xiàn)拙毫，也為圖形化界面的誕生，鋪平了道路棺禾。20世紀(jì)70年代缀蹄，施樂在位于帕羅奧托的研究所當(dāng)中，誕生了最早的擁有圖形化界面的電腦膘婶，著名的「 Xerox Alto」缺前。這款昂貴的概念機最終并沒有走進大眾的視野，但是它的后續(xù)機型施樂之星在1981年問世悬襟，并且成為了計算機史上的重要里程碑衅码，而Xerox Alto 對于喬布斯和比爾蓋茨的啟發(fā)，更是引發(fā)了計算機歷史上最著名的一場戰(zhàn)爭：蘋果VS微軟脊岳，Windows 對抗 Macintosh逝段。當(dāng)然這都是后話。

1.4 擬物圖標(biāo)

80年代割捅，想做的具象（擬物）奶躯，卻因為像素和機能的限制無法實現(xiàn)，所以對好的標(biāo)準(zhǔn)是越具象越好 亿驾。到了1995年計算機顯卡的顯示能力得到革命性的改變嘹黔，Photoshop 5.0的發(fā)布，恰好讓憋屈了這么多年的圖形和UI設(shè)計師們巴不得立馬上天（終于可以施展拳腳了）颊乘。從win95開始参淹，到osx/win7的這十來年正是UI擬物化發(fā)展壯大并大行其道的階段。同時也是顯示技術(shù)飛速發(fā)展的十年乏悄，從640x480浙值，到800x600，到1024x768檩小，到1920x1080 / 1920x1200开呐，再到4k，再到retina屏，平面顯示技術(shù)能達到的水準(zhǔn)基本已經(jīng)是人眼能感受到的極致筐付。

?

當(dāng)人們對計算機尚不熟悉的時候卵惦，用戶的需求是“弄懂這玩意到底是干嘛的”，是用戶體驗的核心瓦戚。擬物化的圖標(biāo)和界面會給予用戶具象化的引導(dǎo)沮尿，比如回收站，音樂较解，電腦畜疾，文件夾的圖標(biāo)，用戶可以直接聯(lián)想到現(xiàn)實中的物品并更快的理解這些程序或者文件的作用印衔。包括立體的按鈕引導(dǎo)用戶點擊啡捶，用戶都可以通過聯(lián)想，更快的理解操作/互動的方式奸焙。這樣可以降低用戶的學(xué)習(xí)成本瞎暑，縮短學(xué)習(xí)周期，讓用戶更快的適應(yīng)計算機的使用与帆，弄懂這玩意到底是干嘛的了赌。

來自蘋果的Macintosh系統(tǒng)在圖形化界面發(fā)展史上是無法繞過的里程碑。1991年玄糟，蘋果借由Macintosh揍拆，首次發(fā)布了彩色的圖標(biāo)設(shè)計。圖標(biāo)所能容納的信息量比起上一個黑白界面的時代更大茶凳，全新的樣式使得它在信息傳達的功能性上有了明顯的提升。

?

但是隨著 ICON 的發(fā)展播揪，擬物圖標(biāo)也帶來了一些問題贮喧，華麗的視覺元素或許在用戶使用的初期，起到賞心悅目的裝飾猪狈，但久而久之箱沦，這都將成為對用戶獲取信息的一種干擾。如今人們對各種常規(guī)交互模式人們也早已了然于胸雇庙，用戶的需求也從“弄懂這玩意這么用”變成了“高效快捷更舒心的使用”谓形。用戶用的方便變成了用戶體驗的重心。

再者疆前，大家都熟悉的事物其實非常有限寒跳，而 APP 的創(chuàng)新卻在不斷進行，很多創(chuàng)新的產(chǎn)品本身在現(xiàn)實世界就沒有參照物竹椒，所以也決定了擬物圖標(biāo)必然會被扁平化取代童太。

1.5 扁平化

從iMac到iPhone引領(lǐng)的擬物圖標(biāo)更是開啟了一個絢麗的圖標(biāo)設(shè)計時代。擬物時代盛行也帶來了一些麻煩——擬物圖標(biāo)的質(zhì)感、光影會分散用戶的注意力书释，形成「視覺噪聲」翘贮。于是UI設(shè)計師開始探索更新的表現(xiàn)形式來設(shè)計界面中的圖標(biāo)。如微軟引領(lǐng)的Metro風(fēng)格圖標(biāo)設(shè)計和Google引領(lǐng)的長投影風(fēng)格的圖標(biāo)設(shè)計爆惧。 不管你喜歡與否狸页，當(dāng)年的微軟讓 Metro 和扁平化賺足了眼球，甚至讓人一看到扁平化就想到Metro扯再。

?

區(qū)別于擬物化更加接近于真實的實物芍耘，扁平化則是簡化真實的物體，轉(zhuǎn)而通過抽象叔收、簡化齿穗、符號化的設(shè)計元素來表現(xiàn)。

2013年饺律，蘋果推出了iOS7 開啟了擬物向扁平轉(zhuǎn)變的風(fēng)潮窃页。在iOS7中對整個界面的圖標(biāo)、按鈕复濒、字體脖卖、信息層級等各方面都進行扁平化設(shè)計。蘋果的這一系列動作打破了人們對扁平化風(fēng)格的芥蒂巧颈，并最終推動了整個移動端扁平化設(shè)計的進程畦木。

?

那么，蘋果公司在堅持了多年的擬物化設(shè)計風(fēng)格之后砸泛，曾經(jīng)作為該風(fēng)格的引領(lǐng)者和受益者十籍，為何會突然轉(zhuǎn)向，熱情地?fù)肀鸨馄交O(shè)計來了呢唇礁？難道是因為我們視覺疲勞了嗎勾栗？答案很簡單，1盏筐、因為使用了Retina屏围俘，屏幕清晰度支持扁平化更多的細(xì)節(jié)；2琢融、當(dāng)具象化慢慢達到了極致界牡，當(dāng)大師們發(fā)現(xiàn)具象化已經(jīng)不再有挑戰(zhàn)時，于是開始嘗試從別的角度表達漾抬；3宿亡、高度的擬物在一定程度上減輕了學(xué)習(xí)成本，但是提高了辨識成本纳令。

總之她混，扁平化這種二維設(shè)計已經(jīng)成為一種更加流行的設(shè)計風(fēng)格烈钞。所有元素的邊界都很干凈利落，較多使用色塊和符號化的圖形以及無襯線修飾的字體坤按，界面更加整齊簡潔毯欣。使用這種設(shè)計風(fēng)格的優(yōu)點是可以更加簡單直接的將信息和事物的工作方式展示出來，將一切干擾信息弱化臭脓，減少認(rèn)知障礙的產(chǎn)生酗钞。

?

雖然扁平化的優(yōu)點有很多，也適合當(dāng)下技術(shù)發(fā)展需要的来累，但是缺點也是顯而易見的砚作。譬如表現(xiàn)形式太過于抽象、缺乏情感的傳遞嘹锁，而事實上發(fā)展到今天的扁平化設(shè)計確實也在不斷的優(yōu)化自己~使得自己更加的適應(yīng)時代的發(fā)展葫录。另外還有一個點就是所謂的 “審美疲勞”。當(dāng)你一直看著簡單的東西领猾，久而久之就會越來越煩米同，你就會越來越想要看那些豐富多彩的東西。反之亦然摔竿。這也表明 UI 新的趨勢再一部向“突出內(nèi)容”的本質(zhì)靠攏面粮，即“認(rèn)知簡約”。也許當(dāng)滿世界都是扁平化后继低，擬物化的設(shè)計卻又變得更顯眼了呢熬苍？最近流行的“新擬物”風(fēng)格就是最好的證明。

1.6 微扁平袁翁、輕擬物

由于扁平風(fēng)格表現(xiàn)形式單一柴底，同質(zhì)化嚴(yán)重，缺乏個性粱胜，圖標(biāo)慢慢開始發(fā)展到微扁平輕擬物的方向似枕。相較于擬物風(fēng)格不會有太多復(fù)雜的視覺元素，與扁平風(fēng)格又有了更豐富的情感內(nèi)容年柠，所以現(xiàn)在界面中，在面積比較小的區(qū)域我們使用扁平圖標(biāo)或線形圖標(biāo)褪迟；在面積比較大的區(qū)域我們會使用加入漸變甚至輕質(zhì)感的圖標(biāo)冗恨。

?

1.7 " 新擬物 "風(fēng)格圖標(biāo)

蘋果在 WWDC2020 搞了個大新聞：macOS 將與 iOS 統(tǒng)一步調(diào)，從X86 平臺遷移至ARM 平臺味赃，并從macOS 10迭代為macOS 11掀抹。這 20 年一遇的 Mac 大版本更新被稱為Big Sur。

macOS Big Sur是第一個將 " 新擬物 " 設(shè)計投入大規(guī)模商用的操作系統(tǒng)心俗，這可視為 " 新擬物 "在實用化道路上的首次勝利傲武。值得一提的是蓉驹，在 Big Sur 的 " 外觀 " 設(shè)置里，多了一項名為" 自適應(yīng)強調(diào)色 "的選項揪利。蘋果將主題色的指定權(quán)留給開發(fā)者态兴，這是否暗示新一代 App 在光影上會有更豐富的效果？

?

" 新擬物 " 設(shè)計的精髓在于對光線的絕妙運用疟位。它把光效拿捏在 " 扁平 " 與 " 擬物 " 之間瞻润，進而打造一種全新的視覺體驗。

不同于傳統(tǒng)的擬物甜刻，" 新擬物 "雖然將符合物理規(guī)律的光影效果引入界面绍撞，但它所模擬的材質(zhì)是自然界不存在的。換句話說得院，" 新擬物 " 是將真實光線用于虛擬對象傻铣，而 " 擬物 " 是還原實際物品在特定光照下的效果；

?

由于整個設(shè)計界將不得不考慮新擬物風(fēng)格祥绞，圍繞該風(fēng)格的可能性將會有爆炸性的發(fā)展非洲，并且這種新的數(shù)字空間設(shè)計理念如何能夠合理地適用于用戶界面設(shè)計和功能性將取得更大的突破。與以往一樣就谜，第三方應(yīng)用將比蘋果更大膽怪蔑、更快速地推動這一風(fēng)格——這也是我們將會真正開始解鎖新擬物優(yōu)勢的時候。

?

應(yīng)用圖標(biāo)的類型及作用

產(chǎn)品應(yīng)用圖標(biāo)（也叫啟動圖標(biāo)）丧荐，是指產(chǎn)品「品牌標(biāo)識」中獨立的圖形缆瓣，也是產(chǎn)品品牌的核心組成元素。作為產(chǎn)品所有視覺通信中必不可少的元素虹统，其使用率非常高弓坞，所以該獨立圖形在設(shè)計中應(yīng)做到最簡化。?

一個小問題：為什么iOS系統(tǒng)中圖標(biāo)形狀是統(tǒng)一的圓角矩形车荔？

蘋果官方給出的解釋是在空間有限的的區(qū)域渡冻，太多形狀顯得雜亂，如果形狀不規(guī)則忧便，就無法控制統(tǒng)一間距族吻，設(shè)計師水平也不一樣，這樣統(tǒng)一規(guī)范能保證最低標(biāo)準(zhǔn)珠增。推薦一個iOS啟動圖標(biāo)資源網(wǎng)站超歌，設(shè)計時可以找找靈感。

?

△iOSIcon gallery

而安卓應(yīng)用圖標(biāo)就沒那么規(guī)范蒂教，處于百花齊放的狀態(tài)巍举，各家廠商都在設(shè)計獨屬于自己的視覺語言。大家都不一樣凝垛，也就導(dǎo)致沒有個性之美懊悯。

?

安卓應(yīng)用圖標(biāo)設(shè)計規(guī)范網(wǎng)站

?

應(yīng)用圖標(biāo)的類型

應(yīng)用圖標(biāo)有不同的風(fēng)格蜓谋，這些風(fēng)格有可能偏擬物，也有可能很扁平炭分，有可能很抽象桃焕，也可能很具象。通過不同的設(shè)計風(fēng)格可以更加標(biāo)新立異欠窒，從而被用戶記住覆旭。因此能在第一時間贏得用戶的好感和記憶非常重要，將產(chǎn)品圖標(biāo)設(shè)計的好看且容易被人記住就成了非常重要的任務(wù)岖妄。應(yīng)用圖標(biāo)的風(fēng)格主要有以下幾種型将。

2.1 中文文字圖標(biāo)

中文是我們的母語，每一個漢字都令人記憶深刻荐虐，文字也是最直白的信息七兜，而且不容易被曲解，所以很多國內(nèi)的產(chǎn)品都會使用文字作為自己的產(chǎn)品圖標(biāo)福扬。中文設(shè)計模式即字體設(shè)計腕铸，提取應(yīng)用名稱中的一個或多個漢字，進行設(shè)計變形铛碑，變形后的字體圖形具有產(chǎn)品屬性的外貌特征狠裹。常見中文圖標(biāo)又分為單字、多字和字加圖形的幾種類型汽烦。

2.1.1 單字 ?

提取產(chǎn)品名稱中最具代表性的文字涛菠，通過對筆畫及整體骨架進行字體設(shè)計，以達到符合產(chǎn)品特性和視覺差異化的目的撇吞。其優(yōu)點是可以直截了當(dāng)?shù)膫鬟f產(chǎn)品信息俗冻，識別性強。

?

2.1.2 多字 ?

多字圖標(biāo)設(shè)計要注意的是整體的協(xié)調(diào)性和可讀性牍颈，一般為2-3個字迄薄，最多兩行（四個字）排列。

其優(yōu)點是更加直接的告訴用戶產(chǎn)品名稱煮岁，達到品牌推廣的目的讥蔽，減輕用戶記憶成本。其缺點是如果圖標(biāo)上的文字和下面的輔助文字完全一樣画机，會顯得重復(fù)啰嗦冶伞，像介紹了兩遍自己一樣。

?

2.1.3 字加圖形組合

文字加輔助圖形的組合色罚，也是常見的產(chǎn)品圖標(biāo)設(shè)計方法，相比純文字圖標(biāo)账劲，顯得更加豐富有獨特的產(chǎn)品的氣質(zhì)和屬性戳护。需要注意的是做好文字和輔助圖形間的平衡金抡。

?

2.2 英文字母圖標(biāo)

英文設(shè)計與中文設(shè)計的設(shè)計模式相似，通常是提取應(yīng)用名稱的首字母融合產(chǎn)品的功能賣點或行業(yè)屬性進行創(chuàng)意加工腌且，新的字母圖形依舊保持本身的識別性梗肝。

2.2.1 單字母?

通常提取英文首字母進行設(shè)計，由于英文字母本身結(jié)構(gòu)簡潔铺董，稍加改動就很容易達到設(shè)計感于識別性兼?zhèn)涞漠a(chǎn)品圖標(biāo)巫击。需要注意的是英文字母本來就少，都用字母很容易創(chuàng)意雷同精续，難以形成差異化坝锰。

?

2.2.2 多字母 ?

提取產(chǎn)品全稱或幾個單詞的首字母組合而成，形成獨有的產(chǎn)品簡稱重付，方便用戶記憶顷级。

?

2.2.3 字母加圖形組合 ?

字母加圖形組合的設(shè)計形式比較廣泛，圖形分為幾何圖形和通過提煉的圖形确垫。通過字母與圖形進行創(chuàng)意加工弓颈，可以使應(yīng)用圖標(biāo)視覺表現(xiàn)更加飽滿。

?

2.3 數(shù)字圖標(biāo)

直接用數(shù)字做應(yīng)用圖標(biāo)的相對較少删掀，但是數(shù)字識別性強翔冀，易于傳播的特點。利用數(shù)字進行設(shè)計能給人親和力披泪。難點是怎樣與品牌形成強關(guān)聯(lián)性纤子。

?

2.4 特殊符號圖標(biāo)

由于符號本身的含義會對產(chǎn)品屬性有一定限制，所以特殊符號在應(yīng)用圖標(biāo)的設(shè)計案例中相對較少付呕。如“$”符號可代表與金錢有關(guān)聯(lián)性的產(chǎn)品计福，無法運用在與此屬性無關(guān)的產(chǎn)品上。不過也正是由于自身屬性強的特點徽职，可以很好的詮釋關(guān)聯(lián)的產(chǎn)品屬性象颖。

?

除了中英文圖標(biāo)，還有圖形類圖標(biāo)比較常見姆钉。這種類型的設(shè)計模式的優(yōu)點就是直觀醒目和簡潔大方说订，視覺沖擊力強。常見的有以下幾種：

2.5 幾何圖形

幾何圖形的設(shè)計模式給人簡約潮瓶、現(xiàn)代陶冷、個性等視覺感受，從單個具象圖形到復(fù)雜的空間感營造毯辅，幾何圖形的表現(xiàn)形式非常豐富埂伦。不同的形狀給人的情感表達不同，如三角形給人傳達個性思恐、穩(wěn)定沾谜、現(xiàn)代膊毁、時尚等，添加圓角后又會更加親民基跑、可愛婚温。我們可以結(jié)合產(chǎn)品特征，合理的選擇適合的形狀圖形進行創(chuàng)意媳否。此類型較考驗設(shè)計師的圖形創(chuàng)意能力栅螟。

?

2.6 單雙形/剪影

單雙形是指應(yīng)用圖標(biāo)只展示單個或兩個的剪影圖形。通常有兩種設(shè)計方式篱竭，在深色背板上使圖形反白力图，背景可以是單色也可以是漸變色；在淺色的背板上讓圖形填充顏色室抽，圖形可以是單色也可以是漸變色搪哪。這種設(shè)計模式的優(yōu)點是簡潔明確，易于用戶在眾多的應(yīng)用圖標(biāo)陣列中快速找到目標(biāo)坪圾。

?

2.7 線形

線形的設(shè)計模式分為兩種設(shè)計方式晓折，在深色的背板上讓圖標(biāo)反白，背景可以是單色也可以是漸變色兽泄；在淺色的背板上讓圖標(biāo)填充顏色漓概，圖標(biāo)可以是單色也可以是漸變色，或是其他視覺效果病梢。纖細(xì)的線框圖形傳遞出簡潔輕快的氣質(zhì)胃珍，適合于文藝、清新的應(yīng)用蜓陌，在界面設(shè)計時保持這種干凈明快的風(fēng)格觅彰，才能與應(yīng)用圖標(biāo)設(shè)計表里如一。線性風(fēng)格一定注意不可太細(xì)钮热，如果做得太細(xì)填抬，在手機上看會非常尖銳，顯得不易點擊隧期。例如airbnb飒责，它的背景是一個微漸變，線性風(fēng)格曲線組成“A”仆潮，同時是一個小蜜蜂宏蛉。

?

2.8 動物圖形/剪影

動物作為圖標(biāo)設(shè)計元素是比較常見的方式之一，通過提取動物整體形象或者局部特征部位作為設(shè)計元素性置，背景填充單色或漸變色拾并，簡潔明了。動物給人的印象比較可愛，有助于加深用戶對產(chǎn)品的印象嗅义。常見的表現(xiàn)形式有剪影个榕、線性描邊風(fēng)格、面性風(fēng)格等芥喇。

?

2.9 卡通形象

卡通風(fēng)格的產(chǎn)品圖標(biāo)會讓用戶更有好感，一個可愛的卡通形象有助于加深用戶對產(chǎn)品的印象凰萨。很多決策者會認(rèn)為卡通是一種低齡的審美继控，這種想法其實是錯誤的∨志欤卡通可以說是一種各年齡層都能接受的風(fēng)格武通，例如Bear，它的卡通形象是一頭潔白的北極熊珊搀，簡潔的形象設(shè)計與產(chǎn)品的高效閱讀體驗一致冶忱。

?

2.10 正負(fù)形

以正形為底突出負(fù)形特征，以負(fù)形表達產(chǎn)品屬性境析，傳遞產(chǎn)品信息囚枪。例如NPR One桌吃，圖標(biāo)中的負(fù)形圖形是對話氣泡俐银，告訴我們這是一個媒體或社交的應(yīng)用，而正形圖形強調(diào)產(chǎn)品氣質(zhì)麦射。

?

2.11 白色漸變

白色漸變的設(shè)計模式與透明白色相似沛鸵，都是通過白色不透明度來構(gòu)建出圖形的立體控件感括勺，它比單純的剪影圖形更加具有質(zhì)感，這種質(zhì)感帶給了我們視覺上的享受曲掰。例如印象筆記·圈點疾捍，它是一只白色的鵝毛形象，垂直的線型漸變使鵝毛富有了生命力一般栏妖，顯得更加輕柔乱豆。

?

2.12 彩色漸變

色彩比任何圖形都更能抓住用戶的注意力，同時色彩更加具有情緒底哥，能傳遞出應(yīng)用的產(chǎn)品氣質(zhì)咙鞍。比起白色漸變圖形，彩色漸變圖形的色彩表現(xiàn)更加豐富趾徽。多種顏色進行漸變銜接的時候要注意色相的對比续滋，營造空間感。應(yīng)用圖標(biāo)的背景和圖形的色彩要拉開對比孵奶，一般為白色或淺色背景疲酌。

?

2.13 無

無，即沒有設(shè)計。除了背板什么也沒有朗恳。雖然這類設(shè)計模式比較獨特湿颅，但我們并不鼓勵，因為用戶很難從一個顏色上得到有用的信息粥诫。例如“黃油相機”的圖標(biāo)設(shè)計成一塊黃油的樣子已深入人心了油航。

?

2.14 應(yīng)用圖標(biāo)的作用

打開率是一款移動應(yīng)用的重要數(shù)據(jù)，應(yīng)用只有被打開才有它的運營價值怀浆。在我們手機里安裝了許許多多的應(yīng)用谊囚，除了一些我們每天必須使用的應(yīng)用如微信，其他大多數(shù)的應(yīng)用在沒有使用場景時很難想到去打開他們执赡。因此镰踏，這些應(yīng)用如何在手機屏幕上吸引用戶的注意，鼓勵用戶打開顯得非常重要沙合。于是在應(yīng)用圖標(biāo)上做文章就顯得很有必要奠伪，常見的設(shè)計手法有：

品牌傳播：在游戲領(lǐng)域比較常見，在應(yīng)用圖標(biāo)上搭上品牌的旗號就能或者用戶的注意首懈；

營銷事件：將營銷事件（例如雙11）展示在應(yīng)用圖標(biāo)上绊率，折扣、促銷等都能吸引眼球究履；

核心賣點：將核心賣點出現(xiàn)在應(yīng)用圖標(biāo)上即舌，引起用戶注意，從而提高應(yīng)用被打開的頻率挎袜；

節(jié)日氛圍：節(jié)日通常伴隨著消費顽聂，因此電商類應(yīng)用最注重節(jié)日氛圍的主題設(shè)計，每年春節(jié)期間桌面圖標(biāo)幾乎一片紅盯仪，非常有節(jié)日氣氛紊搪；

?

?

應(yīng)用圖標(biāo)繪制方法及流程

3.1 iOS應(yīng)用圖標(biāo)

在設(shè)計模板還沒有如今這么發(fā)達時，設(shè)計師需要設(shè)計啟動圖標(biāo)（1024x1024px）之后按照程序員的要求切出幾十個不同尺寸的圖標(biāo)全景。比如耀石，在手機中@3x情況下桌面圖標(biāo)尺寸為180x180px，在@2x情況下為120x120px爸黄；在應(yīng)用商店圖標(biāo)需要使用的尺寸是1024x1024px滞伟；這個工作太煩人了，好在現(xiàn)在我們只需要專注在啟動圖標(biāo)設(shè)計本身上了炕贵。在蘋果給我們的這套資源中梆奈，有 Template-AppIcons-iOS 這個文件。打開這個文件称开，用我們自己設(shè)計的啟動圖標(biāo)替換掉智能對象里的內(nèi)容亩钟，你會發(fā)現(xiàn)所有尺寸的圖標(biāo)都變成了我們的圖標(biāo)乓梨。iOS的圓角圖標(biāo)并不是標(biāo)準(zhǔn)的圓角矩形，而是某種連續(xù)曲線清酥。

?

我們把兩個圓角曲線放大重疊后進行對比扶镀，其中灰色線框為標(biāo)準(zhǔn)圓角矩形繪制的圓角，紅色為iOS平滑圓角焰轻，它與圓角矩形擁有相同的對角線錨點臭觉，區(qū)別在于其曲線稍微向中心收緊。

?

事實上辱志，我們很難在Retina屏幕上區(qū)分這么細(xì)微的差別胧谈，因此設(shè)計師在繪制iOS應(yīng)用圖標(biāo)時不必過分糾結(jié)它的圓角，直接繪制成直角矩形交給開發(fā)同學(xué)即可荸频，如果應(yīng)用圖標(biāo)需用于展示，可以繪制120*120px圓角矩形客冈、27px圓角半徑代替旭从。

3.2 安卓應(yīng)用圖標(biāo)

安卓應(yīng)用圖標(biāo)同樣需要很多尺寸，主流需求是1024px场仲、512px和悦、144px、96px渠缕、72px鸽素、48px六種。設(shè)計師提供給程序員的同樣是直角矩形亦鳞，然后程序員通過代碼進行切割使其變成圓角圖標(biāo)馍忽。

3.3 iOS應(yīng)用圖標(biāo)設(shè)計流程

在我之前的設(shè)計作品中，有個“影記”的攝影社區(qū)APP燕差，本篇我們就以此為產(chǎn)品案例拋磚引玉來學(xué)習(xí)一個iOS應(yīng)用圖標(biāo)的繪制過程遭笋。

3.3.1 尋找隱喻

隱喻是在彼類事物的暗示之下感知、體驗徒探、想象瓦呼、理解、談?wù)摯祟愂挛锏男睦硇袨椴獍怠⒄Z言行為和文化行為央串，即人們看到某樣?xùn)|西或聽到某件事情能夠馬上在大腦中形成聯(lián)想。例如說到攝影碗啄，馬上就能想到相機质和、快門、閃光燈稚字、暗房等侦另。然后通過這些聯(lián)想詞，去找一些氣質(zhì)相符的圖片制作情緒版，通過情緒版可以感受到產(chǎn)品的調(diào)性褒傅，然后從中提取一些形狀和色彩作為產(chǎn)品圖標(biāo)的主要造型弃锐。

?

3.3.2 競品分析

應(yīng)用市場各類產(chǎn)品不勝其數(shù)，在同類應(yīng)用中存在大量相似的應(yīng)用圖標(biāo)設(shè)計殿托，如何保持應(yīng)用圖標(biāo)的唯一識別性非常重要霹菊。唯一識別性不單單指圖形與其他應(yīng)用有所差異，避免創(chuàng)意撞車支竹，讓用戶在腦中形成思維模式旋廷，它還指圖形表意是否清晰，是否符合用戶的心里預(yù)期礼搁。

?

3.3.3 提取關(guān)鍵詞

根據(jù)收集的圖片饶碘，創(chuàng)建情緒版，結(jié)合自己的產(chǎn)品提取關(guān)鍵詞馒吴，然后就知道在接下來的設(shè)計中應(yīng)該突出什么扎运。我們從“影記”中可提取首字母“Y”，相機中的“快門”“信號燈”“開關(guān)機”饮戳，并依次將關(guān)鍵詞描繪成下列圖形豪治。

?

3.3.4 抽象圖形

確立了首字母“Y”、“快門/開關(guān)機”和“信號燈”作為應(yīng)用圖標(biāo)的主圖形扯罐，接下來將繪制好的3個圖形相結(jié)合负拟，即完成初步設(shè)想。

?

3.3.5 圖標(biāo)柵格線

使用iOS應(yīng)用圖標(biāo)柵格線作為設(shè)計依據(jù)有助于建立和諧的圖標(biāo)繪制比例歹河，并與iOS系統(tǒng)保持統(tǒng)一掩浙，下圖為iOS系統(tǒng)天氣應(yīng)用使用了圖標(biāo)柵格線。將圖形放置在圖標(biāo)柵格上調(diào)整大小并注意圖形與其比例協(xié)調(diào)秸歧。

?

3.3.6 豐富細(xì)節(jié)

通過上面圖形組合已基本完成應(yīng)用圖標(biāo)的設(shè)計涣脚，接下來我們還應(yīng)從顏色、質(zhì)感寥茫、背板等著手豐富圖形的細(xì)節(jié)遣蚀，建立起應(yīng)用的產(chǎn)品氣質(zhì)∩闯埽“影記”作為攝影師分享佳作平臺芭梯，攝影師們用的器材顏色大多以黑色為主，因此酷酷的黑色更適合作為應(yīng)用的主色弄喘。然后玖喘，白色的信號燈過于普通，使用相機本身發(fā)出的橘紅色燈光作為信號燈的顏色蘑志，使其更加具有動感和活力累奈。整體像「消息氣泡」的造型暗示可以在這里進行攝影交流贬派。

?

3.3.7 多場景測試

將應(yīng)用圖標(biāo)設(shè)計稿交付開發(fā)提交至App Store上架，正確的圖標(biāo)設(shè)計稿應(yīng)是直角矩形澎媒，iOS會自動應(yīng)用一個圓角遮罩將圖標(biāo)的4個角遮住搞乏，假如圖標(biāo)設(shè)計稿自帶圓角，就有可能露出圖標(biāo)透明區(qū)域戒努。

?

△ 注：上圖非實際大小请敦，僅表明不同分辨率下的比例關(guān)系

此外，應(yīng)用圖標(biāo)還會以不同的分辨率出現(xiàn)在不同場景中储玫，例如在iPhone 8plus上需@3x的圖侍筛，即將120px的圖標(biāo)放大至1.5倍；而在iPhone7的設(shè)置頁需要58px的圖撒穷，就需要將120px的圖縮小匣椰。將大圖縮小成小圖時，一些細(xì)節(jié)就會丟失端礼，使畫面變得模糊禽笑，因此設(shè)計師應(yīng)對小尺寸圖標(biāo)進行席位調(diào)整，去除不必要的裝飾元素齐媒，以確保應(yīng)用圖標(biāo)在小分辨率應(yīng)用場景下也能保持清晰的識別度。

?

上篇就到這里纷跛，關(guān)注持續(xù)更新喻括。