本文由：“學設計上兔課網”原創，圖片素材來自網路，僅供學習分享

1. 什麼是圖示

那到底什麼是圖示呢？用一句最簡單的話來說，圖示就是一個符號，一個代表某個物件的符號，一個象徵性的符號。圖示可以追溯到1565年，它源於拉丁語「eikṓn」，意思是「相像，形象」。

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

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

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

2. 什麼是ICON

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

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

廣義：

行人禁行標誌

具有指代意義的圖形符號，具有高度濃縮並快捷傳達資訊、便於記憶的特性。應用範圍很廣，

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

狹義

應用於計算機軟體方面，包括：程式標識、資料標識、命令選擇、模式訊號或切換開關、

狀態指示等。

3. 為什麼圖示很重要

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

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

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

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

圖示能夠快速的傳達資訊。隨著資訊科技的提升以及資訊過剩，人們的注意力更加短暫和稀缺，

圖示成為了這個充滿噪音和過多無價值資訊世界的救生員。通過簡單快速的檢視就可以知道圖示

中攜帶的複雜資訊。

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

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

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

隨著世界越來越忙，越來越嘈雜和全球化，它將在未來更加重要。

4.圖示設計的基本知識

1.圖示的兩種型別

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

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

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

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

來傳達正確的資訊，比如「新增文件」圖示會

通過象形圖示「文件」和表意圖示「加號」來展現。

2.圖示的風格

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

6種常見的圖示風格

5. 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，其他的最好附上相應文案，以免使用者理解誤差。

6. 布林運算是什麼？

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

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

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

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

布林運算案例