1. 什麼是圖标

那到底什麼是圖标呢？

用一句最簡單的話來說，圖标就是一個符号，一個代表某個對象的符号，一個象征性的符号。圖标可以追溯到1565年，它源于拉丁語「eikṓn」，意思是「相像，形象」。

圖标是世界上最通用的語言，不論國籍，種族，年齡或性别，它是每個人都可以理解的一種語言。

看似不起眼的一個小圖标可以包含如此多的信息，人們從古至今一直在使用圖标來表達自己以及傳達信息，

洞穴繪畫、埃及象形文字都可以看作圖标。

2. 什麼是ICON

ICON也就是咱們經常所說的圖标，圖标是具有明确指代含義的計算機圖形。其中桌面圖标是軟件标識，界面中的圖标是功能标識。它源自于生活中的各種圖形标識，是計算機應用圖形化的重要組成部分。

圖标分為廣義和狹義兩種：

廣義：

行人禁行标志

具有指代意義的圖形符号，具有高度濃縮并快捷傳達信息、便于記憶的特性。應用範圍很廣，

軟硬件網頁社交場所公共場合無所不在，例如：男女廁所标志和各種交通标志等

狹義：

應用于計算機軟件方面，包括：程序标識、數據标識、命令選擇、模式信号或切換開關、

狀态指示等。

3. 為什麼圖标很重要

随着人們工作越來越忙，圖标已經成為了我們生活中的一部分。它們幫助我們快速定位，幫助我們快速的做出決定和行為，以及幫助我們找到需要的東西。

讓我們近距離感受一下為什麼說圖标設計是如此的重要，以及它在未來的巨大作用。

圖标連接着整個世界。不管你使用什麼樣的語言，作為視覺語言的圖标都發揮着巨大的作用。

例如機場中的導航标識、商場中的指示标識等等。​

圖标能夠快速的傳達信息。随着信息技術的提升以及信息過剩，人們的注意力更加短暫和稀缺

圖标成為了這個充滿噪音和過多無價值信息世界的救生員。通過簡單快速的查看就可以知道圖标中攜帶的複雜信息。

優秀的圖标成為我們生活中的救生員

無論你需要找到正确的應用程序或産品頁面上的特定功能，又或者當你在外國城市搜索地鐵時，

圖标都可以節省你很多時間。

随着世界越來越忙，越來越嘈雜和全球化，它将在未來更加重要。​

4.圖标設計的基本知識​

1.圖标的兩種類型

象形圖标。最流行的圖标類型，象形圖标是通過其相似性或對物理對象的引用來傳達含義的符号。例如，飛機圖形意味着機場。

表意圖标。

這種類型的圖标稍微有點複雜，通常，表意文字是基本的形狀，但他們的含義需要一些學習成本。例如一個圓裡包含着一條橫線，意味着「否」，另一個好的例子是「加」、「減」、「等号」這些表意符号。

象形圖标和表意圖标的組合使用

通常情況下，象形圖标會和表意圖标組合使用

來傳達正确的信息，比如「添加文檔」圖标會

通過象形圖标「文檔」和表意圖标「加号」來展現。

2.圖标的風格

圖标可以分為許多不同的風格。其中最常見的是

4. ICON在APP裡的應用

因為移動端有很多種不同的尺寸規格 所以當我們設計出ICON之後會應用到不同的尺寸之上

位圖

位圖圖像（bitmap）, 亦稱為點陣圖像或繪制圖像，是由稱作像素（圖片元素）的單個點組成的。這些點可以進行不同的排列和染色以構成圖樣。

當放大位圖時，可以看見賴以構成整個圖像的無數單個方塊。擴大位圖尺寸的效果是增大單個像素，從而使線條和形狀顯得參差不齊。然而，如果從稍遠的位置觀看它，位圖圖像的顔色和形狀又顯得是連續的。常用的位圖處理軟件是Photoshop和Windows系統自帶的畫圖。

矢量圖

矢量圖，也稱為面向對象的圖像或繪圖圖像，在數學上定義為一系列由線連接的點。矢量文件中的圖形元素稱為對象。每個對象都是一個自成一體的實體，它具有顔色、形狀、輪廓、大小和屏幕位置等屬性。

矢量圖是根據幾何特性來繪制圖形，矢量可以是一個點或一條線，矢量圖隻能靠軟件生成，文件占用内在空間較小，因為這種類型的圖像文件包含獨立的分離圖像，可以自由無限制的重新組合。它的特點是放大後圖像不會失真，和分辨率無關，适用于圖形設計、文字設計和一些标志設計、版式設計等。

位圖會因為不斷地擴大縮小 失真 而矢量圖不會 所以我們在做ICON的時候一般會采用PS裡的矢量工具（形狀工具）或者直接采用AI來做

目前在主流App内，icon大多使用較為簡潔的扁平化設計風格，這些icon有的由線構成，有的由面構成，還有的是線面結合而成的。

1.相同的功能要選擇相同的元素

雖然在不同的頁面和場景中，icon可以用不同的風格來表現，但當他們表示相同功能的時候，記得使用同樣的視覺元素，再套上當前頁面的風格。這樣可以保持同App内圖标元素的統一性，降低用戶的學習成本。例如在不同頁面出現的公積金相關圖标，用的都是同樣形狀的小樓。

2.對于功能型icon來說，最好選擇用戶熟悉的icon元素

對于App中的操作功能，以上都是被無數産品反複利用的、已經約定俗成的icon，除此之外還有“放大鏡=搜索”“小房子=首頁”等等，用戶已經潛移默化的接受這些icon的意思，并沒有學習成本，所以使用這些熟悉的元素是十分必要的。

3.我們要選擇主要的元素，表意要簡潔，可以适當聯想

在這些例子中，“信用卡分期”一定要畫卡片嗎？

“附近銀行”一定要畫銀行嗎？

“網貸評級”一定要畫網貸嗎？

我們還是會具體情況具體分析，對關鍵詞做一些取舍。

在這裡作為一個工具的“附近銀行”的功能點在于定位，而非強調銀行本身，所以最後還是選擇了定位符号來表達了這項功能。假設要設計的入口換成“附近銀行” “附近商場” “附近加油站”等等。

那麼主要功能就變成了搜索附近不同的場所，這種情況下我們就會選擇畫銀行、商場和加油站了。再比如“公積金查詢”“社保查詢”都是查詢，“征信報告”“收支水平報告”都是報告，同理我們不可能給滿屏的查詢功能入口都畫一個放大鏡，也不能給所有的報告入口都畫一份報告，為了表意簡潔、突出重點，在這裡我們選擇合并同類項，着重表達每個功能不同于其他的點。

很多時候我們要表達的内容并不具象，在這個時候就可以進行适當的聯想，去畫一個相關的物體。比如“公積金”就很很抽象，但是它與房子有關；“記賬”是個動作，但是“賬本”是個東西，這樣表達起來就簡單多了，也更親切。

4.附上文案：表達足夠準确，消除理解上的差異

一個很有意思的小樹葉icon，當沒有文案說明的時候，想必一千個用戶心裡有一千個哈姆雷特，大家都會有自己的理解。所以說icon是輔助的表達，文字才是标準答案，除了前面所說的大衆完全熟知的icon，其他的最好附上相應文案，以免用戶理解誤差。

5. 布爾運算是什麼？

布爾運算是數字符号化的邏輯推演法，包括聯合、相交、相減。在圖形處理操作中引用了這種邏輯運算方法以使簡單的基本圖形組合産生新的形體，并由二維布爾運算發展到三維圖形的布爾運算。

簡單來說就是形狀經過聯合 相交 相減等操作得到新的形狀，這就叫做布爾運算

布爾運算會運用到什麼地方？

布爾運算運用到了設計、生活的很多場景中。從偏平的LOGO、輕質感的圖标、再到三維空間圖形都在使用布爾運算。總之布爾運算其實涉及到我們生活中的各種事物，所以這時我們應該知道在以後繪制布爾運算圖形時要多從生活中的事物中提取有效信息

布爾運算案例

為答謝客官閱讀完此文支持，特準備新人大禮包贈送領取：2000種設計筆刷，10本設計書，設計師必備500種字體~~下方是領取方式

1，關注小勇哥哥PS視覺設計頭條号~

2，評論文章，不限字數，

3，私信小勇回複：福利

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!