APP的LOGO设计步骤

2022-06-16 分类：网站建设

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大致的设计方向。同样看了很多文章，这样可以让你在跟产品和设计团队沟通交流的时候心里有底，以免被牵着鼻子走。具体看下图：

医学题库关键词

三. 品牌元素的提炼

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

探索

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

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

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

LOGO的飞机稿

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

LOGO的定稿方案

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

LOGO的寓意

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

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

四. 打磨细节并交付开发

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

1. 导出iPhone6应用图标

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

2. Xcode设置