原來圖標一稿過是有訣竅的

2021-01-09 人人都是產品經理

編輯導讀:作為一個設計師,有時候在工作中會過度重視美感和創意,辨識度是有了,但是缺失了品牌感。沒有了品牌感,這個圖標就可以放在任意一個產品上使用,無法與品牌產生強聯繫。那麼,如何設計一個有品牌感的圖標呢?本文將從三個方面展開分析,希望對你有幫助。

我們在畫圖標的時候,往往會忽略掉一個重要的問題:缺失品牌感。也就是說,這個圖標和我們的實際品牌、業務並沒有什麼聯繫,它僅僅滿足了可辨識這個溫飽需求。

圖標缺失品牌感,就會導致同質化的問題,這些圖標放在任意一個產品上都可以通用。

對於產品,記憶點的缺失導致用戶看完後對於我們的業務、品牌不會產生任何深刻的印象。對於我們設計師,圖標和業務的斷層則很容易讓我們陷入反覆改稿的被動局面,並且設計話語權也越來越小。

那麼,有沒有什麼系統、易於理解的方法來讓我們的圖標具備品牌感?

當然有。

接下來的這個圖標三步品牌化是我一直在用的辦法,而且屢試不爽,基本用了這個方法,需求方基本一稿過~

文章案例選用了對接京東物流的國際物流項目。當時有一個著陸頁的需求,需要在首屏下的優勢板塊中繪製六個圖標,分別對應平臺的六大優勢。接下來,我將詳細講解如何運用這個圖標三步品牌化方法繪製與品牌息息相關的圖標。

01 融入品牌符號

品牌符號從廣義上來講也就是形狀。

比如天貓最近的雙十一購物節,便是用一個貓頭來作為這次大促的品牌符號,通過每年固定時間節點的品牌形象建立心智。

再比如之前大熱的騰訊綜藝《演員請就位》,它的品牌符號就是不同矩形色塊的疊加組合形態。

通過承載的不同信息可以擴展為不同的類型,比如下面的固態層、圖片層和文字層就分別承載了內容、圖片和文字。

Google在18年於material design中新增了一整塊章節來闡述圖形語言。

google原話是:形狀可以引導注意力,讓用戶易於識別組件,識別狀態和品牌語言傳達。

也就是說,形狀並非我們以往認知中的作用,品牌同樣可以藉助形狀來加強效應。

最典型的就是谷歌自家出品的google play。你可以看到google play被提煉出的三角形符號被作為外輪廓延展到來所有相關的業務icon,顯著加強了品牌記憶點。

再比如國內的螞蟻財富,便是通過提煉logo中的箭頭符號,將其延展到三個優勢圖標當中,一樣得傳達了螞蟻財富的品牌表達。

所以,基於業務目標以及行業特徵,我們將倒三角這個符號作為我們這次項目的品牌符號。

至於為什麼選擇這個形狀,主要考慮到了穩定性(三角形自身的穩定性、象徵專線的穩定可靠)、保障性(倒三角常被用於保障承諾類的徽章標誌)、隱喻物流(由飛機和定位的圖標變形而來)和三者的戰略合作(開鑼、中國製造網和京東)。

02 注入品牌顏色

第二步相對而言就比較簡單了,不過考慮到顏色在各個場景及狀態到通用性,這裡需要基於原本的品牌色額外不同明度的顏色。

這裡我簡單擴展出淡色和深色,為了避免頁面過冷加入了暖色作為點綴色以提升溫度。

03 結合行業特徵

將圖標與業務緊密結合,能夠與其他競品拉開差異化,這是個相對簡單但是很容易出效果的品牌化的方法。

具體的操作辦法就是:首先根據所給文案腦爆出圖標所對應的關鍵詞,然後根據所在行業的特徵篩選關鍵詞,或者進行二次聯想及轉化。

下面我通過此項目中的三個圖標案例來簡單講述下設計過程,僅為大家提供下思路:

1. 第一個圖標

運營所給文案如下:

這段文案意思就是,由於我們平臺和清關行合作,因此讓我們的業務更具有保障性,貨物可以按時送到客戶手中。

這裡我一開始腦爆出了雨傘、鎖和盾牌這三個形象,並且傳統得用了盾牌符號傳達保障性。

這種任何行業平臺都可通用的形象,並不能關聯我們這個物流類的平臺。

後面聯想到到我們跨境、外貿的行業特徵,將「雨傘」這個形象變形轉化為降落傘,來代替盾牌符號。

一來,降落傘外形似傘,相當於是貨物的保護傘一樣體現」保障「的感受, 另外,這種」空運「式的表達也額外傳遞出按時遞交的概念,很好得體現出典型的」跨境物流「的行業特徵。

2. 第二個圖標

運營所給文案如下:

同樣,一開始我著眼於」跟蹤「」實時「」軌跡「這些關鍵詞,腦暴出定位、雷達之類的事物。

但是結合我們行業特徵的話,其實有空間去更貼切到業務本身。

我們平臺的業務線包含了兩個站點——美國(主站)和馬來西亞。供應商發貨後,貨物的軌跡必然是反映在世界地圖中,從起點至終點得分布。

因此我用了地球儀映射全球,以定位來映射包裹收貨地,以延展到定位icon中的虛線映射軌跡。這樣產出的圖標,不僅僅是指代了文案意思,同時表達出對應的行業特徵,和業務緊密貼合。

3. 第三個圖標

文案如下:

一開始,我傳統得想到了一個時鐘圖標來代表。但是仔細想想,這個時鐘圖標僅能代表」時效「的特徵,而不能傳達」快「的感受。如何更好得傳達「快」?

發散思維,我聯想到交通運輸工具,飛機、輪船、火箭等等,最終我選取了飛機這類跨境物流專線主要使用的運輸工具,它所帶來的快捷相比輪船更加深入人心,又不像火箭那樣脫離現實。

當然並非所有的圖標一定需要去結合行業特徵,其餘的三個圖標暫未想到更適合的元素,所以依然選用了常見的形象來傳達概念。我們不需要完全硬坳這個方法,但是身為設計師,我們依然需要掌控我們的項目,充分發揮自己的創造力來賦予產品更多的power。

最後,我為所有圖標加入了非線性動畫。一方面為著陸頁注入了活力,增加用戶愉悅度,另一方面通過動態的表達引導用戶更好理解平臺優勢,比如地球儀通過加入軌跡的修剪動畫以及定位的彈跳動畫,來更生動得傳達物流軌跡全程跟蹤的這個概念。相比原本的靜態圖標是不是更好理解了?

更重要的是,動畫的加入也貼合了我們物流行業「運動」的特徵~

篇幅原因,動畫的製作今天先略過,後面可能另抽時間單獨出個教程出來。當然,動力來自於你們的在看或轉發啊~~(手動斜眼)

4. 小結

我們每次接手一個需求時,都要想想,這個設計可以在哪些地方和我們的業務、品牌進行關聯?而不是每次都好像在做一個完全獨立於業務外的項目,這很容易讓你陷入反覆改稿的被動局面,而且話語權也越來越小。

總之,品牌思維是需要設計師格外關注的!

最後,我們再來回顧一下這個圖標三步品牌化這個方法!

第一步,融入品牌符號;第二步,注入品牌顏色;第三步,結合行業特徵。

但願今日份的分享對你有所幫助!

本文由 @Andrewchen 原創發布於人人都是產品經理,未經許可,禁止轉載。

題圖來自 Unsplash,基於CC0協議。

相關焦點

  • Sandu 新書 | 圖標萬象:現代圖標的創新設計與應用
    Iconism:Designing Modern Icons and Pictograms《圖標萬象》是一本啟發靈感的現代圖標設計類書籍。本書設三大分類——視覺識別、導視系統、交互系統。來自世界各地的設計師以新穎而富有視覺衝擊的風格彰顯了現代圖標在我們日常生活中建立有效溝通的重要性。
  • 幹煸花菜好吃有訣竅,這樣做,不加肉也好吃,原來是加了「它」!
    幹煸花菜好吃有訣竅,這樣做,不加肉也好吃,原來是加了「它」!幹煸花菜好吃有訣竅,這樣做,不加肉也好吃,原來是加了老乾媽!
  • 原來有訣竅,牢記這3點,苦瓜好吃不苦
    原來有訣竅,牢記這3點,苦瓜好吃不苦!苦瓜可以說是一種應季的蔬菜,隨著天氣逐漸在加熱,我們也是能在超市裡看到有賣苦瓜的,苦瓜一直以來是一種褒貶不一的蔬菜,喜歡吃它的人是因為它的營養價值非常的高,不喜歡吃它的人是因為苦瓜有一種很苦的味道,如果沒有將苦瓜處理好,味道真的是特別的難吃。
  • 蘋果手機月亮圖標是幹什麼的?用處原來這麼大,真是長見識了
    蘋果手機月亮圖標是幹嘛的?用處原來這麼大,可惜今天才會用用過蘋果手機的都知道,手機裡面一些功能都是用圖標代替,導致很多人忽略了裡面的一些用途。呼聲最高的就屬蘋果手機"月亮"圖標,因為長相像一個月亮而得名。那麼到底這個月亮圖標有什麼作用呢?
  • 燉魚好吃有訣竅,原來加水才是關鍵,記住這些,魚腥味全部消失
    很多人都愛吃魚,因為魚肉和其他肉類是不同的,因為魚有很多種,每種魚的肉質量和味道都不同,所以有很多種魚可以吃,有些可以生吃,也有家庭習俗,油炸吃,燉魚,蒸肉吃,吃的方式很多。但是,每種魚的味道都很不一樣。30年酒店大廚傳授:燉魚記住這3點,魚肉鮮嫩沒腥味,就是香!
  • 中文論文翻譯成英文論文再投英文期刊算不算一稿多投?
    但是,我把徵稿函發出後,發現老師們有各種各樣的疑問和問題。很多問題都是我始料未及的,比如這條:「中文論文翻譯成英文論文再投英文期刊算不算一稿多投?」這個問題問的人非常多,很多人都有疑惑或者是內心有不安。因為近年來爆出的很多學術不端的事情讓大家都人心惶惶。我原來在《論文寫作發表全攻略》這本書裡講過這個問題。
  • 蘋果ios14桌面小組件怎麼改圖標 更換桌面圖標設置教程
    ios14小組件除了自定義桌面圖片之外,還可以更換圖標,使得每個軟體圖標都有不一樣的變化,讓你的桌面煥然一新,這裡需要使用快捷指令來完成,ios14小組件怎麼更換圖標?怎麼設置?下面帶來介紹。ios14小組件怎麼更換圖標?
  • 蘋果iOS14修改了三個圖標,還增加了兩個新圖標!
    iOS3.0-iOS 14 圖標變化 接下來讓我們逐個看看新舊圖標都有哪些細節上的變化 更新的三個圖標 音樂 先說說變化不太大的音樂圖標。「音樂」是iOS內置的一款音樂資料庫,自2007年隨著 iPhone OS 1誕生以來,該應用的圖標有過多次變化。
  • Windows 10圖標為啥那麼醜?根源找到了!-Windows 10,圖標,醜——快...
    大家都說Windows 10圖標醜。我也這麼覺得,不過我認為,如果要把圖標改得順眼點,也沒那麼麻煩,只要找到問題出在哪裡,簡單調整後的圖標就會好很多。這樣,原來的3D圖標就不顯得突兀。
  • 12個圖標logo資源網站整理,有哪些分享圖標資源的網站?
    最近發現很多小夥伴在因為圖標煩惱,做張圖到處找圖標,弄個logo也需要各種各樣的圖標,為此,我也找了找,發現了很多不錯的圖標網站,提供大量的不同格式的圖標共用戶使用,今天整理給大家,希望對你有用。01Flaticon矢量圖標資源網站。
  • 原來做法有訣竅,看完終於學會了
    原來做法有訣竅,看完終於學會了。哈嘍,大家好。我是大廚江一舟,今天又到了和大家分享美食的時刻了,你準備好了嗎?杏鮑菇是屬於菌類的一種食材,因為它的營養價值比較豐富,吃起來有嚼勁,所以很多朋友都將杏鮑菇稱為「素中之葷」。很多朋友都喜歡吃飯店裡的炒杏鮑菇,但是將杏鮑菇真正的買回家之後,卻不知道應該如何操作了。
  • iPhone 的這些圖標,你都認識嗎?
    iPhone 狀態欄的圖標排布方式一直都很規整,一般情況下除了常用的信號、時間、電池等圖標之外,並沒有其它多餘的圖標顯示。而在平時使用的時候,iPhone 的狀態欄會根據設備的運行狀態顯示一些狀態圖標或符號,如果你對這些圖標了如指掌的話,就可以更準確的了解目前 iPhone 的工作狀態。下面果粉俱樂部就帶大家一起來看看,iPhone 上的這些狀態圖標和符號都代表了什麼含義。
  • 樣板房軟裝有什麼訣竅?-韋美設計
    那麼您知道樣板房軟裝有什麼訣竅嗎?下面韋美設計小編為您介紹: 樣板房軟裝的訣竅,如下: 1、客戶定位 根據室內空間的大小形狀確定軟裝的風格與居住者的職業愛好,根據職業愛好來確定軟裝設計的主題
  • 《CF》擊殺圖標體驗有獎活動怎麼玩 擊殺圖標體驗有獎活動介紹
    導 讀 CF擊殺圖標體驗有獎活動入口在哪?活動在哪參加?相信不少小夥伴都很好奇這個活動的具體情況吧,那麼今天九遊小編就給大家介紹下吧!
  • app設計中常用的一些圖標風格有?
    app設計中常用的一些圖標風格有?在app設計中,圖標設計可說是可大可小,那麼對於零基礎學ui設計的新人而言,app設計中常用的圖標風格有哪些呢?今天我們就來簡單的說說。
  • 筆記本無線圖標不顯示找回圖標方法
    筆記本無線圖標不顯示或者不見了怎麼回事?這是不少筆記本用戶所經常會問到的一個問題,導致的原因有很多,解決起來也並不難,下面悟途網小編詳細介紹下筆記本無線圖標不見了的原因與解決辦法。c.)筆記本使用無線上網,找不到圖標,也無法上網,對於這種情況,需要檢查筆記本無線網卡驅動是否正常,無線網卡是否被禁用,是否設置了隱藏無線圖標等,具體排除方法如下。
  • 汽車儀錶盤圖標大全_汽車儀錶盤圖標圖解
    打開APP 汽車儀錶盤圖標大全_汽車儀錶盤圖標圖解 發表於 2018-01-11 10:58:03   對於拿到駕照不久的小夥伴來說
  • 水果圖標
    水果圖標 聊天社交 大小: 1.97M 版本: 1.2
  • 怎麼製作ICON圖標 圖片轉ICON圖標方法
    怎麼製作ICON圖標 圖片轉ICON圖標方法?接下來就與大家分享一下,有關利用軟體製作ICON圖標的方法,同時也介紹利用相關轉換工具實現圖片轉ICON的方法。方法/步驟首先,我們需要藉助如圖所示的工具實現ICON圖標的製作。
  • 變Win7硬碟圖標攻略
    Windows7系統雖然美觀絢麗但對於某些對個性化有高要求的電腦用戶來說,依然想根據自己的喜好把Windows7系統進行天翻地覆的改變,最近,筆者成功的把自己使用的Win7旗艦版的硬碟圖標更改了,你想不想知道是如何實現的?