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