正文

icon設(shè)計(jì)是什么意思（icon設(shè)計(jì)是什么意思呀）

發(fā)布時(shí)間：2023-04-07 01:22:04 稿源：創(chuàng)意嶺閱讀： 136

大家好！今天讓小編來(lái)大家介紹下關(guān)于icon設(shè)計(jì)是什么意思的問(wèn)題，以下是小編對(duì)此問(wèn)題的歸納整理，讓我們一起來(lái)看看吧。

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

文章目錄列表:

1、什么是好的APP icon
2、logo 和 icon 的本質(zhì)區(qū)別是什么？
3、什么是ICON圖標(biāo)?什么是矢量圖?
4、什么是ICON圖標(biāo)?什么是矢量圖?

一、什么是好的APP icon

一個(gè)好的APP圖標(biāo)有利于你的應(yīng)用在眼花繚亂的眾多APP中脫穎而出，吸引用戶的眼球，引導(dǎo)用戶去點(diǎn)擊，那么什么才算是好的APP icon設(shè)計(jì)呢，icon設(shè)計(jì)要注意什么？談一下我的看法

1、icon是干嗎用的

任何事物的出現(xiàn)都是為了解決一定的問(wèn)題，所以我們先叨叨幾句，了解下icon是為了解決什么問(wèn)題而出現(xiàn)的？

這是一個(gè)菜市場(chǎng)，王二麻子在這條街上賣了十幾年燒餅了，一直也沒(méi)有其他賣燒餅的，所以人們來(lái)了市場(chǎng)，買燒餅必定買他家的，品質(zhì)又好，大家口口相傳。因?yàn)槭袌?chǎng)賣東西的比較多，王二麻子就找了塊布，上面畫了個(gè)圈，掛在門口方便別人找后來(lái)來(lái)了個(gè)新的賣燒餅的胖嫂，菜市場(chǎng)人漸漸多起來(lái)了，為了方便大家找到他家，就做了個(gè)招牌，上書《王二麻子燒餅》，這樣人們要介紹他的門面，只需說(shuō)去菜市場(chǎng)找王二麻子燒餅就行，后來(lái)王二考慮到人們看字也比較麻煩，就找人畫了個(gè)大餅的樣子，點(diǎn)了幾個(gè)點(diǎn)，當(dāng)做是芝麻的樣子。又把底色招人弄成燒餅的金黃色，自此王二麻子燒餅的品牌形象定型了，人們口口相傳，去買燒餅就找那個(gè)圓圈里面有點(diǎn)的那個(gè)。

2、ICON的歷史

從上面的小故事我們可以了解，王二麻子的招牌也就是王二麻子的icon 的發(fā)展經(jīng)歷了四個(gè)階段

1、無(wú)標(biāo)識(shí)或弱標(biāo)示，人即品牌，多在競(jìng)爭(zhēng)不充分的情況下

2、模糊標(biāo)識(shí)，競(jìng)爭(zhēng)相對(duì)少，只需要區(qū)分出自己與他人來(lái)即可

3、明確標(biāo)識(shí)，競(jìng)爭(zhēng)升級(jí)，既要區(qū)分出與別人的不同，又要體現(xiàn)自己的特色

4、抽象標(biāo)識(shí)，目的是便于區(qū)分，易于理解，便于傳播。從1990起，國(guó)內(nèi)興起了設(shè)計(jì)企業(yè)VI的風(fēng)潮，大家可以了解下當(dāng)時(shí)的文案，對(duì)于icon設(shè)計(jì)會(huì)有幫助。

icon最重要的目的就是標(biāo)識(shí)產(chǎn)品，易于傳播

二、ICON該改怎么設(shè)計(jì)

如無(wú)特殊說(shuō)明，下文中的icon指的是手機(jī)APP的icon icon是由色彩，文字和圖案構(gòu)成的。

1、icon怎么選擇色彩

色彩：色彩之于icon最重要的作用是吸引人的目光，渲染出設(shè)定的氛圍，作為產(chǎn)品形象輸出的背景。當(dāng)人在手機(jī)APP上瀏覽時(shí)，翻屏動(dòng)作是很快的，注意力也是發(fā)散的，這個(gè)時(shí)候，用戶能關(guān)注到的只有色彩，一個(gè)大的色塊在眼前劃過(guò)，跟用戶的眼睛造成視覺(jué)沖擊，一個(gè)好的色彩搭配會(huì)吸引用戶視覺(jué)停留，獲取寶貴的點(diǎn)開的機(jī)會(huì)。那么什么樣地色彩會(huì)讓人停留呢。我們應(yīng)該怎么選擇APP對(duì)應(yīng)的色彩呢？

分兩種情況考慮：

1）你做的不是一個(gè)從零開始的新產(chǎn)品，你的公司之前已經(jīng)有了在網(wǎng)站，在平媒的展示記錄，已經(jīng)有確定的品牌色，這種情況下就應(yīng)當(dāng)延續(xù)之前的配色，保證傳播形象上的統(tǒng)一，讓用戶看到這個(gè)顏色就能聯(lián)想到之前用過(guò)的產(chǎn)品，讓用戶產(chǎn)生聯(lián)想，產(chǎn)生我點(diǎn)進(jìn)去看看有啥新東西的想法，走到這一步，那么恭喜！?。∥脩舫删瓦_(dá)成_。

2）你做的是一個(gè)新產(chǎn)品，那么選擇色彩時(shí)可以從這幾個(gè)方面考慮。你的產(chǎn)品是屬于什么行業(yè)的呢，行業(yè)有沒(méi)有什么相對(duì)固定的顏色方案呢？如果有，那么請(qǐng)盡量往上靠，選擇相似的顏色有利于用戶對(duì)產(chǎn)品產(chǎn)生印象。如果沒(méi)有那么就要從產(chǎn)品功能上考慮，你的產(chǎn)品能給用戶提供什么幫助，是信息展示類的應(yīng)用還是工具類應(yīng)用，在這里可以參照通用的冷暖色調(diào)理論和平面設(shè)計(jì)的配色方案。總體來(lái)說(shuō)，對(duì)色彩的要求是區(qū)別于其他產(chǎn)品，能烘托產(chǎn)品氛圍，吸引人的眼睛，讓用戶關(guān)注到應(yīng)用。

2、怎么設(shè)計(jì)icon的圖案

圖案是用來(lái)溝通的，是通過(guò)特定的形狀，來(lái)讓人們產(chǎn)生聯(lián)想，比如紅十字的圖案就讓用戶想到醫(yī)院，想到健康方面的，汽車的圖案就讓人想到車相關(guān)，飛機(jī)就讓用戶想到旅行相關(guān)的，利用這些固定行業(yè)的固定形狀可以直接讓用戶了解產(chǎn)品的使用場(chǎng)景和功能，進(jìn)而產(chǎn)生興趣。

圖案大體可以分三種，

一是對(duì)實(shí)際物體的抽象和引申

比如說(shuō)摩拜單車的icon上的自行車圖案，讓人一看就知道這是和自行車相關(guān)的應(yīng)用。蘋果原生地圖應(yīng)用的圖標(biāo)也屬于這種。

IOS操作系統(tǒng)升級(jí)到7。0時(shí),還嫌棄了一波平面化圖標(biāo)替代擬物化圖標(biāo)的風(fēng)潮，其實(shí)，不管是擬物化圖標(biāo)還是平面化圖標(biāo)都是對(duì)實(shí)際物體的抽象和引申。另外平面化替代擬物化是必然的，原因很簡(jiǎn)單，最開始IPHONE推出的時(shí)候，算是新事物，必須使用比較真實(shí)的擬物化圖標(biāo)來(lái)告訴用戶每個(gè)應(yīng)用是干什么的，后來(lái)用戶越來(lái)越多，再進(jìn)行進(jìn)一步抽象升級(jí)，圖標(biāo)就不需要那么形象的表示事物了只需要讓用戶看到圖標(biāo)能理解到這個(gè)圖標(biāo)代表的是什么就可以了。

二是對(duì)行業(yè)圖標(biāo)的變形例如鐵道部12306的icon圖案就是常見(jiàn)的鐵路部門的示意圖標(biāo)，同花順的圖標(biāo)是一段簡(jiǎn)單的K線讓用戶一看就是和故事相關(guān)的應(yīng)用。

三是對(duì)文字的變形這里有兩個(gè)很牛的應(yīng)用要推薦下，一個(gè)是天貓的icon，圖標(biāo)的上半部分就是天貓倆字，僅在貓字上面做了些許變形，認(rèn)識(shí)字就知道這是干嘛的，而且還特別醒目。相比下京東的icon就有點(diǎn)懵了，一看之下是個(gè)狗，如果是個(gè)新用戶直接一看其實(shí)是懵的，表意不明。不過(guò)，以京東現(xiàn)在的知名度倒是不需要care這點(diǎn)小事情了。

另外一個(gè)是大網(wǎng)易新聞，看人家圖標(biāo)

大紅的底色上有大大的兩個(gè)字網(wǎng)易，下面是小產(chǎn)品標(biāo)識(shí)news。

對(duì)文字的變形還有一種情況，那就是文字加一些小修飾，既能看到品牌名，又能大約看出產(chǎn)品是干嘛的來(lái)。如下例：

叮當(dāng)倆字強(qiáng)調(diào)品牌名，上面加了個(gè)小人，就做成了一個(gè)人騎著自行車的形象，用戶大約了解這可能是個(gè)配送相關(guān)的應(yīng)用。

3、icon上該寫什么字

icon上該不該寫字，寫字的話要寫什么字，其實(shí)和上面說(shuō)的圖案使用文字的論述有點(diǎn)關(guān)系。

圖案用來(lái)溝通，文字才能精準(zhǔn)的信息，如果我們要在icon上加文字，首先要考慮的是我們要傳達(dá)的信息是什么，這個(gè)信息能不能通過(guò)我們的圖標(biāo)進(jìn)行傳達(dá)。

確定了要不要加字，就要確定加在哪個(gè)位置，其實(shí)這個(gè)一般來(lái)說(shuō)都會(huì)是加在整個(gè)圖標(biāo)的底部。

寫什么字呢，畢竟地方不大，寫不了幾個(gè)字，不同業(yè)務(wù)選的詞和字的組合不一樣，沒(méi)法提出具體的建議了。來(lái)直接比較倆圖標(biāo).

浦發(fā)銀行信用卡APP你直接放了四個(gè)大字你也太蒙事兒了吧，中間一個(gè)大花還遮了部分字,low，腦殘，無(wú)語(yǔ)ing

天貓上面已經(jīng)夸了一遍，天貓這個(gè)icon設(shè)計(jì)里還有一個(gè)小機(jī)關(guān)，天貓兩個(gè)字下面和貓頭上面還有個(gè)空白區(qū)，中間還可以塞11.11，如此設(shè)計(jì)確實(shí)牛逼。

最后總結(jié)一下，icon設(shè)計(jì)時(shí)需要根據(jù)產(chǎn)品階段（新產(chǎn)品還是已有產(chǎn)品），所屬行業(yè)（電商、信息、游戲）的不同來(lái)選擇合適的色彩（奪人眼球）和合適的圖案（品牌形象）和精準(zhǔn)的文字（信息傳遞）。

我們?cè)谠O(shè)計(jì)ICON是一定要考慮用戶瀏覽使用APP時(shí)，目光關(guān)注點(diǎn)是從大到小，從上到下來(lái)移動(dòng)的。仔細(xì)體會(huì)用戶的習(xí)慣才能設(shè)計(jì)出優(yōu)秀的ICON。

二、logo 和 icon 的本質(zhì)區(qū)別是什么？

logo是身份識(shí)別，icon是功能識(shí)別

三、什么是ICON圖標(biāo)?什么是矢量圖?

ICON是圖標(biāo)文件,只是圖標(biāo)

矢量圖：計(jì)算機(jī)中顯示的圖形一般可以分為兩大類——矢量圖和位圖。矢量圖使用直線和曲線來(lái)描述圖形，這些圖形的元素是一些點(diǎn)、線、矩形、多邊形、圓和弧線等等，它們都是通過(guò)數(shù)學(xué)公式計(jì)算獲得的。例如一幅花的矢量圖形實(shí)際上是由線段形成外框輪廓，由外框的顏色以及外框所封閉的顏色決定花顯示出的顏色。由于矢量圖形可通過(guò)公式計(jì)算獲得，所以矢量圖形文件體積一般較小。矢量圖形最大的優(yōu)點(diǎn)是無(wú)論放大、縮小或旋轉(zhuǎn)等不會(huì)失真；最大的缺點(diǎn)是難以表現(xiàn)色彩層次豐富的逼真圖像效果。Adobe公司的Illustrator、Corel公

司的CorelDRAW是眾多矢量圖形設(shè)計(jì)軟件中的佼佼者。大名鼎鼎的Flash

MX制作的動(dòng)畫也是矢量圖形動(dòng)畫。

具體有什么用？

根據(jù)信息表示方式分為的矢量圖和位圖。

矢量圖是用一系列計(jì)算指令來(lái)表示的圖，因此矢量圖是用數(shù)學(xué)方法描述的圖，本質(zhì)上是很多個(gè)數(shù)學(xué)表達(dá)式的編程語(yǔ)言表達(dá)。畫矢量圖的時(shí)候如果速度比較慢，你可以看到繪圖的過(guò)程。

你可以把矢量圖理解為一個(gè)“形狀”，比如一個(gè)圓，一個(gè)拋物線等等，因此縮放不會(huì)影響其質(zhì)量。

位圖是象素集合。不用我解釋了。

用途是：

矢量圖一般用來(lái)表達(dá)比較小的圖像，移動(dòng)，縮放，旋轉(zhuǎn)，拷貝，改變屬性都很容易，一般用來(lái)做成一個(gè)圖庫(kù)，比如很多軟件里都有矢量圖庫(kù)，你把它拖出來(lái)隨便你畫多大都行。

四、什么是ICON圖標(biāo)?什么是矢量圖?

ICON是圖標(biāo)文件,只是圖標(biāo)

矢量圖:計(jì)算機(jī)中顯示的圖形一般可以分為兩大類--矢量圖和位圖。矢量圖使用直線和曲線來(lái)描述圖形，這些圖形的元素是一些點(diǎn)、線、矩形、多邊形、圓和弧線等等，它們都是通過(guò)數(shù)學(xué)公式計(jì)算獲得的。例如一幅花的矢量圖形實(shí)際上是由線段形成外框輪廓，由外框的顏色以及外框所封閉的顏色決定花顯示出的顏色。由于矢量圖形可通過(guò)公式計(jì)算獲得，所以矢量圖形文件體積一般較小。矢量圖形最大的優(yōu)點(diǎn)是無(wú)論放大、縮小或旋轉(zhuǎn)等不會(huì)失真;最大的缺點(diǎn)是難以表現(xiàn)色彩層次豐富的逼真圖像效果。Adobe公司的Illustrator、Corel公

司的CorelDRAW是眾多矢量圖形設(shè)計(jì)軟件中的佼佼者。大名鼎鼎的Flash

MX制作的動(dòng)畫也是矢量圖形動(dòng)畫。

具體有什么用?

根據(jù)信息表示方式分為的矢量圖和位圖。

你可以把矢量圖理解為一個(gè)“形狀”，比如一個(gè)圓，一個(gè)拋物線等等，因此縮放不會(huì)影響其質(zhì)量。

位圖是象素集合。不用我解釋了。

用途是:

以上就是小編對(duì)于icon設(shè)計(jì)是什么意思問(wèn)題和相關(guān)問(wèn)題的解答了，如有疑問(wèn)，可撥打網(wǎng)站上的電話，或添加微信。