如何4步搞定一个APP的LOGO设计?

@Olaf_Chou  讲解一下LOGO设计的流程和总结一下自己设计LOGO的经验,如果有不对的地方,希望指出

APP的LOGO对于产品来说,至关重要,如果能让用户在众多的APP中认出你,并能在使用几次后能记住你大致的形状,其实已经很不错了,这就要求你设计LOGO的时候要够简洁、够直接、但最好又能寓意深刻,最好能像菜鸟网络的LOGO一样,能解释出各种寓意,这样才算合格的LOGO,评审通过率也比较高。总而言之,记住尽量用简洁的形状来传递你产品的理念。

那如何才能做到呢,下面就分享一下如何在真实的项目中完成对LOGO的设计。一共分为四个步骤:

  • 一:熟悉产品背景  
  • 二:提取关键词  
  • 三:品牌元素的提炼  
  • 四:打磨细节并交付开发

 

一:熟悉产品背景

本次要重新改版的APP是医学题库,通过跟产品经理的沟通,大致了解了医学题库这个产品,医学题库APP是把之前的西综题库和掌上题库两者进行合并,这样一来用户则可少装一个APP,而又能完成相同的目标,相信用户是非常愿意的。举个真实的例子,现在市面上单车很火,如果每辆共享单车你都装APP的话,估计128G内存都不够用,因为你还装了其他APP,更何况这种APP一个星期可能就用一两次,放在里手机占内存,删了又骑不了车,真是很麻烦。所以说希望有一天有一个扫一扫(微信、支付宝)就能解决所有市面上的共享单车骑行问题,个人觉得针对使用频率不是很高的而且不是特别复杂的产品,没必要开发一个APP,迅速抢占市场才是最重要的。

接下来简单介绍一下之前2款APP:西综题库、掌上题库

两个APP的LOGO是之前的版本,很久没有进行图标优化升级,已经不太符合现在的趋势。图标在1024×1024尺寸的时候,细节很多,很精细,但是在手机上却看不清细节了,所以这次有必要对医学题库LOGO进行重新设计,替代之前的陈旧的LOGO。

分析了两款产品,最终得出了医学题库的目标用户、核心需求、Slogan。

医学题库的目标用户:医学生和医生。

医学题库主要功能:帮助目标用户快速的通过执业医师考试和西综考试。

医学题库的Slogan:医学考试通关神器;

 

二:提取关键词

首先接到需求后,分析了一下手机上的APP(为了设计好LOGO,我下载了很多APP),粗略的分析了LOGO大致的设计方向。同样看了很多文章,这样可以让你在跟产品和设计团队沟通交流的时候心里有底,以免被牵着鼻子走。具体看下图

40fc5943f408a8012193a3c442ac.jpg

这里可以推荐一篇文章,写的不错可以看看:http://www.ui.cn/detail/236246.html

 

医学题库关键词

c4bc5943f418a8012193a35884b2.jpg

 

三:品牌元素的提炼

医学题库这个产品属于小众产品,一般局限于医疗行业,所以相应的竞品不是很多,由于丁香园的品牌认知度在医生界比较高,所以我们这次LOGO设计还是针对目标用户来设计的,不是所有大众用户。

 

探索

bead5943f42ea8012193a3f6d8b9.jpg

这里提取WHO(世界卫生组织)里面的蛇杖作为LOGO一部分,西医是以“蛇杖”作为自己的标志的。而且很多跟医疗相关的企业或者图形都会有蛇杖标志的出现,救护车上的LOGO就有蛇杖的标志,感兴趣的自己上Google百度一下吧,哈哈。

钢笔当时是想表达做题的意思,而且钢笔比铅笔之类的更加代表专业,因为医生很多习惯用钢笔写字,所以这里选择了钢笔作为灵感来源。

书本自然代表题库的含义嘛,其实之前也想过很多其他的比如书架,十字架等,都被否决了。

 

LOGO的飞机稿

这里做了很多飞机稿,主要还是想通过书籍、蛇杖、医疗等元素来设置医学题库的LOGO,后来产品方面都觉得不满意,所以又重新设计了一个方案,所以这里展示飞机稿只是想告诉大家,一个LOGO设计应该需要改很多遍,改到相对满意为止。

9f4e5943f441a8012193a36e7bbb.jpg

LOGO的定稿方案

这里优化了蛇的形状,增加了蛇的眼睛,并且让蛇缠绕蛇杖更紧,提取了钢笔的头部元素,设计手法是图标的正负形,利用钢笔头镂空的部分替换成蛇杖,让两者结合起来,图标的背板是用的苹果图标规范来制作的,图标的设计最大尺寸1024×1024,设计时必须让图标的主体在图标规范的圆圈内。

2b0f5943f4a2a8012193a3719a5d.jpg

 

LOGO的寓意

1、蛇杖代表医学,寓意着APP的目标用户是医生和医学生,也表达一定的权威性。

2、钢笔代表着题库,间接的表达了产品主要功能是帮助用户快速通过考试。

 

四:打磨细节并交付开发

APP图标设计好了,但是怎么查看自己设计的真实效果呢,那就要放到手机上看,但是目前好像没有一个可以直接预览的工具,所以只能通过曲线救国的方式来达到真机演示的效果,首先图片AI里面导出1024×1024尺寸,然后可以通过IconKit软件或者Sketch导出各种尺寸,这里告诉大家一种用Xcode软件安装APP图标的方法,基本上很多设计师都不会这种方法,当然方法有很多,我这里就讲一下这种方法,其他方法可以自行探索。下面就教大家一下如何用Xcode安装图标。(尺寸为iPhone6 )

 

1、导出iPhone6应用图标

89155943f4bca8012193a3333ec9.jpg

这里要注意的是图标一定要方角,不要圆角,因为开发真实拿到的图标都是方角,软件会自动转换成圆角,所以不需要设计师自己弄成圆角,不过自己做其他设计稿展示需要圆角的时候可以在Sketch上面装一个插件Egmont Plugin,这个插件可以生成苹果的圆角(这个圆角一般自己是画不出来的)。iPhone 6图标尺寸大小是120x120px,图标命名一定要有后缀@2x。

 

2、Xcode设置

47085943f4cca8012193a3b21394.jpg

选择第二个

a7de5943f4dea8012193a3488d70.jpg

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

0e6c5943f4eea8012193a3a30f34.jpg

依次选中红框的部分,然后将iPhone6的图标拖进到相应的位置。然后USB连接手机,点击紫色框运行即可。

 

3、效果图

0b8a5943f513a8012193a3362549.jpg

最后我想说的是,每次微调好LOGO一定要放到手机里反复查看,如果不满意就不断的修改,这样才能保证图标在放大的时候和缩小的时候有一定的识别度和美观性。如果只是1024×1024尺寸的图通过了审核,小尺寸没有测试,到时候再修改会很桑心的。

 

总结

设计好一个APP的LOGO可以按照以下步骤来执行:

1、熟悉自己的产品:目标用户、用户需求、产品主要功能等;

2、通过脑暴等方式得到关键词,通过各种设计网站找参考,选择符合产品的风格。

3、设计出多个概念稿(可以有不同的LOGO表现形式),筛选出最符合产品定位的方案;

4、不断的打磨细节,可以通过LOGO网格和黄金比例来完善LOGO,并导出到手机查看。

下图是我另外设计的DXY用户体验设计网站概念LOGO,如果你看到这里的话,谢谢你的支持,这里提供了这个动效的源文件,可供下载,如果有任何问题欢迎跟我讨论~

 

原文地址: 花厂设计招待所

作者:Olaf_Chou

 


 

0

评论0

站点公告

 

AI创作与绘画大师,国内版chatGPT在线版本免费使用哦

点击打开: https://ai.uiya.cn

   
显示验证码
没有账号?注册  忘记密码?

社交账号快速登录

微信扫一扫关注
如已关注,请回复“登录”二字获取验证码