設(shè)計分享:輔助圖形的重要性

2 評論 25809 瀏覽 51 收藏 14 分鐘

今天筆者會把一些工作中關(guān)于輔助圖形的經(jīng)驗分享給大家。

很多設(shè)計師做品牌設(shè)計,會把較多精力放在LOGO設(shè)計上,卻很少有人去認(rèn)真設(shè)計一款輔助圖形。其實一個好的輔助圖形能給品牌加分不少,它可以讓品牌價值得到提升,豐富品牌的傳播、強(qiáng)化品牌和企業(yè)形象,今天筆者會把一些工作中關(guān)于輔助圖形的經(jīng)驗分享給大家。

首先來看兩張圖,第一眼其實很難辨別出來這2輛車來自于哪2個汽車品牌?;蛘叩谝谎劭闯鰜硎锹坊⒑完戯L(fēng),但是不知道哪輛是路虎哪輛是陸風(fēng),是否有同感?

看到正面之后,我們看到LOGO和一些差異化的設(shè)計,以及一些輔助元素的露出之后才能輕易識別出差異。

這就是視覺無差異化造成的品牌識別混亂。那么決定視覺差異化的元素有哪些呢?大體上可分別為LOGO、顏色、造型、字體、輔助圖形……等等一些元素。今天我們探討的重點就是輔助圖形。

一、什么是輔助圖形

輔助圖形,是VI系統(tǒng)中不可缺少的一部分,它可以讓品牌價值得到提升,豐富品牌的傳播、強(qiáng)化品牌和企業(yè)形象,使其產(chǎn)品與競品更具差異化。

日常生活中隨處可見的輔助圖形——紋身,它有好看的,也有不好看的,以下兩個可能還算好看的。

但有一些就是比較失敗的案例了,雖然有性格,但如果用不好它將會顯得很糟糕。

所以,輔助圖形它應(yīng)該是:量身定做、有美感、有個性、有含義的。

另外,如果把人當(dāng)成產(chǎn)品來看待的話。那么我們穿的衣服就是輔助圖形,比如你今天穿紅的,明天穿綠的,后天穿個小碎花。衣服就成了輔助人的元素了。

我們也常常看到娛樂圈的明星們?yōu)榱吮让罓幤G而恰巧撞衫,其實明星們并不想撞衫,她們都希望自己是獨一無二的,誰都不愿意自己像誰。

但是在產(chǎn)品設(shè)計里,我們常??吹阶采赖漠a(chǎn)品,甚至有些產(chǎn)品是故意撞衫。這到底是好還是不好呢?我們繼續(xù)往下看……

我們再來看這幾個撞衫的產(chǎn)品,其實不說名字真的傻傻分不清楚,如果同時安裝了它們,還會常常點錯。

所以個人認(rèn)為在產(chǎn)品設(shè)計中,盡量避免撞衫。

輔助圖形設(shè)計需要注意的幾個方面:

  1. 有含義:每一個設(shè)計都要有它貼題的意義,不能無中生有;
  2. 有性格:它是屬于活潑的?可愛的?還是什么性格?要提前設(shè)定好;
  3. 有美感:如果不好看,說的再好聽也是爛泥扶不上墻;
  4. 非通用:它是量身定做的產(chǎn)物,而不是到處可以使用的;

二、輔助圖形的常見問題

2.1 輔助圖形的3種層次

在做品牌設(shè)計的過程當(dāng)中,輔助圖形是很容易被忽略的,很多人不知道怎么去設(shè)計,一般有以下三大階段。

  1. 初中級設(shè)計師,通常是直接使用素材,就像一個走模仿路線的演員,只會模仿,沒有自己的風(fēng)格形象。
  2. 高級設(shè)計師,掌握了一些經(jīng)驗和理論,能獨立完成創(chuàng)作。在業(yè)內(nèi)得到行業(yè)的認(rèn)可或者獎項,這個屬于高級設(shè)計師。
  3. 資深設(shè)計師,要么不做,要做就做精品。這種態(tài)度就是資深設(shè)計師。

有輔助圖形和沒有輔助圖形有什么區(qū)別呢?下面我們可以看一些例子,首先是網(wǎng)易七魚官網(wǎng):

沒有輔助圖形的模塊好像很干凈,有輔助圖形的好像復(fù)雜些,干凈是沒錯,但會像沒做完的東西,設(shè)計的完整性不夠,同時也缺乏一些氛圍。

再來看另外一個例子:網(wǎng)易易盾,在同一個頁面上用了兩種完全不同的輔助圖形,這是很不好的習(xí)慣和做法。

然后我們做了一個改版,把網(wǎng)易七魚的那套輔助圖形用在這里,美感上也沒問題,但之前我們講過輔助圖形有個特點就是“非通用”,不能串用,所以這樣也是不可行的。因為串用了以后又變成撞衫了,也是一種不好的現(xiàn)象。

產(chǎn)品還是需要有它的獨特性,輔助圖形也要有差異化,于是我們針對網(wǎng)易易盾量身定制了全新的輔助圖形。如下:

2.2 輔助圖形太密集,缺乏美感,喧賓奪主

2.3 圖形缺乏美感

三、優(yōu)秀輔助圖形展示

3.1 韓國電商品牌“11街”

在箭頭上做了延展,在LOGO基礎(chǔ)上延伸出了輔助圖形。英文、韓文、中文都做了適配。個性鮮明、造型特征明顯,容易識別,同時具備設(shè)計感。

3.2 韓國購物中心“DOOTA”

將商品按規(guī)律排列后,從上到下推理出造型,最后賦予它顏色、含義。最后的成品也是相當(dāng)有美感和設(shè)計感。

plusX 輔助圖形應(yīng)用視頻

輔助圖形設(shè)計需要注意的5個問題:

  1. 形式感:是否過于呆板、過于普通;
  2. 美感:是否缺乏設(shè)計感,比如造形、輪廓、配色都有美感嗎?
  3. 統(tǒng)一:是否過于凌亂;
  4. 不喧賓奪主:輔助圖形只是輔助,平輔使用時不能過于明顯;
  5. 可用性強(qiáng):它能適用于各種情況下的組合嗎?比如,獨立使用時,平輔使用時,或是與LOGO結(jié)合時都可以和諧使用嗎?

四、如何設(shè)計輔助圖形

4.1 局部應(yīng)用法

直接沿用LOGO圖形的某個局部,如天貓。

4.2 拆分組合法

將LOGO的元素進(jìn)行拆分組合,應(yīng)用于相關(guān)延展設(shè)計。

4.3 聯(lián)想發(fā)散法

有些LOGO很難從圖形延展出輔助圖形,所以要從產(chǎn)品本身去聯(lián)想發(fā)散設(shè)計思路,把聯(lián)想到的內(nèi)容都先記下來,取一個最靠譜最容易實現(xiàn)的。比如七魚這個案例設(shè)計師就是這樣做的,最后采用了“水波”這個元素來進(jìn)行設(shè)計,成為網(wǎng)易七魚這款產(chǎn)品的輔助圖形。

案例1:網(wǎng)易七魚——客服系統(tǒng)

產(chǎn)品功能:客服。于是我們會聯(lián)想到,對話氣泡、耳機(jī)、聲波

“七魚”:水、波浪、魚

七魚最終采用了穩(wěn)定的三角形的鏈接形成“水波”一樣的輔助圖形,比喻“魚”在一片藍(lán)海中遨游,生命力旺盛的感覺。三點連接形成穩(wěn)定的三角形,表達(dá)七魚通過專業(yè)、穩(wěn)定的技術(shù)支持連接客戶+用戶。無限延伸的三角形組合蘊(yùn)含了七魚云客服的智能與高效,全智能。

以下是七魚輔助圖形落地應(yīng)用,最終成品,讓我感覺“七魚”活躍在大海之上,生命力非常頑強(qiáng)的感覺。

web端

移動端

案例2:網(wǎng)易文學(xué)

想到文學(xué),從字面理解,我們會想到文字、作家文豪、先古圣人、歷史……慢慢會聯(lián)想到與文化感相關(guān)的事物,比如墨水、毛筆一些相關(guān)的聯(lián)想。

這個設(shè)計最終還是從眾多發(fā)散點集中在書法上進(jìn)行了設(shè)計。用橫豎撇捺等等筆畫,以書法的一個方式來做了輔助圖形,應(yīng)用到了品牌推廣及一些線下物料中。

設(shè)計輔助圖形的過程需要注意的事項:

  1. 明確設(shè)計方向:產(chǎn)品特征、服務(wù)范圍、產(chǎn)品功能是什么?
  2. 提取關(guān)鍵詞:進(jìn)行相關(guān)的聯(lián)想,最后提取有效的、有意義的關(guān)鍵詞進(jìn)行設(shè)計;
  3. 圖形設(shè)計:避免出現(xiàn)LOW的感覺,學(xué)會分寸拿捏,考慮可用性;
  4. 圖形應(yīng)用場景設(shè)計:設(shè)計好的輔助圖形要進(jìn)行場景試用包裝一下,發(fā)現(xiàn)問題及時改正。

篇幅有限,關(guān)于輔助圖形設(shè)計,有很多可以探討的方面,今天先說到這里,希望以上內(nèi)容可以在設(shè)計上幫助到大家,謝謝。

最后推薦一本關(guān)于輔助圖形書給大家——《Shapes有形》

 

作者:吳挺聰,網(wǎng)易UEDC資深視覺設(shè)計師

本文來源于人人都是產(chǎn)品經(jīng)理合作媒體@網(wǎng)易UEDC,作者@吳挺聰

題圖來自unsplash,基于 CC0 協(xié)議

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 設(shè)計輔助圖形的過程需要注意的事項,輔助圖形設(shè)計需要注意的5個問題,輔助圖形設(shè)計需要注意的幾個方面。為啥不能放在一起寫呢

    來自北京 回復(fù)
  2. 學(xué)習(xí)了,感謝大牛分享。

    來自廣西 回復(fù)