正文

App圖標(biāo)設(shè)計(jì)（app圖標(biāo)設(shè)計(jì)理念）

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

大家好！今天讓小編來(lái)大家介紹下關(guān)于A(yíng)pp圖標(biāo)設(shè)計(jì)的問(wèn)題，以下是小編對(duì)此問(wèn)題的歸納整理，讓我們一起來(lái)看看吧。

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

文章目錄列表:

1、如何做APP界面設(shè)計(jì)？
2、如何制作app圖標(biāo)以及l(fā)ogo
3、app圖標(biāo)的共同點(diǎn)和不同點(diǎn)
4、圖標(biāo)規(guī)范標(biāo)準(zhǔn)（IOS/Android）

App圖標(biāo)設(shè)計(jì)（app圖標(biāo)設(shè)計(jì)理念）

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

第一點(diǎn)：了解你的目標(biāo)客戶(hù)群的心態(tài)x0dx0a1、做微任務(wù)的目標(biāo)客戶(hù)群(如隨時(shí)隨地看看新聞，聽(tīng)聽(tīng)歌，看看電影，聊聊八卦之類(lèi))：x0dx0a這類(lèi)的解決方案是設(shè)計(jì)的app最好是小而準(zhǔn)，不要大而全。越全的功能應(yīng)用，只能代表著這個(gè)應(yīng)用在各方面的都很平庸x0dx0a2、喜歡當(dāng)工具來(lái)使用的目標(biāo)客戶(hù)群：比如找地圖，看天氣，查數(shù)據(jù)等。x0dx0a這類(lèi)的解決方案是我們盡最大努力的去滿(mǎn)足用戶(hù)的情景需求。做到極致和簡(jiǎn)單。x0dx0a3、無(wú)聊的客戶(hù)群，用來(lái)打發(fā)消磨時(shí)間的：無(wú)需求，漫無(wú)目的的x0dx0a這類(lèi)的解決方案是盡可能展示用戶(hù)感興趣的東西，幫助客戶(hù)來(lái)打發(fā)消磨時(shí)光。x0dx0ax0dx0a第二點(diǎn)：APP原型圖的制作和設(shè)計(jì)討論x0dx0a這個(gè)環(huán)節(jié)是必不可少的。需要根據(jù)設(shè)計(jì)需求認(rèn)認(rèn)真真的來(lái)畫(huà)畫(huà)原型圖。x0dx0a常用的APP原型圖工具：移動(dòng)APP原型設(shè)計(jì)神器POP、axure、Foreui等x0dx0ax0dx0a第三點(diǎn)：APP視覺(jué)設(shè)計(jì)與設(shè)計(jì)要點(diǎn)x0dx0a（1）大概設(shè)計(jì)板塊有APP啟動(dòng)頁(yè)面設(shè)計(jì)，APP界面設(shè)計(jì)的尺寸規(guī)范，app圖標(biāo)設(shè)計(jì)等x0dx0a一般來(lái)說(shuō)，手機(jī)屏幕是從上往下布局的，重要的信息會(huì)放在上方。但是在操作上，大部分人都是單手拿手機(jī)，常用的操作，要放在界面的下方。x0dx0a另外還有一個(gè)原則，最小的觸摸單位，一般是44個(gè)像素。如果再小，你的拇指難以觸碰，或者容易引發(fā)誤操作。同時(shí)，也不要讓界面太擁擠。x0dx0a所以，設(shè)計(jì)師必須用減法設(shè)計(jì)，這個(gè)過(guò)程需要花時(shí)間思考、簡(jiǎn)化元素。x0dx0a你必須記住：（1）隱藏設(shè)計(jì)或者減法設(shè)計(jì)（2）分區(qū)或分類(lèi)（3）幫用戶(hù)做決策（4）提高交互創(chuàng)新設(shè)計(jì)（5）讓人有爽快感和新奇感（6）在設(shè)計(jì)中浸入情感，把握用戶(hù)的心理。（談?wù)勅绾芜M(jìn)行產(chǎn)品設(shè)計(jì)以及產(chǎn)品情感化設(shè)計(jì)）x0dx0a一位大師這樣說(shuō)過(guò)“真正的簡(jiǎn)約設(shè)計(jì)是：作品必須不斷的被簡(jiǎn)化，一改再改，直到設(shè)計(jì)最終成形?！眡0dx0a2014年APP設(shè)計(jì)風(fēng)格趨向扁平化和卡片化?？ㄆ?，扁平化都會(huì)是移動(dòng)app設(shè)計(jì)的趨勢(shì)！認(rèn)為卡片設(shè)計(jì)確實(shí)同時(shí)兼具了“擬物”和“極簡(jiǎn)”2種優(yōu)勢(shì)！x0dx0ax0dx0a第四點(diǎn)：APP界面設(shè)計(jì)流程x0dx0ax0dx0a（1）.設(shè)計(jì)APP界面時(shí)，學(xué)會(huì)從優(yōu)秀APP界面設(shè)計(jì)作品中尋求靈感，以前的藝術(shù)大師，用少量的資源做了大量的設(shè)計(jì)。x0dx0a（2）.放下工作，休息一下很有幫助。扁平和簡(jiǎn)約設(shè)計(jì)的一切均關(guān)乎到細(xì)節(jié)的差異。因此小憩片刻后再回到工作，帶著全新的眼光工作，比長(zhǎng)時(shí)間冥思苦想更有x0dx0a效。x0dx0a（3）.并排比較各個(gè)版式同樣有幫助。哪怕花20分鐘前將一個(gè)線(xiàn)條下移各5個(gè)像素分別保存，對(duì)比兩個(gè)版式就能很快分清孰好孰壞。x0dx0a（4）.由于實(shí)物展示的相對(duì)比例至關(guān)重要，所以要及早在不同的目標(biāo)設(shè)備上測(cè)試。x0dx0a（5）.整個(gè)設(shè)計(jì)過(guò)程中不斷問(wèn)自己“真的需要嗎？”。支撐項(xiàng)目時(shí)候，找一些討巧的辦法，例如，添加一些有趣的元素、樣式會(huì)這樣會(huì)很容易也會(huì)很吸引人，x0dx0a但必須始終注意剔除不必要的元素，不斷精簡(jiǎn)。甩掉你費(fèi)盡心血的部分總是難以割舍，但修改過(guò)程必須挑剔。x0dx0ax0dx0a第五點(diǎn)：APP界面設(shè)計(jì)測(cè)試與預(yù)覽修正x0dx0a設(shè)計(jì)完成之后，我們可以把設(shè)計(jì)圖導(dǎo)入手機(jī)測(cè)試或者是校正。之前發(fā)布的在線(xiàn)測(cè)試工具：快速在移動(dòng)終端上預(yù)覽APP界面設(shè)計(jì)效果圖的方法最后：好的APP界面設(shè)計(jì)作品必然是要經(jīng)過(guò)不斷升級(jí)、重復(fù)迭代的。

二、如何制作app圖標(biāo)以及l(fā)ogo

怎么制作呢？這里給大家推薦一個(gè)網(wǎng)站 http://www.logoko.com.cn/ ，在這里你可以簡(jiǎn)單的制作一個(gè)圖標(biāo)，操作簡(jiǎn)單，一看就會(huì)。這里以我生成的一個(gè)圖片為例:

這里生成的圖片在最下面會(huì)有廣告，我們需要自己再截圖一次，畢竟是免費(fèi)的，可以理解。

為什么要變成圓角？因?yàn)楝F(xiàn)在主流的app都是圓角圖標(biāo)，這里依然給大家推薦一個(gè)網(wǎng)站 http://www.roundpic.com/ ，在這里只需要將圖片上傳到這個(gè)網(wǎng)站，就可以制作出圓角圖片，操作簡(jiǎn)單，一看就會(huì)。

這里依然以我生成的圖片為例:

這里依然是一個(gè)網(wǎng)站 http://icon.wuruihong.com/ ，將圖片上傳到這個(gè)網(wǎng)站就可以了，這里已a(bǔ)ndroid為例，如果不自定義尺寸，就會(huì)生成七個(gè)不同分辨率的圖片，這七個(gè)就是android需要的，同時(shí)還支持預(yù)覽。這里最后會(huì)是一個(gè)壓縮包。

是不是感覺(jué)特別簡(jiǎn)單，這三個(gè)網(wǎng)站都不用注冊(cè)喲，趕快嘗試一下吧！

三、app圖標(biāo)的共同點(diǎn)和不同點(diǎn)

圖標(biāo)的設(shè)計(jì)需要表意明確，并具有適合的隱喻特征，相同點(diǎn)和不同點(diǎn)如下。

首先，要根據(jù)對(duì)象確定圖標(biāo)的整體風(fēng)格并進(jìn)行概念草圖繪制；其次，在草圖的基礎(chǔ)上給圖標(biāo)上色，設(shè)計(jì)圖標(biāo)適合的角度和透視；再對(duì)圖標(biāo)進(jìn)行細(xì)節(jié)調(diào)整，以表現(xiàn)圖標(biāo)的質(zhì)感；最后,根據(jù)一個(gè)圖標(biāo)樣式發(fā)散進(jìn)行成套圖標(biāo)設(shè)計(jì)，使界面內(nèi)的圖標(biāo)形成統(tǒng)一的風(fēng)格。移動(dòng)應(yīng)用界面圖標(biāo)的形態(tài)既豐富又具有概括性。形態(tài)是定義圖標(biāo)的大致輪廓和基本樣式。為了使用戶(hù)更容易理解和接受圖標(biāo)，設(shè)計(jì)形態(tài)時(shí)要根據(jù)對(duì)象特征進(jìn)行一定的隱喻，使圖標(biāo)形態(tài)貼近用戶(hù)的認(rèn)知范圍。因此，圖標(biāo)的形態(tài)要盡量簡(jiǎn)潔易懂，避免過(guò)度使用象征性的隱喻符號(hào)，用簡(jiǎn)單的圖形作為整體象征性的代表。色彩是圖標(biāo)設(shè)計(jì)的一個(gè)重要屬性，要處理好圖標(biāo)的主要顏色與次要顏色之間的關(guān)系，它在很大程度上決定了圖標(biāo)的最終視覺(jué)效果。不同的顏色蘊(yùn)含著不同的情感意義，因此設(shè)計(jì)師在設(shè)計(jì)手機(jī)界面圖標(biāo)時(shí)要基于應(yīng)用的功能同時(shí)遵循用戶(hù)的心理模型，以選擇合適的色彩搭配。用戶(hù)在實(shí)際生活中看到的物品在受到自然光線(xiàn)和物理光線(xiàn)的影響下會(huì)呈現(xiàn)立體的形態(tài)，因此要使一個(gè)圖標(biāo)變得立體就需要添加光影的效果。設(shè)計(jì)師首先要將圖標(biāo)想象成一個(gè)圓形的球體，通過(guò)定義圖標(biāo)的素描關(guān)系(即光線(xiàn)的方向)將圖標(biāo)分為白、灰、黑、影子、反光5個(gè)部分。

四、圖標(biāo)規(guī)范標(biāo)準(zhǔn)（IOS/Android）

IOS篇

本小節(jié)中ios圖標(biāo)標(biāo)準(zhǔn)均以iPhone6為例

1.APP圖標(biāo)

APP圖標(biāo)指應(yīng)用圖標(biāo)，圖標(biāo)尺寸為120x120，如果是游戲類(lèi)應(yīng)用，這個(gè)圖標(biāo)也會(huì)被用在Game Center中。由于IOS應(yīng)用圖標(biāo)是由于系統(tǒng)統(tǒng)一切圓角，所以設(shè)計(jì)的時(shí)候直接出方形圖標(biāo)即可。設(shè)計(jì)時(shí)可根據(jù)需要作出圓角供展示使用。

尺寸規(guī)格：

圖標(biāo)尺寸：57x57，圓角10；圖標(biāo)尺寸：114x114，圓角20；圖標(biāo)尺寸：120x120，圓角22；圖標(biāo)尺寸：114x114，圓角20；圖標(biāo)尺寸：180180，圓角尺寸34；圖標(biāo)尺寸：512x512，圓角尺寸90；圖標(biāo)尺寸：1024x1024,圓角180.

2.APP Store圖標(biāo)

APP Store圖標(biāo)指上傳至應(yīng)用商店的應(yīng)用圖標(biāo)，尺寸為1024x1024.為了吸引用戶(hù)可增加更多的設(shè)計(jì)細(xì)節(jié)。不過(guò)基于效率考慮，一般與APP圖標(biāo)的設(shè)計(jì)保持一致。此時(shí)的圖標(biāo)需要設(shè)計(jì)圓角，圓角像素為160。

3.標(biāo)簽欄導(dǎo)航圖標(biāo)

標(biāo)簽欄導(dǎo)航圖標(biāo)指底部標(biāo)簽欄上的圖標(biāo)，圖標(biāo)設(shè)計(jì)尺寸為50x50。

4.導(dǎo)航欄圖標(biāo)

導(dǎo)航欄圖標(biāo)指分布導(dǎo)航欄上的功能圖標(biāo)，圖標(biāo)設(shè)計(jì)尺寸為44x44

5.工具欄圖標(biāo)

工具欄圖標(biāo)指底部工具欄上的功能圖標(biāo)，圖標(biāo)設(shè)計(jì)尺寸為44x44

6.設(shè)置圖標(biāo)

設(shè)置圖標(biāo)指在列表式的表格視圖中左側(cè)功能圖標(biāo)，圖標(biāo)設(shè)計(jì)尺寸為58x58

7.Web Clip圖標(biāo)

Web Clip圖標(biāo)指如果你有Web小程序或者網(wǎng)站，可以制定一個(gè)小圖標(biāo)。用戶(hù)可以把它直接放在桌子上，用戶(hù)可單擊圖標(biāo)直接訪(fǎng)問(wèn)網(wǎng)頁(yè)內(nèi)容。圖標(biāo)設(shè)計(jì)尺寸為120x120。

Android篇

為了簡(jiǎn)化設(shè)計(jì)并且兼容更多的手機(jī)屏幕，安卓系統(tǒng)平臺(tái)對(duì)屏幕進(jìn)行了區(qū)分。按屏幕像素密度劃分為低密度屏幕（LHDPI）、中低密度屏幕（MHDPI）、高低密度屏幕（XHDPI）、和超超高低密度屏幕（XXHDPI）。

密度之間的關(guān)系為3:4:6:8:12.使用這些比例，通過(guò)簡(jiǎn)單的計(jì)算，我們就可以適配出不同版本的位圖，以供開(kāi)發(fā)使用。

安卓尺寸標(biāo)準(zhǔn)：

75x75對(duì)應(yīng)LDPI顯示屏；100x100對(duì)應(yīng)MDPI顯示屏；150x150對(duì)應(yīng)HDPI顯示屏；200x200對(duì)應(yīng)XHDPI顯示屏；300x300對(duì)應(yīng)XXHDPI顯示屏。

特別提示：這些尺寸要熟練的運(yùn)用到工作當(dāng)中，希望大家多積累。

文章更新的速度確實(shí)有些慢了，我會(huì)加以改正。還望大家多多關(guān)注。

’

以上就是小編對(duì)于A(yíng)pp圖標(biāo)設(shè)計(jì)問(wèn)題和相關(guān)問(wèn)題的解答了，如有疑問(wèn)，可撥打網(wǎng)站上的電話(huà)，或添加微信。