正文

appicon制作（icon制作軟件）

發(fā)布時(shí)間：2023-04-05 00:51:57 稿源：創(chuàng)意嶺閱讀： 111

大家好！今天讓小編來大家介紹下關(guān)于appicon制作的問題，以下是小編對(duì)此問題的歸納整理，讓我們一起來看看吧。

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

文章目錄列表:

1、APP設(shè)計(jì)、icon設(shè)計(jì)、UI設(shè)計(jì)之間有什么區(qū)別？
2、什么是好的APP icon
3、如何做APP界面設(shè)計(jì)
4、怎樣制作APP

一、APP設(shè)計(jì)、icon設(shè)計(jì)、UI設(shè)計(jì)之間有什么區(qū)別？

app設(shè)計(jì)：例如微信是一款app，它的設(shè)計(jì)包括微信的logo圖標(biāo)設(shè)計(jì)，也就是icon設(shè)計(jì)，每個(gè)用戶界面的設(shè)計(jì)，即UI設(shè)計(jì)，操作方式設(shè)計(jì)，即交互設(shè)計(jì)，設(shè)計(jì)之外，還可能涉及到用戶研究、可用性測(cè)試等。范圍較廣，包括App原型設(shè)計(jì)，Icon設(shè)計(jì)，交互設(shè)計(jì)（按一個(gè)按鈕，它會(huì)反饋什么，是彈出提示還是跳轉(zhuǎn)到另一個(gè)界面），UI設(shè)計(jì)（即App的界面）等等。

Icon設(shè)計(jì)：圖標(biāo)設(shè)計(jì)，例如qq的那個(gè)企鵝就是它的icon。根據(jù)產(chǎn)品（比如一個(gè)App）的功能，設(shè)計(jì)一個(gè)符合該產(chǎn)品定位的圖標(biāo)，重點(diǎn)在于看到這個(gè)圖標(biāo)，知道能用它聊天還是拍照或者其他。

UI設(shè)計(jì)：用戶界面設(shè)計(jì)，例如，你登陸QQ時(shí)，出現(xiàn)一個(gè)輸入賬號(hào)和密碼的頁面，這個(gè)頁面整體的設(shè)計(jì)就是它的UI設(shè)計(jì)。比如公司要開發(fā)一個(gè)社交類/攝影類App，那么應(yīng)該根據(jù)產(chǎn)品的定位，設(shè)計(jì)它的界面，例如啟動(dòng)頁，首頁等等，也可以是一個(gè)網(wǎng)站的首頁，注冊(cè)頁面等等，UI設(shè)計(jì)強(qiáng)調(dià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)都是為了解決一定的問題，所以我們先叨叨幾句，了解下icon是為了解決什么問題而出現(xiàn)的？

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

2、ICON的歷史

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

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

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

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ì)

如無特殊說明，下文中的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è)大的色塊在眼前劃過，跟用戶的眼睛造成視覺沖擊，一個(gè)好的色彩搭配會(huì)吸引用戶視覺停留，獲取寶貴的點(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)想到之前用過的產(chǎn)品，讓用戶產(chǎn)生聯(lián)想，產(chǎn)生我點(diǎn)進(jìn)去看看有啥新東西的想法，走到這一步，那么恭喜?。?！吸引用戶成就達(dá)成_。

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

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

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

圖案大體可以分三種，

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

比如說摩拜單車的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)來告訴用戶每個(gè)應(yīng)用是干什么的，后來用戶越來越多，再進(jìn)行進(jìn)一步抽象升級(jí)，圖標(biāo)就不需要那么形象的表示事物了只需要讓用戶看到圖標(biāo)能理解到這個(gè)圖標(biāo)代表的是什么就可以了。

二是對(duì)行業(yè)圖標(biāo)的變形例如鐵道部12306的icon圖案就是常見的鐵路部門的示意圖標(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í)是懵的，表意不明。不過，以京東現(xiàn)在的知名度倒是不需要care這點(diǎn)小事情了。

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

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

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

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

3、icon上該寫什么字

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

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

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

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

浦發(fā)銀行信用卡APP你直接放了四個(gè)大字你也太蒙事兒了吧，中間一個(gè)大花還遮了部分字,low，腦殘，無語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è)（電商、信息、游戲）的不同來選擇合適的色彩（奪人眼球）和合適的圖案（品牌形象）和精準(zhǔn)的文字（信息傳遞）。

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

三、如何做APP界面設(shè)計(jì)

第一點(diǎn)：了解你的目標(biāo)客戶群的心態(tài)

1、做微任務(wù)的目標(biāo)客戶群(如隨時(shí)隨地看看新聞，聽聽歌，看看電影，聊聊八卦之類)：

這類的解決方案是設(shè)計(jì)的app最好是小而準(zhǔn)，不要大而全。越全的功能應(yīng)用，只能代表著這個(gè)應(yīng)用在各方面的都很平庸

2、喜歡當(dāng)工具來使用的目標(biāo)客戶群：比如找地圖，看天氣，查數(shù)據(jù)等。

這類的解決方案是我們盡最大努力的去滿足用戶的情景需求。做到極致和簡(jiǎn)單。

3、無聊的客戶群，用來打發(fā)消磨時(shí)間的：無需求，漫無目的的

這類的解決方案是盡可能展示用戶感興趣的東西，幫助客戶來打發(fā)消磨時(shí)光。

第二點(diǎn)：APP原型圖的制作和設(shè)計(jì)討論

這個(gè)環(huán)節(jié)是必不可少的。需要根據(jù)設(shè)計(jì)需求認(rèn)認(rèn)真真的來畫畫原型圖。

常用的APP原型圖工具：移動(dòng)APP原型設(shè)計(jì)神器 POP 、axure、Foreui等

第三點(diǎn)：APP視覺設(shè)計(jì)與設(shè)計(jì)要點(diǎn)

（1）大概設(shè)計(jì)板塊有APP啟動(dòng)頁面設(shè)計(jì)，APP界面設(shè)計(jì)的尺寸規(guī)范，app圖標(biāo)設(shè)計(jì)等

一般來說，手機(jī)屏幕是從上往下布局的，重要的信息會(huì)放在上方。但是在操作上，大部分人都是單手拿手機(jī)，常用的操作，要放在界面的下方。

另外還有一個(gè)原則，最小的觸摸單位，一般是44個(gè)像素。如果再小，你的拇指難以觸碰，或者容易引發(fā)誤操作。同時(shí)，也不要讓界面太擁擠。

所以，設(shè)計(jì)師必須用減法設(shè)計(jì)，這個(gè)過程需要花時(shí)間思考、簡(jiǎn)化元素。

你必須記?。海?）隱藏設(shè)計(jì)或者減法設(shè)計(jì) （2）分區(qū)或分類（3）幫用戶做決策（4）提高交互創(chuàng)新設(shè)計(jì) （5）讓人有爽快感和新奇感（6）在設(shè)計(jì)中浸入情感，把握用戶的心理。（談?wù)勅绾芜M(jìn)行產(chǎn)品設(shè)計(jì)以及產(chǎn)品情感化設(shè)計(jì)）

一位大師這樣說過“真正的簡(jiǎn)約設(shè)計(jì)是：作品必須不斷的被簡(jiǎn)化，一改再改，直到設(shè)計(jì)最終成形。”

2014年 APP設(shè)計(jì)風(fēng)格趨向扁平化和卡片化?？ㄆ?，扁平化都會(huì)是移動(dòng)app設(shè)計(jì)的趨勢(shì)！認(rèn)為卡片設(shè)計(jì)確實(shí)同時(shí)兼具了“擬物”和“極簡(jiǎn)”2種優(yōu)勢(shì)！

第四點(diǎn)：APP界面設(shè)計(jì)流程

（1）. 設(shè)計(jì)APP界面時(shí)，學(xué)會(huì)從優(yōu)秀APP界面設(shè)計(jì)作品中尋求靈感，以前的藝術(shù)大師，用少量的資源做了大量的設(shè)計(jì)。

（2）. 放下工作，休息一下很有幫助。扁平和簡(jiǎn)約設(shè)計(jì)的一切均關(guān)乎到細(xì)節(jié)的差異。因此小憩片刻后再回到工作，帶著全新的眼光工作，比長(zhǎng)時(shí)間冥思苦想更有

效。

（3）. 并排比較各個(gè)版式同樣有幫助。哪怕花20分鐘前將一個(gè)線條下移各5個(gè)像素分別保存，對(duì)比兩個(gè)版式就能很快分清孰好孰壞。

（4）. 由于實(shí)物展示的相對(duì)比例至關(guān)重要，所以要及早在不同的目標(biāo)設(shè)備上測(cè)試。

（5）. 整個(gè)設(shè)計(jì)過程中不斷問自己“真的需要嗎？” 。支撐項(xiàng)目時(shí)候，找一些討巧的辦法，例如，添加一些有趣的元素、樣式會(huì)這樣會(huì)很容易也會(huì)很吸引人，

但必須始終注意剔除不必要的元素，不斷精簡(jiǎn)。甩掉你費(fèi)盡心血的部分總是難以割舍，但修改過程必須挑剔。

第五點(diǎn)：APP界面設(shè)計(jì)測(cè)試與預(yù)覽修正

設(shè)計(jì)完成之后，我們可以把設(shè)計(jì)圖導(dǎo)入手機(jī)測(cè)試或者是校正。之前發(fā)布的在線測(cè)試工具：快速在移動(dòng)終端上預(yù)覽APP界面設(shè)計(jì)效果圖的方法最后：好的APP界面設(shè)計(jì)作品必然是要經(jīng)過不斷升級(jí)、重復(fù)迭代的。

四、怎樣制作APP

制作app的軟件有很多。我們以簡(jiǎn)網(wǎng)app工場(chǎng)為例。在百度搜索“簡(jiǎn)網(wǎng)app工場(chǎng)”。

>02

點(diǎn)擊進(jìn)入它的官網(wǎng)，可以看到有一個(gè)“開始創(chuàng)建”按鈕。

>03

如果你是第一次登陸，點(diǎn)擊“開始創(chuàng)建”后，會(huì)讓你關(guān)聯(lián)一個(gè)賬號(hào)。第一個(gè)是新浪微博，第二個(gè)是騰訊微博。

>04

我選擇第二個(gè)，點(diǎn)擊以后，需要輸入賬號(hào)密碼。上面有一個(gè)拉環(huán)一樣的東西，點(diǎn)擊它可以用二維碼登陸。二維碼真強(qiáng)大，無處不在啊，哈哈。

>05

然后我們就可以設(shè)置app的一些基本信息了。

>06

點(diǎn)擊“下一步”，需要設(shè)置“app圖標(biāo)”和“開機(jī)圖片”?？梢酝ㄟ^“修改自定義圖標(biāo)”和“選擇默認(rèn)圖”選擇不同的圖標(biāo)和圖片，也可以通過“上傳圖標(biāo)”和“上傳圖片”進(jìn)行自定義設(shè)置。第一次制作的話建議直接跳過，因?yàn)槲覀冊(cè)诶锩孢€可以詳細(xì)修改。

>07

點(diǎn)擊“下一步”以后，進(jìn)入“app設(shè)定”界面。和上一步一樣，根據(jù)需要進(jìn)行選擇。

>08

然后app的框架制作大致完成。填寫一個(gè)自己常用的郵箱。

>09

點(diǎn)擊“提交”以后彈出祝賀成功界面。點(diǎn)擊“立即登陸”到郵箱去驗(yàn)證。

>10

點(diǎn)擊鏈接返回后，需要填寫個(gè)人信息。這個(gè)地方不必認(rèn)真，填一下就可以了。不過想要好好制作一個(gè)app并進(jìn)行維護(hù)管理的話請(qǐng)認(rèn)真填寫。

>11

“完成”以后彈出這樣的界面。這就可以下載了？當(dāng)然不是，這樣只是制作了一個(gè)完整的空app，就是大樓完工，但是還沒住進(jìn)去人。

>12

點(diǎn)擊上面的“管理”，就可以進(jìn)入后臺(tái)進(jìn)行維護(hù)了。所謂維護(hù)，不過就是編輯，發(fā)布等一些操作。

>13

這個(gè)界面是后臺(tái)維護(hù)界面。

>14

點(diǎn)擊頂部的“創(chuàng)建文章”可以開始創(chuàng)建內(nèi)容了?？梢暂斎胛淖?，加入圖片等元素。編輯完畢，點(diǎn)擊“保存”。

>15

在“保存”界面可以進(jìn)行一些個(gè)性化設(shè)置。

>16

由于上一步我把它發(fā)布到了“文字分享”欄目下，所以我們點(diǎn)擊“欄目分享”就可以看到剛剛編輯過的內(nèi)容。

>17

點(diǎn)擊上面的“編譯app”。這樣我們可以對(duì)即將編譯的app界面和框架進(jìn)行詳細(xì)的個(gè)性化設(shè)置。設(shè)置好以后點(diǎn)擊下面的“保存并編譯”，右邊就開始編譯了。分為iphone和安卓?jī)蓚€(gè)版本。這個(gè)地方需要一點(diǎn)時(shí)間。

>18

好了，兩個(gè)版本都編譯成功。

>19

以前可以直接下載到電腦，然后雙擊apk文件用豌豆夾等手機(jī)助手之類的軟件進(jìn)行安裝?，F(xiàn)在好像不行了?，F(xiàn)在提供的是二維碼掃描。沒關(guān)系。二維碼掃描下載的方式有很多，這里我打開的是UC瀏覽器。

>20

點(diǎn)擊右上角的加號(hào)，彈出的窗口有一個(gè)“掃一掃”。

>21

點(diǎn)擊它，進(jìn)行掃描。

>22

掃描成功。點(diǎn)擊“本地下載”。

>23

下載完成，找到“已下載”。里面有已經(jīng)下載好的軟件。

>24

點(diǎn)擊它進(jìn)行安裝。

>25

查看我們的手機(jī)，就可以找到它了?？烊バ蕾p一下自己親手制作的手機(jī)app吧。我這里顯示的是我之前制作過的一個(gè)app。第一次制作可能還不熟悉，不過慢慢研究慢慢豐富，自己的app就會(huì)變得越來越好。你可以把a(bǔ)pp安裝包找到發(fā)給你的朋友，這樣你的app軟件也能裝到他們的手機(jī)上。

以上就是小編對(duì)于appicon制作問題和相關(guān)問題的解答了，如有疑問，可撥打網(wǎng)站上的電話，或添加微信。