2020-11-6 周周
編輯導(dǎo)讀：作為一個設(shè)計師，有時候在工作中會過度重視美感和創(chuàng)意，辨識度是有了，但是缺失了品牌感。沒有了品牌感，這個圖標就可以放在任意一個產(chǎn)品上使用，無法與品牌產(chǎn)生強聯(lián)系。那么，如何設(shè)計一個有品牌感的圖標呢？本文將從三個方面展開分析，希望對你有幫助。
我們在畫圖標的時候，往往會忽略掉一個重要的問題：缺失品牌感。也就是說，這個圖標和我們的實際品牌、業(yè)務(wù)并沒有什么聯(lián)系，它僅僅滿足了可辨識這個溫飽需求。
圖標缺失品牌感，就會導(dǎo)致同質(zhì)化的問題，這些圖標放在任意一個產(chǎn)品上都可以通用。
對于產(chǎn)品，記憶點的缺失導(dǎo)致用戶看完后對于我們的業(yè)務(wù)、品牌不會產(chǎn)生任何深刻的印象。對于我們設(shè)計師，圖標和業(yè)務(wù)的斷層則很容易讓我們陷入反復(fù)改稿的被動局面，并且設(shè)計話語權(quán)也越來越小。
那么，有沒有什么系統(tǒng)、易于理解的方法來讓我們的圖標具備品牌感？
當(dāng)然有。
接下來的這個圖標三步品牌化是我一直在用的辦法，而且屢試不爽，基本用了這個方法，需求方基本一稿過～
文章案例選用了對接京東物流的國際物流項目。當(dāng)時有一個著陸頁的需求，需要在首屏下的優(yōu)勢板塊中繪制六個圖標，分別對應(yīng)平臺的六大優(yōu)勢。接下來，我將詳細講解如何運用這個圖標三步品牌化方法繪制與品牌息息相關(guān)的圖標。
品牌符號從廣義上來講也就是形狀。
比如天貓最近的雙十一購物節(jié)，便是用一個貓頭來作為這次大促的品牌符號，通過每年固定時間節(jié)點的品牌形象建立心智。
再比如之前大熱的騰訊綜藝《演員請就位》，它的品牌符號就是不同矩形色塊的疊加組合形態(tài)。
通過承載的不同信息可以擴展為不同的類型，比如下面的固態(tài)層、圖片層和文字層就分別承載了內(nèi)容、圖片和文字。
Google在18年于material design中新增了一整塊章節(jié)來闡述圖形語言。
google原話是：形狀可以引導(dǎo)注意力，讓用戶易于識別組件，識別狀態(tài)和品牌語言傳達。
也就是說，形狀并非我們以往認知中的作用，品牌同樣可以借助形狀來加強效應(yīng)。
最典型的就是谷歌自家出品的google play。你可以看到google play被提煉出的三角形符號被作為外輪廓延展到來所有相關(guān)的業(yè)務(wù)icon，顯著加強了品牌記憶點。
再比如國內(nèi)的螞蟻財富，便是通過提煉logo中的箭頭符號，將其延展到三個優(yōu)勢圖標當(dāng)中，一樣得傳達了螞蟻財富的品牌表達。
所以，基于業(yè)務(wù)目標以及行業(yè)特征，我們將倒三角這個符號作為我們這次項目的品牌符號。
至于為什么選擇這個形狀，主要考慮到了穩(wěn)定性（三角形自身的穩(wěn)定性、象征專線的穩(wěn)定可靠）、保障性（倒三角常被用于保障承諾類的徽章標志）、隱喻物流（由飛機和定位的圖標變形而來）和三者的戰(zhàn)略合作（開鑼、中國制造網(wǎng)和京東）。
第二步相對而言就比較簡單了，不過考慮到顏色在各個場景及狀態(tài)到通用性，這里需要基于原本的品牌色額外不同明度的顏色。
這里我簡單擴展出淡色和深色，為了避免頁面過冷加入了暖色作為點綴色以提升溫度。
將圖標與業(yè)務(wù)緊密結(jié)合，能夠與其他競品拉開差異化，這是個相對簡單但是很容易出效果的品牌化的方法。
具體的操作辦法就是：首先根據(jù)所給文案腦爆出圖標所對應(yīng)的關(guān)鍵詞，然后根據(jù)所在行業(yè)的特征篩選關(guān)鍵詞，或者進行二次聯(lián)想及轉(zhuǎn)化。
下面我通過此項目中的三個圖標案例來簡單講述下設(shè)計過程，僅為大家提供下思路：
運營所給文案如下：
這段文案意思就是，由于我們平臺和清關(guān)行合作，因此讓我們的業(yè)務(wù)更具有保障性，貨物可以按時送到客戶手中。
這里我一開始腦爆出了雨傘、鎖和盾牌這三個形象，并且傳統(tǒng)得用了盾牌符號傳達保障性。
這種任何行業(yè)平臺都可通用的形象，并不能關(guān)聯(lián)我們這個物流類的平臺。
后面聯(lián)想到到我們跨境、外貿(mào)的行業(yè)特征，將“雨傘”這個形象變形轉(zhuǎn)化為降落傘，來代替盾牌符號。
一來，降落傘外形似傘，相當(dāng)于是貨物的保護傘一樣體現(xiàn)”保障“的感受， 另外，這種”空運“式的表達也額外傳遞出按時遞交的概念，很好得體現(xiàn)出典型的”跨境物流“的行業(yè)特征。
運營所給文案如下：
同樣，一開始我著眼于”跟蹤“”實時“”軌跡“這些關(guān)鍵詞，腦暴出定位、雷達之類的事物。
但是結(jié)合我們行業(yè)特征的話，其實有空間去更貼切到業(yè)務(wù)本身。
我們平臺的業(yè)務(wù)線包含了兩個站點——美國（主站）和馬來西亞。供應(yīng)商發(fā)貨后，貨物的軌跡必然是反映在世界地圖中，從起點至終點得分布。
因此我用了地球儀映射全球，以定位來映射包裹收貨地，以延展到定位icon中的虛線映射軌跡。這樣產(chǎn)出的圖標，不僅僅是指代了文案意思，同時表達出對應(yīng)的行業(yè)特征，和業(yè)務(wù)緊密貼合。
文案如下：
一開始，我傳統(tǒng)得想到了一個時鐘圖標來代表。但是仔細想想，這個時鐘圖標僅能代表”時效“的特征，而不能傳達”快“的感受。如何更好得傳達“快”？
發(fā)散思維，我聯(lián)想到交通運輸工具，飛機、輪船、火箭等等，最終我選取了飛機這類跨境物流專線主要使用的運輸工具，它所帶來的快捷相比輪船更加深入人心，又不像火箭那樣脫離現(xiàn)實。
當(dāng)然并非所有的圖標一定需要去結(jié)合行業(yè)特征，其余的三個圖標暫未想到更適合的元素，所以依然選用了常見的形象來傳達概念。我們不需要完全硬坳這個方法，但是身為設(shè)計師，我們依然需要掌控我們的項目，充分發(fā)揮自己的創(chuàng)造力來賦予產(chǎn)品更多的power。
最后，我為所有圖標加入了非線性動畫。一方面為著陸頁注入了活力，增加用戶愉悅度，另一方面通過動態(tài)的表達引導(dǎo)用戶更好理解平臺優(yōu)勢，比如地球儀通過加入軌跡的修剪動畫以及定位的彈跳動畫，來更生動得傳達物流軌跡全程跟蹤的這個概念。相比原本的靜態(tài)圖標是不是更好理解了？
更重要的是，動畫的加入也貼合了我們物流行業(yè)“運動”的特征~
篇幅原因，動畫的制作今天先略過，后面可能另抽時間單獨出個教程出來。當(dāng)然，動力來自于你們的在看或轉(zhuǎn)發(fā)啊～～（手動斜眼）
我們每次接手一個需求時，都要想想，這個設(shè)計可以在哪些地方和我們的業(yè)務(wù)、品牌進行關(guān)聯(lián)？而不是每次都好像在做一個完全獨立于業(yè)務(wù)外的項目，這很容易讓你陷入反復(fù)改稿的被動局面，而且話語權(quán)也越來越小。
總之，品牌思維是需要設(shè)計師格外關(guān)注的！
最后，我們再來回顧一下這個圖標三步品牌化這個方法！
第一步，融入品牌符號；第二步，注入品牌顏色；第三步，結(jié)合行業(yè)特征。
但愿今日份的分享對你有所幫助！
文章來源：人人都是產(chǎn)品經(jīng)理 作者：Andrewchen
藍藍設(shè)計( www.bouu.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)
藍藍設(shè)計的小編 http://www.bouu.cn