發(fā)布日期：2017/7/26

這篇文章像飛特的同伙們介紹蘋果ios 程序圖標(biāo)的設(shè)計(jì)技巧，教程難度中等，iphone、ipad、ipod成為越來越多的人使用的移動(dòng)互聯(lián)設(shè)備，因此我們經(jīng)常會(huì)碰到為這些設(shè)備設(shè)計(jì)圖片，特殊是設(shè)計(jì)iphone圖標(biāo)，這篇文章就像飛特的同伙們具體的介紹一下iphone圖標(biāo)的設(shè)計(jì)流程，好了一路來學(xué)習(xí)吧：程序圖標(biāo)主要作用是為了使該程序更加具象及更容易理解，除了上述的作用外，有更好視覺效果的圖標(biāo)可以提高產(chǎn)品的整體體驗(yàn)和品牌，可引起用戶的關(guān)注和下載，激提議用戶點(diǎn)擊的欲望。

體現(xiàn)形態(tài)

在有限的空間里表達(dá)出相對(duì)應(yīng)的信息，在 ios 程序圖標(biāo)設(shè)計(jì)中，直觀是個(gè)解決的問題，不應(yīng)該出現(xiàn)大多繁瑣的修飾，當(dāng)然還要有很好的視覺體現(xiàn)力，使用戶可以更容易理解此應(yīng)用的現(xiàn)實(shí)作用，更輕松地辨識(shí)此應(yīng)用。下面來說說幾種體現(xiàn)的形態(tài)。

圖形體現(xiàn)

在只用圖形體現(xiàn)應(yīng)用程序的用途，圖形可以很好地吸引用戶的眼球，更具象地體現(xiàn)出信息。

文字表述

文字體現(xiàn)是一種特別很是直觀的體現(xiàn)方法，文字應(yīng)該簡潔明了，不繁瑣。

 

圖形和文字結(jié)合

此形式有很好的體現(xiàn)力之余還可以直接把信息告知用戶，因?yàn)闀?huì)有一定的內(nèi)容，所以在空間布局上要注重疏密，避免繁瑣擁擠。

 

ios 程序圖標(biāo)特征

ios 系統(tǒng)桌面圖標(biāo)與其他移動(dòng)系統(tǒng)的圖標(biāo)存在特別很是大的區(qū)別，因?yàn)閕os圖標(biāo)有很好的整體性，的整體性可以削減用戶體驗(yàn)上帶來的沖突，所以我們需要保持其中的一些特點(diǎn)，以便程序可以更好融入系統(tǒng)中，帶給用戶更好的應(yīng)用體驗(yàn)。

尺寸

在不同設(shè)備的 ios 系統(tǒng)桌面中，程序圖標(biāo)的尺寸和默認(rèn)自帶的修飾效果會(huì)有不同，系統(tǒng)默認(rèn)自帶的修飾效果可以使圖標(biāo)更好保持 ios 風(fēng)格，但許多時(shí)候?yàn)榱爽F(xiàn)實(shí)效果，我們可以要求系統(tǒng)不作部分效果的添加，以便達(dá)到我們想要的效果。

 

上傳到 app store 需要 512px x 512px 的圖片

在 iphone 960px x 640px 分辨率中

圖標(biāo)顯示尺寸 114px x 114px 20 像素的圓角 4 像素的 90 度黑色投影 2 像素的 90 度白色內(nèi)投影 默認(rèn)自帶的高光 在 iphone 480px x 320px 分辨率中

圖標(biāo)顯示尺寸 57px x 57px 10 像素的圓角 2 像素的 90 度黑色投影 1 像素的 90 度白色內(nèi)投影 默認(rèn)自帶的高光 在 ipad 1024px x 768px 分辨率中

圖標(biāo)顯示尺寸 72px x 72px 13像素的圓角 2像素的90度黑色投影 1 像素的 90 度白色內(nèi)投影 默認(rèn)自帶的高光 質(zhì)感

在 ios 中，為體現(xiàn)圖標(biāo)的質(zhì)感，許多時(shí)候都會(huì)為其添加一些光感，使其更有質(zhì)感。光是從上面來的，所以過渡顏色的漸變應(yīng)該是從上往下的。許多時(shí)候?yàn)轶w現(xiàn)ios系統(tǒng)類似玻璃質(zhì)感般的感覺，圖標(biāo)底部都會(huì)帶有一個(gè)亮度較高的反光，當(dāng)然這些都是以我們想要的現(xiàn)實(shí)效果而繪制添加。

 

ios 程序圖標(biāo)設(shè)計(jì)的構(gòu)思

為表達(dá)好應(yīng)用程序的作用，我們可以將應(yīng)用程序的圖標(biāo)作許多不同視覺效果的處理，以達(dá)到更好的視覺享受。不同類型的應(yīng)用要注重體現(xiàn)的效果，如新聞資訊類的應(yīng)該簡潔一點(diǎn)，使其應(yīng)用有更好的整潔的感覺，如游戲類可以設(shè)計(jì)得給用戶一種活躍的感覺，如一些日常應(yīng)用類的我們許多時(shí)都會(huì)將其擬物化，使用戶更直觀地感受到其作用，這種方法是我們常見的。

在這里著重說一下擬物化程序圖標(biāo)，這是特別很是具象去體現(xiàn)程序用途的方法，但有時(shí)候要體現(xiàn)的元素存在幾個(gè)的時(shí)候，在狹小的空間中不一定能放下如此多的元素，所以要分析輕重，輕的可以削減占有位置的比例或者將其去除，重的要多作強(qiáng)調(diào)，同時(shí)，要找到多樣元素中的共性。

 

我們只需找到共性，就能構(gòu)想出不錯(cuò)的創(chuàng)意。

在圖形的構(gòu)思上有時(shí)我們可以行使 ios 圖標(biāo)的圓角制作一些特殊的感覺效果處理，如立體感，這些可以幫助圖標(biāo)有更好的視覺沖擊力，更容易獲取用戶的喜愛與點(diǎn)擊。

 

實(shí)踐分享

說了這么多，下面我們馬上來從零開始構(gòu)思和繪制優(yōu)美的 ios 應(yīng)用程序圖標(biāo)。

程序名稱：myrange
平臺(tái)：iphone
版本：v0.001
出版商：uedc
用途：lomo 拍照軟件

首先說明的是，設(shè)計(jì)的方法不是的，構(gòu)思和繪制的方法也是無限多的，那么馬上開始！

想到拍照軟件，首先會(huì)想起的是相機(jī)，那么相對(duì)應(yīng)這個(gè)軟件的圖標(biāo)可以繪制一個(gè)lomo相機(jī)作嘗試。

 

許多時(shí)我們?yōu)榱耸估L制的物品視覺效果更好，我們需要一些參照物，這次我用萊卡m9來做參照物。在參照物得基礎(chǔ)上，進(jìn)行更多個(gè)性化的處理。

 

為了視覺效果更好，我想其有一點(diǎn)透視的感覺，那么可以行使 ios 圖標(biāo)圓角的特征，形成一種立體的感覺。

 

之后給圖標(biāo)上色，將各大部分大致的顏色分出來

 

繪制出各部分的質(zhì)感，應(yīng)有的皮質(zhì)和金屬的質(zhì)感，制造金屬的可以添加一點(diǎn)雜色

 

增強(qiáng)光感，光是從 90 度向下照的，繪制出該有的反光位和兩邊的過渡轉(zhuǎn)折位，鏡頭部分局部詳盡刻畫，整體調(diào)整，完成！