logo設(shè)計圖標(biāo)排版（logo設(shè)計方案排版）

大家好！今天讓創(chuàng)意嶺的小編來大家介紹下關(guān)于logo設(shè)計圖標(biāo)排版的問題，以下是小編對此問題的歸納整理，讓我們一起來看看吧。

創(chuàng)意嶺作為行業(yè)內(nèi)優(yōu)秀的企業(yè)，服務(wù)客戶遍布全球各地，相關(guān)業(yè)務(wù)請撥打電話：175-8598-2043，或添加微信：1454722008

本文目錄:

• 1、logo的設(shè)計方法有幾種

• 2、設(shè)計師必看圖標(biāo)（icon）指南

• 3、自己制作logo怎么做

• 4、圖標(biāo)（icon）設(shè)計的方法有哪些？

一、logo的設(shè)計方法有幾種

一、先弄清楚logo設(shè)計的定位

二、常見的幾種logo設(shè)計形式分析

三、常見的幾種logo設(shè)計方向

四、logo設(shè)計注意事項

五、總結(jié)

接下來，我們一條一條來看吧！～

一、先弄清楚logo設(shè)計的定位

設(shè)計logo也是需要考慮定位的，甚至必須要考慮定位，因為logo就像我們?nèi)说拿忠粯?，會一直跟隨在各個場合或角落，比如電視上／廣告牌上／宣傳單上／網(wǎng)站上／各種周邊產(chǎn)品上，你會發(fā)現(xiàn)一個logo就是由這些肉眼看得見的東西，比如顏色／質(zhì)感／形式／形狀等組成的，同時向人們傳遞出一種無形的東西，比如企業(yè)的性質(zhì)／氣質(zhì)／理念／愿景等等。

比如當(dāng)你看到麥當(dāng)勞的logo你絕對不會以為他是賣軍火的，而是比較有親和力的大眾可接近的，再比如當(dāng)你看到大寶的logo你也絕對不會把它看成是奢侈護(hù)膚品品牌，什么樣的視覺效果就會給人什么樣的心理感受，大致就是這么個理兒。

如此，一個完整的logo就包含了有形和無形這樣2個層面的含義，也存在定位之說。

這也是為什么很多企業(yè)在發(fā)展的過程中，隨著時代的變化，會不斷升級或改版自己logo，因為定位變或時代的審美方向了，一切都得跟著變，只是有的動作大點，有的動作小一點。

以QQ的logo為例，我們會發(fā)現(xiàn)這只企鵝經(jīng)歷了從扁平到質(zhì)感又到扁平的過程，形態(tài)從矮胖肥嘟嘟變成了瘦高的企鵝少年，表情線條也更加簡練顯得沉穩(wěn)，色彩也看起來更干凈，這些細(xì)微的調(diào)整，一方面預(yù)示著他在跟著受眾群體一起成長，而且更加國際化了，這是業(yè)務(wù)發(fā)展和形勢需要。

同時一個好的logo他必定也是可以用來做視覺延展的，便于應(yīng)用在更廣泛的場景里，當(dāng)人們一看到這個視覺元素，人們在腦海中立馬就會想到它，也就是占領(lǐng)了用戶心智，從而增加了用戶和品牌之間的情感粘性。

比如天貓的貓頭元素：

說了這么多，就是想說，在設(shè)計logo之前，最好是能考慮到這樣3個層面：有形的視覺層面／無形的定位層面／視覺延展層面。

二、常見的幾種logo設(shè)計形式分析

前期定位分析之類的講完了，接下來我們看看logo常見的一些套路。我發(fā)現(xiàn)世界上的logo那么多，但是設(shè)計形式無非就這幾種：文字變形類／英文縮寫類／英文字體類／英文字體變形類／圖形＋文字類／圖形＋英文類。

舉幾個例子給大家看看：

1、文字變形類：

我們的每一個漢字本就是一個圖形，而且同一個字也有很多種寫法，并且每一個漢字都是集結(jié)了幾千年的文化底蘊(yùn)不斷演變而來的，所以文字變形類的logo不僅好看，而且總能透出一股文人氣息，這種類型的logo比較適合茶飲／書店／咖啡館／酒樓／珠寶飾品這些需要體現(xiàn)人文氣息的品牌。

但是由于字型／配色／質(zhì)感處理的不同，其實它也可以走各種路線，不一定是只是文人路線：

但這種文字字體變形類的logo比較適合在國內(nèi)使用，走國際化路線還是有點困難，畢竟圖形符號或英文字母才是國際通用語言。

2、英文縮寫類：

比如2013年8月14歐萊雅收購了美即面膜，2015年隨即對美即logo做了改版升級，由日本設(shè)計大師原研哉操刀完成，現(xiàn)在看起來確實比原先的logo更加國際范兒了。

3、英文字體類：

發(fā)現(xiàn)很多數(shù)碼科技類／高端護(hù)膚美妝類／奢侈品箱包類／高端服飾飾品類都采用的是英文字體logo，或者在某些英文字體的基礎(chǔ)上稍作變形，體現(xiàn)國際化，不管啥東西一旦國際化了也便給人感覺有身份了有品質(zhì)保障了時尚了，大概這也是滿足客戶虛榮心的一種需要吧。

比如服裝品牌太平鳥，現(xiàn)在改名叫peacebird，確實立馬就聽起來更洋氣了，再比如以前不有個笑話嗎？六神花露水翻譯成英文six god，立馬聽起來就像某國大牌香水名了。

隨后百度翻譯一下，還真有。。。

不過對于新品牌，如果你沒有過硬的技術(shù)／特色或資本，盲目在國內(nèi)推行這一套估計會比較難，畢竟公眾認(rèn)知在那里，在國內(nèi)新品牌起個英文名字，做個英文logo著實記不住啊～

另外，有些英文字體類logo至少還看得出來就是字體，但有些變動會比較大，基本看不出是字體了，而是圖形了。

4、圖形＋文字類：

圖形＋文字的搭配是國內(nèi)最常用最通用的一種logo形式，有橫版的也有豎版的，并且這種形式也適用于任何氣質(zhì)和任何品牌，但是那種想要玩?zhèn)€性或小眾的除外，他們才不想隨大流，他們要與眾不同～

5、圖形＋英文類：

圖形＋英文字體的搭配是國際上最常用的一種logo形式，同樣有橫版也有豎版，并且這種形式也適用于任何氣質(zhì)和任何品牌，但小眾品牌或設(shè)計師品牌就不好說了，畢竟他們也想要與眾不同啊～

三、常見的幾種logo設(shè)計方法

既然前面提到了幾種常見的logo形式，那么我們接下來看看幾種常見的logo設(shè)計方法吧：

1、字體變形法

所謂字體變形法，就是在原有品牌名稱或企業(yè)名稱的基礎(chǔ)上，做一些效果或變形處理，最好是能結(jié)合這個品牌的一些個性或性質(zhì)來發(fā)揮創(chuàng)意，以“做設(shè)計的面條”為例，我們可以是體現(xiàn)“設(shè)計”這個方向去發(fā)揮，給大家看一下我們的一位面粉在設(shè)計練習(xí)中為做設(shè)計的面條做的字體變形作品，差不多就是這么些意思：

只是我覺得這個作品還可以做得更好，所以當(dāng)時給了一些點評建議，大家也可以看看：

2、圖形聯(lián)想法

比如還是以“做設(shè)計的面條”這幾個字為例，我們可以從相關(guān)事物和目標(biāo)愿景2個方面去聯(lián)想：

相關(guān)事物上：

我們可以聯(lián)想到做設(shè)計和面條相關(guān)的很多事物或場景，那么做設(shè)計的時候我們會用到什么？會用到一些工具比如畫筆／ps／電腦等，會想到能體現(xiàn)創(chuàng)意相關(guān)的東西比如燈泡／大腦／五顏六色的色塊等，會想到女設(shè)計師工作的樣子等；

看到面條這個詞我們會想到什么呢？會想到長長的面條／碗里的面條／一根面條／很多面條／直直的面條／卷曲的面條等等;

于是我們將所有能聯(lián)想到的與設(shè)計相關(guān)的圖像（假設(shè)數(shù)量為a）和與面條相關(guān)的圖像（假設(shè)數(shù)量為b）相結(jié)合就有axb種logo創(chuàng)意方向了，依此類推，其實就相當(dāng)于高等數(shù)學(xué)里的排列組合公式了（如果忘了這個數(shù)學(xué)知識就自己去百度吧）。

依舊是以“做設(shè)計的面條”為例，給大家看下我們的面粉為之前為公眾號做的一些創(chuàng)意方向（附帶我的點評）：

再比如這張國外的筆刷和面條的拼接照片，也是很有借鑒意義的吧，剛好跟我的名字很配：

目標(biāo)愿景上：

我們可以聯(lián)想到做設(shè)計的面條其實是一個連接與設(shè)計相關(guān)與電商相關(guān)的各行各業(yè)人群的一個平臺，它既是信息發(fā)射器也是信息接收器，它也可以成為大家生活或工作中的一部分，有問題或需求可以來找她，有開心或不開心的事也可以找她說，這時候你會聯(lián)想到什么呢？我會聯(lián)想到陪伴／太空／數(shù)據(jù)語言符號等等。

但是從這個方向想的話可能就會讓人感覺有點遙遠(yuǎn)和不好理解，因為普通人從字面上完全無法體會到這些含義的，所以如果你是想走親和力或大眾路線就不適合這個方向，走比較高價定位或者立志要走馬斯洛需求高層級的路線就可以嘗試。

比如耐克，他是賣運(yùn)動鞋和運(yùn)動服的，但他并不只是為了解決你最低層次的有衣服穿或有鞋子穿這個需求而生的，而是為了滿足更高層次的一種代表你的信仰的需求，他會向你傳達(dá)的是一種精神：just do it！

當(dāng)然了，它也確實不便宜，甚至一雙鞋可以被炒到上萬一雙（嗯，信仰是昂貴的。。）

3、首字母提取法

顧名思義就是用名稱的首字母來做logo設(shè)計咯，比如做設(shè)計的面條首字母提取后就是zsjdmt了，不過我這個名字太長了，使用這種方法就不太合適，既不便于記憶也不便于設(shè)計啊，名字比較短比如說3個字以內(nèi)的可以嘗試，大家知道有這個方法就好了，我就不細(xì)說了。

4、字母變形法

跟前面一樣，提取名字的首字母來做變形，從而得到一個新的圖形做logo，這種個方式也是比較適合3個字以內(nèi)的短名字，比如順豐家的LG／順豐：

5、實物衍生法

這種方法適合起的名字本身就比較具象化實物的企業(yè)或品牌，它們的logo往往直接就在相應(yīng)的物體形狀上稍作改動，比如殼牌的logo就是一只貝殼圖形，蘋果的logo就是一只被咬了一口的蘋果圖形，錘子的logo就是一個錘子圖形，天貓的logo就是一只貓的簡化圖形，下面這些logo即使我不放名稱你也知道是什么吧～

6、正負(fù)形

有一些名稱比較討巧，由他聯(lián)想到的圖形或者她的首字母組成的圖形剛好可以處理成正負(fù)形的形式，這樣的logo來再多也看不厭，并且會讓人會心一笑，加深印象，值得推薦～

四、logo設(shè)計注意事項

定位方向有了，設(shè)計方法也有了，接下來是一些logo設(shè)計注意事項，主要是以下6個避免和4個宜：

6個避免：

（1）避免型太散

做字體變形類的logo或者將多個衍生圖形拼湊在一起的時候，平面構(gòu)成掌握的不好的人總是容易把logo做的很散，或看起來不整體，解決辦法就是學(xué)好平面構(gòu)成基礎(chǔ)知識。

比如下面這種類型的logo，比較帶一點文藝氣息或情緒思緒在里面的，如果是平面構(gòu)成基礎(chǔ)不牢的人，可能做的型就會很散，就不好看了，看起來隨意，實際是有構(gòu)成原理的，這就是功底：

（2）避免不統(tǒng)一

還有人在做字體變形類的logo的時候，相同的筆畫部分卻處理成了不同的形式，這就容易造成整體logo看起來不統(tǒng)一，解決辦法就是把相同的筆畫部分做統(tǒng)一處理就好了。

（3）太復(fù)雜

logo本身就是在很小一塊面積里做圖形設(shè)計，而且會應(yīng)用在不同場合，所以型一定要耐看簡潔，越簡潔的圖形適用范圍就越廣，而且你會發(fā)現(xiàn)越大牌的logo基本也都是非常簡潔的。

怎么個簡潔法？比如你的logo是取自一朵白云的形狀，難到你就要保留真實白云的那些彎彎曲曲的線條嘛？其實直接用光滑的圓形和直線就可以了，再比如你的logo是取自山丘的形狀，那難道你要保留真實的曲曲折折的山脊線條嘛？其實直接用三角形或者幾條光滑的弧線代替就可以了。

那些所謂的真實的小細(xì)節(jié)都是可以去掉的，去掉后就簡潔了。

（4）型不達(dá)意

前幾天有位面粉發(fā)了一個關(guān)于C2M的平臺logo給我看，其中有一個型看起來還可以，但是卻跟本身的字面含義不搭邊，他那個logo看起來像是C2C而不是C2M，這方向就偏了呀。

logo好看有創(chuàng)意的同時，也要表達(dá)準(zhǔn)確啊。

（5）不平衡

最終做出來的logo如果感覺畫面不平衡，那多半也是構(gòu)圖基礎(chǔ)知識掌握的不好的原因，跟畫面看起來散是一個道理，所以解決辦法也是把構(gòu)圖基礎(chǔ)打牢，勤加練習(xí)再說吧，這個也是需要長時間去練習(xí)去看才會形成一種視覺平衡感的。

（6）氣質(zhì)不搭

前幾天還有一位面粉發(fā)了一個logo設(shè)計向我尋求建議，我一看，他們是做藝術(shù)衍生品電商平臺的，針對的群體是年輕人，按理說logo應(yīng)該設(shè)計的比較有調(diào)性文藝范一些也好，但是他做的是非常圓潤卡通的造型，而且用的綠色，這樣下來整個氣質(zhì)就不搭了，這就是一開始沒考慮定位導(dǎo)致的，當(dāng)然跟審美可能也有一定的關(guān)系。

總之解決辦法還是多看，多觀察形形色色的人，他們的喜好和習(xí)慣，久而久之也就摸清什么定位適合是，類型的設(shè)計了。

4個宜：

（1）可做視覺延展

你做的logo最好是能提取出可做視覺延展的元素圖形，便于借助互聯(lián)網(wǎng)傳播，比如前段時間ofo小黃車策劃的1元騎車活動海報里對于“O”元素的提取運(yùn)用，還有天貓的一些大型活動對于貓頭這個形象的延展運(yùn)用，都是非常好的案例，用戶一看到這個顏色或這個形狀元素就知道你是誰了，品牌形象早已深入人心。

（2）有規(guī)律可循

所謂有規(guī)律可循其實是指2個方面，一方面是指logo的圖形是有來源的不是憑空捏造的，另一方面是指組成這個logo的各個元素之間是互相有聯(lián)系有規(guī)律的，而不是突然冒出一個非常另類突兀的圖形元素，跟整體都不搭。

（3）圖個吉利

之前就有面粉問我過關(guān)于設(shè)計與風(fēng)水之間的關(guān)系的問題，風(fēng)水啥的其實我也不是太懂，但是一般來說有些忌諱的顏色或數(shù)字圖形能不用就不用，比如我之前提到的有的企業(yè)老板他不喜歡黃色或綠色，還有的老板不喜歡X這種形狀，再或者不喜歡太過尖銳的形式，總之，在設(shè)計開始執(zhí)行之前最好還是問下老板或公司有沒有什么忌諱，到時避開就行了。

比如，如果你模仿3M的形式做了一個看起來像2B的logo，甲方是不是得削你一頓了啊。。。

（4）有特色

有特色是指，跟同行比，你的logo更有創(chuàng)意有意思或有爭議，而不是普普通通或雷同的，別人壓根就記不住你，所以這時候可以跨行借鑒或做一些競品分析，取長補(bǔ)短，做別人沒做過的或比別人做得好，都可以讓自己的logo看起來有特色。

至于怎么做的有特色，方法就在前面都列舉了咯，可以從表現(xiàn)形式／創(chuàng)意／工藝／用材／展示方式等各個方面去考慮。

寫在最后

很多人可能做logo喜歡講求黃金比例或白銀比例還有什么網(wǎng)格啥的，在還有一些人可能連為什么要做這個logo都沒搞清楚，就找了個參考一臨摹，把后面的各種視覺延展也都考慮好了，一個logo就這么出來了，我不能說這些方式是不是對的，但我認(rèn)為更合適的logo設(shè)計步驟應(yīng)該是這樣的：

1、先大致了解設(shè)計需求，在做一份調(diào)研或競品分析（如果沒時間或沒資金的話就自己私下做，經(jīng)驗豐富的人不需要這一步都會有一個判斷了），明確企業(yè)或品牌的理念和定位后，依據(jù)這個定位給出合適的創(chuàng)意方向和設(shè)計形式；

2、畫草圖，在創(chuàng)意草圖階段先不用考慮黃金比例或網(wǎng)不網(wǎng)格或視覺延展的問題，先把大致的型給出來，然后創(chuàng)意方向就定了；

3、按照那些禁忌和適宜的條件去優(yōu)化規(guī)范自己的logo，這個時候就可以遵循一些網(wǎng)格規(guī)律或比例去規(guī)范logo的形，能簡化成基本圖形的就簡化，比如圓形／方形／三角形等有規(guī)律可循的圖形；

4、提取可用于視覺延展的圖形，最終再進(jìn)一步調(diào)整，讓它看起來是平衡的／達(dá)意的／有特色的／簡潔統(tǒng)一的；

于是，一個完整的logo就出來了。

二、設(shè)計師必看圖標(biāo)（icon）指南

圖標(biāo)，是一種圖形化的標(biāo)識，它有廣義和狹義兩種概念，廣義指的是所有現(xiàn)實中有明確指向含義的圖形符號，狹義主要指在計算機(jī)設(shè)備界面中的圖形符號。對于UI而言，主要針對的就是狹義的概念，它是UI界面視覺組成的關(guān)鍵元素之一。 我們通過圖標(biāo)看到的不僅僅是圖標(biāo)本身，而是它所代表的內(nèi)在含義。

色彩 color 、 文字 Font 、 圖標(biāo) icon 、 圖形 shape 、 圖片 image 、 空間 space ，是我們做平面設(shè)計中非常重要的 6 個元素，而對于 UI 設(shè)計而言，圖標(biāo)可以說是整個產(chǎn)品的點睛之筆，它甚至可以直接影響著一款產(chǎn)品的形象和氣質(zhì)。

顯然，圖標(biāo)不是由界面設(shè)計師發(fā)明的。作為一種交流的對象，它們有著悠久而多樣的歷史，根植于古代。它們出現(xiàn)在地圖、標(biāo)志、方案、手冊和許多其他信息來源中。然而，隨著新技術(shù)和圖形化用戶界面的出現(xiàn)，圖標(biāo)經(jīng)歷了新的轉(zhuǎn)折進(jìn)步。

從歷史上看，施樂公司在20世紀(jì)70年代初的時候，在功勞中提到了第一個圖形化用戶界面的圖標(biāo)：圖標(biāo)是在一臺名為Xerox Alto的機(jī)器上實現(xiàn)的，這臺機(jī)器非常昂貴，并沒有真正普及到廣大的用戶。然而，這只是一個漫長的故事的開始：1981年，Xerox Star（施樂之星）發(fā)布了，它被稱為第一臺將圖標(biāo)作為界面的一部分的消費(fèi)類計算機(jī)。特別是，它應(yīng)用了至今為止的文件夾和垃圾箱的圖標(biāo)。下面是圖標(biāo)從80年代

表意圖標(biāo)（又稱解釋性圖標(biāo)）

表意符號是指原本不存在實物的符號，是在發(fā)展過程中創(chuàng)造的一種符號，用于表達(dá)某些特定的含義或操作行為。而且在發(fā)展過程中，這些符號逐漸繼承了一些象形符號的特性，將符號本身作為「實物」并且不斷演化。例如「箭頭」從最初的「弓箭」已經(jīng)逐步衍生為一種特定的表意符號。

交互圖標(biāo)

具有雙向信息傳遞能力，不僅可以向用戶傳遞某種信息，引導(dǎo)幫助用戶執(zhí)行特定操作，同時也允許用戶向程序傳遞控制信息，從功能重要程度來講，它的重要性是最高的。比如：登陸注冊按鈕，開關(guān)按鈕，數(shù)量按鈕，點贊，轉(zhuǎn)發(fā)分享等都屬于交互性圖標(biāo)。

裝飾和娛樂用圖標(biāo)

通常是用來提升整個界面的美感，加深個性化設(shè)計風(fēng)格，并不具備明顯的功能性。這類圖標(biāo)迎合了目標(biāo)受眾的偏好與期望，具備有特定的風(fēng)格的外觀，提升用戶線上體驗感，迎合受眾群的偏好，提升設(shè)計親和度。裝飾性圖標(biāo)通常呈現(xiàn)出季節(jié)性和周期性的特征。例如線上活動、用戶等級、空頁面等

應(yīng)用圖標(biāo)

不同數(shù)字產(chǎn)品在各個操作系統(tǒng)平臺上的入口和品牌展示用的標(biāo)識，它是這個數(shù)字產(chǎn)品的身份象征。在絕大多數(shù)的情況下，它會將這個品牌的LOGO和品牌用色融入到圖標(biāo)設(shè)計當(dāng)中來。也有的圖標(biāo)會采用吉祥物和企業(yè)視覺識別色的組合。真正優(yōu)秀的應(yīng)用圖標(biāo)設(shè)計，其實是結(jié)合市場調(diào)研和品牌設(shè)計的組合，它的目標(biāo)在于創(chuàng)造一個不會讓用戶能夠在屏幕上快速找到的醒目設(shè)計。

象形圖標(biāo)

ios相當(dāng)長一段時間流行 “Skeumorphic設(shè)計理念”，屬于超寫實設(shè)計。并且認(rèn)為只要有可能，在應(yīng)用上增加現(xiàn)實的、物理的緯度，與現(xiàn)實越相像，操作越相同，就越容易使用戶理解運(yùn)作模式，接受度就越高。例如日本鼎鼎有名的富士山圖標(biāo)，由此說明好的設(shè)計不僅美觀度高，功能性同樣十分重要，特別是與旅游相關(guān)的設(shè)計，需要讓人跨越語言的障礙。

隱喻圖標(biāo)

icon 中的隱喻元素很重要，它可以讓我們一看到這個 icon 就知道是什么意思。比如，一個房子代表首頁，一個叉叉代表出錯或關(guān)閉。當(dāng)我縮小一個 icon 時，我都會保留隱喻元素，來保證 icon 仍然可以準(zhǔn)確傳達(dá)信息。

工具圖標(biāo)

主要以行業(yè)類別為分類，使用范圍廣泛，大眾或行內(nèi)人士識別度高，且被長期使用。比如：建筑行業(yè)，醫(yī)療行業(yè)，化工行業(yè)等等。

混合圖標(biāo)

也就是前三種的結(jié)合，目的在于達(dá)到不同的視覺效果和應(yīng)用結(jié)構(gòu)。前段時間追波很流行的MBE粗描邊風(fēng)格icon就是綜合圖標(biāo)的產(chǎn)物，多表達(dá)設(shè)計師個人設(shè)計風(fēng)格或適用某類設(shè)計感較強(qiáng)的軟件。

字符圖標(biāo)

字符圖標(biāo)“Glyph”一詞是源自于排版領(lǐng)域，現(xiàn)在已經(jīng)隨著數(shù)字設(shè)計而逐步在數(shù)字設(shè)計領(lǐng)域扎根了，它源自于希臘語，含義為“雕刻”。在排版領(lǐng)域當(dāng)中，符號圖標(biāo)通常是包含特定的含義、特定功能、可表意也可書寫的類文字系統(tǒng)，它可以是字母，也可以是圖形，有的時候甚至是兩者的組合。

在這類圖標(biāo)設(shè)計中，比較典型的當(dāng)屬天氣類圖標(biāo)了。從單個圖標(biāo)到組合圖標(biāo)，都能充分體現(xiàn)出來。

扁平圖標(biāo)

扁平圖標(biāo)包含線性、面型、線+面，面+面，變現(xiàn)方式多樣，拓展性強(qiáng)，更個性化，年輕化一些，相同，同樣設(shè)計風(fēng)格的icon，在更換顏色后就能體現(xiàn)和傳達(dá)不一樣的信息。

擬物化圖標(biāo)

擬物化圖標(biāo)是扁平化圖標(biāo)的對立面，正如同當(dāng)初擬物化圖標(biāo)設(shè)計師常說的，它就是“抄現(xiàn)實”，盡量將現(xiàn)實世界中的形狀、紋理、光影都融入到整個圖標(biāo)的設(shè)計，擬真是它的特點。擬物化圖標(biāo)這一設(shè)計趨勢幾乎是跟隨著Macintosh的誕生和進(jìn)化一步一步走過來，走到極致，然后從UI設(shè)計領(lǐng)域開始，被扁平化設(shè)計所替代。不過，擬物化圖標(biāo)現(xiàn)在依然廣泛地運(yùn)用在不同領(lǐng)域，尤其是游戲設(shè)計和游戲類產(chǎn)品的圖標(biāo)設(shè)計當(dāng)中。2.5D圖標(biāo)和桌面應(yīng)用圖標(biāo)。

Windows,iOS, etc., 中文版和英文版甚至各種語言版本，在不打開菜單之前，基本上都長一樣。很多圖標(biāo)已經(jīng)能夠被大多數(shù)用戶快速識別，甚至成為國際通用的圖標(biāo)。例如Windows UI

一個圖標(biāo)能夠表述清楚含義的時候，只需占用一個字符的位置就可以傳遞給用戶操作信息。例如掃一掃、郵件發(fā)送成功，用文案表示需要3-4個字，英文或其它語言可能更長，而用圖標(biāo)代替只需要一個字符位置

支付寶右上角 + 表示更多功能，此時一個字符位置解釋清楚其含義；微信下一個類似聲波圖標(biāo)表示語音，直觀易理解

進(jìn)入碎片化時代和進(jìn)入讀圖時代，幾乎是相同的節(jié)奏。圖片內(nèi)容能在短時間內(nèi)產(chǎn)生更大的影響力，研究表明，大腦處理圖片內(nèi)容的速度比文字內(nèi)容快60000倍，人類大腦對圖形圖像的記憶也遠(yuǎn)勝于對文字的記憶。所以，在推廣品牌時，圖片內(nèi)容可以說是一圖勝千言。使用圖標(biāo)通過視覺引導(dǎo)幫助用戶快速識別信息。

Tik Tok和ins沒有任何文字說明情況下，我們就知道第5個標(biāo)簽就是個人中心

科學(xué)證明，在大腦中相對于其他感覺來說與視覺信息處理相關(guān)的腦區(qū)占統(tǒng)治地位，人腦對于圖像的記憶遠(yuǎn)遠(yuǎn)高于文字。圖標(biāo)多采用幾何圖形，并以對稱、一致的設(shè)計目標(biāo)來進(jìn)行設(shè)計，由于其高度濃縮的特性，圖標(biāo)具有更加簡潔的特性，更加便于記憶。

圖標(biāo)最底層邏輯：線性圖標(biāo)、面型圖標(biāo)、線+面型圖標(biāo)、面+面型圖標(biāo)、2.5D圖標(biāo)、擬物圖標(biāo)。網(wǎng)上五花八門的圖標(biāo)是在這些基礎(chǔ)上進(jìn)行視覺區(qū)分，而當(dāng)我們設(shè)計圖標(biāo)時候需要思考

1、產(chǎn)品視覺風(fēng)格定位（行業(yè)領(lǐng)域）

2、圖標(biāo)具體應(yīng)用的界面

3、產(chǎn)品面相的用戶人群是怎樣的？

先看一組不用風(fēng)格的圖標(biāo)，由上面不同APP圖標(biāo)可以看出不同行業(yè)、不同場景、不同用戶，圖標(biāo)的設(shè)計和表達(dá)方式是不一樣的，所以設(shè)計前需要思考，你需要表達(dá)的設(shè)計思路和產(chǎn)品的定位。

1、拆解關(guān)鍵詞及關(guān)鍵詞聯(lián)想

將需求信息中的關(guān)鍵詞進(jìn)行拆解及發(fā)散，轉(zhuǎn)化為生活中常見的事物，釋放它所代表的內(nèi)在含義。關(guān)鍵詞的同義詞、近義詞、形狀相關(guān)或相關(guān)聯(lián)想的物體

例如說到榮譽(yù)，馬上就能想到獎杯、獎狀、金牌、皇冠等。然后通過這些詞聯(lián)想，去找一些氣質(zhì)相符的圖片制作情緒版，通過情緒版可以感受到產(chǎn)品的調(diào)性，然后從中提取一些形狀和色彩做為產(chǎn)品圖標(biāo)的主要造型

2、根據(jù)關(guān)鍵詞聯(lián)想輸出圖形

根據(jù)上一步拆解的詞語或物體，通過簡單基本形狀轉(zhuǎn)為生活中常見圖形。常用的2中方法是用AI鋼筆工具（sketch貝塞爾工具）或者布爾運(yùn)算進(jìn)行繪制

3、根據(jù)場景輸出

這里的場景可能是實際應(yīng)用的場景，比如大眾點評tab標(biāo)簽欄、功能區(qū)（品類區(qū)）、運(yùn)營類圖標(biāo)等這些圖標(biāo)需要引導(dǎo)用戶去點擊，所以在視覺上更加豐富一些；而個人中心、分類區(qū)、詳情頁更多側(cè)重功能上的引導(dǎo)，相對來說較簡潔，屬于二級使用場景，線型圖標(biāo)居多。

我們常見各個圖標(biāo)文章分析應(yīng)該注意十幾點，而這些沒有規(guī)律和邏輯難以記憶，一時記住了也容易忘記。這些總結(jié)其實是從Material Design或者iOS規(guī)范中得來的。認(rèn)真研究這些細(xì)節(jié)，圖標(biāo)制作就不難了

圖標(biāo)端點分為直角和圓角，我們在設(shè)計過程中要統(tǒng)一圖標(biāo)端點，保持一致的設(shè)計語言

拐角

相對于其他圖形，人類的眼睛更容易識別圓角矩形而不是直角矩形，因為人在眼睛的生理構(gòu)造上中央凹(fovea centralis），是視網(wǎng)膜中視覺最敏銳的區(qū)域)在處理圓形時最快，而處理矩形邊緣則需要涉及大腦中更多的“神經(jīng)影像工具”。所以，人眼處理圓角更容易，因為它們看起來比普通矩形更接近于圓。

圓角自身的圓形屬性會給人圓潤、可愛 ， 更加安全、親密的感覺。因此社交、娛樂、直播、美食等圖標(biāo)多會使用圓角圖標(biāo)

直角則會給人一種尖銳、具有攻擊性的感覺，圖標(biāo)整體細(xì)節(jié)更多，通常出現(xiàn)在金融等商務(wù)屬性比較強(qiáng)的產(chǎn)品。比如：36氪、金融類產(chǎn)品等。

傾斜角度統(tǒng)一

內(nèi)部空間比例的不一致易導(dǎo)致圖標(biāo)視覺重點不統(tǒng)一。如下圖左第二個圖標(biāo)重偏下，第四個圖標(biāo)重心偏上，右邊是早期PP助手的標(biāo)簽欄圖標(biāo)，圖標(biāo)內(nèi)部挖空面積占比率相同，整體視覺和諧統(tǒng)一。

在繪制描邊圖標(biāo)時，要時刻注意圖標(biāo)的描邊粗細(xì)是否統(tǒng)一。在 @1x 一倍圖設(shè)計模式下，以 24px 為網(wǎng)格基準(zhǔn)的話，常使用的圖標(biāo)粗細(xì)有： 1px 、 1.5px、2px、3px ，1.5的粗細(xì)對顯示屏要求比較高（半個單位的路徑會導(dǎo)致圖標(biāo)在最終顯示時邊緣模糊，不清晰）

細(xì)描邊給人視覺感更加精致，粗描邊相對更加粗獷，由于目前流行趨勢的發(fā)展，常常也有粗描邊和細(xì)描邊結(jié)合的設(shè)計風(fēng)格

除了保持相同的視覺權(quán)重，圖標(biāo)的描線寬度也應(yīng)該保持一致，達(dá)到像素級統(tǒng)一。元素之間的最小間距，應(yīng)該大于或等于描邊的寬度。

蘋果、谷歌、IBM，國內(nèi)的阿里Ant Design都出過相關(guān)的圖標(biāo)網(wǎng)格規(guī)范，這里以谷歌的Material System 圖標(biāo)網(wǎng)格來進(jìn)行說明。在24*24px圖標(biāo)尺寸，上下左右安全邊距是2px，關(guān)鍵形狀的四個基本形狀為圓形20*20px、正方形18*18px、縱向矩形和橫向矩形20*16px。通過關(guān)鍵形狀的規(guī)則統(tǒng)一圖標(biāo)大小及位置，達(dá)到視覺的平衡

對齊像素點

清晰度（像素完美對齊）為了避免使圖標(biāo)失真，可以通過將X軸和Y軸坐標(biāo)設(shè)置為整數(shù)來將圖標(biāo)定位在像素上。在使用軟件AI或者sketch的時候繪制基礎(chǔ)圖形不要出現(xiàn)小數(shù)點和奇數(shù)，多用偶數(shù)

我們了解了 icon 的基本知識，怎樣評判我們的 icon 是否合適，是否貼合整個產(chǎn)品呢？我們需要了解什么才是一個好的 icon 。檢驗標(biāo)準(zhǔn)也是基于我們繪制的標(biāo)準(zhǔn)，分別是： 識別性，規(guī)范性、整體風(fēng)格與品牌感。

判斷事物的價值在于它的用途是什么，圖標(biāo)的用途是幫助用戶理解信息，所以表意準(zhǔn)確（清晰準(zhǔn)確的傳達(dá)信息）就是圖標(biāo)最重要、最底層的價值，如果你設(shè)計的圖標(biāo)用戶看不懂，即使視覺再美觀也沒有任何價值可言。

含義識別：是視覺語言是否替換文字語言，簡言之就是讓你的圖標(biāo)可以被用戶理解，不會讓用戶產(chǎn)生歧義。常見的就標(biāo)簽欄指南針表示發(fā)現(xiàn)，房子表示首頁等

視覺識別：是圖標(biāo)的大小，顏色，線條的粗細(xì)，這些影響影響視覺識別的因素，在具體樣式中提高視覺識別性。

我們要保證圖標(biāo)在視覺大小的一致性，圖標(biāo)飽滿度（正負(fù)形）、遵循同一種規(guī)律，細(xì)節(jié)統(tǒng)一性。這里的4點在前面繪制過程中已經(jīng)寫的非常詳細(xì)了。

整體風(fēng)格是要注意圖標(biāo)傳達(dá)的性格與 app 的基調(diào)是否一致，每個產(chǎn)品因為定位，針對人群不同，整個 app 的基調(diào)也不一樣，例如騰訊動漫，它的性格就是偏卡通可愛的類型，那么的圖標(biāo)設(shè)計上也要體現(xiàn)這個性格特點，盡量使用卡通圓潤的方法去設(shè)計。一個廣告語：復(fù)雜世界里，一個就夠了，整個APP從啟動圖標(biāo)到整體調(diào)性都是簡潔干凈，克制的色彩運(yùn)用傳達(dá)產(chǎn)品調(diào)性。

品牌感就是我們上面談到的要與品牌理念相符，傳達(dá)給用戶的感受一致，通過吸取品牌色，提取品牌元素，采用品牌吉祥物和品牌圖形的方法來提取品牌基因。我們要試著從品牌設(shè)計的角度去理解，尋找自己產(chǎn)品獨特的品牌氣質(zhì)，挑選合適的技法。然后把這些元素具象化，融入在界面設(shè)計中。下面幾款產(chǎn)品從產(chǎn)品名到啟動圖標(biāo)設(shè)計高度融合。

圖標(biāo)可用性測試是基本規(guī)則是根據(jù)圖標(biāo)驗證推導(dǎo)的

識別度：

1、用戶是否能夠理解圖標(biāo)的含義？

2、是否是用戶熟悉的圖標(biāo)？

3、是否與其他圖標(biāo)含義沖突？

4、是否能通過5秒原則？

5、圖標(biāo)的可擴(kuò)展性怎么樣？

6、是否需要增加文字標(biāo)簽？

設(shè)計是否統(tǒng)一

1、視覺語言是否統(tǒng)一？

2、圖標(biāo)的設(shè)計復(fù)雜程度是否統(tǒng)一？

3、整體設(shè)計是否協(xié)調(diào)、統(tǒng)一、視覺體系高度集中？

4、圖標(biāo)整體配色是否統(tǒng)一？

品牌信息：

圖標(biāo)是否獨特性、能否傳遞品牌信息？

一般情況下有 JPG、PNG、GIF、SVG 四種交付格式。其中JPG、PNG、GIF為位圖，受圖片本身的分辨率大小限制，無法靈活的修改尺寸。而SVG為矢量格式，支撐無損縮放。

在沒有SVG前因為要考慮到適配高清設(shè)備，需要切各種倍數(shù)的圖標(biāo)進(jìn)行適配。不過現(xiàn)在的開發(fā)軟件及插件都自帶切多倍圖的功能，比如藍(lán)湖。

JPG：兼容性強(qiáng)，自帶背景，不支持縮放。

PNG：支撐透明格式，不支持縮放，需要注意圖標(biāo)四周透明區(qū)域大小。

GIF：簡單的動態(tài)圖標(biāo)使用，透明背景時邊緣會有鋸齒，沒有辦法支持豐富的顏色。

SVG：無損縮放矢量圖形、體積小，單色模式下支持開發(fā)自行修改顏色，可修改樣式參數(shù)。

另外一種交付方式是將SVG格式的圖標(biāo)上傳至類似iconfont的網(wǎng)站后，完成圖標(biāo)的交付。需要注意的是：

1、SVG不支持漸變顏色填充

2、SVG不支持描邊，需要將描邊轉(zhuǎn)化為閉合圖像

3、圖標(biāo)的大小相同時，需要在圖標(biāo)下方增加一個相同尺寸的透明方形，同圖標(biāo)一起導(dǎo)出上傳

而iconfont對于圖標(biāo)制作要求嚴(yán)格，上傳時需要注意查看自己的圖標(biāo)是否符合要求。 鏈接

資料來源

UI設(shè)計師想做好圖標(biāo)設(shè)計？請問圖標(biāo)歷史了解過嗎？

圖像學(xué)的簡要歷史

《Icon Design Guide》

《Icon Utopia》

《the Ultimate Guide to an Interface Icon Set》

《svg圖標(biāo)庫以及與icon font對比》

三、自己制作logo怎么做

自己可以去”一鍵LOGO設(shè)計“這個網(wǎng)站制作logo，具體操作如下：

一、首先進(jìn)入網(wǎng)站，在網(wǎng)站首頁找到智能AI一鍵設(shè)計的圖標(biāo)，點擊進(jìn)去，然后點繼續(xù)。

二、之后進(jìn)入這個界面，在這里輸入你要設(shè)計的logo的名稱以及副標(biāo)題，完成后點擊繼續(xù)。

三、接下來就是選擇行業(yè)，比如我設(shè)計的是民宿，酒店行業(yè)就選其他分類。

四、然后就是選擇喜歡的配色，這個我想你有設(shè)計雛形的時候就應(yīng)該有想法了吧。

五、最后選擇字體啦，選好后點擊一鍵生成就可以了。

六、我們來看看網(wǎng)站生成的logo吧！

自己制作logo應(yīng)注意的問題

1、字體選擇要適合

在logo設(shè)計的眾多因素中，字體選擇是最重要因素之一，字體代表了商標(biāo)的趨向，是向大眾可以有效傳遞信息的。

2、圖案或概念的選擇要適合

Logo設(shè)計中的圖案設(shè)計可以讓人加深印象，圖案必須是能代表公司和網(wǎng)站的，即使沒有文字的時候，圖案也能代表公司形象，圖案選擇一定要和公司形象相符合。

3、顏色搭配要出彩

顏色可以很好地吸引別人的注意力，logo設(shè)計如果缺少了顏色，也是很無趣的，要注意避免使用太多顏色，給人造成視覺疲勞，一般不要超過三種。

4、要保持簡潔

Logo設(shè)計簡單，更容易被辨識，不需要太多裝飾，太過喧鬧和復(fù)雜，盡量使用有秩序的元素，圖案盡量選擇的少一些。

四、圖標(biāo)（icon）設(shè)計的方法有哪些？

直接用這個在線的圖片生成ico工具吧，方便快捷，常用的圖片格式比如jpg/png/webp/bmp等等都可以直接生成ico圖標(biāo)，還可以在線裁剪縮放，選取你需要的尺寸等等，而且清晰度挺高的。在線ICO圖標(biāo)制作生成,圖片轉(zhuǎn)換ICO圖標(biāo)Pro版

圖片轉(zhuǎn)換ICO圖標(biāo)Pro版步驟：

一、點擊或者拖拽到上傳框中，即可上傳你要轉(zhuǎn)換的圖片，直接將新圖片拖入上傳框即可更換圖片。目前已知支持jpg、png等多種常見的圖片格式，如果上傳圖片并轉(zhuǎn)換ico圖標(biāo)成功，則代表支持該格式。

二、此時預(yù)覽框中會出現(xiàn)剛剛上傳的圖片，可以任意縮放拖拽裁剪框，選擇你想要截取并轉(zhuǎn)換ico圖標(biāo)的區(qū)域。在拖拽縮放裁剪框的過程中，左上方會有ico圖標(biāo)效果的實時預(yù)覽。

三、選擇需要生成的ico圖標(biāo)的尺寸，主要提供寬高為16、32、48、64、128、256、512的尺寸以供選擇。通常的ico圖標(biāo)基本都是32、64或者128像素的。

四、選擇轉(zhuǎn)換生成的ico圖標(biāo)的文件格式，默認(rèn)的格式是.ico，并且有.jpg和.png格式可以選擇。需要注意的是，ico圖標(biāo)一般都是背景鏤空透明的圖形，只有.ico和.png格式支持透明背景的圖片。而.jpg格式的圖片本身是不支持的。

以上就是關(guān)于logo設(shè)計圖標(biāo)排版相關(guān)問題的回答。希望能幫到你，如有更多相關(guān)問題，您也可以聯(lián)系我們的客服進(jìn)行咨詢，客服也會為您講解更多精彩的知識和內(nèi)容。

推薦閱讀：

logo有幾種類型（logo有多少種類型）

logo專利申請流程及費(fèi)用(如何申請logo專利)

logo是獅子的品牌（logo是獅子的服裝品牌）

企業(yè)頭像logo設(shè)計(企業(yè)頭像logo設(shè)計免費(fèi))

中國策劃師培訓(xùn)網(wǎng)