|
圖標(biāo)是UI設(shè)計(jì)中除了文字之外最不可或缺的視覺元素,，在設(shè)計(jì)中看似只占一個很小的區(qū)域，但是它卻是考驗(yàn)設(shè)計(jì)師基本功的重要標(biāo)準(zhǔn),，了解圖標(biāo)相關(guān)的概念,，以及正確繪制的方法，是入門 UI設(shè)計(jì)的必備條件,。
本文將對圖標(biāo)進(jìn)行系統(tǒng)的介紹，篇幅所限,，本文只針對圖標(biāo)設(shè)計(jì)中最重要的設(shè)計(jì)概念和設(shè)計(jì)思路為主,。大家如果對圖標(biāo)的其他方面感興趣，歡迎給留言,，后續(xù)出相關(guān)系列內(nèi)容,。過程中也有針對幾種典型的圖標(biāo)進(jìn)行實(shí)操代練。想要把圖標(biāo)設(shè)計(jì)的更好,，這就需要我們在平時(shí)勤加練習(xí)外,，還要進(jìn)行深度的思考,，希望我的這篇梳理可以給大家?guī)韼椭?/p> 圖標(biāo)概述及發(fā)展歷程1. 圖標(biāo)的定義圖標(biāo)，也稱為icon或Picoto,，是計(jì)算機(jī)世界對現(xiàn)實(shí)世界的隱喻和概括,，代表軟件產(chǎn)品中的功能及操作。
圖標(biāo)做為國際通用性語言,，生活中隨處可見，例如商場導(dǎo)視中收銀臺圖標(biāo),、出口圖標(biāo),、衛(wèi)生間圖標(biāo)等，又或者是日常手機(jī)里使用的那些App圖標(biāo),，如微信,、電話、短信等,。的確,，圖標(biāo)的形式有很多種，它可以應(yīng)用在很多場景中,，并且表現(xiàn)方式非常豐富,，有線的、有面的,、還有擬物的等,。
粗淺劃分的話,，UI設(shè)計(jì)中常見的圖標(biāo)大致分為兩大類,，第一類我們稱之為「標(biāo)志性圖標(biāo)」，比如手機(jī)中應(yīng)用啟動圖標(biāo),；第二類我們稱之為「功能性圖標(biāo)」,，這類圖標(biāo)經(jīng)常出現(xiàn)于 App 或網(wǎng)站中,，用于功能性指示引導(dǎo)或操作,。 2. 圖標(biāo)的重要性 對于UI設(shè)計(jì)而言，圖標(biāo)可以說是整個產(chǎn)品的點(diǎn)睛之筆,，它甚至可以直接影響著一款產(chǎn)品的形象和氣質(zhì),。在不少 UI 界面中，圖標(biāo)幾乎是這個頁面的核心支撐體,，它直接影響著產(chǎn)品的視覺體驗(yàn)和產(chǎn)品調(diào)性,。它有以下幾點(diǎn)好處：
3. 起源 圖標(biāo)的發(fā)展歷程其實(shí)有些類似中文、英文等語言的發(fā)展,，大體也分為兩個階段： 實(shí)物 → 符號,；符號 → 新符號 來看一個小例子：
左邊這個東西叫軟盤,，可能很多小伙伴沒見過（事實(shí)上我也沒有）,，「保存」圖標(biāo)就是將「軟盤」符號化之后形成的圖形，「軟盤」是「保存」圖標(biāo)的實(shí)體,。但隨著時(shí)間的推移,，人們逐漸將長期接觸的符號本身作為一種新的實(shí)體，在大家的眼里,，它不再是一個具象事物的抽象符號,，而是直接當(dāng)成一個實(shí)體來使用，甚至這個符號的實(shí)體已經(jīng)淡出歷史,，但人們還在習(xí)慣性使用這個符號,。 如你所知，圖標(biāo),、標(biāo)識都不是界面設(shè)計(jì)師所創(chuàng)造的概念,，它的存在可以追溯到人類文明誕生之初，在漫長的歷史長河當(dāng)中,，早期用來傳達(dá)信息的圖標(biāo)演變?yōu)橄到y(tǒng)的文字,，而在地圖、圖書,、壁畫和建筑等各種各樣的地方,，還存在著用來代表和傳達(dá)特定概念的圖標(biāo)和標(biāo)識。
隨著技術(shù)的發(fā)展,，計(jì)算機(jī)誕生了，而顯示器的出現(xiàn),，也為圖形化界面的誕生,，鋪平了道路。20世紀(jì)70年代，施樂在位于帕羅奧托的研究所當(dāng)中,，誕生了最早的擁有圖形化界面的電腦,，著名的「 Xerox Alto」。這款昂貴的概念機(jī)最終并沒有走進(jìn)大眾的視野,，但是它的后續(xù)機(jī)型施樂之星在1981年問世,，并且成為了計(jì)算機(jī)史上的重要里程碑，而 Xerox Alto 對于喬布斯和比爾蓋茨的啟發(fā),，更是引發(fā)了計(jì)算機(jī)歷史上最著名的一場戰(zhàn)爭：蘋果VS微軟,，Windows 對抗 Macintosh。當(dāng)然這都是后話,。 4. 擬物圖標(biāo) 80年代,，想做的具象（擬物），卻因?yàn)橄袼睾蜋C(jī)能的限制無法實(shí)現(xiàn),，所以對好的標(biāo)準(zhǔn)是越具象越好 ,。到了1995年計(jì)算機(jī)顯卡的顯示能力得到革命性的改變，Photoshop 5.0的發(fā)布,，恰好讓憋屈了這么多年的圖形和UI設(shè)計(jì)師們巴不得立馬上天（終于可以施展拳腳了）,。從win95開始，到osx/win7的這十來年正是UI擬物化發(fā)展壯大并大行其道的階段,。同時(shí)也是顯示技術(shù)飛速發(fā)展的十年,，從640×480，到800×600,，到1024×768,，到1920×1080 / 1920×1200，再到4k,，再到retina屏,，平面顯示技術(shù)能達(dá)到的水準(zhǔn)基本已經(jīng)是人眼能感受到的極致。
當(dāng)人們對計(jì)算機(jī)尚不熟悉的時(shí)候,，用戶的需求是“弄懂這玩意到底是干嘛的”，是用戶體驗(yàn)的核心,。擬物化的圖標(biāo)和界面會給予用戶具象化的引導(dǎo),，比如回收站，音樂,，電腦,，文件夾的圖標(biāo),，用戶可以直接聯(lián)想到現(xiàn)實(shí)中的物品并更快的理解這些程序或者文件的作用,。包括立體的按鈕引導(dǎo)用戶點(diǎn)擊，用戶都可以通過聯(lián)想,，更快的理解操作/互動的方式,。這樣可以降低用戶的學(xué)習(xí)成本,，縮短學(xué)習(xí)周期，讓用戶更快的適應(yīng)計(jì)算機(jī)的使用,，弄懂這玩意到底是干嘛的,。 來自蘋果的Macintosh系統(tǒng)在圖形化界面發(fā)展史上是無法繞過的里程碑。1991年,，蘋果借由Macintosh,，首次發(fā)布了彩色的圖標(biāo)設(shè)計(jì)。圖標(biāo)所能容納的信息量比起上一個黑白界面的時(shí)代更大,，全新的樣式使得它在信息傳達(dá)的功能性上有了明顯的提升,。
但是隨著 ICON 的發(fā)展,，擬物圖標(biāo)也帶來了一些問題,，華麗的視覺元素或許在用戶使用的初期，起到賞心悅目的裝飾,，但久而久之,，這都將成為對用戶獲取信息的一種干擾。如今人們對各種常規(guī)交互模式人們也早已了然于胸,，用戶的需求也從“弄懂這玩意這么用”變成了“高效快捷更舒心的使用”,。用戶用的方便變成了用戶體驗(yàn)的重心。 再者,，大家都熟悉的事物其實(shí)非常有限,，而 APP 的創(chuàng)新卻在不斷進(jìn)行，很多創(chuàng)新的產(chǎn)品本身在現(xiàn)實(shí)世界就沒有參照物,，所以也決定了擬物圖標(biāo)必然會被扁平化取代,。 5. 扁平化 從iMac到iPhone引領(lǐng)的擬物圖標(biāo)更是開啟了一個絢麗的圖標(biāo)設(shè)計(jì)時(shí)代。擬物時(shí)代盛行也帶來了一些麻煩——擬物圖標(biāo)的質(zhì)感,、光影會分散用戶的注意力,，形成「視覺噪聲」。于是UI設(shè)計(jì)師開始探索更新的表現(xiàn)形式來設(shè)計(jì)界面中的圖標(biāo),。如微軟引領(lǐng)的Metro風(fēng)格圖標(biāo)設(shè)計(jì)和Google引領(lǐng)的長投影風(fēng)格的圖標(biāo)設(shè)計(jì),。 不管你喜歡與否，當(dāng)年的微軟讓 Metro 和扁平化賺足了眼球,，甚至讓人一看到扁平化就想到Metro,。
區(qū)別于擬物化更加接近于真實(shí)的實(shí)物,，扁平化則是簡化真實(shí)的物體,，轉(zhuǎn)而通過抽象、簡化、符號化的設(shè)計(jì)元素來表現(xiàn),。 2013年,，蘋果推出了iOS7 開啟了擬物向扁平轉(zhuǎn)變的風(fēng)潮。在iOS7中對整個界面的圖標(biāo),、按鈕,、字體、信息層級等各方面都進(jìn)行扁平化設(shè)計(jì),。蘋果的這一系列動作打破了人們對扁平化風(fēng)格的芥蒂,，并最終推動了整個移動端扁平化設(shè)計(jì)的進(jìn)程。
那么,，蘋果公司在堅(jiān)持了多年的擬物化設(shè)計(jì)風(fēng)格之后，曾經(jīng)作為該風(fēng)格的引領(lǐng)者和受益者,，為何會突然轉(zhuǎn)向,，熱情地?fù)肀鸨馄交O(shè)計(jì)來了呢？難道是因?yàn)槲覀円曈X疲勞了嗎,？答案很簡單,，
總之,，扁平化這種二維設(shè)計(jì)已經(jīng)成為一種更加流行的設(shè)計(jì)風(fēng)格,。所有元素的邊界都很干凈利落，較多使用色塊和符號化的圖形以及無襯線修飾的字體,，界面更加整齊簡潔,。使用這種設(shè)計(jì)風(fēng)格的優(yōu)點(diǎn)是可以更加簡單直接的將信息和事物的工作方式展示出來，將一切干擾信息弱化,，減少認(rèn)知障礙的產(chǎn)生,。
雖然扁平化的優(yōu)點(diǎn)有很多,，也適合當(dāng)下技術(shù)發(fā)展需要的,，但是缺點(diǎn)也是顯而易見的。譬如表現(xiàn)形式太過于抽象,、缺乏情感的傳遞,，而事實(shí)上發(fā)展到今天的扁平化設(shè)計(jì)確實(shí)也在不斷的優(yōu)化自己~使得自己更加的適應(yīng)時(shí)代的發(fā)展,。另外還有一個點(diǎn)就是所謂的 “審美疲勞”。當(dāng)你一直看著簡單的東西,，久而久之就會越來越煩，你就會越來越想要看那些豐富多彩的東西,。反之亦然,。這也表明 UI 新的趨勢再一部向“突出內(nèi)容”的本質(zhì)靠攏，即“認(rèn)知簡約”,。也許當(dāng)滿世界都是扁平化后,，擬物化的設(shè)計(jì)卻又變得更顯眼了呢？最近流行的“新擬物”風(fēng)格就是最好的證明,。 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),。
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è)計(jì)投入大規(guī)模商用的操作系統(tǒng),，這可視為「新擬物」在實(shí)用化道路上的首次勝利。值得一提的是,，在 Big Sur 的 ” 外觀 ” 設(shè)置里,，多了一項(xiàng)名為” 自適應(yīng)強(qiáng)調(diào)色 “的選項(xiàng)。蘋果將主題色的指定權(quán)留給開發(fā)者,，這是否暗示新一代 App 在光影上會有更豐富的效果,？
「新擬物」設(shè)計(jì)的精髓在于對光線的絕妙運(yùn)用,。它把光效拿捏在 ” 扁平 ” 與 ” 擬物 ” 之間,，進(jìn)而打造一種全新的視覺體驗(yàn)。 不同于傳統(tǒng)的擬物,，「新擬物」雖然將符合物理規(guī)律的光影效果引入界面,，但它所模擬的材質(zhì)是自然界不存在的,。換句話說，「新擬物」是將真實(shí)光線用于虛擬對象,，而 ” 擬物 ” 是還原實(shí)際物品在特定光照下的效果,；
由于整個設(shè)計(jì)界將不得不考慮新擬物風(fēng)格,，圍繞該風(fēng)格的可能性將會有爆炸性的發(fā)展,，并且這種新的數(shù)字空間設(shè)計(jì)理念如何能夠合理地適用于用戶界面設(shè)計(jì)和功能性將取得更大的突破。與以往一樣,，第三方應(yīng)用將比蘋果更大膽,、更快速地推動這一風(fēng)格——這也是我們將會真正開始解鎖新擬物優(yōu)勢的時(shí)候。 應(yīng)用圖標(biāo)的類型及作用產(chǎn)品應(yīng)用圖標(biāo)（也叫啟動圖標(biāo)）,，是指產(chǎn)品「品牌標(biāo)識」中獨(dú)立的圖形,，也是產(chǎn)品品牌的核心組成元素。作為產(chǎn)品所有視覺通信中必不可少的元素,，其使用率非常高,，所以該獨(dú)立圖形在設(shè)計(jì)中應(yīng)做到最簡化。 一個小問題：為什么iOS系統(tǒng)中圖標(biāo)形狀是統(tǒng)一的圓角矩形,？ 蘋果官方給出的解釋是在空間有限的的區(qū)域,，太多形狀顯得雜亂，如果形狀不規(guī)則,，就無法控制統(tǒng)一間距,，設(shè)計(jì)師水平也不一樣，這樣統(tǒng)一規(guī)范能保證最低標(biāo)準(zhǔn),。推薦一個iOS啟動圖標(biāo)資源網(wǎng)站,，設(shè)計(jì)時(shí)可以找找靈感。
△ iOSIcon gallery 而安卓應(yīng)用圖標(biāo)就沒那么規(guī)范,，處于百花齊放的狀態(tài)，各家廠商都在設(shè)計(jì)獨(dú)屬于自己的視覺語言,。大家都不一樣,，也就導(dǎo)致沒有個性之美。
安卓應(yīng)用圖標(biāo)設(shè)計(jì)規(guī)范網(wǎng)站
應(yīng)用圖標(biāo)的類型 應(yīng)用圖標(biāo)有不同的風(fēng)格，這些風(fēng)格有可能偏擬物,，也有可能很扁平,，有可能很抽象，也可能很具象,。通過不同的設(shè)計(jì)風(fēng)格可以更加標(biāo)新立異,，從而被用戶記住,。因此能在第一時(shí)間贏得用戶的好感和記憶非常重要，將產(chǎn)品圖標(biāo)設(shè)計(jì)的好看且容易被人記住就成了非常重要的任務(wù),。應(yīng)用圖標(biāo)的風(fēng)格主要有以下幾種,。 1. 中文文字圖標(biāo)中文是我們的母語，每一個漢字都令人記憶深刻,，文字也是最直白的信息,，而且不容易被曲解，所以很多國內(nèi)的產(chǎn)品都會使用文字作為自己的產(chǎn)品圖標(biāo),。中文設(shè)計(jì)模式即字體設(shè)計(jì),，提取應(yīng)用名稱中的一個或多個漢字,，進(jìn)行設(shè)計(jì)變形，變形后的字體圖形具有產(chǎn)品屬性的外貌特征。常見中文圖標(biāo)又分為單字,、多字和字加圖形的幾種類型,。 單字 提取產(chǎn)品名稱中最具代表性的文字，通過對筆畫及整體骨架進(jìn)行字體設(shè)計(jì),，以達(dá)到符合產(chǎn)品特性和視覺差異化的目的,。其優(yōu)點(diǎn)是可以直截了當(dāng)?shù)膫鬟f產(chǎn)品信息，識別性強(qiáng),。
多字 多字圖標(biāo)設(shè)計(jì)要注意的是整體的協(xié)調(diào)性和可讀性，一般為2-3個字,，最多兩行（四個字）排列,。 其優(yōu)點(diǎn)是更加直接的告訴用戶產(chǎn)品名稱，達(dá)到品牌推廣的目的,，減輕用戶記憶成本,。其缺點(diǎn)是如果圖標(biāo)上的文字和下面的輔助文字完全一樣，會顯得重復(fù)啰嗦,，像介紹了兩遍自己一樣,。
字加圖形組合 文字加輔助圖形的組合,，也是常見的產(chǎn)品圖標(biāo)設(shè)計(jì)方法,，相比純文字圖標(biāo)，顯得更加豐富有獨(dú)特的產(chǎn)品的氣質(zhì)和屬性,。需要注意的是做好文字和輔助圖形間的平衡,。
2. 英文字母圖標(biāo)英文設(shè)計(jì)與中文設(shè)計(jì)的設(shè)計(jì)模式相似,，通常是提取應(yīng)用名稱的首字母融合產(chǎn)品的功能賣點(diǎn)或行業(yè)屬性進(jìn)行創(chuàng)意加工,，新的字母圖形依舊保持本身的識別性,。 單字母 通常提取英文首字母進(jìn)行設(shè)計(jì)，由于英文字母本身結(jié)構(gòu)簡潔,，稍加改動就很容易達(dá)到設(shè)計(jì)感于識別性兼?zhèn)涞漠a(chǎn)品圖標(biāo),。需要注意的是英文字母本來就少，都用字母很容易創(chuàng)意雷同,，難以形成差異化,。
多字母 提取產(chǎn)品全稱或幾個單詞的首字母組合而成,，形成獨(dú)有的產(chǎn)品簡稱,，方便用戶記憶。
字母加圖形組合 字母加圖形組合的設(shè)計(jì)形式比較廣泛,，圖形分為幾何圖形和通過提煉的圖形。通過字母與圖形進(jìn)行創(chuàng)意加工,，可以使應(yīng)用圖標(biāo)視覺表現(xiàn)更加飽滿,。
3. 數(shù)字圖標(biāo)直接用數(shù)字做應(yīng)用圖標(biāo)的相對較少,，但是數(shù)字識別性強(qiáng),，易于傳播的特點(diǎn)。利用數(shù)字進(jìn)行設(shè)計(jì)能給人親和力,。難點(diǎn)是怎樣與品牌形成強(qiáng)關(guān)聯(lián)性,。
4. 特殊符號圖標(biāo)由于符號本身的含義會對產(chǎn)品屬性有一定限制,，所以特殊符號在應(yīng)用圖標(biāo)的設(shè)計(jì)案例中相對較少,。如“$”符號可代表與金錢有關(guān)聯(lián)性的產(chǎn)品，無法運(yùn)用在與此屬性無關(guān)的產(chǎn)品上,。不過也正是由于自身屬性強(qiáng)的特點(diǎn),，可以很好的詮釋關(guān)聯(lián)的產(chǎn)品屬性。
除了中英文圖標(biāo),，還有圖形類圖標(biāo)比較常見。這種類型的設(shè)計(jì)模式的優(yōu)點(diǎn)就是直觀醒目和簡潔大方,，視覺沖擊力強(qiáng),。常見的有以下幾種： 5. 幾何圖形幾何圖形的設(shè)計(jì)模式給人簡約、現(xiàn)代,、個性等視覺感受,，從單個具象圖形到復(fù)雜的空間感營造，幾何圖形的表現(xiàn)形式非常豐富,。不同的形狀給人的情感表達(dá)不同,，如三角形給人傳達(dá)個性,、穩(wěn)定、現(xiàn)代,、時(shí)尚等,，添加圓角后又會更加親民、可愛,。我們可以結(jié)合產(chǎn)品特征,，合理的選擇適合的形狀圖形進(jìn)行創(chuàng)意。此類型較考驗(yàn)設(shè)計(jì)師的圖形創(chuàng)意能力,。
6. 單雙形/剪影單雙形是指應(yīng)用圖標(biāo)只展示單個或兩個的剪影圖形。通常有兩種設(shè)計(jì)方式,，在深色背板上使圖形反白,，背景可以是單色也可以是漸變色；在淺色的背板上讓圖形填充顏色,，圖形可以是單色也可以是漸變色,。這種設(shè)計(jì)模式的優(yōu)點(diǎn)是簡潔明確,，易于用戶在眾多的應(yīng)用圖標(biāo)陣列中快速找到目標(biāo),。
7. 線形線形的設(shè)計(jì)模式分為兩種設(shè)計(jì)方式,，在深色的背板上讓圖標(biāo)反白,，背景可以是單色也可以是漸變色；在淺色的背板上讓圖標(biāo)填充顏色,，圖標(biāo)可以是單色也可以是漸變色,，或是其他視覺效果。纖細(xì)的線框圖形傳遞出簡潔輕快的氣質(zhì),，適合于文藝,、清新的應(yīng)用，在界面設(shè)計(jì)時(shí)保持這種干凈明快的風(fēng)格,，才能與應(yīng)用圖標(biāo)設(shè)計(jì)表里如一,。線性風(fēng)格一定注意不可太細(xì)，如果做得太細(xì),，在手機(jī)上看會非常尖銳,，顯得不易點(diǎn)擊。例如airbnb,，它的背景是一個微漸變,，線性風(fēng)格曲線組成“A”，同時(shí)是一個小蜜蜂,。
8. 動物圖形/剪影動物作為圖標(biāo)設(shè)計(jì)元素是比較常見的方式之一,，通過提取動物整體形象或者局部特征部位作為設(shè)計(jì)元素，背景填充單色或漸變色,，簡潔明了,。動物給人的印象比較可愛，有助于加深用戶對產(chǎn)品的印象,。常見的表現(xiàn)形式有剪影,、線性描邊風(fēng)格、面性風(fēng)格等,。
9. 卡通形象卡通風(fēng)格的產(chǎn)品圖標(biāo)會讓用戶更有好感，一個可愛的卡通形象有助于加深用戶對產(chǎn)品的印象,。很多決策者會認(rèn)為卡通是一種低齡的審美,，這種想法其實(shí)是錯誤的?？ㄍ梢哉f是一種各年齡層都能接受的風(fēng)格,，例如Bear，它的卡通形象是一頭潔白的北極熊,，簡潔的形象設(shè)計(jì)與產(chǎn)品的高效閱讀體驗(yàn)一致,。
10. 正負(fù)形以正形為底突出負(fù)形特征,，以負(fù)形表達(dá)產(chǎn)品屬性,，傳遞產(chǎn)品信息。例如NPR One,，圖標(biāo)中的負(fù)形圖形是對話氣泡,，告訴我們這是一個媒體或社交的應(yīng)用，而正形圖形強(qiáng)調(diào)產(chǎn)品氣質(zhì),。
11. 白色漸變白色漸變的設(shè)計(jì)模式與透明白色相似，都是通過白色不透明度來構(gòu)建出圖形的立體控件感,，它比單純的剪影圖形更加具有質(zhì)感,，這種質(zhì)感帶給了我們視覺上的享受。例如印象筆記·圈點(diǎn),，它是一只白色的鵝毛形象,，垂直的線型漸變使鵝毛富有了生命力一般，顯得更加輕柔,。
12. 彩色漸變色彩比任何圖形都更能抓住用戶的注意力，同時(shí)色彩更加具有情緒，能傳遞出應(yīng)用的產(chǎn)品氣質(zhì),。比起白色漸變圖形,，彩色漸變圖形的色彩表現(xiàn)更加豐富。多種顏色進(jìn)行漸變銜接的時(shí)候要注意色相的對比,，營造空間感,。應(yīng)用圖標(biāo)的背景和圖形的色彩要拉開對比，一般為白色或淺色背景,。
13. 無無，即沒有設(shè)計(jì),。除了背板什么也沒有,。雖然這類設(shè)計(jì)模式比較獨(dú)特，但我們并不鼓勵,，因?yàn)橛脩艉茈y從一個顏色上得到有用的信息,。例如“黃油相機(jī)”的圖標(biāo)設(shè)計(jì)成一塊黃油的樣子已深入人心了。
14. 應(yīng)用圖標(biāo)的作用打開率是一款移動應(yīng)用的重要數(shù)據(jù),，應(yīng)用只有被打開才有它的運(yùn)營價(jià)值。在我們手機(jī)里安裝了許許多多的應(yīng)用,，除了一些我們每天必須使用的應(yīng)用如微信,，其他大多數(shù)的應(yīng)用在沒有使用場景時(shí)很難想到去打開他們。因此,，這些應(yīng)用如何在手機(jī)屏幕上吸引用戶的注意,，鼓勵用戶打開顯得非常重要,。于是在應(yīng)用圖標(biāo)上做文章就顯得很有必要,，常見的設(shè)計(jì)手法有：
應(yīng)用圖標(biāo)繪制方法及流程1. iOS應(yīng)用圖標(biāo)在設(shè)計(jì)模板還沒有如今這么發(fā)達(dá)時(shí)，設(shè)計(jì)師需要設(shè)計(jì)啟動圖標(biāo)（1024x1024px）之后按照程序員的要求切出幾十個不同尺寸的圖標(biāo),。比如,，在手機(jī)中@3x情況下桌面圖標(biāo)尺寸為180x180px，在@2x情況下為120x120px,；在應(yīng)用商店圖標(biāo)需要使用的尺寸是1024x1024px,；這個工作太煩人了，好在現(xiàn)在我們只需要專注在啟動圖標(biāo)設(shè)計(jì)本身上了,。在蘋果給我們的這套資源中,，有 Template-AppIcons-iOS 這個文件。打開這個文件,，用我們自己設(shè)計(jì)的啟動圖標(biāo)替換掉智能對象里的內(nèi)容,，你會發(fā)現(xiàn)所有尺寸的圖標(biāo)都變成了我們的圖標(biāo)。iOS的圓角圖標(biāo)并不是標(biāo)準(zhǔn)的圓角矩形,，而是某種連續(xù)曲線,。
我們把兩個圓角曲線放大重疊后進(jìn)行對比,，其中灰色線框?yàn)闃?biāo)準(zhǔn)圓角矩形繪制的圓角,，紅色為iOS平滑圓角，它與圓角矩形擁有相同的對角線錨點(diǎn),，區(qū)別在于其曲線稍微向中心收緊,。
事實(shí)上,，我們很難在Retina屏幕上區(qū)分這么細(xì)微的差別,，因此設(shè)計(jì)師在繪制iOS應(yīng)用圖標(biāo)時(shí)不必過分糾結(jié)它的圓角，直接繪制成直角矩形交給開發(fā)同學(xué)即可,，如果應(yīng)用圖標(biāo)需用于展示,，可以繪制120*120px圓角矩形、27px圓角半徑代替,。 2. 安卓應(yīng)用圖標(biāo)安卓應(yīng)用圖標(biāo)同樣需要很多尺寸,，主流需求是1024px、512px,、144px,、96px、72px,、48px六種,。設(shè)計(jì)師提供給程序員的同樣是直角矩形，然后程序員通過代碼進(jìn)行切割使其變成圓角圖標(biāo),。 3. iOS應(yīng)用圖標(biāo)設(shè)計(jì)流程在我之前的設(shè)計(jì)作品中,，有個“影記”的攝影社區(qū)APP，本篇我們就以此為產(chǎn)品案例拋磚引玉來學(xué)習(xí)一個iOS應(yīng)用圖標(biāo)的繪制過程。 尋找隱喻 隱喻是在彼類事物的暗示之下感知,、體驗(yàn),、想象、理解,、談?wù)摯祟愂挛锏男睦硇袨?、語言行為和文化行為，即人們看到某樣?xùn)|西或聽到某件事情能夠馬上在大腦中形成聯(lián)想,。例如說到攝影，馬上就能想到相機(jī),、快門,、閃光燈、暗房等,。然后通過這些聯(lián)想詞,，去找一些氣質(zhì)相符的圖片制作情緒版，通過情緒版可以感受到產(chǎn)品的調(diào)性,，然后從中提取一些形狀和色彩作為產(chǎn)品圖標(biāo)的主要造型,。
競品分析 應(yīng)用市場各類產(chǎn)品不勝其數(shù),，在同類應(yīng)用中存在大量相似的應(yīng)用圖標(biāo)設(shè)計(jì),，如何保持應(yīng)用圖標(biāo)的唯一識別性非常重要。唯一識別性不單單指圖形與其他應(yīng)用有所差異,，避免創(chuàng)意撞車,，讓用戶在腦中形成思維模式，它還指圖形表意是否清晰,，是否符合用戶的心里預(yù)期,。
提取關(guān)鍵詞 根據(jù)收集的圖片,，創(chuàng)建情緒版,，結(jié)合自己的產(chǎn)品提取關(guān)鍵詞，然后就知道在接下來的設(shè)計(jì)中應(yīng)該突出什么,。我們從“影記”中可提取首字母“Y”，相機(jī)中的“快門”“信號燈”“開關(guān)機(jī)”,，并依次將關(guān)鍵詞描繪成下列圖形,。
抽象圖形 確立了首字母“Y”,、“快門/開關(guān)機(jī)”和“信號燈”作為應(yīng)用圖標(biāo)的主圖形,，接下來將繪制好的3個圖形相結(jié)合，即完成初步設(shè)想。
圖標(biāo)柵格線 使用iOS應(yīng)用圖標(biāo)柵格線作為設(shè)計(jì)依據(jù)有助于建立和諧的圖標(biāo)繪制比例,，并與iOS系統(tǒng)保持統(tǒng)一，下圖為iOS系統(tǒng)天氣應(yīng)用使用了圖標(biāo)柵格線,。將圖形放置在圖標(biāo)柵格上調(diào)整大小并注意圖形與其比例協(xié)調(diào),。
豐富細(xì)節(jié) 通過上面圖形組合已基本完成應(yīng)用圖標(biāo)的設(shè)計(jì),，接下來我們還應(yīng)從顏色,、質(zhì)感、背板等著手豐富圖形的細(xì)節(jié),，建立起應(yīng)用的產(chǎn)品氣質(zhì),。“影記”作為攝影師分享佳作平臺,，攝影師們用的器材顏色大多以黑色為主,，因此酷酷的黑色更適合作為應(yīng)用的主色。白色的信號燈過于普通,，使用相機(jī)本身發(fā)出的橘紅色燈光作為信號燈的顏色,，使其更加具有動感和活力。整體像「消息氣泡」的造型暗示可以在這里進(jìn)行攝影交流,。
多場景測試 將應(yīng)用圖標(biāo)設(shè)計(jì)稿交付開發(fā)提交至App Store上架，正確的圖標(biāo)設(shè)計(jì)稿應(yīng)是直角矩形,，iOS會自動應(yīng)用一個圓角遮罩將圖標(biāo)的4個角遮住,，假如圖標(biāo)設(shè)計(jì)稿自帶圓角，就有可能露出圖標(biāo)透明區(qū)域,。
△ 注：上圖非實(shí)際大小，僅表明不同分辨率下的比例關(guān)系 此外,，應(yīng)用圖標(biāo)還會以不同的分辨率出現(xiàn)在不同場景中,，例如在iPhone 8plus上需@3x(120px)的圖，而在iPhone7的設(shè)置頁需要58px的圖,，就需要將120px的圖縮小,。將大圖縮小成小圖時(shí)，一些細(xì)節(jié)就會丟失,，使畫面變得模糊,，因此設(shè)計(jì)師應(yīng)對小尺寸圖標(biāo)進(jìn)行細(xì)微調(diào)整，去除不必要的裝飾元素,，以確保應(yīng)用圖標(biāo)在小分辨率應(yīng)用場景下也能保持清晰的識別度,。
功能圖標(biāo)的設(shè)計(jì)規(guī)范除了產(chǎn)品圖標(biāo)，還有一種圖標(biāo)被稱為功能（或系統(tǒng)）圖標(biāo),，功能圖標(biāo)指的是擔(dān)負(fù)一定功能和含義的圖形,，一般來說需要像文字一般地被人迅速理解，所以表達(dá)方式上不適合特別復(fù)雜,，如微信底部四個系統(tǒng)圖標(biāo)就使用了比較簡潔的線性風(fēng)格,。 功能圖標(biāo)在UI設(shè)計(jì)中占據(jù)非常重要的作用，幾乎存在于每一個應(yīng)用界面中,，無論是在導(dǎo)航欄,、工具欄或標(biāo)簽欄，還是在首頁,、詳情頁或個人中心頁,，都隨處可見功能圖標(biāo)的身影。功能圖標(biāo)具有明確的表意功能,，其作用在于替代文字或輔助文字來指引用戶進(jìn)行快速導(dǎo)航,，它具有圖形化的符號，比文字更加直觀,，符合普羅大眾的認(rèn)知習(xí)慣,，有助于用戶形成記憶思維，提高應(yīng)用的易用性,。同時(shí)設(shè)計(jì)精致,、風(fēng)格統(tǒng)一的功能圖標(biāo)提升了產(chǎn)品視覺效果，不但給用戶帶來視覺上的愉悅感,，還帶來了良好一致的使用體驗(yàn),。 1. 圖標(biāo)的規(guī)范圖標(biāo)是良好設(shè)計(jì)系統(tǒng)的基本組成部分，對營銷材料非常有幫助,。他們是插畫內(nèi)容的基礎(chǔ)構(gòu)建塊,，但他們也具有很高的技術(shù)性。因此科學(xué)嚴(yán)謹(jǐn)?shù)脑O(shè)計(jì)規(guī)范能幫助我們設(shè)計(jì)精致,、風(fēng)格統(tǒng)一的圖標(biāo),。
2. 圖標(biāo)尺寸一致性是設(shè)計(jì)圖標(biāo)的關(guān)鍵,，在繪制時(shí),，一定要確保所有的圖標(biāo)都相同大小。在UI界面設(shè)計(jì)中,，網(wǎng)格的大小必須要是4或12的倍數(shù)（安卓是8的倍數(shù),，iOS是4的是倍數(shù)）。@2x下作圖要保證是4的倍數(shù),，這樣可以整除2,，適配@1x的屏幕；@3x下作圖就需要是12的倍數(shù)了,，這個數(shù)值可以整除2,、3、4,，適配@1x和@2x的屏幕,，界面中通常使用的圖標(biāo)尺寸24*24px、48*48px,。這里建議用48px做為常規(guī)圖標(biāo)設(shè)計(jì)尺寸,。
通常我們只需要選擇一個通用的尺寸來繪制,，然后讓開發(fā)人員根據(jù)倍數(shù)調(diào)整可能需要的尺寸即可,，這樣就不用一遍又一遍的去繪制不同大小的相同圖標(biāo)了。 不過當(dāng)我們的圖標(biāo)涉及一些復(fù)雜的細(xì)節(jié)時(shí),，還是需要根據(jù)尺寸大小單獨(dú)繪制,。比如我們的系統(tǒng)圖標(biāo)可能是24px，但是營銷圖標(biāo)是80px,，兩者的使用差別會很大,，那么我們就需要為那些較大的尺寸添加一些細(xì)節(jié)。
知識點(diǎn)： 這里建議從最大的尺寸開始,，然后依次繪制小一點(diǎn)的。因?yàn)閯h除和簡化細(xì)節(jié)要比添加容易得多,，也能最大程度的保留圖標(biāo)原始狀態(tài),。 圖標(biāo)繪制基于48x48px畫布繪制的線性圖標(biāo)，線寬默認(rèn)為4px,，不同場景縮放比例使用：
如果你要繪制描邊圖標(biāo),，那么需要保證所有的筆畫都是相同的粗細(xì)，并且筆畫之間的間距不要比筆畫本身更細(xì),。
3. 圖標(biāo)的keyline圖標(biāo)網(wǎng)格為圖形元素的一致但靈活的定位建立了明確的規(guī)則，keyline是網(wǎng)格的基礎(chǔ),。通過使用這些核心形狀作為知道,，你可以跨系統(tǒng)保持一致的視覺比例。
4. 圖標(biāo)關(guān)鍵圖形圖標(biāo)柵格用于圖標(biāo)元素繪制的參考并幫助建立清晰的內(nèi)容輪廓邊界,，關(guān)鍵線有助于促進(jìn)圖標(biāo)統(tǒng)一性,，簡化設(shè)計(jì)過程中比例調(diào)整成本，繪制小圖形需要參照小正方形的keyline,。
5. 圖標(biāo)的拐角
直角拐角：當(dāng)基礎(chǔ)圖形為滿容器正方形時(shí),，建議使用3X圓角,，當(dāng)基礎(chǔ)圖形為滿高（寬）矩形時(shí)，建議使用2X圓角,。當(dāng)基礎(chǔ)圖形為較?。ㄐ∮?/2寬高）矩形時(shí)，建議使用1X圓角,。
非直角拐角：根據(jù)圖標(biāo)場景，通常情況下無論角度,，默認(rèn)均為1X圓角,；特殊弧度的曲線“拐角”情況除外，根據(jù)圖標(biāo)設(shè)計(jì)需要單獨(dú)考慮,。
6. 圖標(biāo)區(qū)域 封閉和非封閉封閉區(qū)域，有閉合曲線構(gòu)成的為封閉區(qū)域,，可以進(jìn)行獨(dú)立顏色填充,； 非封閉區(qū)域，由非閉合曲線構(gòu)成的非封閉區(qū)域,，原則上是不能進(jìn)行獨(dú)立的顏色填充,；
封閉區(qū)域?yàn)榍€形狀且有相交線段時(shí),，原則上是不能進(jìn)行獨(dú)立的顏色填充,； 7. 圖標(biāo)繪制規(guī)則當(dāng)線段與曲線相交或者與直線非垂直相交時(shí)，線段末端用圓頭端點(diǎn),； 當(dāng)線段與直線垂直相交時(shí),，線段末端用方頭端點(diǎn)； 當(dāng)圓點(diǎn)的直徑與線寬一樣時(shí),，圓點(diǎn)用圖形繪制,，不用線段； 當(dāng)圓形和方形在小于16px時(shí)建議用圖形繪制,，不要用線,；
傾斜角度 根據(jù)像素的網(wǎng)格線來設(shè)置一條線的起點(diǎn)和終點(diǎn),，會讓你的圖標(biāo)看起來更清晰,。圖標(biāo)中的傾斜角度應(yīng)為45的倍數(shù),，保持與keyline中的對角線或十字垂直相交線保持平行關(guān)系，若是矩形外框,，傾斜角度也可以與矩形的對角線或十字垂直相交線保持平行關(guān)系,。應(yīng)避免用13.7°,，81°等這些奇怪的數(shù)值,。
線段和端點(diǎn) 為保證風(fēng)格的整體一致性,，圖標(biāo)所有線段端點(diǎn)默認(rèn)均應(yīng)為與線段同寬的圓角端點(diǎn),，通常情況下線段端點(diǎn)和可編輯節(jié)點(diǎn)坐標(biāo)以整數(shù)坐標(biāo)為佳。默認(rèn)基于48px畫布繪制的線性圖標(biāo),，線寬默認(rèn)為4px,，無論直線和曲線在任何時(shí)候線寬都應(yīng)均保持一致。
圖標(biāo)斷口與間距 內(nèi)部結(jié)構(gòu)與外框的間距不得不小于線寬,，內(nèi)部元素之間的間距不得不小于線寬的1/2px。 外形框的端口尺寸關(guān)系：4px,、8px,、12px，建議尺寸為4的倍數(shù),。
圖標(biāo)風(fēng)格變換 圖標(biāo)在特定規(guī)律下允許不同風(fēng)格之間的變換，分別為線性風(fēng)格（默認(rèn)）,、填充風(fēng)格,、混合風(fēng)格、多色混合風(fēng)格,。
單雙像素描邊 如果為圖標(biāo)設(shè)置1像素的邊框，邊框應(yīng)該使用外部或內(nèi)部的描邊樣式,，但是不建議居中描邊樣式,，居中描邊的1px邊框，雖然在放大它們的時(shí)候,，它們看起來很清晰,。但在100%比例大小顯示的時(shí)候，它們會模糊,。雙數(shù)用居中描邊,，單數(shù)用外描邊，所有錨點(diǎn)要與網(wǎng)格對齊不能出現(xiàn)偏移,。
線段閉合 所有線段結(jié)合處應(yīng)為閉合狀態(tài),，避免錯位出現(xiàn)。
統(tǒng)一透視 如果圖標(biāo)有透視需求的話,，就要統(tǒng)一透視角度，例如圖標(biāo)透視方向朝左,，那就統(tǒng)一所有圖標(biāo)的透視角度都朝左邊,。
8. 視覺柵格除了像素柵格,，還有視覺柵格,。視覺柵格可以幫助我們找出圖標(biāo)的中心在哪里，以及人眼能感知到它有多大,。圓形和弧形物體看起來會比正方形更小,。因此我們應(yīng)該在繪制圖標(biāo)時(shí)設(shè)定一個固定大小的容器，這樣它們在導(dǎo)出時(shí)就都是相同的尺寸了,。添加內(nèi)邊距可以讓圖標(biāo)在視覺上看起來更加平衡,，避免以后開發(fā)時(shí)還需要重新調(diào)整。
9. 視覺重量繪制圖標(biāo)不光要滿足物理上大小統(tǒng)一,，還要實(shí)現(xiàn)視覺上大小統(tǒng)一。設(shè)計(jì)師要懂得調(diào)節(jié)圖標(biāo)大小以避開視覺上的覺錯,。 UI界面的圖標(biāo)通?？梢越频目醋鲆韵碌幕靖袷街唬簷M向矩形，縱向矩形,，對角矩形,，圓形，三角形,，正方形,。 如果把它們做成高斯模糊效果，你就會發(fā)現(xiàn)它們具有相同的視覺重量,，因?yàn)樗鼈冏兂苫蚨嗷蛏傧嗤陌唿c(diǎn)效果,。
根據(jù)圖標(biāo)形狀,，將它們放在相應(yīng)的框架中,。你就會發(fā)現(xiàn)，方形圖標(biāo)比三角形或細(xì)長圖標(biāo)更緊湊,。 10. 圖標(biāo)繪制細(xì)節(jié)清晰是圖標(biāo)的基本要素,，在sketch中，參數(shù)不要有小數(shù)點(diǎn)，讓圖標(biāo)占滿像素網(wǎng)格,。因?yàn)橛?jì)算機(jī)不能識別小數(shù)點(diǎn),，導(dǎo)出圖標(biāo)時(shí)計(jì)算機(jī)會把不能識別參數(shù)的部分拉伸填滿像素網(wǎng)格，導(dǎo)致圖標(biāo)出現(xiàn)虛邊,。
通常從一套圖標(biāo)中最復(fù)雜的那個開始，因?yàn)樗鼤椭覀兌x相同的視覺重量,，讓所有的圖標(biāo)視覺重量保持一致,。因?yàn)楫?dāng)圖標(biāo)具有不同的細(xì)節(jié)層次時(shí)，更復(fù)雜的圖標(biāo)會吸引用戶更多的注意力,，而且視覺上看上去更重,。
11. 圖標(biāo)的顏色默認(rèn)顏色：如果是功能圖標(biāo),，那么最好只使用一種顏色:黑色。否則你的組件可能變得過于復(fù)雜,，不利于和其他設(shè)計(jì)師協(xié)作,。而對于營銷圖標(biāo)，出于品牌宣傳的目的,，你可能會想要使用兩種顏色,，個人認(rèn)為圖標(biāo)最好是單一顏色的，3種或3種以上顏色的東西都是插圖,，而不是圖標(biāo),。 選擇狀態(tài)顏色：未選擇圖標(biāo)顏色為#000000，透明度為87%,；未激活圖標(biāo)顏色為#000000,，透明度為54%；禁用圖標(biāo)顏色為#000000,，透明度為38%,。
12. 功能圖標(biāo)的風(fēng)格功能圖標(biāo)在UI設(shè)計(jì)中占據(jù)非常重要的作用,，幾乎存在于每一個應(yīng)用界面中,，無論是在導(dǎo)航欄、工具欄或標(biāo)簽欄,，還是在首頁,、詳情頁、或個人中心頁,，都隨處可見功能圖標(biāo)的身影,。功能圖標(biāo)具有明確的表意功能，起作用在于替代文字或輔助文字來指引用戶進(jìn)行快速導(dǎo)航，它具有圖形化的符號,，比文字更加直觀,，符合普羅大眾的認(rèn)知習(xí)慣，有助于用戶形成記憶思維,，提高應(yīng)用的易用性,。同時(shí)，設(shè)計(jì)精美,、風(fēng)格統(tǒng)一的功能圖標(biāo)提升了產(chǎn)品視覺效果,，不但給用戶帶來視覺上的愉悅感，還帶來良好一致的使用體驗(yàn),。 常見的功能性圖標(biāo)風(fēng)格大致有三種：線性圖標(biāo),、面形圖標(biāo)和扁平化圖標(biāo)。但其實(shí)我們可以將「扁平化圖標(biāo)」可以看作是「線性圖標(biāo)」和「面型圖標(biāo)」的一種組合形式,，所以歸根到底,，基礎(chǔ)的圖標(biāo)風(fēng)格有兩大類：「線性圖標(biāo)」和「面型圖標(biāo)」；
線性圖標(biāo) 線性圖標(biāo)是通過線條來表現(xiàn)物體的輪廓,，它比面形圖標(biāo)更能塑造優(yōu)美的外觀，且作為貫穿圖標(biāo)繪制的線條本身就是一種設(shè)計(jì)語言,，因此繪制整套線性圖標(biāo)會更加統(tǒng)一,，具有整體感。例如twitter和微信底部的tab圖標(biāo)等,。在一個場景下的幾個同等重要的圖標(biāo),，如果線條粗細(xì)不一致，會給人一種權(quán)重上存在差異的感覺,。所以,，在繪制線型圖標(biāo)時(shí)，通常會使用統(tǒng)一粗細(xì)的線條,。
線性圖標(biāo)具有辨識度高，清晰,，簡約易識別等優(yōu)點(diǎn),，線性圖標(biāo)不會對頁面造成太多的視覺干擾。缺點(diǎn)是：線性圖標(biāo)的創(chuàng)作空間較少,，太復(fù)雜的線性圖標(biāo)對識別性產(chǎn)生較大的困擾,。
常用的App圖標(biāo)設(shè)計(jì)線的粗細(xì)一般有2PX或者3PX,，不同的線條粗細(xì) ICON 所帶來的視覺感受也不同,，細(xì)線顯得精致,，粗線視覺面積大，顯得厚重,。圓角粗線條的 ICON 顯得飽滿而可愛,，個別 App 的底部標(biāo)簽欄圖標(biāo)采用粗線條設(shè)計(jì)，但粗線條的 ICON 圖形較為極簡才適用,。 線性圖標(biāo)根據(jù)樣式還可以分為：雙色線性圖標(biāo),、線面填充圖標(biāo)、線性漸變圖標(biāo),。
線性圖標(biāo)使用場景 在iOS所有原生應(yīng)用的導(dǎo)航欄和工具欄都采用了2px線框的圖標(biāo)設(shè)計(jì)，很多APP產(chǎn)品的標(biāo)簽欄都選擇用線性風(fēng)格的圖標(biāo)設(shè)計(jì),。無疑,，線性圖標(biāo)可以減少視覺干擾，讓用戶集中在產(chǎn)品核心功能上,，同時(shí)輕量化的視覺語言也與扁平化的設(shè)計(jì)風(fēng)格更為融合,。它比面形圖標(biāo)更能塑造優(yōu)美的外觀，且線條本身就是一種設(shè)計(jì)語言,，因此繪制整套線性圖標(biāo)會更加統(tǒng)一,，具有整體感。
通常，在UI設(shè)計(jì)中,，線性圖標(biāo)很少和背板同時(shí)存在,，因?yàn)榫€條的圖形視覺表現(xiàn)力較弱，容易埋沒在背景色中,，但也不是必須的,，如果掌握好一定的規(guī)則，一些簡單的線性圖標(biāo)和背板的組合也會很協(xié)調(diào),。 面形圖標(biāo) 面形圖標(biāo)是以面為主要表現(xiàn)形式的圖標(biāo),，通過線或者面去切割基礎(chǔ)輪廓面，通過分型來塑造圖標(biāo)的體積感,。不同的切割手法造成了面性圖標(biāo)設(shè)計(jì)感的差別,。在「微信」底部標(biāo)簽欄中，未選中的圖標(biāo)是線性圖標(biāo),，而選中的圖標(biāo)則是面形圖標(biāo),，同時(shí)顏色會變成微信的品牌綠色再次暗示用戶選中狀態(tài)。面形圖標(biāo)占用的面積要比線性圖標(biāo)多,，所以更加顯眼,。實(shí)際上,，蘋果在新的設(shè)計(jì)規(guī)范中也建議開發(fā)者在APP底部標(biāo)簽欄中全部使用面形圖標(biāo)，是否處于點(diǎn)擊態(tài)通過改變填充圖標(biāo)的顏色進(jìn)行區(qū)別,。這是因?yàn)樘畛鋱D標(biāo)看上去像可點(diǎn)擊的,。
面形圖標(biāo)具有表意能力強(qiáng),，細(xì)節(jié)豐富,，情緒感強(qiáng)，視覺突出,，創(chuàng)作空間大等優(yōu)點(diǎn),。面性圖標(biāo)可以讓用戶迅速定位圖標(biāo)位置，預(yù)知點(diǎn)擊后的狀態(tài),。但是面性圖標(biāo)在頁面中不可過多出現(xiàn),，否則會造成頁面臃腫，難分主次,，用戶視覺疲勞,。 面性圖標(biāo)根據(jù)不同的配色樣式可以分為：單色飽和度填充圖標(biāo)，純色漸變圖標(biāo)和多色漸變圖標(biāo),。
基于最基本的「線性圖標(biāo)」和「面型圖標(biāo)」，通過不同的形態(tài)和風(fēng)格的組合,，再結(jié)合豐富的 表現(xiàn)手法,，就可以設(shè)計(jì)出形形色色的圖標(biāo)風(fēng)格了。比如：不同粗細(xì)線條線性圖標(biāo)的組合,，或者面面組合,，或者線面組合。大家在設(shè)計(jì)圖標(biāo)的時(shí)候,，需要根據(jù)自己的產(chǎn)品特征,、受眾和使用場景，去選擇適合自己的表現(xiàn)形式,。 面形圖標(biāo)使用場景 面形圖標(biāo)具有廣泛適用性,，通常在運(yùn)動、時(shí)尚類應(yīng)用的標(biāo)簽欄出現(xiàn),。由于面形圖標(biāo)的視覺占比最大化,，具有強(qiáng)烈的視覺表現(xiàn)力。
功能入口的面形圖標(biāo)通常分為反白和正形兩種類型,。反白即在彩色背板上顯示白色的圖標(biāo)，正形即圖標(biāo)直接填充色彩且無背板,。在帶有背板的圖標(biāo)設(shè)計(jì)時(shí)要注意圖標(biāo)與背板的尺寸比例,，雖沒有嚴(yán)格的繪制標(biāo)準(zhǔn),，但從整體視覺效果上考慮,，圖標(biāo)尺寸最好不低于背板直徑但1/2,，最大不超過背板直徑的0.618(黃金比例),，同時(shí)還要考慮所有圖標(biāo)的視差一致,。
13. 扁平圖標(biāo)的使用場景扁平化圖標(biāo)實(shí)際上是線性圖標(biāo)和面形圖標(biāo)的一種組合形式,，這種類似插畫感覺的圖形一開始多用于引導(dǎo)頁,、空狀態(tài)也的情感化設(shè)計(jì),，后來逐漸在標(biāo)簽欄,、首頁主要功能入口也出現(xiàn)了扁平化圖標(biāo)的身影,。精致的扁平化圖標(biāo)令人賞心悅目，拉近了與用戶之間的距離,，從而建立起良好的用戶印象,。
14. 品類區(qū)圖標(biāo)品類區(qū)圖標(biāo)的衛(wèi)視通常是位于搜索框,、banner之下（也俗稱“金剛區(qū)”）,，而且品類區(qū)區(qū)域通常會占屏幕22%-25%不等，且位于屏幕頭部,，從用戶閱讀屏幕內(nèi)容的視覺流來說位置至關(guān)重要,，而且是聚合各類子版塊的入口，為各個子版塊分發(fā)內(nèi)容引導(dǎo)流量,。所以其重要性不言而喻,，產(chǎn)品要讓用戶通過不同類型展示方式的組件找到相應(yīng)的功能，而圖標(biāo)具備精煉高度概括內(nèi)容的特性,，識別度也大于文字,，所以「金剛區(qū)」的圖標(biāo)設(shè)計(jì)通常以圖標(biāo)+說明文字為主。
常見的設(shè)計(jì)手法有：圓形底板+45度漸變+白色面形+微投影；45度漸變+扁平圖標(biāo)+微投影,；簡單線性,；45度漸變+不透明度+面形圖標(biāo)。
15. 文字圖標(biāo)文字圖標(biāo)是指用文字直接表示特定含義的圖標(biāo)符號,。由于文字本身就是一種演化而來的符號，英文的首字母或者詞語關(guān)鍵字本身也具備很強(qiáng)的信息濃縮性,，因此在某些場景下,，采用文字或字符作為圖標(biāo)，是一種很不錯的表現(xiàn)手法,。
比如「提示」圖標(biāo),，使用一個圓圈包裹一個英文字母「i」，意為 information,，表示「注釋信息」的含義,；比如停車場直接使用「Parking」中的首字母 「P」，這些都是比較約定俗稱的使用方式,。還有一些場景,，很難用象形或者表意的方式進(jìn)行表達(dá)，那么就很適合使用文字符號,，例如京東/天貓某些商品具備「正品保證」的標(biāo)識，這個概念太抽象了,，很難用象形去概括,，創(chuàng)造新的表意符號又很難被大眾接受，這時(shí)「正」字就很適合作為這個場景特定的圖標(biāo)符號,，作為針對中國用戶群體的產(chǎn)品圖標(biāo),，簡單粗暴且有效。 知識點(diǎn)： 如果可能的話,，盡量避免在圖標(biāo)中使用文字,。因?yàn)閳D標(biāo)應(yīng)該是全球性的,。如果你確實(shí)需要文字圖標(biāo)(例如貨幣符號等等),，那么請你自己繪制,，而不是直接使用字體。 16. 動態(tài)圖標(biāo)這幾年動效設(shè)計(jì)的熱度穩(wěn)定增長,，只有靜態(tài)排版的時(shí)代正在過去,。動效的出現(xiàn)，也讓圖標(biāo)擁有了更多的可能性,。動態(tài)圖標(biāo)可以讓你的app或網(wǎng)站生動有趣,，在我們所常見的各種數(shù)字產(chǎn)品當(dāng)中，UI組件和各色元素都已經(jīng)動畫化了,。
運(yùn)動中的物體比靜態(tài)的物體更能快速引起人們的注意,，在UI設(shè)計(jì)中嘗試添加一些動畫及動畫圖標(biāo),，不僅能在視覺上快速吸引用戶,，還能使產(chǎn)品更具交互性，提升產(chǎn)品的趣味性,。分享幾個動態(tài)圖標(biāo)資源網(wǎng)站： useAnimations：支持所有設(shè)備,、網(wǎng)站、Android和iOS,，可以免費(fèi)用于個人和商業(yè)用途,。
Lordicon：每一個圖標(biāo)都提供線性輪廓和面形剪影兩種風(fēng)格樣式,，并且圖標(biāo)是基于Lottie動畫引擎的矢量動畫圖標(biāo),，大小完全可擴(kuò)展，兼容所有主流瀏覽器,。
△ https:// Icons8 Animated icons 2.0：提供的動態(tài)圖標(biāo)格式包括 Lottie 適用的 JSON、GIF 和 After Effects 格式,，透過網(wǎng)頁可以搜尋,、預(yù)覽動態(tài)圖標(biāo)效果。
Feather：設(shè)計(jì)師Cole Bemis制作的一個開源圖標(biāo)庫,，可自行調(diào)節(jié)圖標(biāo)大小和線條粗細(xì)。
17. 圖標(biāo)命名規(guī)則科學(xué)和高效的命名規(guī)則能夠幫助我們快速定位到自己制作的圖標(biāo),，并且?guī)椭_發(fā)縮短命名時(shí)間，加強(qiáng)團(tuán)隊(duì)寫作效率,。切圖可按照“業(yè)務(wù)_類型_功能_大小_狀態(tài)”的格式進(jìn)行命名,。
切圖命名的格式建議為全英文,，可在切圖之前對圖層進(jìn)行命名,，常用切圖命名對照表如下所示。
如何繪制功能圖標(biāo)1. 圖標(biāo)繪制方法圖標(biāo)的繪制方式主要有兩種：布爾運(yùn)算 和 貝塞爾曲線,。 布爾運(yùn)算 布爾指的是喬治·布爾，19世紀(jì)的一位數(shù)學(xué)家,，為了紀(jì)念布爾在符號邏輯運(yùn)算中的杰出貢獻(xiàn)，所以將這種運(yùn)算稱為布爾運(yùn)算,。 布爾運(yùn)算聽起來比較難,，但其實(shí)非常簡單，布爾運(yùn)算采用的數(shù)字邏輯推演法,，主要有數(shù)字邏輯的聯(lián)合,、相交,、相減。設(shè)計(jì)師在使用軟件過程中引用了這種邏輯運(yùn)算方法,，對應(yīng)到設(shè)計(jì)軟件中,，就有：合并形狀、減去頂層形狀,、與形狀區(qū)域交叉,、排除重疊形狀。例如兩個圓形相減可以得到一個月亮的造型,，這就是布爾運(yùn)算,。
基本上通過布爾運(yùn)算,，我們能繪制出常見的大部分圖標(biāo)了，但有時(shí)我們需要針對某些線條進(jìn)行單獨(dú)的調(diào)整,，又或者我們需要打造一套手繪風(fēng)的矢量圖標(biāo),，這個時(shí)候就需要用到貝塞爾曲線了。 貝塞爾曲線 貝塞爾曲線適用于二維圖形繪制的數(shù)學(xué)曲線,。1962年法國工程師皮埃爾·貝塞爾（Pierre Bézier）所發(fā)表,。他運(yùn)用貝塞爾曲線來為汽車的主體進(jìn)行設(shè)計(jì)。貝塞爾曲線是繪制矢量圖形時(shí)的重要工具,，使用鋼筆工具畫出的所有圖形一般來說都是貝塞爾曲線組成的,。 貝塞爾曲線包括：節(jié)點(diǎn)、控制點(diǎn),、控制線,、曲線這幾個基本概念。 矢量圖形便是由這幾個基本概念構(gòu)成的,。圖形由基礎(chǔ)節(jié)點(diǎn)作為支撐構(gòu)成,，控制點(diǎn)和節(jié)點(diǎn)之間的線段稱為控制線，控制線就像皮筋一樣,，調(diào)整控制點(diǎn)的位置,，可以改變曲線的形狀，就像被皮筋（控制線）拉扯一樣。
節(jié)點(diǎn)包括 4 種基礎(chǔ)屬性類型,，一種是沒有控制點(diǎn)和控制線的「直線節(jié)點(diǎn)」；另一種是「鏡像關(guān)聯(lián)節(jié)點(diǎn)」,，這種節(jié)點(diǎn)控制其中一側(cè)的控制點(diǎn),，另一側(cè)的控制點(diǎn)會發(fā)生鏡像變化，適合繪制對稱結(jié)構(gòu)的曲線,；再有一種是「無關(guān)聯(lián)節(jié)點(diǎn)」,，即節(jié)點(diǎn)兩側(cè)的控制點(diǎn)可以各自自由控制它們那一側(cè)的曲線而不互相影響；最后一種是「不對稱關(guān)聯(lián)節(jié)點(diǎn)」,，這種類型下,，節(jié)點(diǎn)兩側(cè)的控制點(diǎn)和節(jié)點(diǎn)會永遠(yuǎn)保持在同一條直線上，但是卻不會對稱控制線的長度,。 知識點(diǎn)： 在 Sketch 中,，我們可以在選中節(jié)點(diǎn)后通過快捷鍵 1 / 2 / 3 / 4 來快速切換當(dāng)前節(jié)點(diǎn)的類型，加快繪制效率,。 鋼筆工具 繪制自由貝塞爾曲線常用的工具便是鋼筆工具,，鋼筆工具也是所有矢量軟件的核心工具。它的使用對于新手可能稍微薇有點(diǎn)復(fù)雜,，但是一但上手,，會非常方便。The Bézier Game 這個是一個非常不錯的練習(xí)鋼筆工具的網(wǎng)站,，以游戲的形式練習(xí)鋼筆工具,，通關(guān)的時(shí)候你對鋼筆工具就已經(jīng)輕車熟路了。
繪制實(shí)戰(zhàn) 這里選擇了幾個比較典型的圖標(biāo),，簡單演示下繪制方法和各自的繪制思路： 面性 眼睛：布爾運(yùn)算相交 / 相減 / 合并形狀 繪制一個正圓，然后復(fù)制這個正圓形,，通過布爾運(yùn)算「與形狀區(qū)域相交」得到眼睛外輪廓,，再繪制兩個圓通過「相減」與合并形狀得到眼睛造型。
位置定位：旋轉(zhuǎn) / 相減 這個圖標(biāo)由兩個大小圓形相減,，得到環(huán)形，再繪制一個和大圓半徑相等的正方形,，和圓環(huán)左,、下對齊，最后逆時(shí)針旋轉(zhuǎn)45度完成,。
WIFI：相加 / 相減 / 旋轉(zhuǎn) 繪制多個圓通過布爾運(yùn)算的相加減得出三個圓圈嵌套“靶子造型，再繪制一個正三角形，和靶子圖形相交得到Wi-Fi圖標(biāo),。
齒輪：旋轉(zhuǎn) / 相減 通過兩個圖形的布爾運(yùn)算得到環(huán)形,，然后繪制一個梯形,，復(fù)制一個鏡像，將其對齊環(huán)形兩端,，復(fù)制梯形編組并旋轉(zhuǎn)復(fù)制三次（45度）,，最后合并全部形狀完成。
鈴鐺：相加 / 相減 由3個矩形組成鈴鐺主體,，鈴鐺頂部圓頂結(jié)構(gòu)通過設(shè)置全圓角所得，鈴鐺底部的半圓使用圓形和矩形進(jìn)行布爾運(yùn)算,，完成,。
線性 放大鏡：旋轉(zhuǎn) / 相加 繪制一個正圓和一條線,，用對齊工具將其居中對齊,，編組后逆時(shí)針旋轉(zhuǎn)45度即可。
時(shí)鐘：鋼筆 / 剪刀工具 繪制一個正圓和一個矩形,，使圓形的左下角對齊圓形中心，用鋼筆工具在矩形左邊和下邊增加兩個錨點(diǎn),，再用剪刀工具減去多余的線條即可,。
雨傘：相減 / 剪刀工具 繪制一個正圓,，再繪制一個矩形與其相減得到傘頂,，然后繪制一個矩形，通過剪刀工具減去多余部分,，得到傘架,，傘把手圓角化處理，完成,。
相機(jī)：合并 繪制一個矩形和一個梯形，通過合并得到相機(jī)主體,，再繪制一個正圓完成相機(jī)鏡頭部分,，完成。
愛心：相加 / 旋轉(zhuǎn) 繪制兩個正圓和一個直徑與圓形等寬的正方形,，然后逆時(shí)針旋轉(zhuǎn)45度所得。
2. 制定規(guī)范無規(guī)矩不成方圓,，規(guī)矩的出現(xiàn)可以讓一切雜亂的東西變得合理,，統(tǒng)一起來。在設(shè)計(jì)上也是如此,，規(guī)范具有統(tǒng)一輸出,，指引細(xì)節(jié)、便于查看的好處,，規(guī)范就是一組圖標(biāo)中的規(guī)矩,，所有圖標(biāo)的繪制都按照規(guī)矩來，最終的成品就會顯得井然有序,。 小小的圖標(biāo)是由很多圖形元素組成的,，在這些圖標(biāo)中，元素的一致性是建立一個共同視覺于洋的關(guān)鍵,。熟悉這些元素可以更容易地理解每個圖標(biāo)和他們之間細(xì)微的差異,，也將幫助我們學(xué)會圖標(biāo)設(shè)計(jì)的底層結(jié)構(gòu)，依次是筆畫末端,、圓角,、留白、筆觸,、內(nèi)部角,、禁繪區(qū)。
在制定規(guī)范時(shí),，我們通常先繪制出一個符合業(yè)務(wù)風(fēng)格的圖標(biāo)，然后根據(jù)這一個圖標(biāo)定制后續(xù)的圖標(biāo)規(guī)范,，依次按照上述圖標(biāo)元素進(jìn)行規(guī)范,。如果是漸變填充圖標(biāo)還要規(guī)定它的漸變角度，光影角度等,。在一組中的圖標(biāo)需要在這些圖形屬性中進(jìn)行統(tǒng)一,，這樣的圖標(biāo)雖然形狀不一樣但是在視覺上看起來是屬于同一系列的。
制定規(guī)范的三個過程：
△ 圖標(biāo)設(shè)計(jì)規(guī)范 3. 線性or面性設(shè)計(jì)中,，我們應(yīng)該是用「線性圖標(biāo)」還是「面性圖標(biāo)」呢？ 其實(shí)二者沒有太明顯的選擇優(yōu)劣,，很多場景下已經(jīng)越來越模糊,，但總的來說，還是有一些法則可以作為參考： 常用的手法：在App的底部導(dǎo)航欄,，選中狀態(tài)使用面型圖標(biāo)，而非選中狀態(tài)使用線性圖標(biāo),； 16px左右的小圖標(biāo)慎用線性圖標(biāo),，線性圖標(biāo)在16px下，可排布像素的區(qū)域較小,，這個時(shí)候線性圖標(biāo)不容易設(shè)計(jì),； 面型圖標(biāo)比起線性圖標(biāo)，除裝飾性外具備更強(qiáng)的視覺信息層次感,，更具引導(dǎo)性,，比如金剛區(qū)功能圖標(biāo)、IOS設(shè)置界面,，使用面型圖標(biāo),； 車載等系統(tǒng)界面，更適合用面型圖標(biāo),，面型圖標(biāo)的視覺面積較大,，短時(shí)間內(nèi)更加容易識別； 線性圖標(biāo)看起來通常會更加細(xì)膩精致,，適合比較精致簡潔的設(shè)計(jì)或者女性化產(chǎn)品設(shè)計(jì),；
4. 圖標(biāo)導(dǎo)出文件格式是導(dǎo)出圖標(biāo)的關(guān)鍵,。不同的人需要的文件格式也不同,，如果你為外部合伙人提供圖標(biāo)，那么可能會提供1x,、2x和3x.的png文件,，以適應(yīng)多種設(shè)備。而對于開發(fā)和其他設(shè)計(jì)人員,，則通常需要導(dǎo)出.svg文件,，這些文件可以在設(shè)計(jì)程序中編輯，并且可以通過代碼在應(yīng)用程序或?yàn)g覽器中繪制,。導(dǎo)出的svg可以用sketch的官方插件「sketch-SVGO」進(jìn)行代碼優(yōu)化,，壓縮svg的體積,，精簡svg代碼。
△ sketch-SVGO 插件官方下載頁 svg格式僅支持居中描邊的圖標(biāo),，并且不支持投影,，因此對于復(fù)雜豐富的圖標(biāo)還是切img圖為好,。
5. 圖標(biāo)管理和交付完成圖標(biāo)后需要進(jìn)行視覺檢視，避免任何多余的線條或形狀，保證盡可能整潔,。檢查所有線條是否都在標(biāo)準(zhǔn)框架內(nèi),，讓其他人幫忙來檢查你的圖標(biāo)是否整潔是非常有必要的。對圖標(biāo)精心設(shè)計(jì)評審，合格后再加入資源庫，這樣避免多人同時(shí)修改而造成混亂，同時(shí)提升團(tuán)隊(duì)協(xié)作效率。推薦一個免費(fèi)的圖標(biāo)管理工具：Nucleo，團(tuán)隊(duì)協(xié)作需要付費(fèi)。
△ 圖標(biāo)資源管理工具：Nucleo 圖標(biāo)設(shè)計(jì)的評判標(biāo)準(zhǔn)我們了解了 icon 的基本知識，那么如何設(shè)計(jì)一個好的 icon 呢,？怎樣評判我們的 icon 是否合適,，是否貼合整個產(chǎn)品呢,？我們需要了解什么才是一個好的 icon ,。 我們可以從以下五個方面來檢驗(yàn),，分別是：識別性,，規(guī)范性、統(tǒng)一性、呼吸感與品牌感,。
1. 識別性 圖標(biāo)就是幫助用戶理解信息,，所以識別性（也可以說是可訪問性）是一個圖標(biāo)最重要的一項(xiàng)，尤其在沒有文字說明的情況下,，一定不能讓用戶產(chǎn)生疑惑,。我們檢測圖標(biāo)的可讀性通常要將圖標(biāo)的背景色底板在黑色和白色之間進(jìn)行切換對比，不論是黑色還是白色的背景都可以看清圖標(biāo)的全部細(xì)節(jié),，還需要確保圖標(biāo)中的每一種顏色都是可見的,。 圖標(biāo)識別性可以分為兩類，分別是含義識別和視覺識別,。
靈活的設(shè)計(jì)思路，在保證識別度的前提下靈活發(fā)揮,，嘗試各種不同風(fēng)格的表現(xiàn)形式,。
當(dāng)然,，腦洞也不要太大,，失去了原本的含義，造成誤解,。
2. 規(guī)范性 規(guī)范性也是做好一個圖標(biāo)的基礎(chǔ),，我們要保證圖標(biāo)在視覺大小的一致性，圖標(biāo)飽滿度,、遵循同一種規(guī)律,，細(xì)節(jié)統(tǒng)一性。 視覺大小的一致性：在相同尺寸的基礎(chǔ)上分析形狀間的視覺差異,，來審視視覺上是否統(tǒng)一,，如一樣尺寸大小的圓和方形的視覺大小就不一致，那么我們可以規(guī)定它的最大尺寸,，進(jìn)而在尺寸規(guī)范中適當(dāng)調(diào)整,，使得視覺大小達(dá)到統(tǒng)一；
3. 統(tǒng)一性 在繪制多個類型相同的圖標(biāo)時(shí)，我們需要注意這一套圖標(biāo)合集需要在視覺上保持統(tǒng)一性,。在一整套產(chǎn)品中,，會有很多種圖標(biāo)，但是圖標(biāo)的功能不一樣,，所表達(dá)的內(nèi)容也不同,。這時(shí)，圖標(biāo)一致性的意義就體現(xiàn)出來了,，根據(jù)格式塔原理中的相似性原則：人們會將如元素彼此相似的東西感知為一組,。這也意味著如果具有相同功能、含義和層次結(jié)構(gòu)級別的元素,，則應(yīng)在視覺上保持統(tǒng)一匹配,。
圖標(biāo)內(nèi)容的統(tǒng)一會讓用戶明白相似的圖標(biāo)所代表的的功能也相同,，而且在視覺上也更加和諧美觀,。因此我們在繪標(biāo)后還需檢查線條的粗細(xì)比重，邊角的大小，配色方案,，細(xì)節(jié)層次和設(shè)計(jì)元素在整個合集中是否是不變且一致的,。 圖標(biāo)的統(tǒng)一性可以從：線條粗細(xì)、設(shè)計(jì)語言,、復(fù)雜程度,、顏色規(guī)范四個大的方向去著手。 線條粗細(xì)：相同功能類型的圖標(biāo)線寬粗細(xì)統(tǒng)一,，有背板的圖標(biāo)線條不易過細(xì),；
設(shè)計(jì)語言：可拆分為透明度（拉開層次）,、圓角（圓角還是直角）,、斷線開口（開口位置）、設(shè)計(jì)特征四個緯度去規(guī)范,；
復(fù)雜程度：如果不能簡化圖標(biāo)，就保持同一組圖標(biāo)的墨水重量一致,，簡化太復(fù)雜的圖標(biāo),，增強(qiáng)辨識度；
顏色規(guī)范：對于線面結(jié)合的扁平圖標(biāo)建議最多用兩種顏色,，活動入口圖標(biāo)如果需要的色彩數(shù)量多，那就需要保持敏感,，從一種色彩的周圍小幅度提取另一種色彩或多種色彩,，調(diào)整其色相、飽和度,、明度就能搭配出許多和諧的顏色,。
4. 呼吸感 呼吸感的意思就是適當(dāng)留白,。不管是圖標(biāo)還是界面，適當(dāng)?shù)牧舭卓梢酝怀鲋黧w內(nèi)容,，讓內(nèi)容具備易看性,。在圖標(biāo)的繪制過程中，我們應(yīng)該注意圖標(biāo)元素之間的間距不宜過近,，元素也不宜過多,。圖標(biāo)是一個物體的簡略縮影，目的是為了表達(dá)內(nèi)容,，讓用戶快速理解,，太過復(fù)雜的細(xì)節(jié)會影響圖標(biāo)的識別速度。因此在圖標(biāo)的繪制過程中應(yīng)該刪除所有無法傳達(dá)圖標(biāo)意義的元素，避免使圖標(biāo)變得太過復(fù)雜難以識別,。
5. 品牌感 品牌感就是我們上面談到的要與品牌理念相符，傳達(dá)給用戶的感受一致,，通過吸取品牌色,，提取品牌元素，采用品牌吉祥物和品牌圖形的方法來提取品牌基因,。我們要試著從品牌設(shè)計(jì)的角度去理解,，尋找自己產(chǎn)品獨(dú)特的品牌氣質(zhì)，挑選合適的技法,。然后把這些元素具象化,，融入在界面設(shè)計(jì)中。
那么,，該如何提升品牌感，打造屬于自己App的獨(dú)特風(fēng)格呢,？品牌基因?yàn)槲覀兲峁┝艘恍┚€索,，這是近年來非常流行的一種趨勢。 圖標(biāo)的品牌感我們都知道圖標(biāo)在APP設(shè)計(jì)中的重要性,，但是打開許多APP你會發(fā)現(xiàn)他們的圖標(biāo)設(shè)計(jì)都非常普通,，似乎是在圖標(biāo)網(wǎng)站上下載的素材。雖然一些優(yōu)秀的設(shè)計(jì)師在進(jìn)行圖標(biāo)設(shè)計(jì)師加入一些諸如圓角,、斷線等設(shè)計(jì)語言,，但是仍逃脫不了與其他APP設(shè)計(jì)雷同、毫無個性的通病,，使得UI看上去普通,、不精致，缺少產(chǎn)品氣質(zhì),。 那么,，該如何打造屬于自己APP的獨(dú)特風(fēng)格呢？品牌基因?yàn)槲覀兲峁┝艘恍┚€索,。它是由平面設(shè)計(jì)中的VIS（視覺識別系統(tǒng)）引入的一種設(shè)計(jì)策略,，通過對品牌形象進(jìn)行延生設(shè)計(jì)形成一套完整的視覺符號。每一個APP都有其品牌形象,，代表了與眾不同的氣質(zhì),。接下來，我們就來學(xué)習(xí)如何利用品牌基因進(jìn)行圖標(biāo)設(shè)計(jì),。 1. 提取品牌圖形 通常一個App的第一個tab是首頁,，是用戶進(jìn)入App后看到的第一個頁面，最常見的圖標(biāo)設(shè)計(jì)是一個小房子的圖形。首頁是App中最重要的頁面,，承載了整個產(chǎn)品的核心功能,，是用戶瀏覽最多的地方，因此使用一個讓人印象深刻的品牌圖形作為“首頁”圖標(biāo)是必要的,，不但使App內(nèi)外形成了視覺聯(lián)系,，同時(shí)也二次傳遞了品牌形象，加強(qiáng)了用戶對App的良好印象,。例如網(wǎng)易云音樂的首頁標(biāo)簽就直接使用了它的品牌圖形,，其優(yōu)點(diǎn)不言而喻。
但是請注意,，這種設(shè)計(jì)策略并不適合于所有的App，當(dāng)?shù)谝粋€tab被賦予特定功能,，就不可使用品牌圖形,，否則用戶會難以理解。例如微信第一個tab是聊天列表,，此時(shí)使用氣泡就比品牌圖形更加合適,。 還有另外一種情況。通常一個App的最后一個tab是個人中心,，即“我的”,。如果App的品牌圖形是動物圖形，也可以使用其整體或局部圖形來作為「個人中心」的入口圖標(biāo),。 2. 提取品牌色彩 色彩也是圖標(biāo)設(shè)計(jì)中重要的構(gòu)成元素之一,，合理協(xié)調(diào)的色彩搭配讓用戶在瀏覽頁面時(shí)感覺舒服。從品牌形象中提取色彩作為圖標(biāo)設(shè)計(jì)的依據(jù),，可以給用戶帶來由內(nèi)而外一致的視覺體驗(yàn),。在設(shè)計(jì)時(shí)提取品牌色彩可適當(dāng)調(diào)整色彩的飽和度，明度,，既可以將圖形整體填充色彩（例如微信）,，也可以局部填充色彩，還可以填充為圖標(biāo)背景色,，使圖標(biāo)之間形成色彩上的關(guān)聯(lián),。直播應(yīng)用Bigo Live的品牌色是青藍(lán)色，在標(biāo)簽欄的圖標(biāo)設(shè)計(jì)上（選中態(tài)）將圖形局部元素填充青藍(lán)漸變色,，活潑清爽的搭配帶給用戶輕快的感覺,，與整體品牌調(diào)性高度一致,。
3. 提取設(shè)計(jì)語言 在VI設(shè)計(jì)中通常提取輔助圖形作為設(shè)計(jì)元素，這在圖標(biāo)設(shè)計(jì)中同樣適用，當(dāng)所有的圖標(biāo)都具備了相同的設(shè)計(jì)元素,，他們就構(gòu)成了一套完整的視覺符號,。例如飛豬的品牌圖形就很特別，豬的頭部輪廓是由大寫字母F演變成的翅膀造型,，因此可以看到“我的”小人圖標(biāo)的也使用了類似的輪廓,，這樣他們就形成了某種視覺聯(lián)系。
4. 提取產(chǎn)品氣質(zhì) 品牌形象決定了產(chǎn)品的氣質(zhì),，而產(chǎn)品的氣質(zhì)決定了吸引什么樣的用戶。就如當(dāng)我們第一次看到一個人的時(shí)候,，往往會根據(jù)他的外貌形象特征,，產(chǎn)生一個大致的印象，這就是一個人的氣質(zhì),。APP也同樣,，例如傳遞傳統(tǒng)手工藝人社交的「東家」，其產(chǎn)品流淌著古樸,、溫潤,、精致的人文氣息，它將宋體漢字的筆畫進(jìn)行拆解組合,，創(chuàng)造出具有東方韻味且極具形式感的圖標(biāo)設(shè)計(jì),。
5. 拆分品牌名稱 App標(biāo)簽欄圖標(biāo)最常見的形式是圖形加文字的組合,，由于文字本身就能傳達(dá)最直接的含義,，因此圖形的識別性并不那么重要了，我們就可以在其視覺表現(xiàn)形式上賦予更多創(chuàng)意和個性,。MONO是一款閱讀類App,，它的標(biāo)簽欄圖標(biāo)直接將品牌名稱中的4個字母拆分成4個圖形。雖然每個字母與其對應(yīng)的功能模塊本身并沒有直接聯(lián)系,，但加上標(biāo)簽文字的輔助也不會造成閱讀困難,，而且產(chǎn)品本身的用戶人群就是比較能接受新鮮事物的年輕人，因此這樣的創(chuàng)意反而給App設(shè)計(jì)加分了,。
6. 展開形象聯(lián)想 我們?nèi)粘Ｊ褂玫谋姸郃pp大多數(shù)都有著相同的功能模塊：首頁、發(fā)現(xiàn),、動態(tài),、我的等，因此也就出現(xiàn)了很多雷同的圖標(biāo)設(shè)計(jì),。比如“首頁”是尖頂房子,，“發(fā)現(xiàn)”是眼睛,，“動態(tài)”是氣泡，如果有差別也只是設(shè)計(jì)風(fēng)格的差異,，有的直角有的圓角,，有的線性有的面形。這樣的設(shè)計(jì)沒有品牌歸屬感,，試一下將這些圖標(biāo)單獨(dú)拿出來就無法判斷它是誰,，它從哪兒來？
優(yōu)秀的設(shè)計(jì)師不僅要具備將圖標(biāo)繪制精美的能力,，還要具備豐富的設(shè)計(jì)想象力，不拘泥于設(shè)計(jì)規(guī)范的條條框框,，有時(shí)候打破規(guī)則才能設(shè)計(jì)出優(yōu)秀的圖標(biāo),。“首頁”除了小房子我們還可以想到什么,？馬蜂窩的做法就很巧妙,，“首頁”圖標(biāo)是“蜂巢”，而蜂巢是馬蜂的房子,，這樣的設(shè)計(jì)與品牌形象緊密相連,，簡直完美！不過最新的改版好像已經(jīng)改沒了,。
知識點(diǎn)： 總之，要想在繪制整套圖標(biāo)時(shí)建立統(tǒng)一風(fēng)格,，就要從外觀和顏色上確立主風(fēng)格,，在局部尋求個性特征，將兩者結(jié)合,，并融合產(chǎn)品屬性和符合用戶定位,，先在腦海中構(gòu)思出清晰的概念，然后在稿紙上繪制草圖,，最后確立一個最佳方案上機(jī)完成,，只有不斷地思考和打磨才能創(chuàng)作出最佳的設(shè)計(jì)方案。
寫在最后圖標(biāo)設(shè)計(jì)是UI設(shè)計(jì)中非常重要的環(huán)節(jié),，在尺寸有限的界面上，小小的 icon 可以更加簡單高效的表達(dá)含義,，傳遞給用戶正確和友好的指引,。建議每位UI設(shè)計(jì)師在平時(shí)做大量的練習(xí)嘗試各種不同的風(fēng)格，以滿足不同的業(yè)務(wù)需求,。另外,，關(guān)于如何繪制keyline線,，還有最新的iphone12樣機(jī)，有需要的同學(xué)可以出門右轉(zhuǎn)私信我,。 OK，圖標(biāo)設(shè)計(jì)指南就分享到這里,，希望對大家有所幫助,。因?yàn)槠^長，幾經(jīng)修改,，有細(xì)節(jié)不嚴(yán)謹(jǐn)?shù)牡胤?，歡迎斧正，感謝閱讀,。 閱讀文章 >> 歡迎關(guān)注作者微信公眾號：「印跡時(shí)光」 參考文獻(xiàn)
|
|
|
