B端基礎(chǔ) | 規(guī)范的做一套有特點(diǎn)的中后臺(tái)ICON

2025-3-18    天宇 B端ui設(shè)計(jì)文章及欣賞

 

我與ICON的設(shè)計(jì)好像有什么不結(jié)之緣。早在2017年我就寫過一篇如果對抗APP中ICON設(shè)計(jì)同質(zhì)話的問題。提出了自己的一些建議。而在之后的工作中也多次改版或設(shè)計(jì)過成套的APP應(yīng)用中心的ICON和系統(tǒng)后臺(tái)ICON庫。ICON設(shè)計(jì)的經(jīng)驗(yàn)?zāi)鞘遣坏貌回S富的存在。

 

ICON,中文翻譯為圖標(biāo)。是對象的圖像表示,指用圖形指代某些名詞,如:打開、警告、愛、學(xué)校、山等。ICON,是上世紀(jì)九十年代伴隨IT 產(chǎn)業(yè)出現(xiàn)的一個(gè)技術(shù)詞匯,原指計(jì)算機(jī)軟件編程中為使人機(jī)界面更加易于操作和人性化而設(shè)計(jì)出的標(biāo)識特定功能的圖形標(biāo)志。

 

 

 

下面是我總結(jié)了這幾年設(shè)計(jì)icon的經(jīng)驗(yàn)結(jié)合大廠的后臺(tái)規(guī)范。給新手設(shè)計(jì)師的一些建議,都是經(jīng)驗(yàn)之談希望能夠幫到你??梢宰屇阍谠O(shè)計(jì)的這條路上走的越來越輕松。

 

 

 

 

第一章 ICON的設(shè)計(jì)

 

那位美女設(shè)計(jì)師:??!搞什么呀,B端設(shè)計(jì)師icon還有設(shè)計(jì),你傻不傻呀。我給你分享幾個(gè)現(xiàn)成的icon網(wǎng)站吧下載了就能用。
我:是的我也用現(xiàn)成的icon在很多的需求里。但是我更喜歡自己設(shè)計(jì),自己去做。直接用現(xiàn)成的icon不爽嗎。嗯當(dāng)然爽呀??词悄阋雷龅母玫姆椒ê涂赡苄?。不要總把自己當(dāng)美工吧,我們可以是設(shè)計(jì)師的。

 

做為什么師我們大概都應(yīng)該知道icon作為我們界面的重要構(gòu)成元素,它會(huì)在很大程度上影響我們界面的風(fēng)格。甚至?xí)绊懳覀兤放频恼{(diào)性。所以一套符合我們設(shè)計(jì)風(fēng)格具有我們品牌調(diào)性的icon是很有必要的??傊阆朊靼滓粋€(gè)道理,你一整個(gè)屋子都裝修好了,房間里獨(dú)獨(dú)到處都放了幾把破椅子。不難受嗎。

 

Ant design設(shè)計(jì)規(guī)范:圖標(biāo)是 UI 設(shè)計(jì)中必不可少的組成。通常我們理解圖標(biāo)設(shè)計(jì)的含義,是將某個(gè)概念轉(zhuǎn)換成清晰易讀的圖形,從而降低用戶的理解成本,提升界面的美觀度。在我們的企業(yè)級應(yīng)用設(shè)計(jì)范圍中,圖標(biāo)在界面設(shè)計(jì)的諸多元素中往往只占了很小的比重,在調(diào)用時(shí)也會(huì)被縮到比設(shè)計(jì)稿小很多倍的尺寸,加上在圖形素材極度豐富并且便于獲取的今天,在產(chǎn)品設(shè)計(jì)體系中實(shí)現(xiàn)一套美觀、一致、易用、便于延展的圖標(biāo)體系往往會(huì)被不小心忽略掉。Ant Design 相信一整套優(yōu)質(zhì)的圖標(biāo)對于設(shè)計(jì)質(zhì)量的影響是非常巨大的,這考驗(yàn)著設(shè)計(jì)師的協(xié)作能力,以及對圖形塑造的系統(tǒng)性思維,同時(shí)也能反映一個(gè)團(tuán)隊(duì)對于細(xì)節(jié)的追求。

 

 

1、中后臺(tái)ICON的設(shè)計(jì)原則

 

中后臺(tái)使用的icon大部分規(guī)范平臺(tái)也好或者一有系統(tǒng)也好他們的設(shè)計(jì)原則基本是大同小異的。我的建議是如果你要設(shè)計(jì)一整套的icon圖標(biāo)。在設(shè)計(jì)之前確定自己icon的設(shè)計(jì)原則。這個(gè)設(shè)計(jì)原則可以依照自己的界面設(shè)計(jì)風(fēng)格或期望的界面設(shè)計(jì)風(fēng)格以及行業(yè)屬性、自己品牌等去制定。

 

1-1、Ant design圖標(biāo)設(shè)計(jì)原則

 

Ant Design 的圖標(biāo)設(shè)計(jì)原則源自「確定」和「自然」,落實(shí)到圖標(biāo)設(shè)計(jì)領(lǐng)域,一共有四個(gè)。準(zhǔn)確、簡單、節(jié)奏、愉悅。

 

1-1-1、準(zhǔn)確:

 

設(shè)計(jì)造型準(zhǔn)確的圖標(biāo)(保持偶數(shù)原則,去小數(shù)點(diǎn));選擇表意準(zhǔn)確的圖標(biāo),不對用戶的認(rèn)知造成困擾。

 

 

 

1-1-2、簡單:

 

在表意清晰準(zhǔn)確的基礎(chǔ)上,盡量保持圖形的簡潔,不做多余的修飾。

 

 

 

 

1-1-3、節(jié)奏:

 

挖掘構(gòu)圖中的秩序之美。

 

 

 

 

1-1-4、愉悅:

 

賦予適度的情感。在部分圖標(biāo)設(shè)計(jì)中,會(huì)適度的注入擬人化的元素,令圖標(biāo)具備生命力。

 

 

 

 

1-2、TDesign圖標(biāo)設(shè)計(jì)原則

 

Icon 作為 UI 構(gòu)成中重要的元素,它一定程度上影響整體 UI 界面呈現(xiàn)出的風(fēng)格,TDesign 初期提供一套適用于中后臺(tái)場景的線性 Icon,以普適、通用的標(biāo)準(zhǔn)進(jìn)行設(shè)計(jì),風(fēng)格契合默認(rèn) TDesign 的風(fēng)格,線性、圓角。在TDesingv中設(shè)計(jì)原則為、從簡、精確、適度

 

1-2-1、從簡:

 

制作時(shí)保證參數(shù)的簡化,盡量消除小數(shù)點(diǎn)以及非整數(shù)的角度。處理線條以及輪廓時(shí)刪除多余的錨點(diǎn),輸出時(shí)應(yīng)避免出現(xiàn)不必要的裝飾,保持圖標(biāo)的簡潔。

 

 

 

 

1-2-2、精確:

 

在設(shè)計(jì)時(shí)避免使用那些含義模糊的圖形,當(dāng)同個(gè)事物存在多個(gè)圖形表述時(shí),應(yīng)選取最為流通的樣式,必要時(shí)進(jìn)行針對性的強(qiáng)化。在圖標(biāo)輸出時(shí)也應(yīng)遵守命名規(guī)范,精確的文字描述便于他人查找。

 

 

 

 

1-2-3、適度:

 

單個(gè)圖標(biāo)作為一個(gè)獨(dú)立的視覺個(gè)體,在線條的疏密以及圖形的搭配上要呈現(xiàn)適度感。在處理一些必要的高密度圖標(biāo)時(shí)也要考慮線條的節(jié)奏感,讓其舒適不壓迫。系列圖標(biāo)要遵守適度原則,將變化控制在一定范圍內(nèi)。

 

 

 

發(fā)現(xiàn)沒大廠規(guī)范為了普世所以他們的圖標(biāo)設(shè)計(jì)原則定的基本都是一樣的。只是換了一個(gè)詞而已。而且他們的大部分原則和細(xì)節(jié)都是來自平面設(shè)計(jì)里的板式設(shè)計(jì)和標(biāo)志設(shè)計(jì)里的形式美法則。

 

 

2、如何規(guī)范的設(shè)計(jì)ICON

 

設(shè)計(jì)一套優(yōu)秀的圖標(biāo)設(shè)計(jì)應(yīng)該簡潔明了、直觀性強(qiáng)、獨(dú)特性好、可識別度高、適應(yīng)性廣、細(xì)節(jié)處理精細(xì)、可擴(kuò)展性強(qiáng),并且能夠根據(jù)用戶反饋及時(shí)改進(jìn)和優(yōu)化。如果要具備這些特征,那我們在設(shè)計(jì)的時(shí)候就要遵循一些特定的規(guī)范。

 

 

 

2-1、柵格

 

icon設(shè)計(jì)的柵格在大場的設(shè)計(jì)規(guī)范里面分為兩種。一種ant design設(shè)計(jì)規(guī)范里面的那種柵格。另一種是TDesign設(shè)計(jì)規(guī)范里面的柵格。我之前在做的時(shí)候是直接呀的阿里巴巴示例圖庫的上傳模板里面的柵格進(jìn)行設(shè)計(jì)的不過。沒有這設(shè)計(jì)規(guī)范里面的柵格好用。

 

 

 

2-1-1、Ant Design柵格

 

Ant Design 的系統(tǒng)圖標(biāo)都是按照 1024 x 1024 的畫板進(jìn)行制作的。

 

出血位: 在圖標(biāo)的設(shè)計(jì)過程中預(yù)留出血位的做法,可以預(yù)防某些造型的圖標(biāo)在具體應(yīng)用時(shí)出現(xiàn)邊緣被切掉的風(fēng)險(xiǎn);同時(shí)在設(shè)計(jì)過程中,也為設(shè)計(jì)師把握圖標(biāo)間平衡留下了進(jìn)退的余地。新版的設(shè)計(jì)規(guī)格在圖形的外圍預(yù)留了 64px 的出血位,多數(shù)的圖標(biāo)在設(shè)計(jì)中我們都不建議超過這個(gè)區(qū)域。

 

 

 

 

2-1-2、TDesign柵格

 

柵格作為圖表繪制的底層結(jié)構(gòu),是一切屬性設(shè)計(jì)的基礎(chǔ)。線條的長短粗細(xì)、圖標(biāo)的大小比例等關(guān)鍵因素均在其基礎(chǔ)上制定。圖標(biāo)常見尺寸為16*16;20*20;24*24;32*32這四種輸出尺寸。這些尺寸均可以清晰的顯示在常規(guī)的顯示器上。TDesign 最終選擇以16*16px 的尺寸作為圖標(biāo)繪制的統(tǒng)一柵格尺寸

 

 

 

我記得最早入行的時(shí)候畫icon就用的這種柵格。但是我不太喜歡,因?yàn)樵趯?shí)際的設(shè)計(jì)之中會(huì)出現(xiàn)好多問題。當(dāng)時(shí)的我是無法解決的。


2-2、輪廓與模板

 

面對各式各樣的icon我們在上一步有了柵格,接下來就要處理在柵格里如何讓形狀不同的icon在視覺上大小是一致的,在視覺上是平衡的。所以轉(zhuǎn)對不同形狀的icon在柵格里所占的輪廓規(guī)范就產(chǎn)生了?;具@個(gè)輪廓都是一樣的。因?yàn)樗且粋€(gè)很基礎(chǔ)的東西。

 

 

但其實(shí)可能是我技術(shù)的問題。在過往的很多次設(shè)計(jì)中如果你完全按照這個(gè)輪廓去執(zhí)行。做出來的icon你會(huì)發(fā)現(xiàn)其實(shí)在視覺上還是會(huì)存在問題的,我都會(huì)在做一次優(yōu)化。不過這很大可能是我技術(shù)和設(shè)計(jì)能力的問題吧。

 

 

2-3、設(shè)計(jì)細(xì)節(jié)

 

即使有了規(guī)范,柵格輪廓等。但是往往我們在設(shè)計(jì)制作的時(shí)候還是會(huì)有很多的細(xì)節(jié)需要去處理的。這樣我們的設(shè)計(jì)才會(huì)更專業(yè)。因?yàn)槲矣胊nt 規(guī)范比比較多所以。我們就一起看一下ant的規(guī)范里對icon設(shè)計(jì)細(xì)節(jié)的一些建議。

 

在ant的圖標(biāo)設(shè)計(jì)規(guī)范中,對icon圖標(biāo)進(jìn)行了、形式感、韻律、平衡、辨識這幾方面對我們在設(shè)計(jì)和制作icon可能遇到的問題給了一些建議。

 

Ant Design圖標(biāo)設(shè)計(jì)建議詳情:https://ant-design.antgroup.com/docs/spec/icon-cn#%E8%BD%AE%E5%BB%93%E7%BA%BF%E4%B8%8E%E6%A8%A1%E7%89%88

 

3、ICON分類

 

以上的內(nèi)容主要在探討一類icon圖標(biāo)的設(shè)計(jì)。那就是中后臺(tái)的圖標(biāo)設(shè)計(jì)。但其實(shí)icon圖標(biāo)是有很多的分類的。交互性圖標(biāo)、裝飾性圖標(biāo)、說明性圖標(biāo)

 

3-1、交互性圖標(biāo)

 

這類圖標(biāo)主要用于應(yīng)用程序的界面設(shè)計(jì),它們可以向用戶傳遞某種信息,引導(dǎo)用戶執(zhí)行特定操作,同時(shí)也允許用戶向程序傳遞控制信息。例如,登陸注冊按鈕、開關(guān)按鈕、數(shù)量按鈕、點(diǎn)贊、轉(zhuǎn)發(fā)分享等都屬于交互性圖標(biāo)。

 

 

3-2、裝飾性圖標(biāo)

 

這類圖標(biāo)主要用于提高頁面設(shè)計(jì)性,它們可以加深個(gè)性化設(shè)計(jì)風(fēng)格,提升用戶線上體驗(yàn)感,迎合受眾群的偏好,提升設(shè)計(jì)親和度。例如,符合節(jié)日需求的線上活動(dòng)呼應(yīng)圖標(biāo)、個(gè)性化圖標(biāo)等都屬于裝飾性圖標(biāo)。

 

 

3-3、說明性圖標(biāo)

 

這類圖標(biāo)主要用于闡明信息,它們是區(qū)分不同功能或內(nèi)容的視覺標(biāo)記,簡單地說,就是對功能的解釋說明。例如,象形圖標(biāo)、隱喻圖標(biāo)、工具圖標(biāo)和混合圖標(biāo)等。

 

 

此外,根據(jù)圖標(biāo)的具體功能和用途,還可以將圖標(biāo)分為表意圖標(biāo)(又稱解釋性圖標(biāo))和標(biāo)識性圖標(biāo)。表意圖標(biāo)是通過原本不存在實(shí)物的符號表達(dá)某些特定的含義或操作行為,這些符號逐漸繼承了一些象形符號的特性并不斷演化。例如,“箭頭”已經(jīng)從最初的“弓箭”衍生為一種特定的表意符號。而標(biāo)識性圖標(biāo)主要用于標(biāo)識品牌、產(chǎn)品或服務(wù),它們通常具有獨(dú)特的設(shè)計(jì)風(fēng)格和視覺效果,以便在市場上脫穎而出。例如,蘋果公司的蘋果圖標(biāo)就屬于標(biāo)識性圖標(biāo)。

為我以往的設(shè)計(jì)經(jīng)驗(yàn)里大部分都是在做B端的設(shè)計(jì)和交互工作。在我的理解里圖標(biāo)就分兩類。1、規(guī)規(guī)矩矩的ICON。2、花里胡哨的ICON。就這么簡單。

 

 

 

 

第二章 實(shí)戰(zhàn)我搞了一套ICON

 

再優(yōu)秀的理論也只能是理論。實(shí)踐才是檢驗(yàn)真理的唯一標(biāo)準(zhǔn)。這不是我說的。這是老馬(卡爾·海因里希·馬克思)說的。所以就請大家進(jìn)入我的實(shí)踐過程吧。

 

 

 

1、需求背景

 

需要還是要從最初開始講。我負(fù)責(zé)的SAAS平臺(tái)要迭代換框架。然后對界面視覺交互、產(chǎn)品功能都迭代一個(gè)大的版本。這次設(shè)計(jì)部分的任務(wù)就我來負(fù)責(zé)。

 

因?yàn)槭谴蟮牡?。所以這次icon設(shè)計(jì)的需求是跟著整個(gè)平臺(tái)一起走的。你要設(shè)計(jì)新的視覺還用之前的那套老icon顯示是不合適的。在者說那套icon的質(zhì)量也是一個(gè)難以想象的存在。是開發(fā)直接從網(wǎng)上個(gè)個(gè)平臺(tái)找的。所以這次這個(gè)平臺(tái)的視覺迭代就有了搞一套適合我們界面和行業(yè)的icon圖標(biāo)。

 

 

這是我們SaaS平臺(tái)的設(shè)計(jì)價(jià)值觀

 

2、設(shè)計(jì)原則

 

因?yàn)槭窍扔辛私缑?,要做一套配合界面的菜單icon圖標(biāo)。我想我們的icon要符合整體頁面的風(fēng)格。不說給界面加分了,也不破壞我辛苦做的界面視覺。

 

結(jié)合我們品牌的logo圖標(biāo)的特點(diǎn)。讓我們的icon也擁有獨(dú)屬于他們自己的絲帶偶。把公司logo的設(shè)計(jì)特點(diǎn)加入到我們這次icon的設(shè)計(jì)原則里。

 

 

是的優(yōu)美,是我們這一套icon的特點(diǎn)。也是從我們logo里提取出來的設(shè)計(jì)要點(diǎn)。然后把他運(yùn)用到icon設(shè)計(jì)里。

 

3、規(guī)范的制定ICON的制作

 

規(guī)范的知道基本是使用的阿里巴巴矢量圖庫早期的那個(gè)上傳圖標(biāo)模板的AI文件。為什么會(huì)選擇使用這個(gè)呢。因?yàn)槲覀僑aaS平臺(tái)的所以icon都是從阿里巴巴矢量圖庫引用的。我要把我做的icon上傳到阿里巴巴矢量圖片他們使用,而不是直接切圖給他們用。

 

 

在這套圖標(biāo)設(shè)計(jì)的時(shí)候,其實(shí)并沒有完全的按照大廠的設(shè)計(jì)規(guī)范進(jìn)行。在很多的細(xì)節(jié)上做了調(diào)整。為的是達(dá)到更好的效果。當(dāng)然。也有很多遺憾。在很多的方面并不是很標(biāo)準(zhǔn)。在下次優(yōu)化設(shè)計(jì)時(shí),會(huì)更好的去執(zhí)行制定的設(shè)計(jì)原則和設(shè)計(jì)規(guī)范。

 

 

 

第三章 拓展知識(標(biāo)志設(shè)計(jì)淺談)

 

之所以寫這部分內(nèi)容,是因?yàn)槲矣X得在平面設(shè)計(jì)里標(biāo)志設(shè)計(jì)的知識對我們現(xiàn)在圖標(biāo)設(shè)計(jì)是很有用的。可以是圖標(biāo)設(shè)計(jì)本身就是適應(yīng)了顯示屏后的標(biāo)志設(shè)計(jì)。如果你搞懂了標(biāo)志設(shè)計(jì)的系統(tǒng)知識,那圖標(biāo)設(shè)計(jì)不就是手拿把掐的事了。標(biāo)志設(shè)計(jì)就是殺雞的牛刀。

 

一般我們說到標(biāo)識設(shè)計(jì)可能大概覽的就是會(huì)認(rèn)為是品牌形象設(shè)計(jì),也就是LOGO設(shè)計(jì)。是的我大學(xué)學(xué)的標(biāo)志設(shè)計(jì)就是在講品牌LOGO的設(shè)計(jì)。但我現(xiàn)在理解的標(biāo)志設(shè)計(jì)可能意義更廣泛。因?yàn)樵诤芏嗟臅r(shí)候我是把標(biāo)志設(shè)計(jì)的知識和原理來應(yīng)用到其他的設(shè)計(jì)方面。

 

標(biāo)志是品牌形象核心部分(英文俗稱為:logo),是表明事物特征的識別符號。它以單純、顯著、易識別的形象、圖形或文字符號為直觀語言,除表示什么,代替什么之外,還具有表達(dá)意義、情感和指令行動(dòng)等作用。

 

 

LOGO、標(biāo)志、徽標(biāo)、商標(biāo)是現(xiàn)代經(jīng)濟(jì)的產(chǎn)物,它不同于古代的印記,現(xiàn)代標(biāo)志承載著企業(yè)的無形資產(chǎn),是企業(yè)綜合信息傳遞的媒介。

 

 

1、標(biāo)志設(shè)計(jì)怎么來的

 

標(biāo)志的來歷,可以追溯到上古時(shí)代的"圖騰"。最初人們將圖騰刻在居住的洞穴和勞動(dòng)工具上,后來就作為戰(zhàn)爭和祭祀的標(biāo)志,成為族旗、族徽。國家產(chǎn)生以后,又演變成國旗、國徽。

 

古代人們在生產(chǎn)勞動(dòng)和社會(huì)生活中,為方便聯(lián)系、標(biāo)示意義、區(qū)別事物的種類特征和歸屬,不斷創(chuàng)造和廣泛使用各種類型的標(biāo)記,如路標(biāo)、村標(biāo)、碑碣、印信紋章等。

 

到本世紀(jì),公共標(biāo)志、國際化標(biāo)志開始在世界普及。隨著社會(huì)經(jīng)濟(jì)、政治、科技、文化的飛躍發(fā)展,21世紀(jì)以來經(jīng)過精心設(shè)計(jì)從而具有高度實(shí)用性和藝術(shù)性的標(biāo)志,已被廣泛應(yīng)用于社會(huì)一切領(lǐng)域,對人類社會(huì)性的發(fā)展與進(jìn)步發(fā)揮著巨大作用和影響。

 

 

2、標(biāo)志的作用

 

隨著“讀圖”時(shí)代的到來,標(biāo)志以簡潔、 獨(dú)特、易識別的圖形符號傳達(dá)著特定的含 義和綜合信息,成為人們相互交流和傳遞 信息、溝通情感、表達(dá)愿望的視覺語言。 特別是在注重品牌效能與品質(zhì)的今天,標(biāo) 志發(fā)揮著重要的作用。 標(biāo)志最主要的功能是以其簡潔、醒目、 美觀的圖形符號傳遞信息。

 

 

2-1、區(qū)分商品

 

標(biāo)志能夠表述某種組織、某項(xiàng)活動(dòng)或某 企業(yè)品牌的性質(zhì)、服務(wù)和宗旨。標(biāo)志作為一種視覺識別符號,能有效 區(qū)別各種品牌給消費(fèi)者的印象。也就是說, 它能夠表述出個(gè)性特點(diǎn),使其從眾多同類 產(chǎn)品的標(biāo)志中被區(qū)別出來。

 

市場上的商品花色、品種繁多。在商品的海洋里,消費(fèi)者只能根據(jù)不同的 標(biāo)志區(qū)別同類商品的不同品牌和不同生產(chǎn)廠家,并以此進(jìn)行比較與選擇。商業(yè)企業(yè)在經(jīng)營商品時(shí),有的 也用自己的標(biāo)志表示各自的經(jīng)營特色。標(biāo)志的這種作用是其取得法律保護(hù)的主要依據(jù),在國際貿(mào)易中, 這種作用也得到了普遍的認(rèn)可。

 

2-2、樹立形象

 

標(biāo)志是現(xiàn)代經(jīng)濟(jì)的產(chǎn)物,它不同于古代的印記。現(xiàn)代標(biāo)志承載著企業(yè)的無形資產(chǎn),是企業(yè)綜合信息 傳遞的媒介。對于企業(yè)而言,不僅要表明“我是誰”,還要說明“我怎么樣”。標(biāo)志通過在不同場合、 不同載體的反復(fù)出現(xiàn),使人們在看到標(biāo)志的同時(shí),就能自然聯(lián)想到產(chǎn)品

 

可口可樂歐洲太平洋集團(tuán)公司前總裁喬戈斯曾經(jīng)說:“可口可樂成功的原因很簡單,許多制造商只 熱衷于為消費(fèi)者提供產(chǎn)品,而大多數(shù)消費(fèi)者則需要產(chǎn)品的牌子。請記住,一聽可口可樂不只是飲料,它 還是一個(gè)朋友。

 

2-3、品牌價(jià)值

 

如今的社會(huì),享用名牌似乎成為身份的象征、地位的體現(xiàn)和個(gè)人魅力的表現(xiàn),這就使標(biāo)志有了某種 精神的力量,這種精神力量代表著品牌的價(jià)值。

 

名牌價(jià)值是無形資產(chǎn),無形資產(chǎn)的價(jià)值遠(yuǎn)遠(yuǎn)高于企業(yè)的有形資產(chǎn)價(jià)值和年銷售額。“可口可樂”“百 事可樂”的品牌價(jià)值都達(dá)到上百億美元。標(biāo)志在各個(gè)國家都受到法律的保護(hù),從這個(gè)意義上說,名牌標(biāo) 志是企業(yè)的無價(jià)之寶,絲毫也不為過。

 

美國可口可樂公司的一位經(jīng)理說,即使可口可樂工廠一夜之間被毀壞殆盡,公司也能憑借“可口可樂” 標(biāo)志的聲譽(yù)從銀行立即貸款重建工廠??梢姡瑢碛忻茦?biāo)志的企業(yè)來說,標(biāo)志就是企業(yè)發(fā)展的一種依 托與保證,是一筆巨大的無形資產(chǎn)。

 

2-4、美化產(chǎn)品

 

標(biāo)志作為企業(yè)和產(chǎn)品形象的象征,它用無聲的具有美感的圖形語言宣傳著產(chǎn)品的質(zhì)量與特色。標(biāo)志 設(shè)計(jì)的好壞直接影響企業(yè)和產(chǎn)品的信譽(yù)度。成功的標(biāo)志不僅代表了產(chǎn)品本身,也增強(qiáng)了產(chǎn)品的魅力。

 

著名的香奈兒(CHANEL)的標(biāo)志以簡約明快的圖形和相得益彰的字體搭配給人以典雅、高貴之感。 香奈兒于 1913 年由創(chuàng)始人加布里埃·可可·香奈兒(Gabrielle Chanel)在法國巴黎創(chuàng)立,其標(biāo)志是由兩 個(gè)背向的“C”重疊而成,圖形平衡對稱,充滿溫文爾雅、端莊聰慧之氣,

 

3、標(biāo)志的創(chuàng)意原則

 

標(biāo)志的本質(zhì)是信息傳播,這是現(xiàn)代的 標(biāo)志設(shè)計(jì)的核心。標(biāo)志的設(shè)計(jì)創(chuàng)意應(yīng)該從 信息入手,從功能需要出發(fā)。需要告訴大家的是什么,而不是把形式作 為設(shè)計(jì)的唯一出發(fā)點(diǎn)。

 

3-1、獨(dú)特性

 

在標(biāo)志設(shè)計(jì)中,有的人喜歡造型簡單的,這得到了大部分人的認(rèn)可;而有的人則認(rèn)為在簡單中可適 當(dāng)復(fù)雜,這要取決于實(shí)際的用途。不論簡單或復(fù)雜,需要把握一點(diǎn):標(biāo)志需要具備的特質(zhì)是獨(dú)特。沒有 哪個(gè)企業(yè)甘愿平凡,大多數(shù)企業(yè)都在竭盡所能地建立自己獨(dú)特的企業(yè)文化和市場經(jīng)營特色,所以在設(shè)計(jì) 標(biāo)志時(shí)必須深思熟慮。

 

獨(dú)特性是標(biāo)志設(shè)計(jì)的最基本要求。標(biāo)志的形式法則和特殊性就是具備各自獨(dú)特的個(gè)性,不允許絲毫 的雷同。這就要求標(biāo)志的設(shè)計(jì)必須做到獨(dú)特、別致,追求創(chuàng)造與眾不同的視覺感受,給人留下深刻的印象。

 

3-2、醒目

 

醒目的設(shè)計(jì)是所有標(biāo)志希望達(dá)到的視覺效果。優(yōu)秀的標(biāo)志能夠吸引人,給人以較強(qiáng)的視覺沖擊力。 因?yàn)橹挥幸鹑说淖⒁?,才能使?biāo)志所要傳達(dá)的信息對人產(chǎn)生影響。在標(biāo)志設(shè)計(jì)中,注重對比、強(qiáng)調(diào)視 覺形象的鮮明與生動(dòng),這是產(chǎn)生醒目性的重要形式要素。

 

3-3、簡單容易記憶

 

標(biāo)志要易于識別、記憶和傳播。這并不是說簡單化,而是指以少勝多、立意深刻、形象明顯、雅俗共賞。 通俗性強(qiáng)的標(biāo)志具有公眾認(rèn)同面大、親切感強(qiáng)等特點(diǎn)。對于商標(biāo)而言,一個(gè)易記的商標(biāo)形象首先要有一個(gè)與眾不同的響亮、動(dòng)聽的商標(biāo)名稱,以好的商標(biāo)名稱為基礎(chǔ),綜合考慮商標(biāo)的特點(diǎn),選擇最佳方案, 再進(jìn)行具體的圖形設(shè)計(jì)。

 

3-4、標(biāo)志顏色

 

標(biāo)志色彩的配置一般有三種基本方法;

 

-是原色配合
原色的顏色單純、強(qiáng)烈、鮮艷奪目,藝術(shù)效果和傳播效果顯著。

 

-是同類色配合
只選擇一種顏色,采用依靠色彩明亮度變化的辦法,如用桔紅、桔黃、中黃、淺黃進(jìn)行搭配,形成由淺入深的過度色視覺,能表達(dá)出動(dòng)態(tài)感。

 

-是補(bǔ)色配合
這種色彩配置,對比鮮明,圖形格外醒目鮮艷,能給人以很強(qiáng)的視覺沖擊效果。

 

4、標(biāo)志設(shè)計(jì)形式美法則

 

標(biāo)志設(shè)計(jì)也是藝術(shù)設(shè)計(jì)的一種。所以他也同樣適用于我們設(shè)計(jì)里的形式美法則。用這些法則去設(shè)計(jì)你的標(biāo)志或ICON讓他們的信息傳遞更準(zhǔn)確。視覺表現(xiàn)更優(yōu)秀。

 

形式美法則
標(biāo)志設(shè)計(jì)是一種視覺藝術(shù),人們在觀看一個(gè)標(biāo)志圖形的同時(shí)、也是一種審美的過程。在審美過程中,人們把視覺所感受的圖形,用社會(huì)所公認(rèn)的相對客觀的標(biāo)準(zhǔn)進(jìn)行評價(jià)、分析和比較,引起美感沖動(dòng)。

 

4-1、變化與統(tǒng)一

 

任何一個(gè)完美的標(biāo)志圖形必須具有統(tǒng)一性,這種統(tǒng)一性越單純,越有美感。但只有統(tǒng)一而無變化,則不能使人感到有趣味、美感也不能持久,這是因?yàn)槿鄙俅碳さ木?,變化是刺激的源泉,有喚起興趣的作用,但變化也要有規(guī)律,無規(guī)律的變化,然起混亂和繁雜。因此變化必須在統(tǒng)一中產(chǎn)生。

 

4-2、對稱于均衡

 

均衡是在不對稱中求平穩(wěn)。均衡可分為調(diào)和均衡和對比均衡兩大類,調(diào)和均衡是指同形等量,即在中軸線兩面所配列的圖形的形狀、大小、分量相等或相同。除圖案造型的均衡外,還有量的均衡、色的均衡,在標(biāo)志圖形設(shè)計(jì)時(shí)必須相應(yīng)考慮,以追求標(biāo)志視覺張力。

 

4-3、節(jié)奏與韻律

 

節(jié)奏是韻律的條件,韻律是節(jié)奏的深化,節(jié)奏也就是“律”,這種律不僅表現(xiàn)在音樂上,而且反映在其他方面,當(dāng)物體失去均衡則會(huì)引起運(yùn)動(dòng)。此種運(yùn)動(dòng)如有規(guī)律,則稱之為“律”。在標(biāo)志圖形設(shè)計(jì)中,如果將線的長短、粗細(xì)、曲直、方位等進(jìn)行不同程度的變化和巧妙組合,便會(huì)創(chuàng)造出不同感的“律”的形式,歸納起來分為:循環(huán)體、反復(fù)體及連續(xù)體。

 

4-4、調(diào)和于對比

 

在標(biāo)志設(shè)計(jì)中,對比與調(diào)和應(yīng)用極廣,如在大小、方向、虛實(shí)、高低、寬窄、長短、凹凸、曲直、多少、厚薄、動(dòng)靜以及奇數(shù)與偶數(shù)的對比。對比是標(biāo)志圖形取得視覺特征的途徑,調(diào)和是標(biāo)志完整統(tǒng)一的保證。

 

4-5、比例與尺度

 

任何一個(gè)完美的圖形都必須具備協(xié)調(diào)的比例尺度。在標(biāo)志圖形中常用的比率有整數(shù)比、相加級數(shù)比、相差級數(shù)比、等比級數(shù)比、黃金比等。標(biāo)志設(shè)計(jì)的形式美法則,不能孤立和片面地理解,因?yàn)橐粋€(gè)美圖形的設(shè)計(jì),往往要綜合利用多種法則來表現(xiàn)。這些法則是相互依賴,相互滲透,相互穿插、互相重疊、相互促進(jìn)的,隨著時(shí)代的變化,審美標(biāo)準(zhǔn)、設(shè)計(jì)手法也在不斷發(fā)展。

 

 

5、標(biāo)志發(fā)展趨勢

 

近年來,標(biāo)志設(shè)計(jì)發(fā)展越來越成瘦??偟陌l(fā)展趨勢是由復(fù)雜到簡約、具象到抽象、色彩更多樣話、標(biāo)志的發(fā)展是一個(gè)設(shè)計(jì)相互交融、設(shè)計(jì)風(fēng)格的多樣化過程。設(shè)計(jì)手段是次要的,目的才是第一位的。更注重的應(yīng)使其商業(yè)性。

 

以下標(biāo)志設(shè)計(jì)趨勢內(nèi)容引用自標(biāo)志情報(bào)局編譯的作者為Bill Gardner是logolounge.com的創(chuàng)始人的《2023標(biāo)志設(shè)計(jì)趨勢報(bào)告》。https://www.logonews.cn/logo-design-trends-for-2023.html

 

我們每年收到的所有標(biāo)志清晰解讀并整理成這份報(bào)告并不是一項(xiàng)容易的工作。總共超過30,000個(gè)標(biāo)志,對我和一群杰出的設(shè)計(jì)師來說,這就像是世界上最大規(guī)模的配對游戲。最初,我們歸納出大約60-70個(gè)組別,然后將它們進(jìn)一步劃分為具有最大影響力的15個(gè)類別。

我只是通過對提交的30,000多個(gè)標(biāo)志進(jìn)行徹底分析(還有國際上每個(gè)重要品牌的更新和重塑)后呈現(xiàn)的報(bào)告。因此你要了解的是,就像任何氣象學(xué)家會(huì)告訴你的那樣,他們不能保證天氣預(yù)報(bào)的準(zhǔn)確性。同樣,我們也無法總是預(yù)測設(shè)計(jì)師將向哪個(gè)趨勢方向發(fā)展,這就是這份報(bào)告能讓我們保持警惕并感到有趣的原因所在

01、Wildflowers(野花);02、Bloblend(流動(dòng)混合);03、Fades(逐漸模糊);04Foreshort(透視);05、Thrust(推進(jìn));06、Spirals(螺旋);07、Sonics(聲波);08、WireForms(線框);09、BallCaps(球形頂端);10、NameFills(名字填充圖形);11、Stretchers(元素拉伸);12、NeoStencil(噴漆模版藝術(shù));13、HalfAster(半星號);14、Double Os(雙圓環(huán));15、Ritz(餅干);

 

重新讀了一遍標(biāo)志設(shè)計(jì)的內(nèi)容。果然受益匪淺的感覺。還是要時(shí)常溫故而知新的。學(xué)習(xí)了大廠的ICON設(shè)計(jì)規(guī)則也是很有收獲的。



作者:彪形大漢pro
鏈接:https://www.zcool.com.cn/article/ZMTU5NTM3Ng==.html
來源:站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán),非商業(yè)轉(zhuǎn)載請注明出處。

日歷

鏈接

個(gè)人資料

存檔