您好,欢迎进入爱游戏APP下载有限公司官网!

咨询热线:

400-888-8888

超长干货!图标设计零基础科普指南

发布时间:2021-11-13人气:
本文摘要:借着疫情期间在家休假的时间,将平时用到的一些零零星散的图标绘制方法与思路举行了一次全面的汇总与沉淀。从实习期间画一组图标的无从下手,每一个图标看起来都像是散装的一样,到厥后逐步学习与训练,到现在变得相识了图标的绘制流程,历程也是比力贫苦,因为很少有全面的图标解说文章,都是看一篇懂一点,然后在揉到训练当中。所以本篇文章只管将图标举行细致一些的流程说明,有不足之处还望指教。 图标的可用性图标可用性,顾名思义就是图标绘制出来是否能被用户所看懂并快速识别,是否可以为业务赋能。

爱游戏APP下载

借着疫情期间在家休假的时间,将平时用到的一些零零星散的图标绘制方法与思路举行了一次全面的汇总与沉淀。从实习期间画一组图标的无从下手,每一个图标看起来都像是散装的一样,到厥后逐步学习与训练,到现在变得相识了图标的绘制流程,历程也是比力贫苦,因为很少有全面的图标解说文章,都是看一篇懂一点,然后在揉到训练当中。所以本篇文章只管将图标举行细致一些的流程说明,有不足之处还望指教。

图标的可用性图标可用性,顾名思义就是图标绘制出来是否能被用户所看懂并快速识别,是否可以为业务赋能。为此我总结出了四条图标绘制的评判尺度。1. 凸显性用户是否能在某页面上迅速找到该图标,凸显性的目的是可以快速查找,资助用户做选择。

图标在识此外速度上远远大于文字,所以在一些页面中的重要功效使用图标的目的是为了吸引用户的注意力,让重要功效获得凸显,提高重要功效的点击率。2. 可识别性图标的目的是要让用户猜出他看到的图标所表达的意义,有什么作用,以及点击后会泛起什么样的场景,发生什么样的事情。所以一个图标的好与坏最重要的因素就体现在这里:图标的可识别性与可预知性。影响图标可识别性的三点因素视觉庞大性:图标的细节与组合图形的元素熟悉性:图标中图形所表达语义的熟悉水平详细性:图标或者图标中的图形与现实生活中物体的相似水平3. 雅观度图标是否雅观,对用户是否有足够的吸引力。

在《设计通用规则》一书中有一条设计规则是:美即适用效应。不管任何事物,漂亮的外表都市给人带来好感,让人以为这种事物在任何方面都很是优美。作为设计师,把一件事物雅观化是一件终生的必修课,用户对图标或者界面的第一印象就是始于颜值。4. 业务属性图标是否切合业务属性,是否可以唤起用户的使用情绪,提高点击率,起到为业务赋能的作用。

在界面中,我们设计的图标最终目的不只是让用户以为它雅观,而是要为我们的产物赋能,什么是为产物赋能呢?通俗来说就是使图标能够提升点击率从而给公司缔造收益。图标如作甚产物赋能呢?切合产物与业务属性:好比儿童类产物,图标就要圆滑,多彩,看起来萌一点的感受;如果是金融类的产物就应该使用微圆角,直角,中性色,金色来代表金融的庄严感与高级感。唤起用户的使用情绪:好比在公共点评 app 中,有关于食品的图标都使用橙色的拟物,因为暖色可以给人们带来食欲感,微拟物配合暖色系就可以唤起用户对食品的情绪感。引导用户点击,提升点击率:想要让用户点击一个内容,那必须要有足够的吸引力吸引用户去点击,一般来说雅观度越高、趣味元素越多的图标可以占据大部门的吸引力,一个图标在页面中所占的比例也会影响对用户的吸引力,合理的文案搭配也会吸引用户去点击,好比优惠信息,新功效提示等。

图标的类型1. 线性图标线性图标,顾名思义,即图标是由直线、曲线、点在内等元素组合而成的图标样式。线性图标具有辨识度高,清晰唯美,简约易看等优点,线性图标不会对页面造成太多的视觉滋扰。缺点是:线性图标的创作空间较少,太庞大的线性图标看起来会让人感受到累。2. 面性图标面性图标,纵然用对图形内容举行色彩填充的图标样式。

面性图标是现实生活中物体的缩影,优点很是多,好比表意能力强,细节富厚,色彩富厚,情绪感强,视觉突出,创作空间大等。面性图标可以让用户迅速定位图标位置,快速预知点击后的状态。可是面性图标在页面中不行过多泛起,否则会造成页面臃肿,难分主次,用户视觉疲劳。3. 混淆型图标在设计图标类型的时候,纷歧定局限于单纯的线性与面性,也可以两者联合,让图标即有线性描边的轮廓,另有色彩填充的区域,混淆型图标可以让页面变得越发有活力,同时还可以吸引用户的注意力,雅观与创意性强。

可是混淆型图标在商业产物中要审慎使用,因为使用不妥会让页面变得杂乱不堪,用户无法识别图标表达的语义。图标的色彩1. 色彩情绪色彩情绪即颜色心理,指差别波长色彩的光信息作用于人的视觉器官,通过视觉神经传入大脑后,经由思维,与以往的影象及履历发生遐想,从而形成一系列的色彩心理反映。

在任何场景下合理使用色彩心理可以调起用户情绪,还可以让用户发生遐想进而快速识别。在设计图标的时候,合理的运用色彩情绪,会使图标更具有科学性,可以让用户在使用的历程中越发自然、舒服,同时也会增加用户的识别速度唤起用户的使用情绪。

色彩情绪表2. 配色方法在配色时,我们接纳更具备科学性、更切合人类感官的 HSB 系统举行设置。在凭据主色设置渐变色时,我们经常是在主色的基础上加白或者加黑。可是只加入大量的白或者黑就会改变原本色彩的明度与饱和度,从而使画面显得雾蒙蒙的,不够清晰通透。

正确的做法是在给主色变亮减暗的同时,改变主色的饱和度。在 hsb 色相条中,最亮的三个颜色划分是,蓝紫色,青绿色与黄色,如果需要加亮主色就在混白的同时将蓝色向青色改变色相,如果需要减暗则是相反,这样在调制渐变色变化的历程中不会泛起太脏的颜色。3. 配色方案常见的色彩搭配中性色(黑白)+主色、主色+粉饰色、主色+透明度、单渐变、双渐变错层、撞色叠加穿透等效果。

一般常用的就是中性色+主色、主色+粉饰色。粉饰色配色互补色:互补色就是在色环上距离 180° 的色彩,形成具有视觉打击力的色彩。近似色:近似色是在色环上距离 45° 左右的色彩,形成的配色效果气势派头和谐统一。

对比色:对比色是在色环上 120° 左右的色彩,可以发生较为强烈鲜明的视觉效果。图标绘制技巧1. 像素对齐我们在绘制图标的时候,应该将图标的每个像素只管对齐于像素点,这样导出图标时像素的边缘不会泛起锯齿,不会泛起过于模糊的情况。通常在绘制时我们应该去除绘制软件中 x 与 y 轴,宽(w)与高(h)的小数点,这样就可以制止无法对齐像素的情况。

2. 图标参考线在绘制两个或者以上的图标时,为了制止多个图标泛起巨细纷歧的情况,我们应该使用由谷歌质料设计语言提供的图标参考线举行绘制,使用图标盒子可以让一整套图标在视觉效果上越发统一和谐,不会泛起一大一小一长一短的情况。使用方法先绘制一个 152*152px 的正方形,一个 176*176px 的正圆形,一个宽 176*128px 的水平矩形和一个 128*176px 的垂直矩形,圆角为 4px,然后将这个四个形状举行水平居中对齐,之后得出一个图标的参考线。在宽度相等的情况下,正方形的面积要大于正圆的面积,所以在绘制圆形图标时应该将圆形的上下左右四个极点顶齐与图标盒子正方形区域的四条边;在绘制方形图标时应该将方形的四个角点顶齐与圆形参考线的外围边;在绘制横向矩形与纵向矩形图标时,应该将图标的左右边或者是上下边控制在正方形的参考线之内,这样矩形图标绘制出来会越发的圆润,相对于其他的形状图标越发匹配。

3. 可会见性我们绘制的图标必须要保证清晰度,可分辨性。不管是在强光下还是正常光下都需要良好的可读性。

这就需要图标岂论是自身元素之间的对比度还是和页面底板配景之间的对比度都需要很好的可读性。我们检测图标的可读性通常要将图标的配景色底板在玄色和白色之间举行切换对比,岂论是玄色还是白色的配景都可以看清图标的全部细节,还需要确保图标中的每一种颜色都是可见的。第二就是将图标拿到强光下举行视察,在强光下是否可以看清图标的主题结构,图标是否有足够的辨识度。在绘制图标时,我们可以参考 WCAG 2.1:图形和用户界面组件的对比度至少为 3 : 1 的尺度举行相应配色,以到达良好的可视状态。

可会见性测试:https://webaim.org/resources/contrastchecker/4. 统一性在绘制多个类型相同的图标时,我们需要注意这一套图标合集需要在视觉上保持统一性。在一整套产物中,会有许多种图标,可是图标的功效纷歧样,所表达的内容也差别。这时,图标一致性的意义就体现出来了,凭据花样塔原理中的相似性原则:人们会将如元素相互相似的工具感知为一组。

这也意味着如果具有相同功效、寄义和条理结构级此外元素,则应在视觉上保持统一匹配。我们倾向于将相互相似的元素视为同一个分组,相似性可以资助我们组织和分类页面里的元素工具,并将它们与特定的寄义或功效相关联。有差别的方法可以使元素被认为是相似的,这些方法包罗颜色、巨细、形状、纹理、尺寸和偏向的相似性。

图标内容的统一会让用户明确相似的图标所代表的的功效也相同,而且在视觉上也越发和谐雅观。因此我们在绘标后还需检查线条的粗细比重,边角的巨细,配色方案,细节条理和设计元素在整个合集中是否是稳定且一致的。5. 图标呼吸感呼吸感的意思就是适当留白。在设计中,适当的留白可以突出主体内容,让内容具备易看性。

不管是图标还是界面,元素与元素之间都应该存在一定的间距。在图标的绘制历程中,我们应该注意图标元素之间的间距不宜过近,元素也不宜过多。

图标是一个物体的简略缩影,目的是为了表达内容,让用户快速明白,可是在有限的空间中,太过庞大的细节会影响图标的识别速度。因此在图标的绘制历程中应该删除所有无法转达图标意义的元素,制止使图标变得太过庞大难以识别。6. 合理运用布尔运算布尔运算在设计行业中被获得广泛的运用,好比工业设计,影视后期,logo 设计等,布尔运算具有一致性与规范性的优点。

我们在设计面性图标的时候可以合理使用布尔运算举行绘制,这样绘制的图标具有吸引力和说服力。7. 页面条理感在页面中,有需要吸引用户点击的图标,也有起到辅助作用的指示图标,另有引导用户操作的图标,这些图标在页面中占据着差别的职位.在所有图标中,有色图标强于无色图标,多色图标强于单色图标,面性图标强于线性图标,带配景图标强于无配景图标,在设计图标的时候应该凭据业务需要举行视觉强弱差别的设计。

8. 业务属性如文上所说,图标接纳与业务相切合的色彩搭配会让用户在使用的历程中越发自然、舒服,同时也会增加用户的识别速度,唤起用户的使用情绪。一个图标的绘制是否具备商业价值也恰恰体现在这里。如下图所示,左图是斗鱼直播 APP 的截图,右图是京东金融的图标截图。

这两款产物的业务以及所对应的用户群体完全纷歧样,斗鱼是一款直播的产物,直播面向的用户群体是青少年,所以整体的产物调性是:萌、生动、多彩、绚丽、时尚等,斗鱼直播的图标绘制需要面向年轻人,色彩的高饱和与有趣的元素来抓住用户的眼球。可是京东金融是一款理财的产物,面向的用户则是中暮年,大多数都是有一些存款的人,这些人不需要斗鱼那样花里胡哨的元素,他们只在乎这个产物是否宁静,利息是否高,所以京东金融这个产物的整体气势派头就需要偏向于:宁静、高端、大气,这样才气给用户从视觉上营造信任感。我们设计图标时通常使用产物的调性作为主气势派头,可是像美团淘宝这些业务众多的产物中,我们就需要凭据产物下的细分业务举行气势派头定位,然后设计中相应融入产物的品牌元素,使用合理的色彩情绪等让图标变得更切合业务的气势派头。

最终测试当我们的图标绘制完成后需要测试这一组图标的重心是否统一,常用的方法是使用尺度的正圆形和正方形来和所有绘制的图标举行对比,保证所有的图标重心相近,视觉统一。也可以接纳差别角度的视察法,可以从上下左右四个角度去视察图标,看看图标在差别的角度下重心是否统一。

一组图标的绘制流程1. 情绪板情绪板是在执行一项设计操作之前很是重要的一个步骤,情绪板并不是像设计平台展示作品集里那样放几张图片,几个关键词,而是一套对接下来设计的一个气势派头走向定位。凭据差别的用户人群,差别颜色的色彩情绪,差别产物的业务,将用户调研的效果,产物的配景举行总结与思考,定位接下来的设计气势派头。2. 绘制流程选取照片视察生活,对想画的图标举行照片实物造型的提取。

图标是对生活中事物的精简归纳综合。使用现实照片作为设计参考可以让绘制出的图标更真实,辨识度更高,还可以做到差异化设计。造型勾勒使用矢量软件的基本图形与钢笔工具描着照片举行轮廓的绘制。

简化优化简化草稿轮廓的结构,只保留一个物体的主要特点元素,删除多余元素。优化图标细节,需要时将图标线性转面性。业务属性凭据业务需要,调整图标气势派头,添加质感。

3. 制定规范无规则不成周遭,规则的泛起可以让一切杂乱的工具变得合理,统一起来。在设计上也是如此,规范具有统一输出,指引细节、便于检察的利益,规范就是一组图标中的规则,所有图标的绘制都根据规则来,最终的制品就会显得井然有序。

在制定规范时,我们通常先绘制出一个切合业务气势派头的图标,然后凭据这一个图标定制后续的图标规范,最基本的规范即是描边宽度,断点位置、圆角巨细,主色辅色,渐变角度,粉饰元素,光影角度等,在一组中的图标需要在这些图形属性中举行统一,这样的图标虽然形状纷歧样可是在视觉上看起来是属于同一合集的。制定规范一般分为三个历程:拆分细节:将图标中的细节元素举行剖析,在规范中制定细节元素的使用规则。

气势派头定位:凭据产物调性,业务属性在规范中制定相应的色彩心理、质感气势派头。功效划分:功效相近的包罗色彩、质感应该接纳相近性。


本文关键词:爱游戏APP下载,超长,干货,图标,设计,零,基础,科普,指南,借着

本文来源:爱游戏APP下载-www.qzbbc.com


400-888-8888