9个关键的图标绘图步骤,让你独步天下!

用户头像
武汉/UI设计师/5年前/191浏览
9个关键的图标绘图步骤,让你独步天下!

记住9个步骤 让你成为高手中的高手!

9个关键的图标绘图步骤,让你独步天下!


大家好~和小铺又见面啦!经过前几次的分享,小可爱们

对移动端图标都有了一个初步的了解和学习,线下有小可爱问我具体的图标设计是什么?


那么今天小铺就给大家讲讲图标设计中关键的9个步骤,大家一定要认真学习并用小本子日志记下哦~


对于移动端APP而言,图标是尤为重要的,它关联着产品的品牌价值,图标是否具有良好的可用性,将直接影响到平拍和产品本身。


通常,用户第一次仔细审视APP是在APP Store和Google Play这样的软件商店当中。


APP图标不仅具备品牌本身的气质和元素,并且能够体现产品本身的功能与特质。




1.从背景信息搜集开始


当我们设计一个APP的时候,最重要的是什么呢,是图形和色彩吗?在小铺看来这固然重要,但不是最重要的。


首先,我们应该了解产品背后公司的气质、团队背景、产品的功能,而不是直接开始设计。


需要了解这个图标所涉及到的APP的业务组成和整体架构,了解团队的价值主张、目标主张、市场特征、定价策略。


以上这些了解了,就确定了产品本身给人的感觉,这些东西都和设计息息相关。


 

2.熟悉标准;仔细研读设计规范


在图标设计中,虽然创意和想法并不受限制,但是任何平台都有着相对清晰的设计规范,设计师们都必须严格遵守的。


遵守设计规范会让图标在一个范围内和其他图标在视觉上保持着协调性,使图标更加的出彩。


在Android平台和IOS的设计规范中,对于图标的使用有着非常清晰的说明,从配色到尺寸大小、样式和具体的使用场景。


所以小铺建议大家尽量遵循图标设计的技术规格和设计建议



3.选对工具:大家常用这些软件


通常情况下,最终输出的图标会使用PNG格式,无论你选择什么工具,至少能够输出PNG格式。当然,这只是选择软件工具过程中一个小小的条件。


目前,绝大多数设计师都会选用当前最常见、接受度最高的专业软件,其中几个成为了行业标准的本身:


Adobe Illustrator CC ,也就是常说的 AI,是最好的矢量设计工具之一。


Adobe Photoshop CC,也就是我们所说的PS,是目前使用范围最广也是最好的位图编辑软件,无论是制作光影还是阴影效果,都非常的厉害。


Sketch 如果说是最简单的苹果电脑原型图设计软件,那么Axure RP (ARP)就是最强大的原型制作软件。


Axure RP 不仅能制作静态的视觉稿、网页,还能添加交互动作。并且能够很好的模拟APP或者网页的交互动作展示,是进行原型设计的最佳设计软件之一。



4.注意细节:简约而富有凝聚性


当我们在图标的设计中,一定要记得审视图标,看看是否缺少一些关键的信息、元素和是否有多余的东西。


我们设计的图标会出现在很多场合之中,大小也不尽相同,随着尺寸的变化,有些信息会变得不够明显。


比如拥有很多细节的图标,如果将他缩小会显得非常混乱,所以在我们进行设计的时候不要把过多的文本或者图片细节融入到图标的设计当中。


简约的图标可以更好的体现他的功能性和展现它的体验上的优势。所以我们在设计的时候要抓住主要概念和想法,运用清晰的轮廓和、简单的元素来呈现它




5.结合品牌:记得考虑品牌风格指南


每个品牌都有着它独特的设计,从配色方案到细节元素样式,通常都有着明确的定位。


图标设计的过程中,为了使图标和品牌具有足够清晰的联系,我们在图标设计时,要根据品牌的的风格来进行设计,这样能使用户在第一眼就能感觉到图标与品牌的关联性。




6.艰难取舍:让你的图标替APP发声


举个例子,当我说拍照的时候,你的脑海里面想的是什么呢?是照相机,对吗?


当你在手机APP下载商店搜索拍照的时候,会出现一大堆照相机样式的图标,各种各样的风格都有。


这种设计对大众来说,会有一种亲切感,并且能一眼记住它。


但是这种设计意味着激烈的竞争,设计师在设计图标的时候会在原创性和功能性之间,做很难的取舍。




7.知己知彼:仔细审视竞争对手的设计


我们在做设计之前,可以做一个竞品分析,对竞争对手进行调研,了解竞争对手的功能,APP的设计,图标的构思,这样可以使我们设计的图标和他们完全不一样,避免做出和竞争对手相似的设计。


图标的设计中,相似的元素会使一些用户面对新的APP使产生信任感,所以一些甲方喜欢使用与对手相似的元素。


但是这需要设计师进行一个取舍,把我中间的一个度,如果把握不好,过了,就会给用户产生这是山寨和跟随者的感觉,缺乏独立性,让用户在使用的过程中失去信心。




8.开始设计:选择正确的色彩和展现形式


到这里来,大侠们应该很高兴啦,因为这是一个很熟悉的版块,优秀的配色和有趣的图形能够让图标脱颖而出。


在选择色彩上面,有很多设计师都收不住手,一个小小的图标里面装满了各种颜色,使图标像一个现代艺术品一样。


那么我们在色彩选择上应该如何抉择呢?我们应该参照品牌用色的基础上结合色彩心理学,来构建图标的色彩体系。


这里小铺还要告诉大家一个很好用的方法,那就是在设计的前期,绘制图标原型时,在纸上绘画,是一个非常好的方法,无论你会不会手绘,当你在纸上绘画时很多创意和想法,会在笔和纸之间摩擦的过程中诞生,这是许多软件无法代替的。


并且,运用简单的几何图形来创建基本框架也是一个非常棒的方法。任何复杂的图形都是在简单的几何之中创建出来的。




9.多做检验:绕不过的实际测试


好了,现在我们进行到最后一步啦!


当我们设计好我们的图标,现在我们就拿它进行检验,首先我们要看看它是否足够清晰,对比度够不够,能不能融入到相应的场景之中,是否贴近品牌的气质,等等。


检查不同尺寸的APP,看它们大小尺寸是否看得清,识别度高不高,是否有不恰当的设计;


用不同的背景来检测APP在不同颜色样式的背景下,对比度是否清晰。


在不同分辨率下的样子,不要只放在网页中去查看,可以放到用户手机上进行查看,这样看的更加直观一些。


好啦!今天的小课堂小铺就讲到这里啦~需要大侠们多用看,每天进步一点点,早日当上武林盟主,嘻嘻,那么下次再见哟~记得想我哦~




本文首发微信公众号(UI精品铺),今日头条同步更新,转载请注明作者与出处。



0
举报
|
2
分享
相关推荐
评论
用户头像
评论你的想法~
表情
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
加载中
推荐素材
科技医疗透明柜UI界面设计
【新年UI图标】汽车icon
【新年UI图标】银行卡icon
3D渐变流体抽象矢量UI背景图
3D卡通UI界面图标可爱插画免扣素
我的钱包-UI界面设计-app
UI通用设计素材1
拟物风质感写实UI卡片合集源文件
智能家居中心 简约 UI设计组件库
新能源APP应用UIKit
【新年UI图标】珠宝icon
Security Camera UI kit
【新年UI图标】秒杀icon
UI 登录界面设计模板包
【新年UI图标】影音icon
UI界面 组件
【新年UI图标】30个图标
【新年UI图标】会员icon
钱包ui模板
【新年UI图标】钱包icon
手表表盘UI系列
抽象液态渐变UI背景模版
高级感金属拟物 UI设计组件库
你可能喜欢
相关收藏夹
地产VI
地产VI
地产VI
地产VI
大家都在看
登录注册