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