圖標設計(Icon Design)，是設計師在入門介面設計的必經之路，圖標是透過「符號」來簡化文字，主要是用來指示或暗示行為，在介面設計上我們會使用大量的圖標來節省空間，也可技術性的避免一些跨國語系的問題，常見的圖標例如，分享、讚、搜尋、地圖…等等，光聽到這些名詞，多數的人應該也能快速的聯想到圖標樣式了吧。網路上對於圖標細節的討論很少，本篇就以介面設計常用的圖標來做更深入的討論。
圖標的用途
圖標就是簡化的文字，作為一般使用具有指意的特性，但在介面設計上圖標的指意大概有三種用途：
- 動作提示，例如：新增、刪除、編輯、讚、分享、喜歡…等等。
- 內容提示，例如：各種自定義的功能頁面圖標。
- 狀態提示，例如：新的、成功、失敗、完成、已連結的…等等。
而以單一符號作為圖標使用，有時無法表達複雜的訊息，因此才會使用上組合式的圖標。
組合式圖標
那什麼是組合式的圖標？組合式圖標是我定義的名詞，但這並不是什麼新的概念，在設計圖標時常常會使用到，只是沒有特別被拿出來討論，因此我對組合式圖標給的定義是：「由一個主要符號與一個以上的輔助符號所組合成的圖標」。例如：新增好友、刪除好友、建立群組、加入購物車，或是各種資料、檔案的同步狀態…等等，
仔細思考，介面上所用到的組合圖標，大多是對資料進行操作，而操作的方式，不外乎就是常見的電腦資料操縱指令「CRUD」（Create、Read、Update、Delete），而這些操作行為的圖標形式，通常很難用單一符號來表示動作指引，所以需要輔助符號的配合使用，才能更明確表達圖標訊息。
但這裡會有什麼細節？這篇我們要討論一個常見卻又容易忽略的問題：
「組合式圖標的輔助符號的位置，是否對圖標的表達會有差異？」
這個問題，許多設計師可能有發現，但大部的人都會忽略，為了讓問題更容易討論，我們先簡化組合式圖標，假設我們的圖標只需要一個主要符號及一個輔助符號，然後舉一個介面設計師常見的例子：「新增好友的圖標裡的加號(+)，應該是要放在人像圖標的左邊或右邊？」，這個問題很多設計師應該都有遇過，但設計師會怎麼選呢？
好像是在右邊，但又看過放在左邊的，左邊或右邊有差嗎？其實對用戶來說差異不大，但身為設計師，這個問題就可以深入討論，所以怎麼思考這個問題？或許我們可以先從最簡單的數字表達方式來討論這個問題。
「+1」與「1+」，分別代表什麼意思？從數字來看，「+1」可以是加1或是正1，加號「+」在這可以作為一個動詞或是形容詞來描述1，所以加號用在這裡可以是動詞或是形容詞，但「1+」則代表1個以上或大於1，在這裡的加號就會比較像是形容詞或是一個未完成的數學式，從這個簡單的推想，就會發現加號在數字的左右好像有些不一樣，加號在左邊可以暫時將它視為比較強調變動量的概念，也包含一些動作的暗示，例如：+1、+2、-3、-4；那如果是在右邊就似乎比較偏向會比較強調總量狀態的概念，對於動作的暗示相對較弱，例如：100+、200+、333-、555-。了解這樣的概念，再思考圖標上的意義。
就以「新增好友」這個圖標做為例子，到底加號要在右邊或是左邊？從上面的數字量表達方式來思考，如果在左邊，以變量概念來看，可以解釋為「新增好友」、「加一個好友」；那如果加號在再右邊，以總量的概念來看的話，就是「加入好友名單」、「邀請成為我的好友」，兩者概念就能看出有些不同，但用在「新增好友」這個行為，都是指一樣的結果。
我們可以來看一下，常見的app，新增好友的圖標是長什麼樣子：
從上面的圖就可以知道，其實加號在左邊或右邊都有設計師使用，所以「新增好友」的加號在左或右對一般用戶來說，應該沒有太大的差異，而從iOS及Android的規範來看，有加號與人像符號的組合式圖標，剛好加號在左邊(ios12的圖標加號則是在右邊)，但也有在右邊的案例，像是我們常用的web icon font — font-awesome，則是把加號放在人像右邊。
（這邊要補充說明一下，並不是所有的有加號的人像圖標就是指新增好友，它也有可能是「新增使用者」）
新增好友這個行為或許看不出加號在左或右邊的差異，那我們來討論另一個比較量化的行為：「儲值」。儲值個行為，本身就是一種儲量的名詞，但就這個字面上的意思，是指把錢放入一個帳戶內，所以是帳戶裡面的錢變多的意思，如果我們去搜尋關鍵字「add money」、「add value」、「store money」、「save money」、「top up」等等，會發現類似概念的圖標，通常會是一個錢幣、錢包、豬及「+」號在右的組合式圖標，用來表示儲值的概念，而儲值從字義上來看，是總量增加的概念，所以似乎加號在右邊會比較合理。
例如錢包的圖標，錢包圖標可以表示為「錢包」或是「錢包的錢」，把加號放在左邊會發生什麼事？如果抽掉文字的輔助，感覺是不是比較偏像是新增一個新的錢包，而不是增加錢包的錢？再比較相似概念的另一個詞：「加值」，這兩個行為名詞很像，但概念卻有些不同，儲值強調總量增加，加值強調增加的變量，如果要用圖標來表示，加值的加號在左邊似乎比較合理，但是加值的主要符號就不能用錢包或代表總量的符號來表示，所以除了加號的位置，主要圖標的符號的選用也很重要。
再來比較一個主要符號量化意涵比較不明確的圖標：「加入購物車」，如果加號在左，是不是比較像是新增一臺購物車，而不是加入購物車？
上面的例子，是以符號本體有量化意含的條件切入討論，另外我們再從易用性的角度討論，以「新增檔案」為例，我們在google上搜尋「new file icon」關鍵字所出現的圖片，通常是「文件」與「+」的組合式圖標，而且多數是加號在右，但在真實使用的情境上適用嗎？考慮易用性， 在使用滑鼠操作的情境下，因為大多數人慣用右手，且習慣將鼠標停留在欲點擊項目的右下角，此時鼠標的位置恰好會影響圖標的可以視範圍，所以輔助符號的加號在右，可能就會影響到圖標的整體可視性，易用性上顯得較差。比較明顯的例子，像是在visual studio code(程式碼編輯器)的介面下，左側的檔案管理面版中，新增檔案或資料夾的「+」號，出現在主要符號的左上角，仔細思考，這個圖標已經很小了，如果放在右下角，鼠標可能會影響到icon的可視整體性，因此才會將「+」放置在左上角，而office的軟體，也是採取加號在左的做法。
透過以上的討論大概可以了解，組合式圖標的設計細節其實比想像中的多，主要符號與輔助符號的選用及位置，不僅只有考慮圖標的意涵，易用性與情境也是考慮的因素，因此在設計組合式圖標時，除了遵循一些常用的樣式，可以試著多思考一些細節，或許會有些有趣的發現，這邊也提供我所歸納出設計組合式圖標設計思考方向：
選擇明確的主要符號
在選用主要符號時，要了解這個符號本身可能隱含的意思，一個符號可能有多種的解讀方式，論其本質，可能就會考慮到像是本篇所提到「總量」及「變量」的概念，對圖標設計而言，應該還有更多可以思考概念，例如，符號本身是「可數」還是「不可數」，是「動詞」還是「名詞」，是「具象」或「抽象」…等等，圖標的選用正確，才能設計出有效的圖標。
考量輔助符號的意涵、情境與空間限制
如同前面的內容所說的，輔助符號的位置不同，解讀的意涵就會有所差異，另外操作情境與易用性也會影響輔助符號的位置，而最不好的妥協就是空間限制，因為放不下或是視覺理由。雖然這些沒有一定的規則，但設計本身，就是儘量做到讓每個細節都賦予意義。
文字的輔助
同一種圖標可以具有多重意義， 例如：「新增好友」與「加關注」的圖標，如果是要「關注（follow）」一個對象，要怎麼用圖標表示？如果搜尋關鍵字「follow」，會發現跟新增好友是一樣的圖標，所以為了避免混淆，通常用文字加以說明，或是用文字「+關注（+follow）」來替代圖標，所以當圖標使用上容易混淆用戶時，用文字來替代或輔助，也是解決的方法。
考慮產品情境來減化圖標
如果用戶在明確的操作情境下使用APP，像是在電子信箱APP裡要新增一封新的電子郵件，那只需要用「+」的圖標來指引用戶就夠了，不須使用有加號與信封符號的組合式圖標來指引用戶，因此考慮產品情境來減化圖標也可以降低用戶對於圖標的認知負載。
結綸
圖標設計其實是介面設計裡比較基礎的一部份，按照慣例去設計雖然不會有太大的問題，但容易忽略掉一些可以討論的細節，這些細節有時候很理所當然，但仔細想想並非如此，這篇文章提出組合式圖標的討論，並非提供設計的正確答案，有時候訓練自己有意識去思考設計的每個細節，試著解讀設計，並整理出一些設計規範，這就是建立設計系統的開始。
最後，若對本文有更好的想法或建議，或是在圖標設計上你也有一些有趣的發現想與我分享，都歡迎寫信給我，或直接在社團發問討論。
文末想測試用支付系統來對作者進行贊助。(如果不想可以略過，非強迫）
如果你覺得這篇文章實用，有幫助到你，歡迎透過以下的方式贊助作者，來鼓勵更多的原創內容。
