一個(gè)出彩的APP圖標(biāo)都會(huì)經(jīng)歷這樣9個(gè)關(guān)鍵設(shè)計(jì)步驟

對(duì)于移動(dòng)端APP 而言，圖標(biāo)始終還是最重要的「門面」，它直接關(guān)聯(lián)著產(chǎn)品的品牌價(jià)值，圖標(biāo)是否具備良好的可用性，將會(huì)直接影響到品牌和產(chǎn)品本身。圖標(biāo)設(shè)計(jì)的講究很多，而 APP 圖標(biāo)這種牽一發(fā)而動(dòng)全身的東西更加講究。
今天，就分享一組圖標(biāo)設(shè)計(jì)的方法和技巧。 通常，用戶一次仔細(xì)審視 APP 的圖標(biāo)是在 App Store 和 Google Play 這樣的軟件商店和某些第三方推薦文章當(dāng)中，相比于在界面中使用的功能性圖標(biāo)而言，APP 圖標(biāo)需要承擔(dān)更加廣泛的責(zé)任：不只要具備品牌本身的氣質(zhì)和元素，還要能夠體現(xiàn)這個(gè)數(shù)字產(chǎn)品本身的功能和特質(zhì)，視覺上能夠在同類的設(shè)計(jì)當(dāng)中脫穎而出，在手機(jī)主界面的程序列表中還得足夠抓人眼球，易于識(shí)別。對(duì)于這樣一個(gè)小小的圖標(biāo)而言，要求一點(diǎn)都不少，不是嗎？（對(duì)于圖標(biāo)設(shè)計(jì)師而言，這個(gè)要求同樣很高了?。?真正出彩的 APP 圖標(biāo)，從來都不是上手就做的，動(dòng)手之前的基本工作做的有多充足，開始著手設(shè)計(jì)的時(shí)候才有底氣，才有后面出彩的結(jié)果。 △ Lion 瀏覽器
1. 一件事：從背景信息搜集開始 在給一個(gè) APP 設(shè)計(jì)圖標(biāo)的時(shí)候，最重要的是什么事情？是圖形和色彩嗎？這當(dāng)然重要，但不是最重要的。隨后我們會(huì)講到這個(gè)部分，但是給 APP 設(shè)計(jì)圖標(biāo)的時(shí)候，這不是起點(diǎn)。先應(yīng)該了解的是產(chǎn)品背后公司的氣質(zhì)、團(tuán)隊(duì)的背景、產(chǎn)品的功能，而不是直接設(shè)計(jì)。 了解這個(gè)圖標(biāo)所涉及到的 APP 的業(yè)務(wù)組成和整體架構(gòu)，詢問團(tuán)隊(duì)相關(guān)的營銷策略和內(nèi)容，包括價(jià)值主張，目標(biāo)受眾，市場(chǎng)特征，定價(jià)策略，這些東西確定了產(chǎn)品本身給人的感覺，應(yīng)該有的定位，這些東西都和設(shè)計(jì)息息相關(guān)。沒有做足夠深入的背景調(diào)研，就只能閉著眼睛畫圖了，這很難讓 APP 圖標(biāo)真正貼合產(chǎn)品，發(fā)揮功用。 企業(yè)和產(chǎn)品本身的狀況和數(shù)據(jù)對(duì)于設(shè)計(jì)的重要性，怎么強(qiáng)調(diào)都不算過分。認(rèn)真搞定這種準(zhǔn)備工作，絕對(duì)是磨刀不誤砍柴工。
2. 熟悉標(biāo)準(zhǔn)：仔細(xì)研讀設(shè)計(jì)規(guī)范 雖然在圖標(biāo)的設(shè)計(jì)上，創(chuàng)意和想法并不受限制，但是在任何平臺(tái)上，都有著相對(duì)清晰的設(shè)計(jì)規(guī)范，它們是需要設(shè)計(jì)師嚴(yán)格遵守的。設(shè)計(jì)規(guī)范讓圖標(biāo)在一個(gè)范圍內(nèi)和其他的圖標(biāo)在視覺上保持著足夠的協(xié)調(diào)，設(shè)計(jì)師可以在規(guī)范范圍內(nèi)讓圖標(biāo)更加「出彩」，而不是「突?！?。 在 Android 平臺(tái)和 iOS 的設(shè)計(jì)規(guī)范中，對(duì)于圖標(biāo)的設(shè)計(jì)和使用有著非常清晰的說明，從配色到尺寸大小，包括樣式和具體使用場(chǎng)景。請(qǐng)盡量遵循圖標(biāo)設(shè)計(jì)的技術(shù)規(guī)格和設(shè)計(jì)建議，因?yàn)樵S多問題和障礙是設(shè)計(jì)規(guī)范的制定者已經(jīng)考慮清楚了，遵循規(guī)范能夠讓你的設(shè)計(jì)繞過很多坑。
3. 選對(duì)工具：大家通常用這些軟件 通常情況下，最終輸出的圖標(biāo)會(huì)使用 PNG 格式，不論你選擇什么樣的工具，至少要能夠輸出PNG 格式的圖標(biāo)。當(dāng)然，這只是選擇軟件工具過程中很小的一個(gè)條件。目前，絕大多數(shù)的設(shè)計(jì)師都會(huì)選擇時(shí)下最常見、接受度高的專業(yè)軟件，其中幾個(gè)甚至就是行業(yè)標(biāo)準(zhǔn)本身： Adobe Illustrator CC ，也就是常說的 AI，是的矢量設(shè)計(jì)工具之一，歷史悠久。 Adobe Photoshop CC，是目前使用范圍最廣也是的位圖編輯軟件，無論是制作光影還是陰影效果，都非常的稱手。 Sketch 是一款有著友好界面和豐富插件的矢量圖形編輯和 UI設(shè)計(jì)軟件，對(duì)于復(fù)雜的設(shè)計(jì)它可能不是的選擇，但是拓展性足夠強(qiáng)大，許多功能都是基于現(xiàn)代的 UI 和移動(dòng)端的設(shè)計(jì)來開發(fā)的。 Affinity Designer 是矢量繪圖軟件中的新貴，有著足夠干凈的 UI，非常適合初學(xué)者。
4. 注意細(xì)節(jié)：簡(jiǎn)約而富有凝聚性 在設(shè)計(jì)圖標(biāo)的過程中，記得隨時(shí)審視圖標(biāo)，看看是否缺少一些關(guān)鍵性的信息，關(guān)鍵性的元素是否缺失了，是否有多余的東西。眾所周知，APP 的圖標(biāo)被設(shè)計(jì)出來之后，會(huì)出現(xiàn)在不同的場(chǎng)合，大小也不盡相同，隨著大小尺寸的變化，有些信息會(huì)變得不夠顯著，擁有太多細(xì)節(jié)的圖標(biāo)會(huì)在縮小的時(shí)候顯得非?；靵y，所以將過多的文本和圖片細(xì)節(jié)融入到 APP 圖標(biāo)當(dāng)中，是非常沒有必要的。 簡(jiǎn)約的圖標(biāo)設(shè)計(jì)不僅僅是一種風(fēng)格上的選取，它在功能和體驗(yàn)上的優(yōu)勢(shì)也非常的明顯。不要指望將大量的隱喻和內(nèi)容都包含在同一個(gè)圖標(biāo)當(dāng)中，抓住最主要的概念和想法，并且用清晰的輪廓、簡(jiǎn)單的元素來呈現(xiàn)它。至少絕大多數(shù)大型企業(yè)和優(yōu)秀的團(tuán)隊(duì)都傾向于使用直截了當(dāng)?shù)脑O(shè)計(jì)。
5. 結(jié)合品牌：記得考慮品牌風(fēng)格指南 每個(gè)品牌都有著獨(dú)特的設(shè)計(jì)，從配色方案到細(xì)節(jié)元素的樣式，通常都有著相對(duì)明確的定位。品牌風(fēng)格指南在絕大多數(shù)的品牌當(dāng)中，已經(jīng)具備了非常明確的說明文檔。為了讓 APP 的圖標(biāo)和品牌的聯(lián)系足夠清晰，參考品牌風(fēng)格指南來進(jìn)行設(shè)計(jì)，這樣確保用戶在看到 APP 的一眼就能夠從視覺上與品牌本身構(gòu)成關(guān)聯(lián)。 △ Foxygenic app icon
6. 艱難取舍：讓你的圖標(biāo)替APP發(fā)聲 當(dāng)你想到電子郵件的時(shí)候，你的腦海當(dāng)中想到的一個(gè)意象是什么？是信封，對(duì)嗎？那么，當(dāng)你在蘋果的 App Store 中搜索郵箱的時(shí)候，會(huì)發(fā)現(xiàn)一大堆的信封樣式的圖標(biāo)，各種配色和風(fēng)格都有，不一而足。 一方面，使用大眾所熟知的意象來設(shè)計(jì)圖標(biāo)，確實(shí)非常成熟，被廣泛的認(rèn)知，大家非常容易理解。而這種設(shè)計(jì)策略還有另外一面：類似的設(shè)計(jì)意味著激烈的競(jìng)爭(zhēng)。這件事情可能是設(shè)計(jì)師在設(shè)計(jì)圖標(biāo)的時(shí)候，所面臨的大的挑戰(zhàn)：設(shè)計(jì)師需要在原創(chuàng)性和功能性之間，做艱難的取舍。 △ Elephun app icon 7. 知己知彼：仔細(xì)審視競(jìng)爭(zhēng)對(duì)手的設(shè)計(jì) 留出足夠的時(shí)間來對(duì)競(jìng)爭(zhēng)對(duì)手進(jìn)行調(diào)研，了解競(jìng)爭(zhēng)對(duì)手的功能，APP的設(shè)計(jì)，圖標(biāo)的構(gòu)思，這樣可以讓設(shè)計(jì)師足以排除已有的設(shè)計(jì)，在營造獨(dú)特性上獲得思路，避免作出和競(jìng)爭(zhēng)對(duì)手相似的設(shè)計(jì)，降低風(fēng)險(xiǎn)。 有些甲方喜歡使用和競(jìng)爭(zhēng)對(duì)手相似的元素，這同樣有其優(yōu)勢(shì)在，因?yàn)橄嗨粕踔料嗤脑卮_實(shí)會(huì)讓一些用戶面對(duì)這個(gè)新的 APP 的時(shí)候，產(chǎn)生信任感和同理心。但是和之前所提到的很多問題一樣，這需要設(shè)計(jì)師來取舍，或者控制中間的程度。看起來太過相似，用戶會(huì)視之為山寨和跟隨者，缺乏獨(dú)特性，很容易讓人在使用過程中失去信任，甚至完全放棄。
8. 開始設(shè)計(jì)：選擇正確的色彩和展現(xiàn)形式 終于到了這個(gè)熟悉的環(huán)節(jié)了。優(yōu)秀的配色和有趣的圖形，確實(shí)能夠讓圖標(biāo)在視覺上脫穎而出。在選擇色彩這個(gè)環(huán)節(jié)，很多設(shè)計(jì)師都很容易收不住手，許多色彩擠壓在小小的圖標(biāo)當(dāng)中，會(huì)讓圖標(biāo)變得像現(xiàn)代藝術(shù)品一樣。這個(gè)時(shí)候，需要在已經(jīng)限定的色彩范圍內(nèi)（品牌用色），結(jié)合色彩心理學(xué)，來構(gòu)建圖標(biāo)的色彩體系。 在紙上繪制圖標(biāo)的原型，探索基本的想法和構(gòu)圖，是非常有效的手段，無論你會(huì)不會(huì)手繪，這個(gè)過程都會(huì)讓你的設(shè)計(jì)過程更加順暢，很多創(chuàng)意和想法，會(huì)在紙和筆的摩擦中，逐漸誕生，這一點(diǎn)，是許多數(shù)字軟件都無法替代的。 此外，運(yùn)用基本的幾何圖形（圓形、方形、三角形等）來創(chuàng)建圖標(biāo)的基本框架，非常有用。請(qǐng)記住，任何復(fù)雜的圖標(biāo)都是在簡(jiǎn)單的圖形的基礎(chǔ)上創(chuàng)建出來的。 △ App icon forApp Shack
9. 多做檢驗(yàn)：繞不過的實(shí)際測(cè)試 無論你的 APP 圖標(biāo)出現(xiàn)在什么地方，你都希望它看起來是非常不錯(cuò)的，對(duì)吧？所以，接下來繞不過的環(huán)節(jié)，就是要在不同的場(chǎng)合、不同的地方測(cè)試圖標(biāo)的設(shè)計(jì)，是否有足夠的對(duì)比度，是否看起來足夠清晰，是否能夠融入相應(yīng)的場(chǎng)景，是否貼合品牌的氣質(zhì)，等等。 檢查不同尺寸的 APP 圖標(biāo)，主要注意看小尺寸的圖標(biāo)是否可以看得清，識(shí)別度如何，大尺寸的圖標(biāo)是否有不恰當(dāng)?shù)脑O(shè)計(jì)； 使用不同的背景來查看APP 圖標(biāo)，看看圖標(biāo)在不同色彩、樣式的背景下，是否有足夠的對(duì)比度； 了解圖標(biāo)在不同分辨率下的樣子； 不要只在 App Store 和 Google Play 下測(cè)試圖標(biāo)的外觀，還可以將圖標(biāo)放到隨機(jī)某個(gè)用戶的屏幕上，看看實(shí)際的效果。

文章題目：一個(gè)出彩的APP圖標(biāo)都會(huì)經(jīng)歷這樣9個(gè)關(guān)鍵設(shè)計(jì)步驟
文章鏈接：http://muchs.cn/news34/173484.html

網(wǎng)站建設(shè)、網(wǎng)絡(luò)推廣公司-創(chuàng)新互聯(lián)，是專注品牌與效果的網(wǎng)站制作，網(wǎng)絡(luò)營銷seo公司；服務(wù)項(xiàng)目有網(wǎng)站建設(shè)等

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)