金融行業如何繪制圖標？高手總結了2個方法+1個工具！

小圖標是界面的核心組成部分，承載著信息傳遞的重要作用。作為頁面的最小展示單位，圖標設計也是最能考驗設計師基本功的一項工作。

不過設計師熟練掌握的，往往只是單個圖標的風格化繪制方法。在這個過程中，設計師更關注圖標的美感和細節，而忽略了從宏觀的角度考量「圖標表達的準確性」、「不同圖標之間的關聯」、以及如何幫助業務「快速實現客制化功能」。

更多圖標干貨：

一、金融行業圖標設計常見問題

問題 1：金融行業功能服務名詞抽象，設計師難以精準表達

金融行業內，許多功能服務名詞抽象，如工資理財、活期產品、定期產品，都沒有可直接映射的物理形態，行業內也沒有統一標準，設計師只能憑借經驗繪制，難以精準表達。

問題 2：關鍵詞圖形化的結果不一致，增加了客戶的認知難度

參與圖標繪制的設計師分散在各業務線，每個人都依據自己的經驗自由發揮，導致對同一關鍵詞呈現的圖形化結果不一致，增加了客戶的認知難度。

問題 3：工作模式割裂，難以滿足千人千面的靈活配置及高端客制化需求

以往的工作模式，由不同的設計師提供切圖給不同的運營經理進行配置，這樣多對多的模式導致溝通成本高，還經常出現配置重復、錯誤等問題。

接下來，我們將從平安銀行業務的特性出發，以金剛區雙色圖標為例，還原一個圖標從誕生到前端展示的全過程，分享建設圖標生態過程中的實踐經驗：2 個方法和 1 個工具「聯想篩選法」「圖標元素周期表」和「圖標管理平臺」。

二、聯想篩選法

平安銀行 App 是一款金融領域的 C 端產品，覆蓋了賬戶、理財、貸款、保險和生活等多項綜合服務，擁有著 400+豐富的功能服務類型，同時，這些功能服務的名稱相較于其他行業都更為抽象。

比如大家經常能接觸到的電商平臺，購物車、服飾、鞋包等，都有非常明確的物理形態，設計師只需要據此進行風格化處理，即可形成一個能精準表達相應含義的圖標。

但是在金融領域，許多功能對應的則是虛擬服務。如理財或保險，是沒有物理形態的，且業內沒有形成統一的標準，在用戶層面還沒有建立起統一的認知。那么如何繪制易理解、易識別的圖標，是對設計師的一個考驗。這里向大家介紹一種相對普適的方法「聯想篩選法」，主要分為三步：

第一步 了解服務特點

圖標代表某一功能服務的入口，起到幫助用戶定位識別的作用，所以我們只有充分了解這項服務的實際含義與特點，才能真正繪制好一個圖標。以保險為例，設計師首先需要思考保險是什么？它是給消費者提供保障與補償，幫助消費者抵御風險的系列產品。因此我們在繪制圖標時，需要充分體現“保障”和“抵御風險”的作用。

第二步 映射聯想

了解服務特點后，設計師可進行簡單的圖形發散，即根據這項服務的實際含義和特點，聯想相關的圖形。比如下雨天撐起的一把傘、起到保護作用的盾牌、保險箱或一把鎖，再比如在保險服務過程中用戶通常接觸到的一些實體物件，如保單。

不過有一些功能服務，我們很難聯想到合適的圖形，這時就可以用文字來表達，如表達「稅」的圖形。一般情況下，我們通過從物理映射到相關性聯想，再到文字表達這樣的方法，逐步發散思維，就可以找出一些能表達其含義的圖形。

第三步 查重篩選

拓展出幾個圖形后，如何篩選出最合適的那個呢？我們可以通過「契合度」「專屬性」和「拓展性」這 3 個原則進行篩選，需要注意的是，這三個原則是有先后順序的。

① 契合度

主要是分析哪個圖形與該功能定義更為貼切。對于保險來說，契合度排序為：盾牌＞保單 ＞雨傘＞鎖。

② 專屬性

我們需要從全局的角度看這些圖形，是否被其他功能占用。比如在業內，「鎖」更多代表的是密碼，而「保單」的樣式和普通的賬單難以區分，故可以排除。

③ 拓展性

需要考慮該圖形在造型上是否容易和其他圖形組合。因為功能服務往往不是單獨存在的，通常會與一些相關功能共用圖形（在第 2 個小節我們會分析拓展性案例）。

通過以上 3 個步驟，就可以快速選擇出最契合功能服務的圖形。如最適合保險的圖形是「盾牌」，它既高度契合保險服務本身的含義，同時也具有一定的專屬性和拓展性。

三、圖標元素周期表

通過上述聯想篩選的方法，可以幫助設計師快速選擇出與功能服務契合度較高的圖形。不過繪制圖標的設計師，是分散在各業務線，其中不乏新入職的同學。大家對方法的理解和掌握程度不一，導致不同的設計師，對同一關鍵詞圖形化的結果不一致，具體表現如下：

同類型的功能服務，設計師使用完全不同的圖形化元素，從而難以建立長期統一的客戶認知。例如，同時用皇冠和鉆石代表「權益」相關功能。

即使圖形元素一致，在風格化繪制的過程中，也會出現多種不同的樣式。例如常用的人民幣符號，在前期上線時就出現了七八種樣式。

為了解決上述問題，我們嘗試沉淀出一套實現標準圖形規范的快捷方式「圖標元素周期表」：

經過分析，現有功能服務名稱多為 A+B 的組合結構。還是以保險為例，相關的功能有保險商城、保險服務、保險測評、跨境保險等，這類組合功能我們可以將其拆分為：保險+服務、保險+商城、跨境+保險這樣的形式，進行圖標設計。

這樣我們只要組合兩個獨立元素，就可以得到表意精確的組合圖標，組合的形式可以是內外或左右結構：

獨立元素可以分為主圖形和輔圖形，經過組件化，最終形成「圖標元素周期表」。

業務設計師可以根據功能服務的特性，自由組合主輔圖形即可。這大大減少了圖形化結果不一致和樣式不統一的問題。

不斷重復應用關鍵圖形，可以建立并強化客戶對相關功能服務的整體認知。當客戶看到盾牌，馬上可以聯想到保險，就像看到放大鏡，就知道是搜索功能一樣。

四、圖標管理平臺

前兩個部分介紹了聯想篩選法和圖標元素周期表兩種方法，可以幫助設計師完成圖標繪制。不過要使精心設計的圖標，在前端正確展示，還需要開發與運營經理的參與。

以平安銀行為例，依托智能推薦能力，我們為客戶提供千人千面的服務，且針對不同資產等級的客戶，定制更符合客群審美的專屬主題。因此在 UI 層面，圖標需要配置更靈活以及滿足換膚需要。

我們嘗試構建「 圖標管理平臺 (ICON ZOO) 」，旨在為設計師、開發和運營經理搭建溝通橋梁，將繪制好的圖標標準化命名，上傳至圖標管理平臺，平臺將自動生成圖標的 URL（唯一在線鏈接）。

不論是開發調用，還是運營經理在后臺系統配置，都不需要設計師單獨提供切圖，而是直接調用圖標管理平臺的 URL。這樣大大減少了配置錯誤率，也方便我們隨時對圖標進行更新和換膚，同時提高工作效率。

圖標管理平臺不僅能管理全平臺的公共圖標，業務設計師也可以創建業務圖標空間，滿足不同角色的協同需要。

寫在最后

今天，我們從業務的角度出發，詳細闡述了一個小圖標從誕生到前端應用的全過程。看似一個很小的環節，如果在圖標體量比較大且參與人數多的時候，溝通不暢通，就容易出現失控的情況。

設計師需要感性和理性并存，感性可以為設計注入靈魂，理性可以讓我們從業務角度出發，深入探尋問題本質，逐步找到最終的解決方案，幫助團隊實現更高階的目標。

歡迎關注作者微信公眾號：「 OnepinganDesign」