圖標(biāo)設(shè)計(jì)指南

2020-10-12    資深UI設(shè)計(jì)者

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

兩萬(wàn)字超強(qiáng)干貨!設(shè)計(jì)師必看的圖標(biāo)設(shè)計(jì)指南

本文將對(duì)圖標(biāo)進(jìn)行系統(tǒng)的介紹,篇幅所限,本文只針對(duì)圖標(biāo)設(shè)計(jì)中最重要的設(shè)計(jì)概念和設(shè)計(jì)思路為主。大家如果對(duì)圖標(biāo)的其他方面感興趣,歡迎給留言,后續(xù)出相關(guān)系列內(nèi)容。過(guò)程中也有針對(duì)幾種典型的圖標(biāo)進(jìn)行實(shí)操代練。想要把圖標(biāo)設(shè)計(jì)的更好,這就需要我們?cè)谄綍r(shí)勤加練習(xí)外,還要進(jìn)行深度的思考,希望我的這篇梳理可以給大家?guī)?lái)幫助。

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

1. 圖標(biāo)的定義

圖標(biāo),也稱為icon或Picoto,是計(jì)算機(jī)世界對(duì)現(xiàn)實(shí)世界的隱喻和概括,代表軟件產(chǎn)品中的功能及操作。

兩萬(wàn)字超強(qiáng)干貨!設(shè)計(jì)師必看的圖標(biāo)設(shè)計(jì)指南

圖標(biāo)做為國(guó)際通用性語(yǔ)言,生活中隨處可見(jiàn),例如商場(chǎng)導(dǎo)視中收銀臺(tái)圖標(biāo)、出口圖標(biāo)、衛(wèi)生間圖標(biāo)等,又或者是日常手機(jī)里使用的那些App圖標(biāo),如微信、電話、短信等。的確,圖標(biāo)的形式有很多種,它可以應(yīng)用在很多場(chǎng)景中,并且表現(xiàn)方式非常豐富,有線的、有面的、還有擬物的等。

兩萬(wàn)字超強(qiáng)干貨!設(shè)計(jì)師必看的圖標(biāo)設(shè)計(jì)指南

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

2. 圖標(biāo)的重要性

對(duì)于UI設(shè)計(jì)而言,圖標(biāo)可以說(shuō)是整個(gè)產(chǎn)品的點(diǎn)睛之筆,它甚至可以直接影響著一款產(chǎn)品的形象和氣質(zhì)。在不少 UI 界面中,圖標(biāo)幾乎是這個(gè)頁(yè)面的核心支撐體,它直接影響著產(chǎn)品的視覺(jué)體驗(yàn)和產(chǎn)品調(diào)性。它有以下幾點(diǎn)好處:

  • 全球通用:Windows,iOS, etc., 中文版和英文版甚至各種語(yǔ)言版本,在不打開(kāi)菜單之前,基本上都長(zhǎng)一樣;
  • 節(jié)約空間:如果能用一個(gè)圖標(biāo)清楚表達(dá)含義的時(shí)候,就不需要用文字,比如用一個(gè)“叉”代表「關(guān)閉」;
  • 快速定位:圖標(biāo)可以用它獨(dú)特的形狀或者顏色讓人快速定位到一個(gè)功能;
  • 上下文的定位:比如小飛機(jī)的圖標(biāo)單獨(dú)放出來(lái)不確定是什么,但是在和收件箱在一起它就可以認(rèn)為是發(fā)件箱了。

兩萬(wàn)字超強(qiáng)干貨!設(shè)計(jì)師必看的圖標(biāo)設(shè)計(jì)指南

3. 起源

圖標(biāo)的發(fā)展歷程其實(shí)有些類似中文、英文等語(yǔ)言的發(fā)展,大體也分為兩個(gè)階段:

實(shí)物 → 符號(hào);符號(hào) → 新符號(hào)

來(lái)看一個(gè)小例子:

兩萬(wàn)字超強(qiáng)干貨!設(shè)計(jì)師必看的圖標(biāo)設(shè)計(jì)指南

左邊這個(gè)東西叫軟盤,可能很多小伙伴沒(méi)見(jiàn)過(guò)(事實(shí)上我也沒(méi)有),「保存」圖標(biāo)就是將「軟盤」符號(hào)化之后形成的圖形,「軟盤」是「保存」圖標(biāo)的實(shí)體。但隨著時(shí)間的推移,人們逐漸將長(zhǎng)期接觸的符號(hào)本身作為一種新的實(shí)體,在大家的眼里,它不再是一個(gè)具象事物的抽象符號(hào),而是直接當(dāng)成一個(gè)實(shí)體來(lái)使用,甚至這個(gè)符號(hào)的實(shí)體已經(jīng)淡出歷史,但人們還在習(xí)慣性使用這個(gè)符號(hào)。

如你所知,圖標(biāo)、標(biāo)識(shí)都不是界面設(shè)計(jì)師所創(chuàng)造的概念,它的存在可以追溯到人類文明誕生之初,在漫長(zhǎng)的歷史長(zhǎng)河當(dāng)中,早期用來(lái)傳達(dá)信息的圖標(biāo)演變?yōu)橄到y(tǒng)的文字,而在地圖、圖書(shū)、壁畫(huà)和建筑等各種各樣的地方,還存在著用來(lái)代表和傳達(dá)特定概念的圖標(biāo)和標(biāo)識(shí)。

兩萬(wàn)字超強(qiáng)干貨!設(shè)計(jì)師必看的圖標(biāo)設(shè)計(jì)指南

隨著技術(shù)的發(fā)展,計(jì)算機(jī)誕生了,而顯示器的出現(xiàn),也為圖形化界面的誕生,鋪平了道路。20世紀(jì)70年代,施樂(lè)在位于帕羅奧托的研究所當(dāng)中,誕生了最早的擁有圖形化界面的電腦,著名的「 Xerox Alto」。這款昂貴的概念機(jī)最終并沒(méi)有走進(jìn)大眾的視野,但是它的后續(xù)機(jī)型施樂(lè)之星在1981年問(wèn)世,并且成為了計(jì)算機(jī)史上的重要里程碑,而 Xerox Alto 對(duì)于喬布斯和比爾蓋茨的啟發(fā),更是引發(fā)了計(jì)算機(jī)歷史上最著名的一場(chǎng)戰(zhàn)爭(zhēng):蘋(píng)果VS微軟,Windows 對(duì)抗 Macintosh。當(dāng)然這都是后話。

4. 擬物圖標(biāo)

80年代,想做的具象(擬物),卻因?yàn)橄袼睾蜋C(jī)能的限制無(wú)法實(shí)現(xiàn),所以對(duì)好的標(biāo)準(zhǔn)是越具象越好 。到了1995年計(jì)算機(jī)顯卡的顯示能力得到革命性的改變,Photoshop 5.0的發(fā)布,恰好讓憋屈了這么多年的圖形和UI設(shè)計(jì)師們巴不得立馬上天(終于可以施展拳腳了)。從win95開(kāi)始,到osx/win7的這十來(lái)年正是UI擬物化發(fā)展壯大并大行其道的階段。同時(shí)也是顯示技術(shù)飛速發(fā)展的十年,從640×480,到800×600,到1024×768,到1920×1080 / 1920×1200,再到4k,再到retina屏,平面顯示技術(shù)能達(dá)到的水準(zhǔn)基本已經(jīng)是人眼能感受到的。

兩萬(wàn)字超強(qiáng)干貨!設(shè)計(jì)師必看的圖標(biāo)設(shè)計(jì)指南

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

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

兩萬(wàn)字超強(qiáng)干貨!設(shè)計(jì)師必看的圖標(biāo)設(shè)計(jì)指南

但是隨著 ICON 的發(fā)展,擬物圖標(biāo)也帶來(lái)了一些問(wèn)題,華麗的視覺(jué)元素或許在用戶使用的初期,起到賞心悅目的裝飾,但久而久之,這都將成為對(duì)用戶獲取信息的一種干擾。如今人們對(duì)各種常規(guī)交互模式人們也早已了然于胸,用戶的需求也從“弄懂這玩意這么用”變成了“快捷更舒心的使用”。用戶用的方便變成了用戶體驗(yàn)的重心。

再者,大家都熟悉的事物其實(shí)非常有限,而 APP 的創(chuàng)新卻在不斷進(jìn)行,很多創(chuàng)新的產(chǎn)品本身在現(xiàn)實(shí)世界就沒(méi)有參照物,所以也決定了擬物圖標(biāo)必然會(huì)被扁平化取代。

5. 扁平化

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

兩萬(wàn)字超強(qiáng)干貨!設(shè)計(jì)師必看的圖標(biāo)設(shè)計(jì)指南

區(qū)別于擬物化更加接近于真實(shí)的實(shí)物,扁平化則是簡(jiǎn)化真實(shí)的物體,轉(zhuǎn)而通過(guò)抽象、簡(jiǎn)化、符號(hào)化的設(shè)計(jì)元素來(lái)表現(xiàn)。

2013年,蘋(píng)果推出了iOS7 開(kāi)啟了擬物向扁平轉(zhuǎn)變的風(fēng)潮。在iOS7中對(duì)整個(gè)界面的圖標(biāo)、按鈕、字體、信息層級(jí)等各方面都進(jìn)行扁平化設(shè)計(jì)。蘋(píng)果的這一系列動(dòng)作打破了人們對(duì)扁平化風(fēng)格的芥蒂,并最終推動(dòng)了整個(gè)移動(dòng)端扁平化設(shè)計(jì)的進(jìn)程。

兩萬(wàn)字超強(qiáng)干貨!設(shè)計(jì)師必看的圖標(biāo)設(shè)計(jì)指南

那么,蘋(píng)果公司在堅(jiān)持了多年的擬物化設(shè)計(jì)風(fēng)格之后,曾經(jīng)作為該風(fēng)格的引領(lǐng)者和受益者,為何會(huì)突然轉(zhuǎn)向,熱情地?fù)肀鸨馄交O(shè)計(jì)來(lái)了呢?難道是因?yàn)槲覀円曈X(jué)疲勞了嗎?答案很簡(jiǎn)單,

  1. 因?yàn)槭褂昧薘etina屏,屏幕清晰度支持扁平化更多的細(xì)節(jié);
  2. 當(dāng)具象化慢慢達(dá)到了,當(dāng)大師們發(fā)現(xiàn)具象化已經(jīng)不再有挑戰(zhàn)時(shí),于是開(kāi)始嘗試從別的角度表達(dá);
  3. 高度的擬物在一定程度上減輕了學(xué)習(xí)成本,但是提高了辨識(shí)成本。

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

兩萬(wàn)字超強(qiáng)干貨!設(shè)計(jì)師必看的圖標(biāo)設(shè)計(jì)指南

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

6. 微扁平、輕擬物

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

兩萬(wàn)字超強(qiáng)干貨!設(shè)計(jì)師必看的圖標(biāo)設(shè)計(jì)指南

7.「新擬物」風(fēng)格圖標(biāo)

蘋(píng)果在 WWDC2020 搞了個(gè)大新聞:macOS 將與 iOS 統(tǒng)一步調(diào),從X86 平臺(tái)遷移至ARM 平臺(tái),并從macOS 10迭代為macOS 11。這 20 年一遇的 Mac 大版本更新被稱為Big Sur。

macOS Big Sur是第一個(gè)將「新擬物」設(shè)計(jì)投入大規(guī)模商用的操作系統(tǒng),這可視為「新擬物」在實(shí)用化道路上的首次勝利。值得一提的是,在 Big Sur 的 ” 外觀 ” 設(shè)置里,多了一項(xiàng)名為” 自適應(yīng)強(qiáng)調(diào)色 “的選項(xiàng)。蘋(píng)果將主題色的指定權(quán)留給開(kāi)發(fā)者,這是否暗示新一代 App 在光影上會(huì)有更豐富的效果?

兩萬(wàn)字超強(qiáng)干貨!設(shè)計(jì)師必看的圖標(biāo)設(shè)計(jì)指南

「新擬物」設(shè)計(jì)的精髓在于對(duì)光線的絕妙運(yùn)用。它把光效拿捏在 ” 扁平 ” 與 ” 擬物 ” 之間,進(jìn)而打造一種全新的視覺(jué)體驗(yàn)。

不同于傳統(tǒng)的擬物,「新擬物」雖然將符合物理規(guī)律的光影效果引入界面,但它所模擬的材質(zhì)是自然界不存在的。換句話說(shuō),「新擬物」是將真實(shí)光線用于虛擬對(duì)象,而 ” 擬物 ” 是還原實(shí)際物品在特定光照下的效果;

兩萬(wàn)字超強(qiáng)干貨!設(shè)計(jì)師必看的圖標(biāo)設(shè)計(jì)指南

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

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

產(chǎn)品應(yīng)用圖標(biāo)(也叫啟動(dòng)圖標(biāo)),是指產(chǎn)品「品牌標(biāo)識(shí)」中獨(dú)立的圖形,也是產(chǎn)品品牌的核心組成元素。作為產(chǎn)品所有視覺(jué)通信中必不可少的元素,其使用率非常高,所以該獨(dú)立圖形在設(shè)計(jì)中應(yīng)做到最簡(jiǎn)化。

一個(gè)小問(wèn)題:為什么iOS系統(tǒng)中圖標(biāo)形狀是統(tǒng)一的圓角矩形?

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

兩萬(wàn)字超強(qiáng)干貨!設(shè)計(jì)師必看的圖標(biāo)設(shè)計(jì)指南

△ iOSIcon gallery

而安卓應(yīng)用圖標(biāo)就沒(méi)那么規(guī)范,處于百花齊放的狀態(tài),各家廠商都在設(shè)計(jì)獨(dú)屬于自己的視覺(jué)語(yǔ)言。大家都不一樣,也就導(dǎo)致沒(méi)有個(gè)性之美。

兩萬(wàn)字超強(qiáng)干貨!設(shè)計(jì)師必看的圖標(biāo)設(shè)計(jì)指南

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

兩萬(wàn)字超強(qiáng)干貨!設(shè)計(jì)師必看的圖標(biāo)設(shè)計(jì)指南

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

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

1.  中文文字圖標(biāo)

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

單字

提取產(chǎn)品名稱中最具代表性的文字,通過(guò)對(duì)筆畫(huà)及整體骨架進(jìn)行字體設(shè)計(jì),以達(dá)到符合產(chǎn)品特性和視覺(jué)差異化的目的。其優(yōu)點(diǎn)是可以直截了當(dāng)?shù)膫鬟f產(chǎn)品信息,識(shí)別性強(qiáng)。

兩萬(wàn)字超強(qiáng)干貨!設(shè)計(jì)師必看的圖標(biāo)設(shè)計(jì)指南

多字

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

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

兩萬(wàn)字超強(qiáng)干貨!設(shè)計(jì)師必看的圖標(biāo)設(shè)計(jì)指南

字加圖形組合

文字加輔助圖形的組合,也是常見(jiàn)的產(chǎn)品圖標(biāo)設(shè)計(jì)方法,相比純文字圖標(biāo),顯得更加豐富有獨(dú)特的產(chǎn)品的氣質(zhì)和屬性。需要注意的是做好文字和輔助圖形間的平衡。

兩萬(wàn)字超強(qiáng)干貨!設(shè)計(jì)師必看的圖標(biāo)設(shè)計(jì)指南

2. 英文字母圖標(biāo)

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

單字母

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

兩萬(wàn)字超強(qiáng)干貨!設(shè)計(jì)師必看的圖標(biāo)設(shè)計(jì)指南

多字母

提取產(chǎn)品全稱或幾個(gè)單詞的首字母組合而成,形成獨(dú)有的產(chǎn)品簡(jiǎn)稱,方便用戶記憶。

兩萬(wàn)字超強(qiáng)干貨!設(shè)計(jì)師必看的圖標(biāo)設(shè)計(jì)指南

字母加圖形組合

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

兩萬(wàn)字超強(qiáng)干貨!設(shè)計(jì)師必看的圖標(biāo)設(shè)計(jì)指南

3. 數(shù)字圖標(biāo)

直接用數(shù)字做應(yīng)用圖標(biāo)的相對(duì)較少,但是數(shù)字識(shí)別性強(qiáng),易于傳播的特點(diǎn)。利用數(shù)字進(jìn)行設(shè)計(jì)能給人親和力。難點(diǎn)是怎樣與品牌形成強(qiáng)關(guān)聯(lián)性。

兩萬(wàn)字超強(qiáng)干貨!設(shè)計(jì)師必看的圖標(biāo)設(shè)計(jì)指南

4. 特殊符號(hào)圖標(biāo)

由于符號(hào)本身的含義會(huì)對(duì)產(chǎn)品屬性有一定限制,所以特殊符號(hào)在應(yīng)用圖標(biāo)的設(shè)計(jì)案例中相對(duì)較少。如“$”符號(hào)可代表與金錢有關(guān)聯(lián)性的產(chǎn)品,無(wú)法運(yùn)用在與此屬性無(wú)關(guān)的產(chǎn)品上。不過(guò)也正是由于自身屬性強(qiáng)的特點(diǎn),可以很好的詮釋關(guān)聯(lián)的產(chǎn)品屬性。

兩萬(wàn)字超強(qiáng)干貨!設(shè)計(jì)師必看的圖標(biāo)設(shè)計(jì)指南

除了中英文圖標(biāo),還有圖形類圖標(biāo)比較常見(jiàn)。這種類型的設(shè)計(jì)模式的優(yōu)點(diǎn)就是直觀醒目和簡(jiǎn)潔大方,視覺(jué)沖擊力強(qiáng)。常見(jiàn)的有以下幾種:

5. 幾何圖形

幾何圖形的設(shè)計(jì)模式給人簡(jiǎn)約、現(xiàn)代、個(gè)性等視覺(jué)感受,從單個(gè)具象圖形到復(fù)雜的空間感營(yíng)造,幾何圖形的表現(xiàn)形式非常豐富。不同的形狀給人的情感表達(dá)不同,如三角形給人傳達(dá)個(gè)性、穩(wěn)定、現(xiàn)代、時(shí)尚等,添加圓角后又會(huì)更加親民、可愛(ài)。我們可以結(jié)合產(chǎn)品特征,合理的選擇適合的形狀圖形進(jìn)行創(chuàng)意。此類型較考驗(yàn)設(shè)計(jì)師的圖形創(chuàng)意能力。

兩萬(wàn)字超強(qiáng)干貨!設(shè)計(jì)師必看的圖標(biāo)設(shè)計(jì)指南

6. 單雙形/剪影

單雙形是指應(yīng)用圖標(biāo)只展示單個(gè)或兩個(gè)的剪影圖形。通常有兩種設(shè)計(jì)方式,在深色背板上使圖形反白,背景可以是單色也可以是漸變色;在淺色的背板上讓圖形填充顏色,圖形可以是單色也可以是漸變色。這種設(shè)計(jì)模式的優(yōu)點(diǎn)是簡(jiǎn)潔明確,易于用戶在眾多的應(yīng)用圖標(biāo)陣列中快速找到目標(biāo)。

兩萬(wàn)字超強(qiáng)干貨!設(shè)計(jì)師必看的圖標(biāo)設(shè)計(jì)指南

7. 線形

線形的設(shè)計(jì)模式分為兩種設(shè)計(jì)方式,在深色的背板上讓圖標(biāo)反白,背景可以是單色也可以是漸變色;在淺色的背板上讓圖標(biāo)填充顏色,圖標(biāo)可以是單色也可以是漸變色,或是其他視覺(jué)效果。纖細(xì)的線框圖形傳遞出簡(jiǎn)潔輕快的氣質(zhì),適合于文藝、清新的應(yīng)用,在界面設(shè)計(jì)時(shí)保持這種干凈明快的風(fēng)格,才能與應(yīng)用圖標(biāo)設(shè)計(jì)表里如一。線性風(fēng)格一定注意不可太細(xì),如果做得太細(xì),在手機(jī)上看會(huì)非常尖銳,顯得不易點(diǎn)擊。例如airbnb,它的背景是一個(gè)微漸變,線性風(fēng)格曲線組成“A”,同時(shí)是一個(gè)小蜜蜂。

兩萬(wàn)字超強(qiáng)干貨!設(shè)計(jì)師必看的圖標(biāo)設(shè)計(jì)指南

8. 動(dòng)物圖形/剪影

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

兩萬(wàn)字超強(qiáng)干貨!設(shè)計(jì)師必看的圖標(biāo)設(shè)計(jì)指南

9. 卡通形象

卡通風(fēng)格的產(chǎn)品圖標(biāo)會(huì)讓用戶更有好感,一個(gè)可愛(ài)的卡通形象有助于加深用戶對(duì)產(chǎn)品的印象。很多決策者會(huì)認(rèn)為卡通是一種低齡的審美,這種想法其實(shí)是錯(cuò)誤的。卡通可以說(shuō)是一種各年齡層都能接受的風(fēng)格,例如Bear,它的卡通形象是一頭潔白的北極熊,簡(jiǎn)潔的形象設(shè)計(jì)與產(chǎn)品的閱讀體驗(yàn)一致。

兩萬(wàn)字超強(qiáng)干貨!設(shè)計(jì)師必看的圖標(biāo)設(shè)計(jì)指南

10. 正負(fù)形

以正形為底突出負(fù)形特征,以負(fù)形表達(dá)產(chǎn)品屬性,傳遞產(chǎn)品信息。例如NPR One,圖標(biāo)中的負(fù)形圖形是對(duì)話氣泡,告訴我們這是一個(gè)媒體或社交的應(yīng)用,而正形圖形強(qiáng)調(diào)產(chǎn)品氣質(zhì)。

兩萬(wàn)字超強(qiáng)干貨!設(shè)計(jì)師必看的圖標(biāo)設(shè)計(jì)指南

11. 白色漸變

白色漸變的設(shè)計(jì)模式與透明白色相似,都是通過(guò)白色不透明度來(lái)構(gòu)建出圖形的立體控件感,它比單純的剪影圖形更加具有質(zhì)感,這種質(zhì)感帶給了我們視覺(jué)上的享受。例如印象筆記·圈點(diǎn),它是一只白色的鵝毛形象,垂直的線型漸變使鵝毛富有了生命力一般,顯得更加輕柔。

兩萬(wàn)字超強(qiáng)干貨!設(shè)計(jì)師必看的圖標(biāo)設(shè)計(jì)指南

12. 彩色漸變

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

兩萬(wàn)字超強(qiáng)干貨!設(shè)計(jì)師必看的圖標(biāo)設(shè)計(jì)指南

13. 無(wú)

無(wú),即沒(méi)有設(shè)計(jì)。除了背板什么也沒(méi)有。雖然這類設(shè)計(jì)模式比較獨(dú)特,但我們并不鼓勵(lì),因?yàn)橛脩艉茈y從一個(gè)顏色上得到有用的信息。例如“黃油相機(jī)”的圖標(biāo)設(shè)計(jì)成一塊黃油的樣子已深入人心了。

兩萬(wàn)字超強(qiáng)干貨!設(shè)計(jì)師必看的圖標(biāo)設(shè)計(jì)指南

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

打開(kāi)率是一款移動(dòng)應(yīng)用的重要數(shù)據(jù),應(yīng)用只有被打開(kāi)才有它的運(yùn)營(yíng)價(jià)值。在我們手機(jī)里安裝了許許多多的應(yīng)用,除了一些我們每天必須使用的應(yīng)用如微信,其他大多數(shù)的應(yīng)用在沒(méi)有使用場(chǎng)景時(shí)很難想到去打開(kāi)他們。因此,這些應(yīng)用如何在手機(jī)屏幕上吸引用戶的注意,鼓勵(lì)用戶打開(kāi)顯得非常重要。于是在應(yīng)用圖標(biāo)上做文章就顯得很有必要,常見(jiàn)的設(shè)計(jì)手法有:

  • 品牌傳播:在游戲領(lǐng)域比較常見(jiàn),在應(yīng)用圖標(biāo)上打上品牌的旗號(hào)就能或者用戶的注意;
  • 營(yíng)銷事件:將營(yíng)銷事件(例如雙11)展示在應(yīng)用圖標(biāo)上,折扣、促銷等都能吸引眼球;
  • 核心賣點(diǎn):將核心賣點(diǎn)出現(xiàn)在應(yīng)用圖標(biāo)上,引起用戶注意,從而提高應(yīng)用被打開(kāi)的頻率;
  • 節(jié)日氛圍:節(jié)日通常伴隨著消費(fèi),因此電商類應(yīng)用最注重節(jié)日氛圍的主題設(shè)計(jì),每年春節(jié)期間桌面圖標(biāo)幾乎一片紅,非常有節(jié)日氣氛;

兩萬(wàn)字超強(qiáng)干貨!設(shè)計(jì)師必看的圖標(biāo)設(shè)計(jì)指南

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

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

在設(shè)計(jì)模板還沒(méi)有如今這么發(fā)達(dá)時(shí),設(shè)計(jì)師需要設(shè)計(jì)啟動(dòng)圖標(biāo)(1024x1024px)之后按照程序員的要求切出幾十個(gè)不同尺寸的圖標(biāo)。比如,在手機(jī)中@3x情況下桌面圖標(biāo)尺寸為180x180px,在@2x情況下為120x120px;在應(yīng)用商店圖標(biāo)需要使用的尺寸是1024x1024px;這個(gè)工作太煩人了,好在現(xiàn)在我們只需要專注在啟動(dòng)圖標(biāo)設(shè)計(jì)本身上了。在蘋(píng)果給我們的這套資源中,有 Template-AppIcons-iOS 這個(gè)文件。打開(kāi)這個(gè)文件,用我們自己設(shè)計(jì)的啟動(dòng)圖標(biāo)替換掉智能對(duì)象里的內(nèi)容,你會(huì)發(fā)現(xiàn)所有尺寸的圖標(biāo)都變成了我們的圖標(biāo)。iOS的圓角圖標(biāo)并不是標(biāo)準(zhǔn)的圓角矩形,而是某種連續(xù)曲線。

兩萬(wàn)字超強(qiáng)干貨!設(shè)計(jì)師必看的圖標(biāo)設(shè)計(jì)指南

我們把兩個(gè)圓角曲線放大重疊后進(jìn)行對(duì)比,其中灰色線框?yàn)闃?biāo)準(zhǔn)圓角矩形繪制的圓角,紅色為iOS平滑圓角,它與圓角矩形擁有相同的對(duì)角線錨點(diǎn),區(qū)別在于其曲線稍微向中心收緊。

兩萬(wàn)字超強(qiáng)干貨!設(shè)計(jì)師必看的圖標(biāo)設(shè)計(jì)指南

事實(shí)上,我們很難在Retina屏幕上區(qū)分這么細(xì)微的差別,因此設(shè)計(jì)師在繪制iOS應(yīng)用圖標(biāo)時(shí)不必過(guò)分糾結(jié)它的圓角,直接繪制成直角矩形交給開(kāi)發(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ì)師提供給程序員的同樣是直角矩形,然后程序員通過(guò)代碼進(jìn)行切割使其變成圓角圖標(biāo)。

3. iOS應(yīng)用圖標(biāo)設(shè)計(jì)流程

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

尋找隱喻

隱喻是在彼類事物的暗示之下感知、體驗(yàn)、想象、理解、談?wù)摯祟愂挛锏男睦硇袨?、語(yǔ)言行為和文化行為,即人們看到某樣?xùn)|西或聽(tīng)到某件事情能夠馬上在大腦中形成聯(lián)想。例如說(shuō)到攝影,馬上就能想到相機(jī)、快門、閃光燈、暗房等。然后通過(guò)這些聯(lián)想詞,去找一些氣質(zhì)相符的圖片制作情緒版,通過(guò)情緒版可以感受到產(chǎn)品的調(diào)性,然后從中提取一些形狀和色彩作為產(chǎn)品圖標(biāo)的主要造型。

兩萬(wàn)字超強(qiáng)干貨!設(shè)計(jì)師必看的圖標(biāo)設(shè)計(jì)指南

競(jìng)品分析

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

兩萬(wàn)字超強(qiáng)干貨!設(shè)計(jì)師必看的圖標(biāo)設(shè)計(jì)指南

提取關(guān)鍵詞

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

兩萬(wàn)字超強(qiáng)干貨!設(shè)計(jì)師必看的圖標(biāo)設(shè)計(jì)指南

抽象圖形

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

兩萬(wàn)字超強(qiáng)干貨!設(shè)計(jì)師必看的圖標(biāo)設(shè)計(jì)指南

圖標(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)。

兩萬(wàn)字超強(qiáng)干貨!設(shè)計(jì)師必看的圖標(biāo)設(shè)計(jì)指南

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

通過(guò)上面圖形組合已基本完成應(yīng)用圖標(biāo)的設(shè)計(jì),接下來(lái)我們還應(yīng)從顏色、質(zhì)感、背板等著手豐富圖形的細(xì)節(jié),建立起應(yīng)用的產(chǎn)品氣質(zhì)。“影記”作為攝影師分享佳作平臺(tái),攝影師們用的器材顏色大多以黑色為主,因此酷酷的黑色更適合作為應(yīng)用的主色。白色的信號(hào)燈過(guò)于普通,使用相機(jī)本身發(fā)出的橘紅色燈光作為信號(hào)燈的顏色,使其更加具有動(dòng)感和活力。整體像「消息氣泡」的造型暗示可以在這里進(jìn)行攝影交流。

兩萬(wàn)字超強(qiáng)干貨!設(shè)計(jì)師必看的圖標(biāo)設(shè)計(jì)指南

多場(chǎng)景測(cè)試

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

兩萬(wàn)字超強(qiáng)干貨!設(shè)計(jì)師必看的圖標(biāo)設(shè)計(jì)指南

△ 注:上圖非實(shí)際大小,僅表明不同分辨率下的比例關(guān)系

此外,應(yīng)用圖標(biāo)還會(huì)以不同的分辨率出現(xiàn)在不同場(chǎng)景中,例如在iPhone 8plus上需@3x(120px)的圖,而在iPhone7的設(shè)置頁(yè)需要58px的圖,就需要將120px的圖縮小。將大圖縮小成小圖時(shí),一些細(xì)節(jié)就會(huì)丟失,使畫(huà)面變得模糊,因此設(shè)計(jì)師應(yīng)對(duì)小尺寸圖標(biāo)進(jìn)行細(xì)微調(diào)整,去除不必要的裝飾元素,以確保應(yīng)用圖標(biāo)在小分辨率應(yīng)用場(chǎng)景下也能保持清晰的識(shí)別度。

兩萬(wàn)字超強(qiáng)干貨!設(shè)計(jì)師必看的圖標(biāo)設(shè)計(jì)指南

功能圖標(biāo)的設(shè)計(jì)規(guī)范

除了產(chǎn)品圖標(biāo),還有一種圖標(biāo)被稱為功能(或系統(tǒng))圖標(biāo),功能圖標(biāo)指的是擔(dān)負(fù)一定功能和含義的圖形,一般來(lái)說(shuō)需要像文字一般地被人迅速理解,所以表達(dá)方式上不適合特別復(fù)雜,如微信底部四個(gè)系統(tǒng)圖標(biāo)就使用了比較簡(jiǎn)潔的線性風(fēng)格。

功能圖標(biāo)在UI設(shè)計(jì)中占據(jù)非常重要的作用,幾乎存在于每一個(gè)應(yīng)用界面中,無(wú)論是在導(dǎo)航欄、工具欄或標(biāo)簽欄,還是在首頁(yè)、詳情頁(yè)或個(gè)人中心頁(yè),都隨處可見(jiàn)功能圖標(biāo)的身影。功能圖標(biāo)具有明確的表意功能,其作用在于替代文字或輔助文字來(lái)指引用戶進(jìn)行快速導(dǎo)航,它具有圖形化的符號(hào),比文字更加直觀,符合普羅大眾的認(rèn)知習(xí)慣,有助于用戶形成記憶思維,提高應(yīng)用的易用性。同時(shí)設(shè)計(jì)精致、風(fēng)格統(tǒng)一的功能圖標(biāo)提升了產(chǎn)品視覺(jué)效果,不但給用戶帶來(lái)視覺(jué)上的愉悅感,還帶來(lái)了良好一致的使用體驗(yàn)。

1. 圖標(biāo)的規(guī)范

圖標(biāo)是良好設(shè)計(jì)系統(tǒng)的基本組成部分,對(duì)營(yíng)銷材料非常有幫助。他們是插畫(huà)內(nèi)容的基礎(chǔ)構(gòu)建塊,但他們也具有很高的技術(shù)性。因此科學(xué)嚴(yán)謹(jǐn)?shù)脑O(shè)計(jì)規(guī)范能幫助我們?cè)O(shè)計(jì)精致、風(fēng)格統(tǒng)一的圖標(biāo)。

兩萬(wàn)字超強(qiáng)干貨!設(shè)計(jì)師必看的圖標(biāo)設(shè)計(jì)指南

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ù)了,這個(gè)數(shù)值可以整除2、3、4,適配@1x和@2x的屏幕,界面中通常使用的圖標(biāo)尺寸24*24px、48*48px。這里建議用48px做為常規(guī)圖標(biāo)設(shè)計(jì)尺寸。

兩萬(wàn)字超強(qiáng)干貨!設(shè)計(jì)師必看的圖標(biāo)設(shè)計(jì)指南

通常我們只需要選擇一個(gè)通用的尺寸來(lái)繪制,然后讓開(kāi)發(fā)人員根據(jù)倍數(shù)調(diào)整可能需要的尺寸即可,這樣就不用一遍又一遍的去繪制不同大小的相同圖標(biāo)了。

不過(guò)當(dāng)我們的圖標(biāo)涉及一些復(fù)雜的細(xì)節(jié)時(shí),還是需要根據(jù)尺寸大小單獨(dú)繪制。比如我們的系統(tǒng)圖標(biāo)可能是24px,但是營(yíng)銷圖標(biāo)是80px,兩者的使用差別會(huì)很大,那么我們就需要為那些較大的尺寸添加一些細(xì)節(jié)。

兩萬(wàn)字超強(qiáng)干貨!設(shè)計(jì)師必看的圖標(biāo)設(shè)計(jì)指南

知識(shí)點(diǎn):

這里建議從最大的尺寸開(kāi)始,然后依次繪制小一點(diǎn)的。因?yàn)閯h除和簡(jiǎn)化細(xì)節(jié)要比添加容易得多,也能的保留圖標(biāo)原始狀態(tài)。

圖標(biāo)繪制基于48x48px畫(huà)布繪制的線性圖標(biāo),線寬默認(rèn)為4px,不同場(chǎng)景縮放比例使用:

  • 圖標(biāo)為32x32px時(shí),線寬3px(基準(zhǔn)線寬)
  • 圖標(biāo)為24x24px時(shí),線寬2px(基準(zhǔn)線寬)
  • 圖標(biāo)為16x16px時(shí),線寬2px(基準(zhǔn)線寬)
  • ……

如果你要繪制描邊圖標(biāo),那么需要保證所有的筆畫(huà)都是相同的粗細(xì),并且筆畫(huà)之間的間距不要比筆畫(huà)本身更細(xì)。

兩萬(wàn)字超強(qiáng)干貨!設(shè)計(jì)師必看的圖標(biāo)設(shè)計(jì)指南

3. 圖標(biāo)的keyline

圖標(biāo)網(wǎng)格為圖形元素的一致但靈活的定位建立了明確的規(guī)則,keyline是網(wǎng)格的基礎(chǔ)-。通過(guò)使用這些核心形狀作為知道,你可以跨系統(tǒng)保持一致的視覺(jué)比例。

兩萬(wàn)字超強(qiáng)干貨!設(shè)計(jì)師必看的圖標(biāo)設(shè)計(jì)指南

4. 圖標(biāo)關(guān)鍵圖形

圖標(biāo)柵格用于圖標(biāo)元素繪制的參考并幫助建立清晰的內(nèi)容輪廓邊界,關(guān)鍵線有助于促進(jìn)圖標(biāo)統(tǒng)一性,簡(jiǎn)化設(shè)計(jì)過(guò)程中比例調(diào)整成本,繪制小圖形需要參照小正方形的keyline。

兩萬(wàn)字超強(qiáng)干貨!設(shè)計(jì)師必看的圖標(biāo)設(shè)計(jì)指南

5. 圖標(biāo)的拐角

兩萬(wàn)字超強(qiáng)干貨!設(shè)計(jì)師必看的圖標(biāo)設(shè)計(jì)指南

直角拐角:當(dāng)基礎(chǔ)圖形為滿容器正方形時(shí),建議使用3X圓角,當(dāng)基礎(chǔ)圖形為滿高(寬)矩形時(shí),建議使用2X圓角。當(dāng)基礎(chǔ)圖形為較?。ㄐ∮?/2寬高)矩形時(shí),建議使用1X圓角。

兩萬(wàn)字超強(qiáng)干貨!設(shè)計(jì)師必看的圖標(biāo)設(shè)計(jì)指南

非直角拐角:根據(jù)圖標(biāo)場(chǎng)景,通常情況下無(wú)論角度,默認(rèn)均為1X圓角;特殊弧度的曲線“拐角”情況除外,根據(jù)圖標(biāo)設(shè)計(jì)需要單獨(dú)考慮。

兩萬(wàn)字超強(qiáng)干貨!設(shè)計(jì)師必看的圖標(biāo)設(shè)計(jì)指南

6. 圖標(biāo)區(qū)域 封閉和非封閉

封閉區(qū)域,有閉合曲線構(gòu)成的為封閉區(qū)域,可以進(jìn)行獨(dú)立顏色填充;

非封閉區(qū)域,由非閉合曲線構(gòu)成的非封閉區(qū)域,原則上是不能進(jìn)行獨(dú)立的顏色填充;

兩萬(wàn)字超強(qiáng)干貨!設(shè)計(jì)師必看的圖標(biāo)設(shè)計(jì)指南

封閉區(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í)建議用圖形繪制,不要用線;

兩萬(wàn)字超強(qiáng)干貨!設(shè)計(jì)師必看的圖標(biāo)設(shè)計(jì)指南

傾斜角度

根據(jù)像素的網(wǎng)格線來(lái)設(shè)置一條線的起點(diǎn)和終點(diǎn),會(huì)讓你的圖標(biāo)看起來(lái)更清晰。圖標(biāo)中的傾斜角度應(yīng)為45的倍數(shù),保持與keyline中的對(duì)角線或十字垂直相交線保持平行關(guān)系,若是矩形外框,傾斜角度也可以與矩形的對(duì)角線或十字垂直相交線保持平行關(guān)系。應(yīng)避免用13.7°,81°等這些奇怪的數(shù)值。

兩萬(wàn)字超強(qiáng)干貨!設(shè)計(jì)師必看的圖標(biāo)設(shè)計(jì)指南

線段和端點(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畫(huà)布繪制的線性圖標(biāo),線寬默認(rèn)為4px,無(wú)論直線和曲線在任何時(shí)候線寬都應(yīng)均保持一致。

兩萬(wàn)字超強(qiáng)干貨!設(shè)計(jì)師必看的圖標(biāo)設(shè)計(jì)指南

圖標(biāo)斷口與間距

內(nèi)部結(jié)構(gòu)與外框的間距不得不小于線寬,內(nèi)部元素之間的間距不得不小于線寬的1/2px。

外形框的端口尺寸關(guān)系:4px、8px、12px,建議尺寸為4的倍數(shù)。

兩萬(wàn)字超強(qiáng)干貨!設(shè)計(jì)師必看的圖標(biāo)設(shè)計(jì)指南

圖標(biāo)風(fēng)格變換

圖標(biāo)在特定規(guī)律下允許不同風(fēng)格之間的變換,分別為線性風(fēng)格(默認(rèn))、填充風(fēng)格、混合風(fēng)格、多色混合風(fēng)格。

兩萬(wàn)字超強(qiáng)干貨!設(shè)計(jì)師必看的圖標(biāo)設(shè)計(jì)指南

單雙像素描邊

如果為圖標(biāo)設(shè)置1像素的邊框,邊框應(yīng)該使用外部或內(nèi)部的描邊樣式,但是不建議居中描邊樣式,居中描邊的1px邊框,雖然在放大它們的時(shí)候,它們看起來(lái)很清晰。但在100%比例大小顯示的時(shí)候,它們會(huì)模糊。雙數(shù)用居中描邊,單數(shù)用外描邊,所有錨點(diǎn)要與網(wǎng)格對(duì)齊不能出現(xiàn)偏移。

兩萬(wàn)字超強(qiáng)干貨!設(shè)計(jì)師必看的圖標(biāo)設(shè)計(jì)指南

線段閉合

所有線段結(jié)合處應(yīng)為閉合狀態(tài),避免錯(cuò)位出現(xiàn)。

兩萬(wàn)字超強(qiáng)干貨!設(shè)計(jì)師必看的圖標(biāo)設(shè)計(jì)指南

統(tǒng)一透視

如果圖標(biāo)有透視需求的話,就要統(tǒng)一透視角度,例如圖標(biāo)透視方向朝左,那就統(tǒng)一所有圖標(biāo)的透視角度都朝左邊。

兩萬(wàn)字超強(qiáng)干貨!設(shè)計(jì)師必看的圖標(biāo)設(shè)計(jì)指南

8. 視覺(jué)柵格

除了像素柵格,還有視覺(jué)柵格。視覺(jué)柵格可以幫助我們找出圖標(biāo)的中心在哪里,以及人眼能感知到它有多大。圓形和弧形物體看起來(lái)會(huì)比正方形更小。因此我們應(yīng)該在繪制圖標(biāo)時(shí)設(shè)定一個(gè)固定大小的容器,這樣它們?cè)趯?dǎo)出時(shí)就都是相同的尺寸了。添加內(nèi)邊距可以讓圖標(biāo)在視覺(jué)上看起來(lái)更加平衡,避免以后開(kāi)發(fā)時(shí)還需要重新調(diào)整。

兩萬(wàn)字超強(qiáng)干貨!設(shè)計(jì)師必看的圖標(biāo)設(shè)計(jì)指南

9. 視覺(jué)重量

繪制圖標(biāo)不光要滿足物理上大小統(tǒng)一,還要實(shí)現(xiàn)視覺(jué)上大小統(tǒng)一。設(shè)計(jì)師要懂得調(diào)節(jié)圖標(biāo)大小以避開(kāi)視覺(jué)上的覺(jué)錯(cuò)。

UI界面的圖標(biāo)通??梢越频目醋鲆韵碌幕靖袷街唬簷M向矩形,縱向矩形,對(duì)角矩形,圓形,三角形,正方形。 如果把它們做成高斯模糊效果,你就會(huì)發(fā)現(xiàn)它們具有相同的視覺(jué)重量,因?yàn)樗鼈冏兂苫蚨嗷蛏傧嗤陌唿c(diǎn)效果。

兩萬(wàn)字超強(qiáng)干貨!設(shè)計(jì)師必看的圖標(biāo)設(shè)計(jì)指南

根據(jù)圖標(biāo)形狀,將它們放在相應(yīng)的框架中。你就會(huì)發(fā)現(xiàn),方形圖標(biāo)比三角形或細(xì)長(zhǎng)圖標(biāo)更緊湊。

10. 圖標(biāo)繪制細(xì)節(jié)

清晰是圖標(biāo)的基本要素,在sketch中,參數(shù)不要有小數(shù)點(diǎn),讓圖標(biāo)占滿像素網(wǎng)格。因?yàn)橛?jì)算機(jī)不能識(shí)別小數(shù)點(diǎn),導(dǎo)出圖標(biāo)時(shí)計(jì)算機(jī)會(huì)把不能識(shí)別參數(shù)的部分拉伸填滿像素網(wǎng)格,導(dǎo)致圖標(biāo)出現(xiàn)虛邊。

兩萬(wàn)字超強(qiáng)干貨!設(shè)計(jì)師必看的圖標(biāo)設(shè)計(jì)指南

通常從一套圖標(biāo)中最復(fù)雜的那個(gè)開(kāi)始,因?yàn)樗鼤?huì)幫助我們定義相同的視覺(jué)重量,讓所有的圖標(biāo)視覺(jué)重量保持一致。因?yàn)楫?dāng)圖標(biāo)具有不同的細(xì)節(jié)層次時(shí),更復(fù)雜的圖標(biāo)會(huì)吸引用戶更多的注意力,而且視覺(jué)上看上去更重。

兩萬(wàn)字超強(qiáng)干貨!設(shè)計(jì)師必看的圖標(biāo)設(shè)計(jì)指南

11. 圖標(biāo)的顏色

默認(rèn)顏色:如果是功能圖標(biāo),那么最好只使用一種顏色:黑色。否則你的組件可能變得過(guò)于復(fù)雜,不利于和其他設(shè)計(jì)師協(xié)作。而對(duì)于營(yíng)銷圖標(biāo),出于品牌宣傳的目的,你可能會(huì)想要使用兩種顏色,個(gè)人認(rèn)為圖標(biāo)最好是單一顏色的,3種或3種以上顏色的東西都是插圖,而不是圖標(biāo)。

選擇狀態(tài)顏色:未選擇圖標(biāo)顏色為#000000,透明度為87%;未激活圖標(biāo)顏色為#000000,透明度為54%;禁用圖標(biāo)顏色為#000000,透明度為38%。

兩萬(wàn)字超強(qiáng)干貨!設(shè)計(jì)師必看的圖標(biāo)設(shè)計(jì)指南

12. 功能圖標(biāo)的風(fēng)格

功能圖標(biāo)在UI設(shè)計(jì)中占據(jù)非常重要的作用,幾乎存在于每一個(gè)應(yīng)用界面中,無(wú)論是在導(dǎo)航欄、工具欄或標(biāo)簽欄,還是在首頁(yè)、詳情頁(yè)、或個(gè)人中心頁(yè),都隨處可見(jiàn)功能圖標(biāo)的身影。功能圖標(biāo)具有明確的表意功能,起作用在于替代文字或輔助文字來(lái)指引用戶進(jìn)行快速導(dǎo)航,它具有圖形化的符號(hào),比文字更加直觀,符合普羅大眾的認(rèn)知習(xí)慣,有助于用戶形成記憶思維,提高應(yīng)用的易用性。同時(shí),設(shè)計(jì)精美、風(fēng)格統(tǒng)一的功能圖標(biāo)提升了產(chǎn)品視覺(jué)效果,不但給用戶帶來(lái)視覺(jué)上的愉悅感,還帶來(lái)良好一致的使用體驗(yàn)。

常見(jià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)」;

兩萬(wàn)字超強(qiáng)干貨!設(shè)計(jì)師必看的圖標(biāo)設(shè)計(jì)指南

線性圖標(biāo)

線性圖標(biāo)是通過(guò)線條來(lái)表現(xiàn)物體的輪廓,它比面形圖標(biāo)更能塑造優(yōu)美的外觀,且作為貫穿圖標(biāo)繪制的線條本身就是一種設(shè)計(jì)語(yǔ)言,因此繪制整套線性圖標(biāo)會(huì)更加統(tǒng)一,具有整體感。例如twitter和微信底部的tab圖標(biāo)等。在一個(gè)場(chǎng)景下的幾個(gè)同等重要的圖標(biāo),如果線條粗細(xì)不一致,會(huì)給人一種權(quán)重上存在差異的感覺(jué)。所以,在繪制線型圖標(biāo)時(shí),通常會(huì)使用統(tǒng)一粗細(xì)的線條。

兩萬(wàn)字超強(qiáng)干貨!設(shè)計(jì)師必看的圖標(biāo)設(shè)計(jì)指南

線性圖標(biāo)具有辨識(shí)度高,清晰,簡(jiǎn)約易識(shí)別等優(yōu)點(diǎn),線性圖標(biāo)不會(huì)對(duì)頁(yè)面造成太多的視覺(jué)干擾。缺點(diǎn)是:線性圖標(biāo)的創(chuàng)作空間較少,太復(fù)雜的線性圖標(biāo)對(duì)識(shí)別性產(chǎn)生較大的困擾。

兩萬(wàn)字超強(qiáng)干貨!設(shè)計(jì)師必看的圖標(biāo)設(shè)計(jì)指南

常用的App圖標(biāo)設(shè)計(jì)線的粗細(xì)一般有2PX或者3PX,不同的線條粗細(xì) ICON 所帶來(lái)的視覺(jué)感受也不同,細(xì)線顯得精致,粗線視覺(jué)面積大,顯得厚重。圓角粗線條的 ICON 顯得飽滿而可愛(ài),個(gè)別 App 的底部標(biāo)簽欄圖標(biāo)采用粗線條設(shè)計(jì),但粗線條的 ICON 圖形較為極簡(jiǎn)才適用。

線性圖標(biāo)根據(jù)樣式還可以分為:雙色線性圖標(biāo)、線面填充圖標(biāo)、線性漸變圖標(biāo)。

兩萬(wàn)字超強(qiáng)干貨!設(shè)計(jì)師必看的圖標(biāo)設(shè)計(jì)指南

線性圖標(biāo)使用場(chǎng)景

在iOS所有原生應(yīng)用的導(dǎo)航欄和工具欄都采用了2px線框的圖標(biāo)設(shè)計(jì),很多APP產(chǎn)品的標(biāo)簽欄都選擇用線性風(fēng)格的圖標(biāo)設(shè)計(jì)。無(wú)疑,線性圖標(biāo)可以減少視覺(jué)干擾,讓用戶集中在產(chǎn)品核心功能上,同時(shí)輕量化的視覺(jué)語(yǔ)言也與扁平化的設(shè)計(jì)風(fēng)格更為融合。它比面形圖標(biāo)更能塑造優(yōu)美的外觀,且線條本身就是一種設(shè)計(jì)語(yǔ)言,因此繪制整套線性圖標(biāo)會(huì)更加統(tǒng)一,具有整體感。

兩萬(wàn)字超強(qiáng)干貨!設(shè)計(jì)師必看的圖標(biāo)設(shè)計(jì)指南

通常,在UI設(shè)計(jì)中,線性圖標(biāo)很少和背板同時(shí)存在,因?yàn)榫€條的圖形視覺(jué)表現(xiàn)力較弱,容易埋沒(méi)在背景色中,但也不是必須的,如果掌握好一定的規(guī)則,一些簡(jiǎn)單的線性圖標(biāo)和背板的組合也會(huì)很協(xié)調(diào)。

面形圖標(biāo)

面形圖標(biāo)是以面為主要表現(xiàn)形式的圖標(biāo),通過(guò)線或者面去切割基礎(chǔ)輪廓面,通過(guò)分型來(lái)塑造圖標(biāo)的體積感。不同的切割手法造成了面性圖標(biāo)設(shè)計(jì)感的差別。在「微信」底部標(biāo)簽欄中,未選中的圖標(biāo)是線性圖標(biāo),而選中的圖標(biāo)則是面形圖標(biāo),同時(shí)顏色會(huì)變成微信的品牌綠色再次暗示用戶選中狀態(tài)。面形圖標(biāo)占用的面積要比線性圖標(biāo)多,所以更加顯眼。實(shí)際上,蘋(píng)果在新的設(shè)計(jì)規(guī)范中也建議開(kāi)發(fā)者在APP底部標(biāo)簽欄中全部使用面形圖標(biāo),是否處于點(diǎn)擊態(tài)通過(guò)改變填充圖標(biāo)的顏色進(jìn)行區(qū)別。這是因?yàn)樘畛鋱D標(biāo)看上去像可點(diǎn)擊的。

兩萬(wàn)字超強(qiáng)干貨!設(shè)計(jì)師必看的圖標(biāo)設(shè)計(jì)指南

面形圖標(biāo)具有表意能力強(qiáng),細(xì)節(jié)豐富,情緒感強(qiáng),視覺(jué)突出,創(chuàng)作空間大等優(yōu)點(diǎn)。面性圖標(biāo)可以讓用戶迅速定位圖標(biāo)位置,預(yù)知點(diǎn)擊后的狀態(tài)。但是面性圖標(biāo)在頁(yè)面中不可過(guò)多出現(xiàn),否則會(huì)造成頁(yè)面臃腫,難分主次,用戶視覺(jué)疲勞。

面性圖標(biāo)根據(jù)不同的配色樣式可以分為:?jiǎn)紊柡投忍畛鋱D標(biāo),純色漸變圖標(biāo)和多色漸變圖標(biāo)。

兩萬(wàn)字超強(qiáng)干貨!設(shè)計(jì)師必看的圖標(biāo)設(shè)計(jì)指南

基于最基本的「線性圖標(biāo)」和「面型圖標(biāo)」,通過(guò)不同的形態(tài)和風(fēng)格的組合,再結(jié)合豐富的 表現(xiàn)手法,就可以設(shè)計(jì)出形形色色的圖標(biāo)風(fēng)格了。比如:不同粗細(xì)線條線性圖標(biāo)的組合,或者面面組合,或者線面組合。大家在設(shè)計(jì)圖標(biāo)的時(shí)候,需要根據(jù)自己的產(chǎn)品特征、受眾和使用場(chǎng)景,去選擇適合自己的表現(xiàn)形式。

面形圖標(biāo)使用場(chǎng)景

面形圖標(biāo)具有廣泛適用性,通常在運(yùn)動(dòng)、時(shí)尚類應(yīng)用的標(biāo)簽欄出現(xiàn)。由于面形圖標(biāo)的視覺(jué)占比最大化,具有強(qiáng)烈的視覺(jué)表現(xiàn)力。

兩萬(wàn)字超強(qiáng)干貨!設(shè)計(jì)師必看的圖標(biāo)設(shè)計(jì)指南

功能入口的面形圖標(biāo)通常分為反白和正形兩種類型。反白即在彩色背板上顯示白色的圖標(biāo),正形即圖標(biāo)直接填充色彩且無(wú)背板。在帶有背板的圖標(biāo)設(shè)計(jì)時(shí)要注意圖標(biāo)與背板的尺寸比例,雖沒(méi)有嚴(yán)格的繪制標(biāo)準(zhǔn),但從整體視覺(jué)效果上考慮,圖標(biāo)尺寸最好不低于背板直徑但1/2,最大不超過(guò)背板直徑的0.618(黃金比例),同時(shí)還要考慮所有圖標(biāo)的視差一致。

兩萬(wàn)字超強(qiáng)干貨!設(shè)計(jì)師必看的圖標(biāo)設(shè)計(jì)指南

13. 扁平圖標(biāo)的使用場(chǎng)景

扁平化圖標(biāo)實(shí)際上是線性圖標(biāo)和面形圖標(biāo)的一種組合形式,這種類似插畫(huà)感覺(jué)的圖形一開(kāi)始多用于引導(dǎo)頁(yè)、空狀態(tài)也的情感化設(shè)計(jì),后來(lái)逐漸在標(biāo)簽欄、首頁(yè)主要功能入口也出現(xiàn)了扁平化圖標(biāo)的身影。精致的扁平化圖標(biāo)令人賞心悅目,拉近了與用戶之間的距離,從而建立起良好的用戶印象。

兩萬(wàn)字超強(qiáng)干貨!設(shè)計(jì)師必看的圖標(biāo)設(shè)計(jì)指南

14. 品類區(qū)圖標(biāo)

品類區(qū)圖標(biāo)的衛(wèi)視通常是位于搜索框、banner之下(也俗稱“金剛區(qū)”),而且品類區(qū)區(qū)域通常會(huì)占屏幕22%-25%不等,且位于屏幕頭部,從用戶閱讀屏幕內(nèi)容的視覺(jué)流來(lái)說(shuō)位置至關(guān)重要,而且是聚合各類子版塊的入口,為各個(gè)子版塊分發(fā)內(nèi)容引導(dǎo)流量。所以其重要性不言而喻,產(chǎn)品要讓用戶通過(guò)不同類型展示方式的組件找到相應(yīng)的功能,而圖標(biāo)具備精煉高度概括內(nèi)容的特性,識(shí)別度也大于文字,所以「金剛區(qū)」的圖標(biāo)設(shè)計(jì)通常以圖標(biāo)+說(shuō)明文字為主。

兩萬(wàn)字超強(qiáng)干貨!設(shè)計(jì)師必看的圖標(biāo)設(shè)計(jì)指南

常見(jiàn)的設(shè)計(jì)手法有:圓形底板+45度漸變+白色面形+微投影;45度漸變+扁平圖標(biāo)+微投影;簡(jiǎn)單線性;45度漸變+不透明度+面形圖標(biāo)。

兩萬(wàn)字超強(qiáng)干貨!設(shè)計(jì)師必看的圖標(biāo)設(shè)計(jì)指南

15. 文字圖標(biāo)

文字圖標(biāo)是指用文字直接表示特定含義的圖標(biāo)符號(hào)。由于文字本身就是一種演化而來(lái)的符號(hào),英文的首字母或者詞語(yǔ)關(guān)鍵字本身也具備很強(qiáng)的信息濃縮性,因此在某些場(chǎng)景下,采用文字或字符作為圖標(biāo),是一種很不錯(cuò)的表現(xiàn)手法。

兩萬(wàn)字超強(qiáng)干貨!設(shè)計(jì)師必看的圖標(biāo)設(shè)計(jì)指南

比如「提示」圖標(biāo),使用一個(gè)圓圈包裹一個(gè)英文字母「i」,意為 information,表示「注釋信息」的含義;比如停車場(chǎng)直接使用「Parking」中的首字母 「P」,這些都是比較約定俗稱的使用方式。還有一些場(chǎng)景,很難用象形或者表意的方式進(jìn)行表達(dá),那么就很適合使用文字符號(hào),例如京東/天貓某些商品具備「正品保證」的標(biāo)識(shí),這個(gè)概念太抽象了,很難用象形去概括,創(chuàng)造新的表意符號(hào)又很難被大眾接受,這時(shí)「正」字就很適合作為這個(gè)場(chǎng)景特定的圖標(biāo)符號(hào),作為針對(duì)中國(guó)用戶群體的產(chǎn)品圖標(biāo),簡(jiǎn)單粗暴且有效。

知識(shí)點(diǎn):

如果可能的話,盡量避免在圖標(biāo)中使用文字。因?yàn)閳D標(biāo)應(yīng)該是全球性的。如果你確實(shí)需要文字圖標(biāo)(例如貨幣符號(hào)等等),那么請(qǐng)你自己繪制,而不是直接使用字體。

16. 動(dòng)態(tài)圖標(biāo)

這幾年動(dòng)效設(shè)計(jì)的熱度穩(wěn)定增長(zhǎng),只有靜態(tài)排版的時(shí)代正在過(guò)去。動(dòng)效的出現(xiàn),也讓圖標(biāo)擁有了更多的可能性。動(dòng)態(tài)圖標(biāo)可以讓你的app或網(wǎng)站生動(dòng)有趣,在我們所常見(jiàn)的各種數(shù)字產(chǎn)品當(dāng)中,UI組件和各色元素都已經(jīng)動(dòng)畫(huà)化了。

兩萬(wàn)字超強(qiáng)干貨!設(shè)計(jì)師必看的圖標(biāo)設(shè)計(jì)指南

運(yùn)動(dòng)中的物體比靜態(tài)的物體更能快速引起人們的注意,在UI設(shè)計(jì)中嘗試添加一些動(dòng)畫(huà)及動(dòng)畫(huà)圖標(biāo),不僅能在視覺(jué)上快速吸引用戶,還能使產(chǎn)品更具交互性,提升產(chǎn)品的趣味性。分享幾個(gè)動(dòng)態(tài)圖標(biāo)資源網(wǎng)站:

useAnimations:支持所有設(shè)備、網(wǎng)站、Android和iOS,可以免費(fèi)用于個(gè)人和商業(yè)用途。

兩萬(wàn)字超強(qiáng)干貨!設(shè)計(jì)師必看的圖標(biāo)設(shè)計(jì)指南

useanimations.com

Lordicon:每一個(gè)圖標(biāo)都提供線性輪廓和面形剪影兩種風(fēng)格樣式,并且圖標(biāo)是基于Lottie動(dòng)畫(huà)引擎的矢量動(dòng)畫(huà)圖標(biāo),大小完全可擴(kuò)展,兼容所有主流瀏覽器。

兩萬(wàn)字超強(qiáng)干貨!設(shè)計(jì)師必看的圖標(biāo)設(shè)計(jì)指南

△ https://lordicon.com

Icons8 Animated icons 2.0:提供的動(dòng)態(tài)圖標(biāo)格式包括 Lottie 適用的 JSON、GIF 和 After Effects 格式,透過(guò)網(wǎng)頁(yè)可以搜尋、預(yù)覽動(dòng)態(tài)圖標(biāo)效果。

兩萬(wàn)字超強(qiáng)干貨!設(shè)計(jì)師必看的圖標(biāo)設(shè)計(jì)指南

△ https://icons8.com/animated-icons

Feather:設(shè)計(jì)師Cole Bemis制作的一個(gè)開(kāi)源圖標(biāo)庫(kù),可自行調(diào)節(jié)圖標(biāo)大小和線條粗細(xì)。

兩萬(wàn)字超強(qiáng)干貨!設(shè)計(jì)師必看的圖標(biāo)設(shè)計(jì)指南

△ https://feathericons.com/

17. 圖標(biāo)命名規(guī)則

科學(xué)和的命名規(guī)則能夠幫助我們快速定位到自己制作的圖標(biāo),并且?guī)椭_(kāi)發(fā)縮短命名時(shí)間,加強(qiáng)團(tuán)隊(duì)寫(xiě)作效率。切圖可按照“業(yè)務(wù)_類型_功能_大小_狀態(tài)”的格式進(jìn)行命名。

兩萬(wàn)字超強(qiáng)干貨!設(shè)計(jì)師必看的圖標(biāo)設(shè)計(jì)指南

切圖命名的格式建議為全英文,可在切圖之前對(duì)圖層進(jìn)行命名,常用切圖命名對(duì)照表如下所示。

兩萬(wàn)字超強(qiáng)干貨!設(shè)計(jì)師必看的圖標(biāo)設(shè)計(jì)指南

如何繪制功能圖標(biāo)

1. 圖標(biāo)繪制方法

圖標(biāo)的繪制方式主要有兩種:布爾運(yùn)算 和 貝塞爾曲線。

布爾運(yùn)算

布爾指的是喬治·布爾,19世紀(jì)的一位數(shù)學(xué)家,為了紀(jì)念布爾在符號(hào)邏輯運(yùn)算中的杰出貢獻(xiàn),所以將這種運(yùn)算稱為布爾運(yùn)算。

布爾運(yùn)算聽(tīng)起來(lái)比較難,但其實(shí)非常簡(jiǎn)單,布爾運(yùn)算采用的數(shù)字邏輯推演法,主要有數(shù)字邏輯的聯(lián)合、相交、相減。設(shè)計(jì)師在使用軟件過(guò)程中引用了這種邏輯運(yùn)算方法,對(duì)應(yīng)到設(shè)計(jì)軟件中,就有:合并形狀、減去頂層形狀、與形狀區(qū)域交叉、排除重疊形狀。例如兩個(gè)圓形相減可以得到一個(gè)月亮的造型,這就是布爾運(yùn)算。

兩萬(wàn)字超強(qiáng)干貨!設(shè)計(jì)師必看的圖標(biāo)設(shè)計(jì)指南

  • 合并形狀:將兩個(gè)形狀合并為一個(gè),取的是合集;
  • 減去頂層形狀:用底層圖形減去頂層圖形所得最終圖形;
  • 與形狀區(qū)域相交:得到的形狀是兩個(gè)圖形重疊的部分,取的是交集;
  • 排除重疊形狀:簡(jiǎn)單理解就是減去兩個(gè)圖形重疊的部分,與「與形狀區(qū)域相交」相反;

基本上通過(guò)布爾運(yùn)算,我們能繪制出常見(jiàn)的大部分圖標(biāo)了,但有時(shí)我們需要針對(duì)某些線條進(jìn)行單獨(dú)的調(diào)整,又或者我們需要打造一套手繪風(fēng)的矢量圖標(biāo),這個(gè)時(shí)候就需要用到貝塞爾曲線了。

貝塞爾曲線

貝塞爾曲線適用于二維圖形繪制的數(shù)學(xué)曲線。1962年法國(guó)工程師皮埃爾·貝塞爾(Pierre Bézier)所發(fā)表。他運(yùn)用貝塞爾曲線來(lái)為汽車的主體進(jìn)行設(shè)計(jì)。貝塞爾曲線是繪制矢量圖形時(shí)的重要工具,使用鋼筆工具畫(huà)出的所有圖形一般來(lái)說(shuō)都是貝塞爾曲線組成的。

貝塞爾曲線包括:節(jié)點(diǎn)、控制點(diǎn)、控制線、曲線這幾個(gè)基本概念。

矢量圖形便是由這幾個(gè)基本概念構(gòu)成的。圖形由基礎(chǔ)節(jié)點(diǎn)作為支撐構(gòu)成,控制點(diǎn)和節(jié)點(diǎn)之間的線段稱為控制線,控制線就像皮筋一樣,調(diào)整控制點(diǎn)的位置,可以改變曲線的形狀,就像被皮筋(控制線)拉扯一樣。

兩萬(wàn)字超強(qiáng)干貨!設(shè)計(jì)師必看的圖標(biāo)設(shè)計(jì)指南

節(jié)點(diǎn)包括 4 種基礎(chǔ)屬性類型,一種是沒(méi)有控制點(diǎn)和控制線的「直線節(jié)點(diǎn)」;另一種是「鏡像關(guān)聯(lián)節(jié)點(diǎn)」,這種節(jié)點(diǎn)控制其中一側(cè)的控制點(diǎn),另一側(cè)的控制點(diǎn)會(huì)發(fā)生鏡像變化,適合繪制對(duì)稱結(jié)構(gòu)的曲線;再有一種是「無(wú)關(guān)聯(lián)節(jié)點(diǎn)」,即節(jié)點(diǎn)兩側(cè)的控制點(diǎn)可以各自自由控制它們那一側(cè)的曲線而不互相影響;最后一種是「不對(duì)稱關(guān)聯(lián)節(jié)點(diǎn)」,這種類型下,節(jié)點(diǎn)兩側(cè)的控制點(diǎn)和節(jié)點(diǎn)會(huì)永遠(yuǎn)保持在同一條直線上,但是卻不會(huì)對(duì)稱控制線的長(zhǎng)度。

知識(shí)點(diǎn):

在 Sketch 中,我們可以在選中節(jié)點(diǎn)后通過(guò)快捷鍵 1 / 2 / 3 / 4 來(lái)快速切換當(dāng)前節(jié)點(diǎn)的類型,加快繪制效率。

鋼筆工具

繪制自由貝塞爾曲線常用的工具便是鋼筆工具,鋼筆工具也是所有矢量軟件的核心工具。它的使用對(duì)于新手可能稍微薇有點(diǎn)復(fù)雜,但是一但上手,會(huì)非常方便。The Bézier Game 這個(gè)是一個(gè)非常不錯(cuò)的練習(xí)鋼筆工具的網(wǎng)站,以游戲的形式練習(xí)鋼筆工具,通關(guān)的時(shí)候你對(duì)鋼筆工具就已經(jīng)輕車熟路了。

兩萬(wàn)字超強(qiáng)干貨!設(shè)計(jì)師必看的圖標(biāo)設(shè)計(jì)指南

繪制實(shí)戰(zhàn)

這里選擇了幾個(gè)比較典型的圖標(biāo),簡(jiǎn)單演示下繪制方法和各自的繪制思路:

面性

眼睛:布爾運(yùn)算相交 / 相減 / 合并形狀

繪制一個(gè)正圓,然后復(fù)制這個(gè)正圓形,通過(guò)布爾運(yùn)算「與形狀區(qū)域相交」得到眼睛外輪廓,再繪制兩個(gè)圓通過(guò)「相減」與合并形狀得到眼睛造型。

兩萬(wàn)字超強(qiáng)干貨!設(shè)計(jì)師必看的圖標(biāo)設(shè)計(jì)指南

位置定位:旋轉(zhuǎn) / 相減

這個(gè)圖標(biāo)由兩個(gè)大小圓形相減,得到環(huán)形,再繪制一個(gè)和大圓半徑相等的正方形,和圓環(huán)左、下對(duì)齊,最后逆時(shí)針旋轉(zhuǎn)45度完成。

兩萬(wàn)字超強(qiáng)干貨!設(shè)計(jì)師必看的圖標(biāo)設(shè)計(jì)指南

WIFI:相加 / 相減 / 旋轉(zhuǎn)

繪制多個(gè)圓通過(guò)布爾運(yùn)算的相加減得出三個(gè)圓圈嵌套“靶子造型,再繪制一個(gè)正三角形,和靶子圖形相交得到Wi-Fi圖標(biāo)。

兩萬(wàn)字超強(qiáng)干貨!設(shè)計(jì)師必看的圖標(biāo)設(shè)計(jì)指南

齒輪:旋轉(zhuǎn) / 相減

通過(guò)兩個(gè)圖形的布爾運(yùn)算得到環(huán)形,然后繪制一個(gè)梯形,復(fù)制一個(gè)鏡像,將其對(duì)齊環(huán)形兩端,復(fù)制梯形編組并旋轉(zhuǎn)復(fù)制三次(45度),最后合并全部形狀完成。

兩萬(wàn)字超強(qiáng)干貨!設(shè)計(jì)師必看的圖標(biāo)設(shè)計(jì)指南

鈴鐺:相加 / 相減

由3個(gè)矩形組成鈴鐺主體,鈴鐺頂部圓頂結(jié)構(gòu)通過(guò)設(shè)置全圓角所得,鈴鐺底部的半圓使用圓形和矩形進(jìn)行布爾運(yùn)算,完成。

兩萬(wàn)字超強(qiáng)干貨!設(shè)計(jì)師必看的圖標(biāo)設(shè)計(jì)指南

線性

放大鏡:旋轉(zhuǎn) / 相加

繪制一個(gè)正圓和一條線,用對(duì)齊工具將其居中對(duì)齊,編組后逆時(shí)針旋轉(zhuǎn)45度即可。

兩萬(wàn)字超強(qiáng)干貨!設(shè)計(jì)師必看的圖標(biāo)設(shè)計(jì)指南

時(shí)鐘:鋼筆 / 剪刀工具

繪制一個(gè)正圓和一個(gè)矩形,使圓形的左下角對(duì)齊圓形中心,用鋼筆工具在矩形左邊和下邊增加兩個(gè)錨點(diǎn),再用剪刀工具減去多余的線條即可。

兩萬(wàn)字超強(qiáng)干貨!設(shè)計(jì)師必看的圖標(biāo)設(shè)計(jì)指南

雨傘:相減 / 剪刀工具

繪制一個(gè)正圓,再繪制一個(gè)矩形與其相減得到傘頂,然后繪制一個(gè)矩形,通過(guò)剪刀工具減去多余部分,得到傘架,傘把手圓角化處理,完成。

兩萬(wàn)字超強(qiáng)干貨!設(shè)計(jì)師必看的圖標(biāo)設(shè)計(jì)指南

相機(jī):合并

繪制一個(gè)矩形和一個(gè)梯形,通過(guò)合并得到相機(jī)主體,再繪制一個(gè)正圓完成相機(jī)鏡頭部分,完成。

兩萬(wàn)字超強(qiáng)干貨!設(shè)計(jì)師必看的圖標(biāo)設(shè)計(jì)指南

愛(ài)心:相加 / 旋轉(zhuǎn)

繪制兩個(gè)正圓和一個(gè)直徑與圓形等寬的正方形,然后逆時(shí)針旋轉(zhuǎn)45度所得。

兩萬(wàn)字超強(qiáng)干貨!設(shè)計(jì)師必看的圖標(biāo)設(shè)計(jì)指南

2. 制定規(guī)范

無(wú)規(guī)矩不成方圓,規(guī)矩的出現(xiàn)可以讓一切雜亂的東西變得合理,統(tǒng)一起來(lái)。在設(shè)計(jì)上也是如此,規(guī)范具有統(tǒng)一輸出,指引細(xì)節(jié)、便于查看的好處,規(guī)范就是一組圖標(biāo)中的規(guī)矩,所有圖標(biāo)的繪制都按照規(guī)矩來(lái),最終的成品就會(huì)顯得井然有序。

小小的圖標(biāo)是由很多圖形元素組成的,在這些圖標(biāo)中,元素的一致性是建立一個(gè)共同視覺(jué)于洋的關(guān)鍵。熟悉這些元素可以更容易地理解每個(gè)圖標(biāo)和他們之間細(xì)微的差異,也將幫助我們學(xué)會(huì)圖標(biāo)設(shè)計(jì)的底層結(jié)構(gòu),依次是筆畫(huà)末端、圓角、留白、筆觸、內(nèi)部角、禁繪區(qū)。

兩萬(wàn)字超強(qiáng)干貨!設(shè)計(jì)師必看的圖標(biāo)設(shè)計(jì)指南

在制定規(guī)范時(shí),我們通常先繪制出一個(gè)符合業(yè)務(wù)風(fēng)格的圖標(biāo),然后根據(jù)這一個(gè)圖標(biāo)定制后續(xù)的圖標(biāo)規(guī)范,依次按照上述圖標(biāo)元素進(jìn)行規(guī)范。如果是漸變填充圖標(biāo)還要規(guī)定它的漸變角度,光影角度等。在一組中的圖標(biāo)需要在這些圖形屬性中進(jìn)行統(tǒng)一,這樣的圖標(biāo)雖然形狀不一樣但是在視覺(jué)上看起來(lái)是屬于同一系列的。

兩萬(wàn)字超強(qiáng)干貨!設(shè)計(jì)師必看的圖標(biāo)設(shè)計(jì)指南

制定規(guī)范的三個(gè)過(guò)程:

  • 拆分細(xì)節(jié):將圖標(biāo)中的細(xì)節(jié)元素(圓角、筆畫(huà)末端等)進(jìn)行分解,并在規(guī)范中制定細(xì)節(jié)元素的使用法則。
  • 風(fēng)格定位:根據(jù)產(chǎn)品調(diào)性,業(yè)務(wù)屬性在規(guī)范中制定相應(yīng)的色彩、質(zhì)感風(fēng)格。
  • 功能劃分:不同功能(金剛區(qū)和標(biāo)簽欄等)的圖標(biāo)要區(qū)分開(kāi)來(lái),功能相近的包括色彩、質(zhì)感應(yīng)該采取相近性。

兩萬(wàn)字超強(qiáng)干貨!設(shè)計(jì)師必看的圖標(biāo)設(shè)計(jì)指南

△ 圖標(biāo)設(shè)計(jì)規(guī)范

3. 線性or面性

設(shè)計(jì)中,我們應(yīng)該是用「線性圖標(biāo)」還是「面性圖標(biāo)」呢?

其實(shí)二者沒(méi)有太明顯的選擇優(yōu)劣,很多場(chǎng)景下已經(jīng)越來(lái)越模糊,但總的來(lái)說(shuō),還是有一些法則可以作為參考:

常用的手法:在App的底部導(dǎo)航欄,選中狀態(tài)使用面型圖標(biāo),而非選中狀態(tài)使用線性圖標(biāo);

16px左右的小圖標(biāo)慎用線性圖標(biāo),線性圖標(biāo)在16px下,可排布像素的區(qū)域較小,這個(gè)時(shí)候線性圖標(biāo)不容易設(shè)計(jì);

面型圖標(biāo)比起線性圖標(biāo),除裝飾性外具備更強(qiáng)的視覺(jué)信息層次感,更具引導(dǎo)性,比如金剛區(qū)功能圖標(biāo)、IOS設(shè)置界面,使用面型圖標(biāo);

車載等系統(tǒng)界面,更適合用面型圖標(biāo),面型圖標(biāo)的視覺(jué)面積較大,短時(shí)間內(nèi)更加容易識(shí)別;

線性圖標(biāo)看起來(lái)通常會(huì)更加細(xì)膩精致,適合比較精致簡(jiǎn)潔的設(shè)計(jì)或者女性化產(chǎn)品設(shè)計(jì);

兩萬(wàn)字超強(qiáng)干貨!設(shè)計(jì)師必看的圖標(biāo)設(shè)計(jì)指南

4. 圖標(biāo)導(dǎo)出

文件格式是導(dǎo)出圖標(biāo)的關(guān)鍵。不同的人需要的文件格式也不同,如果你為外部合伙人提供圖標(biāo),那么可能會(huì)提供1x、2x和3x.的png文件,以適應(yīng)多種設(shè)備。而對(duì)于開(kāi)發(fā)和其他設(shè)計(jì)人員,則通常需要導(dǎo)出.svg文件,這些文件可以在設(shè)計(jì)程序中編輯,并且可以通過(guò)代碼在應(yīng)用程序或?yàn)g覽器中繪制。導(dǎo)出的svg可以用sketch的官方插件「sketch-SVGO」進(jìn)行代碼優(yōu)化,壓縮svg的體積,精簡(jiǎn)svg代碼。

兩萬(wàn)字超強(qiáng)干貨!設(shè)計(jì)師必看的圖標(biāo)設(shè)計(jì)指南

△ sketch-SVGO 插件官方下載頁(yè)

svg格式僅支持居中描邊的圖標(biāo),并且不支持投影,因此對(duì)于復(fù)雜豐富的圖標(biāo)還是切img圖為好。

兩萬(wàn)字超強(qiáng)干貨!設(shè)計(jì)師必看的圖標(biāo)設(shè)計(jì)指南

5. 圖標(biāo)管理和交付

完成圖標(biāo)后需要進(jìn)行視覺(jué)檢視,避免任何多余的線條或形狀,保證盡可能整潔。檢查所有線條是否都在標(biāo)準(zhǔn)框架內(nèi),讓其他人幫忙來(lái)檢查你的圖標(biāo)是否整潔是非常有必要的。對(duì)圖標(biāo)精心設(shè)計(jì)評(píng)審,合格后再加入資源庫(kù),這樣避免多人同時(shí)修改而造成混亂,同時(shí)提升團(tuán)隊(duì)協(xié)作效率。推薦一個(gè)免費(fèi)的圖標(biāo)管理工具:Nucleo,團(tuán)隊(duì)協(xié)作需要付費(fèi)。

兩萬(wàn)字超強(qiáng)干貨!設(shè)計(jì)師必看的圖標(biāo)設(shè)計(jì)指南

△ 圖標(biāo)資源管理工具:Nucleo

圖標(biāo)設(shè)計(jì)的評(píng)判標(biāo)準(zhǔn)

我們了解了 icon 的基本知識(shí),那么如何設(shè)計(jì)一個(gè)好的 icon 呢?怎樣評(píng)判我們的 icon 是否合適,是否貼合整個(gè)產(chǎn)品呢?我們需要了解什么才是一個(gè)好的 icon 。

我們可以從以下五個(gè)方面來(lái)檢驗(yàn),分別是:識(shí)別性,規(guī)范性、統(tǒng)一性、呼吸感與品牌感。

兩萬(wàn)字超強(qiáng)干貨!設(shè)計(jì)師必看的圖標(biāo)設(shè)計(jì)指南

1. 識(shí)別性

圖標(biāo)就是幫助用戶理解信息,所以識(shí)別性(也可以說(shuō)是可訪問(wèn)性)是一個(gè)圖標(biāo)最重要的一項(xiàng),尤其在沒(méi)有文字說(shuō)明的情況下,一定不能讓用戶產(chǎn)生疑惑。我們檢測(cè)圖標(biāo)的可讀性通常要將圖標(biāo)的背景色底板在黑色和白色之間進(jìn)行切換對(duì)比,不論是黑色還是白色的背景都可以看清圖標(biāo)的全部細(xì)節(jié),還需要確保圖標(biāo)中的每一種顏色都是可見(jiàn)的。

圖標(biāo)識(shí)別性可以分為兩類,分別是含義識(shí)別和視覺(jué)識(shí)別。

  • 含義識(shí)別:是視覺(jué)語(yǔ)言是否可替換文字語(yǔ)言,簡(jiǎn)言之就是讓你的圖標(biāo)可以被用戶理解,不會(huì)讓用戶產(chǎn)生歧義。
  • 視覺(jué)識(shí)別:圖標(biāo)的大小,復(fù)雜度,顏色,線條的粗細(xì),這些影響視覺(jué)識(shí)別的因素識(shí)別性是否高。

兩萬(wàn)字超強(qiáng)干貨!設(shè)計(jì)師必看的圖標(biāo)設(shè)計(jì)指南

靈活的設(shè)計(jì)思路,在保證識(shí)別度的前提下靈活發(fā)揮,嘗試各種不同風(fēng)格的表現(xiàn)形式。

兩萬(wàn)字超強(qiáng)干貨!設(shè)計(jì)師必看的圖標(biāo)設(shè)計(jì)指南

當(dāng)然,腦洞也不要太大,失去了原本的含義,造成誤解。

兩萬(wàn)字超強(qiáng)干貨!設(shè)計(jì)師必看的圖標(biāo)設(shè)計(jì)指南

2. 規(guī)范性

規(guī)范性也是做好一個(gè)圖標(biāo)的基礎(chǔ),我們要保證圖標(biāo)在視覺(jué)大小的一致性,圖標(biāo)飽滿度、遵循同一種規(guī)律,細(xì)節(jié)統(tǒng)一性。

視覺(jué)大小的一致性:在相同尺寸的基礎(chǔ)上分析形狀間的視覺(jué)差異,來(lái)審視視覺(jué)上是否統(tǒng)一,如一樣尺寸大小的圓和方形的視覺(jué)大小就不一致,那么我們可以規(guī)定它的最大尺寸,進(jìn)而在尺寸規(guī)范中適當(dāng)調(diào)整,使得視覺(jué)大小達(dá)到統(tǒng)一;

兩萬(wàn)字超強(qiáng)干貨!設(shè)計(jì)師必看的圖標(biāo)設(shè)計(jì)指南

  • 飽滿度:常用的衡量方法就是正負(fù)形衡量法,在圖標(biāo)所占區(qū)域的矩形框中,看圖標(biāo)的正形的面積是否還可以增加;
  • 相同規(guī)律:同一套圖標(biāo)必須是以同種風(fēng)格呈現(xiàn)的,例如是否全部使用了圓角或直角的風(fēng)格,圓角大小、繪制風(fēng)格是否一致;
  • 細(xì)節(jié)統(tǒng)一:包括像素是否對(duì)齊、圓角、描邊粗細(xì)是否統(tǒng)一的問(wèn)題;

3. 統(tǒng)一性

在繪制多個(gè)類型相同的圖標(biāo)時(shí),我們需要注意這一套圖標(biāo)合集需要在視覺(jué)上保持統(tǒng)一性。在一整套產(chǎn)品中,會(huì)有很多種圖標(biāo),但是圖標(biāo)的功能不一樣,所表達(dá)的內(nèi)容也不同。這時(shí),圖標(biāo)一致性的意義就體現(xiàn)出來(lái)了,根據(jù)格式塔原理中的相似性原則:人們會(huì)將如元素彼此相似的東西感知為一組。這也意味著如果具有相同功能、含義和層次結(jié)構(gòu)級(jí)別的元素,則應(yīng)在視覺(jué)上保持統(tǒng)一匹配。

兩萬(wàn)字超強(qiáng)干貨!設(shè)計(jì)師必看的圖標(biāo)設(shè)計(jì)指南

圖標(biāo)內(nèi)容的統(tǒng)一會(huì)讓用戶明白相似的圖標(biāo)所代表的的功能也相同,而且在視覺(jué)上也更加和諧美觀。因此我們?cè)诶L標(biāo)后還需檢查線條的粗細(xì)比重,邊角的大小,配色方案,細(xì)節(jié)層次和設(shè)計(jì)元素在整個(gè)合集中是否是不變且一致的。

圖標(biāo)的統(tǒng)一性可以從:線條粗細(xì)、設(shè)計(jì)語(yǔ)言、復(fù)雜程度、顏色規(guī)范四個(gè)大的方向去著手。

線條粗細(xì):相同功能類型的圖標(biāo)線寬粗細(xì)統(tǒng)一,有背板的圖標(biāo)線條不易過(guò)細(xì);

兩萬(wàn)字超強(qiáng)干貨!設(shè)計(jì)師必看的圖標(biāo)設(shè)計(jì)指南

設(shè)計(jì)語(yǔ)言:可拆分為透明度(拉開(kāi)層次)、圓角(圓角還是直角)、斷線開(kāi)口(開(kāi)口位置)、設(shè)計(jì)特征四個(gè)緯度去規(guī)范;

兩萬(wàn)字超強(qiáng)干貨!設(shè)計(jì)師必看的圖標(biāo)設(shè)計(jì)指南

復(fù)雜程度:如果不能簡(jiǎn)化圖標(biāo),就保持同一組圖標(biāo)的墨水重量一致,簡(jiǎn)化太復(fù)雜的圖標(biāo),增強(qiáng)辨識(shí)度;

兩萬(wàn)字超強(qiáng)干貨!設(shè)計(jì)師必看的圖標(biāo)設(shè)計(jì)指南

顏色規(guī)范:對(duì)于線面結(jié)合的扁平圖標(biāo)建議最多用兩種顏色,活動(dòng)入口圖標(biāo)如果需要的色彩數(shù)量多,那就需要保持敏感,從一種色彩的周圍小幅度提取另一種色彩或多種色彩,調(diào)整其色相、飽和度、明度就能搭配出許多和諧的顏色。

兩萬(wàn)字超強(qiáng)干貨!設(shè)計(jì)師必看的圖標(biāo)設(shè)計(jì)指南

4. 呼吸感

呼吸感的意思就是適當(dāng)留白。不管是圖標(biāo)還是界面,適當(dāng)?shù)牧舭卓梢酝怀鲋黧w內(nèi)容,讓內(nèi)容具備易看性。在圖標(biāo)的繪制過(guò)程中,我們應(yīng)該注意圖標(biāo)元素之間的間距不宜過(guò)近,元素也不宜過(guò)多。圖標(biāo)是一個(gè)物體的簡(jiǎn)略縮影,目的是為了表達(dá)內(nèi)容,讓用戶快速理解,太過(guò)復(fù)雜的細(xì)節(jié)會(huì)影響圖標(biāo)的識(shí)別速度。因此在圖標(biāo)的繪制過(guò)程中應(yīng)該刪除所有無(wú)法傳達(dá)圖標(biāo)意義的元素,避免使圖標(biāo)變得太過(guò)復(fù)雜難以識(shí)別。

兩萬(wàn)字超強(qiáng)干貨!設(shè)計(jì)師必看的圖標(biāo)設(shè)計(jì)指南

5. 品牌感

品牌感就是我們上面談到的要與品牌理念相符,傳達(dá)給用戶的感受一致,通過(guò)吸取品牌色,提取品牌元素,采用品牌吉祥物和品牌圖形的方法來(lái)提取品牌基因。我們要試著從品牌設(shè)計(jì)的角度去理解,尋找自己產(chǎn)品獨(dú)特的品牌氣質(zhì),挑選合適的技法。然后把這些元素具象化,融入在界面設(shè)計(jì)中。

兩萬(wàn)字超強(qiáng)干貨!設(shè)計(jì)師必看的圖標(biāo)設(shè)計(jì)指南

那么,該如何提升品牌感,打造屬于自己App的獨(dú)特風(fēng)格呢?品牌基因?yàn)槲覀兲峁┝艘恍┚€索,這是近年來(lái)非常流行的一種趨勢(shì)。

圖標(biāo)的品牌感

我們都知道圖標(biāo)在APP設(shè)計(jì)中的重要性,但是打開(kāi)許多APP你會(huì)發(fā)現(xiàn)他們的圖標(biāo)設(shè)計(jì)都非常普通,似乎是在圖標(biāo)網(wǎng)站上下載的素材。雖然一些優(yōu)秀的設(shè)計(jì)師在進(jìn)行圖標(biāo)設(shè)計(jì)師加入一些諸如圓角、斷線等設(shè)計(jì)語(yǔ)言,但是仍逃脫不了與其他APP設(shè)計(jì)雷同、毫無(wú)個(gè)性的通病,使得UI看上去普通、不精致,缺少產(chǎn)品氣質(zhì)。

那么,該如何打造屬于自己APP的獨(dú)特風(fēng)格呢?品牌基因?yàn)槲覀兲峁┝艘恍┚€索。它是由平面設(shè)計(jì)中的VIS(視覺(jué)識(shí)別系統(tǒng))引入的一種設(shè)計(jì)策略,通過(guò)對(duì)品牌形象進(jìn)行延生設(shè)計(jì)形成一套完整的視覺(jué)符號(hào)。每一個(gè)APP都有其品牌形象,代表了與眾不同的氣質(zhì)。接下來(lái),我們就來(lái)學(xué)習(xí)如何利用品牌基因進(jìn)行圖標(biāo)設(shè)計(jì)。

1. 提取品牌圖形

通常一個(gè)App的第一個(gè)tab是首頁(yè),是用戶進(jìn)入App后看到的第一個(gè)頁(yè)面,最常見(jiàn)的圖標(biāo)設(shè)計(jì)是一個(gè)小房子的圖形。首頁(yè)是App中最重要的頁(yè)面,承載了整個(gè)產(chǎn)品的核心功能,是用戶瀏覽最多的地方,因此使用一個(gè)讓人印象深刻的品牌圖形作為“首頁(yè)”圖標(biāo)是必要的,不但使App內(nèi)外形成了視覺(jué)聯(lián)系,同時(shí)也二次傳遞了品牌形象,加強(qiáng)了用戶對(duì)App的良好印象。例如網(wǎng)易云音樂(lè)的首頁(yè)標(biāo)簽就直接使用了它的品牌圖形,其優(yōu)點(diǎn)不言而喻。

兩萬(wàn)字超強(qiáng)干貨!設(shè)計(jì)師必看的圖標(biāo)設(shè)計(jì)指南

但是請(qǐng)注意,這種設(shè)計(jì)策略并不適合于所有的App,當(dāng)?shù)谝粋€(gè)tab被賦予特定功能,就不可使用品牌圖形,否則用戶會(huì)難以理解。例如微信第一個(gè)tab是聊天列表,此時(shí)使用氣泡就比品牌圖形更加合適。

還有另外一種情況。通常一個(gè)App的最后一個(gè)tab是個(gè)人中心,即“我的”。如果App的品牌圖形是動(dòng)物圖形,也可以使用其整體或局部圖形來(lái)作為「?jìng)€(gè)人中心」的入口圖標(biāo)。

2. 提取品牌色彩

色彩也是圖標(biāo)設(shè)計(jì)中重要的構(gòu)成元素之一,合理協(xié)調(diào)的色彩搭配讓用戶在瀏覽頁(yè)面時(shí)感覺(jué)舒服。從品牌形象中提取色彩作為圖標(biāo)設(shè)計(jì)的依據(jù),可以給用戶帶來(lái)由內(nèi)而外一致的視覺(jué)體驗(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)漸變色,活潑清爽的搭配帶給用戶輕快的感覺(jué),與整體品牌調(diào)性高度一致。

兩萬(wàn)字超強(qiáng)干貨!設(shè)計(jì)師必看的圖標(biāo)設(shè)計(jì)指南

3. 提取設(shè)計(jì)語(yǔ)言

在VI設(shè)計(jì)中通常提取輔助圖形作為設(shè)計(jì)元素,這在圖標(biāo)設(shè)計(jì)中同樣適用,當(dāng)所有的圖標(biāo)都具備了相同的設(shè)計(jì)元素,他們就構(gòu)成了一套完整的視覺(jué)符號(hào)。例如飛豬的品牌圖形就很特別,豬的頭部輪廓是由大寫(xiě)字母F演變成的翅膀造型,因此可以看到“我的”小人圖標(biāo)的也使用了類似的輪廓,這樣他們就形成了某種視覺(jué)聯(lián)系。

兩萬(wàn)字超強(qiáng)干貨!設(shè)計(jì)師必看的圖標(biāo)設(shè)計(jì)指南

4. 提取產(chǎn)品氣質(zhì)

品牌形象決定了產(chǎn)品的氣質(zhì),而產(chǎn)品的氣質(zhì)決定了吸引什么樣的用戶。就如當(dāng)我們第一次看到一個(gè)人的時(shí)候,往往會(huì)根據(jù)他的外貌形象特征,產(chǎn)生一個(gè)大致的印象,這就是一個(gè)人的氣質(zhì)。APP也同樣,例如傳遞傳統(tǒng)手工藝人社交的「東家」,其產(chǎn)品流淌著古樸、溫潤(rùn)、精致的人文氣息,它將宋體漢字的筆畫(huà)進(jìn)行拆解組合,創(chuàng)造出具有東方韻味且極具形式感的圖標(biāo)設(shè)計(jì)。

兩萬(wàn)字超強(qiáng)干貨!設(shè)計(jì)師必看的圖標(biāo)設(shè)計(jì)指南

5. 拆分品牌名稱

App標(biāo)簽欄圖標(biāo)最常見(jiàn)的形式是圖形加文字的組合,由于文字本身就能傳達(dá)最直接的含義,因此圖形的識(shí)別性并不那么重要了,我們就可以在其視覺(jué)表現(xiàn)形式上賦予更多創(chuàng)意和個(gè)性。MONO是一款閱讀類App,它的標(biāo)簽欄圖標(biāo)直接將品牌名稱中的4個(gè)字母拆分成4個(gè)圖形。雖然每個(gè)字母與其對(duì)應(yīng)的功能模塊本身并沒(méi)有直接聯(lián)系,但加上標(biāo)簽文字的輔助也不會(huì)造成閱讀困難,而且產(chǎn)品本身的用戶人群就是比較能接受新鮮事物的年輕人,因此這樣的創(chuàng)意反而給App設(shè)計(jì)加分了。

兩萬(wàn)字超強(qiáng)干貨!設(shè)計(jì)師必看的圖標(biāo)設(shè)計(jì)指南

6. 展開(kāi)形象聯(lián)想

我們?nèi)粘J褂玫谋姸郃pp大多數(shù)都有著相同的功能模塊:首頁(yè)、發(fā)現(xiàn)、動(dòng)態(tài)、我的等,因此也就出現(xiàn)了很多雷同的圖標(biāo)設(shè)計(jì)。比如“首頁(yè)”是尖頂房子,“發(fā)現(xiàn)”是眼睛,“動(dòng)態(tài)”是氣泡,如果有差別也只是設(shè)計(jì)風(fēng)格的差異,有的直角有的圓角,有的線性有的面形。這樣的設(shè)計(jì)沒(méi)有品牌歸屬感,試一下將這些圖標(biāo)單獨(dú)拿出來(lái)就無(wú)法判斷它是誰(shuí),它從哪兒來(lái)?

兩萬(wàn)字超強(qiáng)干貨!設(shè)計(jì)師必看的圖標(biāo)設(shè)計(jì)指南

優(yōu)秀的設(shè)計(jì)師不僅要具備將圖標(biāo)繪制精美的能力,還要具備豐富的設(shè)計(jì)想象力,不拘泥于設(shè)計(jì)規(guī)范的條條框框,有時(shí)候打破規(guī)則才能設(shè)計(jì)出優(yōu)秀的圖標(biāo)?!笆醉?yè)”除了小房子我們還可以想到什么?馬蜂窩的做法就很巧妙,“首頁(yè)”圖標(biāo)是“蜂巢”,而蜂巢是馬蜂的房子,這樣的設(shè)計(jì)與品牌形象緊密相連,簡(jiǎn)直完美!不過(guò)的改版好像已經(jīng)改沒(méi)了。

兩萬(wàn)字超強(qiáng)干貨!設(shè)計(jì)師必看的圖標(biāo)設(shè)計(jì)指南

知識(shí)點(diǎn):

總之,要想在繪制整套圖標(biāo)時(shí)建立統(tǒng)一風(fēng)格,就要從外觀和顏色上確立主風(fēng)格,在局部尋求個(gè)性特征,將兩者結(jié)合,并融合產(chǎn)品屬性和符合用戶定位,先在腦海中構(gòu)思出清晰的概念,然后在稿紙上繪制草圖,最后確立一個(gè)最佳方案上機(jī)完成,只有不斷地思考和打磨才能創(chuàng)作出最佳的設(shè)計(jì)方案。

兩萬(wàn)字超強(qiáng)干貨!設(shè)計(jì)師必看的圖標(biāo)設(shè)計(jì)指南

寫(xiě)在最后

圖標(biāo)設(shè)計(jì)是UI設(shè)計(jì)中非常重要的環(huán)節(jié),在尺寸有限的界面上,小小的 icon 可以更加簡(jiǎn)單的表達(dá)含義,傳遞給用戶正確和友好的指引。建議每位UI設(shè)計(jì)師在平時(shí)做大量的練習(xí)嘗試各種不同的風(fēng)格,以滿足不同的業(yè)務(wù)需求。另外,關(guān)于如何繪制keyline線,還有的iphone12樣機(jī),有需要的同學(xué)可以出門右轉(zhuǎn)私信我。


文章來(lái)源:優(yōu)設(shè)    作者:印跡時(shí)光


藍(lán)藍(lán)設(shè)計(jì)m.820esy.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

分享本文至:

日歷

鏈接

個(gè)人資料

存檔