小圖標(biāo)是界面的核心組成部分，承載著信息傳遞的重要作用。作為頁面的最小展示單位，圖標(biāo)設(shè)計(jì)也是最能考驗(yàn)設(shè)計(jì)師基本功的一項(xiàng)工作。

不過設(shè)計(jì)師熟練掌握的，往往只是單個(gè)圖標(biāo)的風(fēng)格化繪制方法。在這個(gè)過程中，設(shè)計(jì)師更關(guān)注圖標(biāo)的美感和細(xì)節(jié)，而忽略了從宏觀的角度考量「圖標(biāo)表達(dá)的準(zhǔn)確性」、「不同圖標(biāo)之間的關(guān)聯(lián)」、以及如何幫助業(yè)務(wù)「快速實(shí)現(xiàn)客制化功能」。

一、金融行業(yè)圖標(biāo)設(shè)計(jì)常見問題

問題 1：金融行業(yè)功能服務(wù)名詞抽象，設(shè)計(jì)師難以精準(zhǔn)表達(dá)

金融行業(yè)內(nèi)，許多功能服務(wù)名詞抽象，如工資理財(cái)、活期產(chǎn)品、定期產(chǎn)品，都沒有可直接映射的物理形態(tài)，行業(yè)內(nèi)也沒有統(tǒng)一標(biāo)準(zhǔn)，設(shè)計(jì)師只能憑借經(jīng)驗(yàn)繪制，難以精準(zhǔn)表達(dá)。

問題 2：關(guān)鍵詞圖形化的結(jié)果不一致，增加了客戶的認(rèn)知難度

參與圖標(biāo)繪制的設(shè)計(jì)師分散在各業(yè)務(wù)線，每個(gè)人都依據(jù)自己的經(jīng)驗(yàn)自由發(fā)揮，導(dǎo)致對(duì)同一關(guān)鍵詞呈現(xiàn)的圖形化結(jié)果不一致，增加了客戶的認(rèn)知難度。

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

以往的工作模式，由不同的設(shè)計(jì)師提供切圖給不同的運(yùn)營(yíng)經(jīng)理進(jìn)行配置，這樣多對(duì)多的模式導(dǎo)致溝通成本高，還經(jīng)常出現(xiàn)配置重復(fù)、錯(cuò)誤等問題。

接下來，我們將從平安銀行業(yè)務(wù)的特性出發(fā)，以金剛區(qū)雙色圖標(biāo)為例，還原一個(gè)圖標(biāo)從誕生到前端展示的全過程，分享建設(shè)圖標(biāo)生態(tài)過程中的實(shí)踐經(jīng)驗(yàn)：2 個(gè)方法和 1 個(gè)工具「聯(lián)想篩選法」「圖標(biāo)元素周期表」和「圖標(biāo)管理平臺(tái)」。

二、聯(lián)想篩選法

平安銀行 App 是一款金融領(lǐng)域的 C 端產(chǎn)品，覆蓋了賬戶、理財(cái)、貸款、保險(xiǎn)和生活等多項(xiàng)綜合服務(wù)，擁有著 400+豐富的功能服務(wù)類型，同時(shí)，這些功能服務(wù)的名稱相較于其他行業(yè)都更為抽象。

比如大家經(jīng)常能接觸到的電商平臺(tái)，購(gòu)物車、服飾、鞋包等，都有非常明確的物理形態(tài)，設(shè)計(jì)師只需要據(jù)此進(jìn)行風(fēng)格化處理，即可形成一個(gè)能精準(zhǔn)表達(dá)相應(yīng)含義的圖標(biāo)。

但是在金融領(lǐng)域，許多功能對(duì)應(yīng)的則是虛擬服務(wù)。如理財(cái)或保險(xiǎn)，是沒有物理形態(tài)的，且業(yè)內(nèi)沒有形成統(tǒng)一的標(biāo)準(zhǔn)，在用戶層面還沒有建立起統(tǒng)一的認(rèn)知。那么如何繪制易理解、易識(shí)別的圖標(biāo)，是對(duì)設(shè)計(jì)師的一個(gè)考驗(yàn)。這里向大家介紹一種相對(duì)普適的方法「聯(lián)想篩選法」，主要分為三步：

第一步 了解服務(wù)特點(diǎn)

圖標(biāo)代表某一功能服務(wù)的入口，起到幫助用戶定位識(shí)別的作用，所以我們只有充分了解這項(xiàng)服務(wù)的實(shí)際含義與特點(diǎn)，才能真正繪制好一個(gè)圖標(biāo)。以保險(xiǎn)為例，設(shè)計(jì)師首先需要思考保險(xiǎn)是什么？它是給消費(fèi)者提供保障與補(bǔ)償，幫助消費(fèi)者抵御風(fēng)險(xiǎn)的系列產(chǎn)品。因此我們?cè)诶L制圖標(biāo)時(shí)，需要充分體現(xiàn)"保障"和"抵御風(fēng)險(xiǎn)"的作用。

第二步 映射聯(lián)想

了解服務(wù)特點(diǎn)后，設(shè)計(jì)師可進(jìn)行簡(jiǎn)單的圖形發(fā)散，即根據(jù)這項(xiàng)服務(wù)的實(shí)際含義和特點(diǎn)，聯(lián)想相關(guān)的圖形。比如下雨天撐起的一把傘、起到保護(hù)作用的盾牌、保險(xiǎn)箱或一把鎖，再比如在保險(xiǎn)服務(wù)過程中用戶通常接觸到的一些實(shí)體物件，如保單。

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

第三步 查重篩選

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

① 契合度

主要是分析哪個(gè)圖形與該功能定義更為貼切。對(duì)于保險(xiǎn)來說，契合度排序?yàn)椋憾芘疲颈?＞雨傘＞鎖。

② 專屬性

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

③ 拓展性

需要考慮該圖形在造型上是否容易和其他圖形組合。因?yàn)楣δ芊?wù)往往不是單獨(dú)存在的，通常會(huì)與一些相關(guān)功能共用圖形（在第 2 個(gè)小節(jié)我們會(huì)分析拓展性案例）。

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

三、圖標(biāo)元素周期表

通過上述聯(lián)想篩選的方法，可以幫助設(shè)計(jì)師快速選擇出與功能服務(wù)契合度較高的圖形。不過繪制圖標(biāo)的設(shè)計(jì)師，是分散在各業(yè)務(wù)線，其中不乏新入職的同學(xué)。大家對(duì)方法的理解和掌握程度不一，導(dǎo)致不同的設(shè)計(jì)師，對(duì)同一關(guān)鍵詞圖形化的結(jié)果不一致，具體表現(xiàn)如下：

同類型的功能服務(wù)，設(shè)計(jì)師使用完全不同的圖形化元素，從而難以建立長(zhǎng)期統(tǒng)一的客戶認(rèn)知。例如，同時(shí)用皇冠和鉆石代表「權(quán)益」相關(guān)功能。

即使圖形元素一致，在風(fēng)格化繪制的過程中，也會(huì)出現(xiàn)多種不同的樣式。例如常用的人民幣符號(hào)，在前期上線時(shí)就出現(xiàn)了七八種樣式。

為了解決上述問題，我們嘗試沉淀出一套實(shí)現(xiàn)標(biāo)準(zhǔn)圖形規(guī)范的快捷方式「圖標(biāo)元素周期表」：

經(jīng)過分析，現(xiàn)有功能服務(wù)名稱多為 A+B 的組合結(jié)構(gòu)。還是以保險(xiǎn)為例，相關(guān)的功能有保險(xiǎn)商城、保險(xiǎn)服務(wù)、保險(xiǎn)測(cè)評(píng)、跨境保險(xiǎn)等，這類組合功能我們可以將其拆分為：保險(xiǎn)+服務(wù)、保險(xiǎn)+商城、跨境+保險(xiǎn)這樣的形式，進(jìn)行圖標(biāo)設(shè)計(jì)。

這樣我們只要組合兩個(gè)獨(dú)立元素，就可以得到表意精確的組合圖標(biāo)，組合的形式可以是內(nèi)外或左右結(jié)構(gòu)：

獨(dú)立元素可以分為主圖形和輔圖形，經(jīng)過組件化，最終形成「圖標(biāo)元素周期表」。

業(yè)務(wù)設(shè)計(jì)師可以根據(jù)功能服務(wù)的特性，自由組合主輔圖形即可。這大大減少了圖形化結(jié)果不一致和樣式不統(tǒng)一的問題。

不斷重復(fù)應(yīng)用關(guān)鍵圖形，可以建立并強(qiáng)化客戶對(duì)相關(guān)功能服務(wù)的整體認(rèn)知。當(dāng)客戶看到盾牌，馬上可以聯(lián)想到保險(xiǎn)，就像看到放大鏡，就知道是搜索功能一樣。

四、圖標(biāo)管理平臺(tái)

前兩個(gè)部分介紹了聯(lián)想篩選法和圖標(biāo)元素周期表兩種方法，可以幫助設(shè)計(jì)師完成圖標(biāo)繪制。不過要使精心設(shè)計(jì)的圖標(biāo)，在前端正確展示，還需要開發(fā)與運(yùn)營(yíng)經(jīng)理的參與。

以平安銀行為例，依托智能推薦能力，我們?yōu)榭蛻籼峁┣饲娴姆?wù)，且針對(duì)不同資產(chǎn)等級(jí)的客戶，定制更符合客群審美的專屬主題。因此在 UI 層面，圖標(biāo)需要配置更靈活以及滿足換膚需要。

我們嘗試構(gòu)建「 圖標(biāo)管理平臺(tái) (ICON ZOO) 」，旨在為設(shè)計(jì)師、開發(fā)和運(yùn)營(yíng)經(jīng)理搭建溝通橋梁，將繪制好的圖標(biāo)標(biāo)準(zhǔn)化命名，上傳至圖標(biāo)管理平臺(tái)，平臺(tái)將自動(dòng)生成圖標(biāo)的 URL（唯一在線鏈接）。

不論是開發(fā)調(diào)用，還是運(yùn)營(yíng)經(jīng)理在后臺(tái)系統(tǒng)配置，都不需要設(shè)計(jì)師單獨(dú)提供切圖，而是直接調(diào)用圖標(biāo)管理平臺(tái)的 URL。這樣大大減少了配置錯(cuò)誤率，也方便我們隨時(shí)對(duì)圖標(biāo)進(jìn)行更新和換膚，同時(shí)提高工作效率。

圖標(biāo)管理平臺(tái)不僅能管理全平臺(tái)的公共圖標(biāo)，業(yè)務(wù)設(shè)計(jì)師也可以創(chuàng)建業(yè)務(wù)圖標(biāo)空間，滿足不同角色的協(xié)同需要。

寫在最后

今天，我們從業(yè)務(wù)的角度出發(fā)，詳細(xì)闡述了一個(gè)小圖標(biāo)從誕生到前端應(yīng)用的全過程?？此埔粋€(gè)很小的環(huán)節(jié)，如果在圖標(biāo)體量比較大且參與人數(shù)多的時(shí)候，溝通不暢通，就容易出現(xiàn)失控的情況。

設(shè)計(jì)師需要感性和理性并存，感性可以為設(shè)計(jì)注入靈魂，理性可以讓我們從業(yè)務(wù)角度出發(fā)，深入探尋問題本質(zhì)，逐步找到最終的解決方案，幫助團(tuán)隊(duì)實(shí)現(xiàn)更高階的目標(biāo)。

作者：OnepinganDesign