當(dāng)前位置: 首頁(yè) > 設(shè)計(jì)資訊 > 理論文摘 > 正文

輕松4步搞定一個(gè)APP的LOGO設(shè)計(jì),超實(shí)用!

2017-11-23 2424 0

APP的LOGO對(duì)于產(chǎn)品來(lái)說(shuō)至關(guān)重要,要求你設(shè)計(jì)LOGO的時(shí)候要夠簡(jiǎn)潔、夠直接、但最好又能寓意深刻。

APP的LOGO對(duì)于產(chǎn)品來(lái)說(shuō)至關(guān)重要,如果能讓用戶在眾多的APP中認(rèn)出你,并能在使用幾次后能記住你大致的形狀,其實(shí)已經(jīng)很不錯(cuò)了,這就要求你設(shè)計(jì)LOGO的時(shí)候要夠簡(jiǎn)潔、夠直接、但最好又能寓意深刻,最好能像菜鳥(niǎo)網(wǎng)絡(luò)的LOGO一樣,能解釋出各種寓意,這樣才算合格的LOGO,評(píng)審?fù)ㄟ^(guò)率也比較高??偠灾?,記住盡量用簡(jiǎn)潔的形狀來(lái)傳遞你產(chǎn)品的理念。

那如何才能做到呢,下面就分享一下如何在真實(shí)的項(xiàng)目中完成對(duì)LOGO的設(shè)計(jì)。一共分為四個(gè)步驟:

熟悉產(chǎn)品背景

提取關(guān)鍵詞

品牌元素的提煉

打磨細(xì)節(jié)并交付開(kāi)發(fā)

一. 熟悉產(chǎn)品背景

本次要重新改版的APP是醫(yī)學(xué)題庫(kù),通過(guò)跟產(chǎn)品經(jīng)理的溝通,大致了解了醫(yī)學(xué)題庫(kù)這個(gè)產(chǎn)品,醫(yī)學(xué)題庫(kù)APP是把之前的西綜題庫(kù)和掌上題庫(kù)兩者進(jìn)行合并,這樣一來(lái)用戶則可少裝一個(gè)APP,而又能完成相同的目標(biāo),相信用戶是非常愿意的。舉個(gè)真實(shí)的例子,現(xiàn)在市面上單車(chē)很火,如果每輛共享單車(chē)你都裝APP的話,估計(jì)128G內(nèi)存都不夠用,因?yàn)槟氵€裝了其他APP,更何況這種APP一個(gè)星期可能就用一兩次,放在里手機(jī)占內(nèi)存,刪了又騎不了車(chē),真是很麻煩。所以說(shuō)希望有一天有一個(gè)掃一掃(微信、支付寶)就能解決所有市面上的共享單車(chē)騎行問(wèn)題,個(gè)人覺(jué)得針對(duì)使用頻率不是很高的而且不是特別復(fù)雜的產(chǎn)品,沒(méi)必要開(kāi)發(fā)一個(gè)APP,迅速搶占市場(chǎng)才是最重要的。

接下來(lái)簡(jiǎn)單介紹一下之前2款A(yù)PP:西綜題庫(kù)、掌上題庫(kù)。

西綜題庫(kù).png


掌上題庫(kù).png

兩個(gè)APP的LOGO是之前的版本,很久沒(méi)有進(jìn)行圖標(biāo)優(yōu)化升級(jí),已經(jīng)不太符合現(xiàn)在的趨勢(shì)。圖標(biāo)在1024×1024尺寸的時(shí)候,細(xì)節(jié)很多,很精細(xì),但是在手機(jī)上卻看不清細(xì)節(jié)了,所以這次有必要對(duì)醫(yī)學(xué)題庫(kù)LOGO進(jìn)行重新設(shè)計(jì),替代之前的陳舊的LOGO。

分析了兩款產(chǎn)品,最終得出了醫(yī)學(xué)題庫(kù)的目標(biāo)用戶、核心需求、Slogan。

醫(yī)學(xué)題庫(kù)的目標(biāo)用戶:醫(yī)學(xué)生和醫(yī)生。

醫(yī)學(xué)題庫(kù)主要功能:幫助目標(biāo)用戶快速的通過(guò)執(zhí)業(yè)醫(yī)師考試和西綜考試。

醫(yī)學(xué)題庫(kù)的Slogan:醫(yī)學(xué)考試通關(guān)神器。

二. 提取關(guān)鍵詞

首先接到需求后,分析了一下手機(jī)上的APP(為了設(shè)計(jì)好LOGO,我下載了很多APP),粗略的分析了LOGO大致的設(shè)計(jì)方向。同樣看了很多文章,這樣可以讓你在跟產(chǎn)品和設(shè)計(jì)團(tuán)隊(duì)溝通交流的時(shí)候心里有底,以免被牽著鼻子走。具體看下圖:

提取關(guān)鍵詞.jpg

醫(yī)學(xué)題庫(kù)關(guān)鍵詞

醫(yī)學(xué)題庫(kù)關(guān)鍵詞.png

三. 品牌元素的提煉

醫(yī)學(xué)題庫(kù)這個(gè)產(chǎn)品屬于小眾產(chǎn)品,一般局限于醫(yī)療行業(yè),所以相應(yīng)的競(jìng)品不是很多,由于丁香園的品牌認(rèn)知度在醫(yī)生界比較高,所以我們這次LOGO設(shè)計(jì)還是針對(duì)目標(biāo)用戶來(lái)設(shè)計(jì)的,不是所有大眾用戶。

探索

品牌元素的提煉.png

這里提取WHO(世界衛(wèi)生組織)里面的蛇杖作為L(zhǎng)OGO一部分,西醫(yī)是以“蛇杖”作為自己的標(biāo)志的。而且很多跟醫(yī)療相關(guān)的企業(yè)或者圖形都會(huì)有蛇杖標(biāo)志的出現(xiàn),救護(hù)車(chē)上的LOGO就有蛇杖的標(biāo)志,感興趣的自己上Google百度一下吧,哈哈。

鋼筆當(dāng)時(shí)是想表達(dá)做題的意思,而且鋼筆比鉛筆之類(lèi)的更加代表專(zhuān)業(yè),因?yàn)獒t(yī)生很多習(xí)慣用鋼筆寫(xiě)字,所以這里選擇了鋼筆作為靈感來(lái)源。

書(shū)本自然代表題庫(kù)的含義嘛,其實(shí)之前也想過(guò)很多其他的比如書(shū)架,十字架等,都被否決了。

LOGO的飛機(jī)稿

這里做了很多飛機(jī)稿,主要還是想通過(guò)書(shū)籍、蛇杖、醫(yī)療等元素來(lái)設(shè)置醫(yī)學(xué)題庫(kù)的LOGO,后來(lái)產(chǎn)品方面都覺(jué)得不滿意,所以又重新設(shè)計(jì)了一個(gè)方案,所以這里展示飛機(jī)稿只是想告訴大家,一個(gè)LOGO設(shè)計(jì)應(yīng)該需要改很多遍,改到相對(duì)滿意為止。

LOGO的飛機(jī)稿.jpg


LOGO的定稿方案

這里優(yōu)化了蛇的形狀,增加了蛇的眼睛,并且讓蛇纏繞蛇杖更緊,提取了鋼筆的頭部元素,設(shè)計(jì)手法是圖標(biāo)的正負(fù)形,利用鋼筆頭鏤空的部分替換成蛇杖,讓兩者結(jié)合起來(lái),圖標(biāo)的背板是用的蘋(píng)果圖標(biāo)規(guī)范來(lái)制作的,圖標(biāo)的設(shè)計(jì)最大尺寸1024×1024,設(shè)計(jì)時(shí)必須讓圖標(biāo)的主體在圖標(biāo)規(guī)范的圓圈內(nèi)。

LOGO的定稿方案.jpg

LOGO的寓意

1. 蛇杖代表醫(yī)學(xué),寓意著APP的目標(biāo)用戶是醫(yī)生和醫(yī)學(xué)生,也表達(dá)一定的權(quán)威性。
2. 鋼筆代表著題庫(kù),間接的表達(dá)了產(chǎn)品主要功能是幫助用戶快速通過(guò)考試。

四. 打磨細(xì)節(jié)并交付開(kāi)發(fā)

APP圖標(biāo)設(shè)計(jì)好了,但是怎么查看自己設(shè)計(jì)的真實(shí)效果呢,那就要放到手機(jī)上看,但是目前好像沒(méi)有一個(gè)可以直接預(yù)覽的工具,所以只能通過(guò)曲線救國(guó)的方式來(lái)達(dá)到真機(jī)演示的效果,首先圖片AI里面導(dǎo)出1024×1024尺寸,然后可以通過(guò)IconKit軟件或者Sketch導(dǎo)出各種尺寸,這里告訴大家一種用Xcode軟件安裝APP圖標(biāo)的方法,基本上很多設(shè)計(jì)師都不會(huì)這種方法,當(dāng)然方法有很多,我這里就講一下這種方法,其他方法可以自行探索。下面就教大家一下如何用Xcode安裝圖標(biāo)。(尺寸為iPhone6 )

1. 導(dǎo)出iPhone6應(yīng)用圖標(biāo)

導(dǎo)出iPhone6應(yīng)用圖標(biāo).png

這里要注意的是圖標(biāo)一定要方角,不要圓角,因?yàn)殚_(kāi)發(fā)真實(shí)拿到的圖標(biāo)都是方角,軟件會(huì)自動(dòng)轉(zhuǎn)換成圓角,所以不需要設(shè)計(jì)師自己弄成圓角,不過(guò)自己做其他設(shè)計(jì)稿展示需要圓角的時(shí)候可以在Sketch上面裝一個(gè)插件Egmont Plugin,這個(gè)插件可以生成蘋(píng)果的圓角(這個(gè)圓角一般自己是畫(huà)不出來(lái)的)。iPhone 6圖標(biāo)尺寸大小是120x120px,圖標(biāo)命名一定要有后綴@2x。

2. Xcode設(shè)置

Xcode設(shè)置.jpg

選擇第二個(gè)

選擇第二個(gè).jpg

Product Name:APP的名稱;Team:Apple ID

Product Name.jpg

依次選中紅框的部分,然后將iPhone6的圖標(biāo)拖進(jìn)到相應(yīng)的位置。然后USB連接手機(jī),點(diǎn)擊紫色框運(yùn)行即可。

3. 效果圖

效果圖.png

最后我想說(shuō)的是,每次微調(diào)好LOGO一定要放到手機(jī)里反復(fù)查看,如果不滿意就不斷的修改,這樣才能保證圖標(biāo)在放大的時(shí)候和縮小的時(shí)候有一定的識(shí)別度和美觀性。如果只是1024×1024尺寸的圖通過(guò)了審核,小尺寸沒(méi)有測(cè)試,到時(shí)候再修改會(huì)很桑心的。

總結(jié)

設(shè)計(jì)好一個(gè)APP的LOGO可以按照以下步驟來(lái)執(zhí)行:

1. 熟悉自己的產(chǎn)品:目標(biāo)用戶、用戶需求、產(chǎn)品主要功能等。

2. 通過(guò)腦暴等方式得到關(guān)鍵詞,通過(guò)各種設(shè)計(jì)網(wǎng)站找參考,選擇符合產(chǎn)品的風(fēng)格。

3. 設(shè)計(jì)出多個(gè)概念稿(可以有不同的LOGO表現(xiàn)形式),篩選出最符合產(chǎn)品定位的方案。

4. 不斷的打磨細(xì)節(jié),可以通過(guò)LOGO網(wǎng)格和黃金比例來(lái)完善LOGO,并導(dǎo)出到手機(jī)查看。




17
評(píng)論區(qū)(0)
正在加載評(píng)論...