想成为一名优秀的UI设计师,这些图标规范你得知道

装修宝典00

想成为一名优秀的UI设计师,这些图标规范你得知道,第1张

想成为一名优秀的UI设计师,这些图标规范你得知道
导读:1像素对齐需要严格的做到像素对齐,尤其是在做较小尺寸的图标时,如果不严格的遵循像素对齐,那最终的显示效果就会出现问题。2多用布尔运算在做图标的时候,能用基本图形进行布尔运算的时候,尽量不要使用钢笔,这样做的好处有如下几点:让你的图标更加规范

1像素对齐

需要严格的做到像素对齐,尤其是在做较小尺寸的图标时,如果不严格的遵循像素对齐,那最终的显示效果就会出现问题。

2多用布尔运算

在做图标的时候,能用基本图形进行布尔运算的时候,尽量不要使用钢笔,这样做的好处有如下几点:让你的图标更加规范;对图形结构理解更加深刻;后期更改形状更加方便。

3独特的风格

在做系列图标的时候,一定要在前期给图标设定一个风格及原则,使之看起来与众不同。在这里值得一提就是,我们在做线性图标时,一定要保证描边粗细相同、圆角相同,如果这些基础的规则都没有遵循,那也就谈不上风格的统一、创新了。

4视觉大小统一

在进行图标设计的时候,我们会使用栅格辅助线来帮助我们更加严格谨慎,但一定不要被辅助线困住,学会灵活运用,保持视觉上的大小统一。

在如今的APP设计环境当中,一些APP设计大牛都一直强调,设计师要为有品牌意识。那么,在图标的设计中,我们也必须强调“品牌性”,简单的说就是把品牌中的抽象的概念变成具象化的图形,把品牌主副色调应用到图标设计中。同时建议大家每个星期完成一个主题的作品,提升自己的平面设计能力。

以上就是小编关于UI图标规范的分享,总之,图标与品牌标志一样,在设计时都需要做适当的减法,应该尽量用简约的线条去表达其含义,还应该尽量避免出现线条结构过于复杂的设计。

好看好记好理解的界面图标,对手机APP的界面可以说是增色不少。首先我们不说创新,对于新手小白们,做出一个合格的图标都是非常困难的。今天小编就来手把手地教大家怎样设计界面图标~

1、确定场景

确定使用场景,准确的说就是你这个app或者你设计的图标是针对谁,在什么情况下使用的,以及用户前后可能操作的动作。并且根据这一系列数据确定图标的位置大小,甚至形状。

2、图形表意

现在有很多的图标含义已经成为用户的惯性思维,我们不能去改变他的形状轮廓,不可能让用户多一些学习成本。但是这个时候我们又想到要创新和美观,就需要我们的视觉效果功底和能力了。

3、流行样式

APP作为时代的产物,肯定是要紧跟潮流的,当苹果的扁平风流行的时候,是不是大家手机的软件都设计成扁平风了不是说我们不能独树一帜,有自己的设计。而是我们一定得有流行的元素,这样也从侧面体现其实自己也是“入世之人”,这个APP是一直有人在用心维护的。

4、细节调整

在你完成草图,设计稿之后,我们还需要把图标放在实际的界面上去看一下,然后做一些细微的调整,力求达到视觉平衡,并且符合一个合格图标的要求。

那么怎样的图标设计出来才算是合格呢

这个规则很简单但是也很难完全做到,大家需要在实践过程中慢慢磨练好。要记得方向对了,目标总能达到。

统一性

在一个APP中,你的所有图标设计出来一定是统一风格的,最起码看上去像是一套的,而不是零零散散,花花绿绿,眼花缭乱,格调低下。用一句话要求你——“聚是一团火,散是漫天星”。

可读性

很多时候我们会在图标下面放文字,但是有些图标我们看的次数多了,有了一种惯性思维,能够不看文字就能理解他的意思对不对当你的图标能做到让人能够不看文字就能马上理解,并且还能好看创新的话,你就牛大发了!

可扩展

现在的软件,个个都是不停的更新更新更新!你能不更新吗你更新的话是不是有可能要改图标那么你的图标具有可扩展性就非常有必要的。所谓的可扩展性,就是要求你得图标在设计同时,要设计相关的规则文档,比如视觉特征、尺寸、延展 *** 等等。

对于UI设计师来说,无论工作具体内容是什么,画图标往往是你更先最基础去做的事情,所以大家一定要重视起来,多多学习。

什么是图标

“图标”一词为外国译名,英文为“Trade Vlark”,法文为“Mangues”,德文为“Warenzeihen”。19世纪,清 *** 在同帝国主义签订的许多不平等条件中,译成中文为“商标”、“商牌”、“贸易牌号”、“货牌”等。后来,人们对这些名词统一固定译为“商标”。咳咳~不好意思跑题了,ui设计图标并不是这样的!

其实正确打开方式是这样的!ico图标其实是icon file的缩写形式,它是基于windows而开发的一个图形格式,大多用于电脑,手机或其它设备中为各种文件,应用程序或快捷方式设置的一种图形标志。想必大家看完以后会对什么ico图标有一个初步的印象了。那么我们再来看看图标的一些分类,各有什么区别特点!

图标的分类

按功能分类图标分为:1、启动类图标,2、系统图标

1、启动类图标

这类图标的典型代表有我们手机上的app应用,在手机界面上的展示状态就是属于启动图标!比如有微信,qq,酷狗音乐等。

2、系统图标

系统图标也是现阶段在我们手机屏幕上出现最多的图标,在app界面中是不可或缺的一部分!那什么是系统图标呢比如像返回,删除,保存等代表当前功能,或操作的一类图标我们称之为系统图标,这种图标的要点在于简洁,易认,也就是辨识度高就行了。

以上是UI设计图标的的内容分享,希望对各位想从事UI设计的小伙伴们有所帮助,想要了解更多相关内容,请关注本平台,小编也会做及时的整理并发布在平台上,大家注意查看哦!

直接用这个在线的生成ico工具吧,方便快捷,常用的格式比如jpg/png/webp/bmp等等都可以直接生成ico图标,还可以在线裁剪缩放,选取你需要的尺寸等等,而且清晰度挺高的。在线ICO图标 *** 生成,转换ICO图标Pro版

转换ICO图标Pro版步骤:

一、点击或者拖拽到上传框中,即可上传你要转换的,直接将新拖入上传框即可更换。目前已知支持jpg、png等多种常见的格式,如果上传并转换ico图标成功,则代表支持该格式。

二、此时预览框中会出现刚刚上传的,可以任意缩放拖拽裁剪框,选择你想要截取并转换ico图标的区域。在拖拽缩放裁剪框的过程中,左上方会有ico图标效果的实时预览。

三、选择需要生成的ico图标的尺寸,主要提供宽高为16、32、48、64、128、256、512的尺寸以供选择。通常的ico图标基本都是32、64或者128像素的。

四、选择转换生成的ico图标的文件格式,默认的格式是ico,并且有jpg和png格式可以选择。需要注意的是,ico图标一般都是背景镂空透明的图形,只有ico和png格式支持透明背景的。而jpg格式的本身是不支持的。

按设计形式分类分为扁平化图标和拟物化图标

1、扁平化图标

扁平化设计特点:简洁,清新,设计感强,没有更多的细节与特效修饰。直接明了的表达出出图标的本意。缺点是识别性差。

2、拟物化图标

特点,精致,细腻,识别性强,比较接近真实物品,但是就是因为拟物化比较接近真实物品,所以在绘制的过程中具有一定的难度,在ui设计图标发展至今,已经渐渐的淡出了用户的视野,全面的被扁平化图标所代替了!

说完图标的分类之后呢,接下来我们来说说如果叫你来设计这些图标我们需要去遵循什么原则呢

1、可识别性原则

可识别性原则即清晰明了的表达清楚相应的功能和和操作。通俗的讲就是用户一眼看过去就知道它是做什么的。比如拨打 *** 图标,用户不需要看文字只需要看图标就知道是拨打 *** 用的!这样才能使用户的体验达到满意!否则的话就等于是废的设计!

2、差异性原则

这个差异性讲的就是图标与图标之间的差异,如果说每个图标彼此之间很相似,就会很难分辨这样就很可能导致用户群体的误操作!切不可模棱两可。所以这点也是至关重要的!

3、统一性原则

这点在我们设计主题图标也好,系统图标也好,是必须要遵循的一点!统一性原则表现在形状,样式等风格层面有共同点,这样让人看起来就会赏心悦目,已经更能受到用户的喜爱!

4、尺寸大小尺寸与格式。

图标一般有以下几种尺寸:Ios、Android,图标有以下几种格式:png , jpg ,svg。

以上是UI设计图标的的内容分享,希望对各位想从事UI设计的小伙伴们有所帮助,想要了解更多相关内容,请关注本平台,小编也会做及时的整理并发布在平台上,大家注意查看哦!

1 像素对齐

我们在绘制图标的时候,应该将图标的每个像素尽量对齐于像素点,这样导出图标时像素的边缘不会出现锯齿,不会出现过于模糊的情况。通常在绘制时我们应该去除绘制软件中 x 与 y 轴,宽(w)与高(h)的小数点,这样就可以避免无法对齐像素的情况。

2 图标参考线

在绘制两个或者以上的图标时,为了避免多个图标出现大小不一的情况,我们应该使用由谷歌材料设计语言提供的图标参考线进行绘制,使用图标盒子可以让一整套图标在视觉效果上更加统一和谐,不会出现一大一小一长一短的情况。

3 可访问性

我们绘制的图标必须要保证清晰度,可辨别性。不管是在强光下还是正常光下都需要良好的可读性。这就需要图标不论是自身元素之间的对比度还是和页面底板背景之间的对比度都需要很好的可读性。

我们检测图标的可读性通常要将图标的背景色底板在黑色和白色之间进行切换对比,不论是黑色还是白色的背景都可以看清图标的全部细节,还需要确保图标中的每一种颜色都是可见的。第二就是将图标拿到强光下进行观察,在强光下是否可以看清图标的主题结构,图标是否有足够的辨识度。

4 统一性

在绘制多个类型相同的图标时,我们需要注意这一套图标合集需要在视觉上保持统一性。在一整套产品中,会有很多种图标,但是图标的功能不一样,所表达的内容也不同。

图标内容的统一会让用户明白相似的图标所代表的的功能也相同,而且在视觉上也更加和谐美观。因此我们在绘标后还需检查线条的粗细比重,边角的大小,配色方案,细节层次和设计元素在整个合集中是否是不变且一致的。

以上就是图标绘制的技巧的相关分享,希望对大家的学习有所帮助,想要了解更多UI设计相关内容,欢迎大家及时在本平台查看哦!

在 UI 的设计体系中,图标是最重要的组成部分之一,是任何 UI 界面中都不可或缺的视觉元素。了解图标相关的概念,以及正确绘制的 *** ,是入门 UI 设计的必备条件。

大多数初级的 UI 设计师,始终画不好图标。针对这个问题,我希望用自己的经验讲清楚图标设计的所有要点和具体的设计 *** ,希望能帮到入门的设计师。

分为以下5个部分:

1 图标设计详解: 先对图标有个整体的认识,了解图标总共有哪些类型和应用场景。

2 工具图标设计: 最常见的工具型图标的相关规范,以及对应的设计案例演示。

3 装饰图标设计: 近年来使用越来越广泛的视觉型图标设计认识,以及对应的讲解。

4 启动图标设计: 讲解启图标的相关规范,如何高效的进行设计。

5 图标应用详解: 介绍在一个UI项目中,要应用多少种图标规格,并如何设计出正确的图标

图标,是一种图形化的标识,它有广义和狭义两种概念,广义指的是所有现实中有明确指向含义的图形符号,狭义主要指在计算机设备界面中的图形符号,有非常大的覆盖范围。

对于 UI 设计师而言,我们主要针对的就是狭义的概念,它是 UI 界面视觉组成的关键元素之一。

在当下最常见的扁平化设计风格中,界面的实际视觉组成只有 4 种元素,、文字、几何图形、图标。

可以说,、文字、几何图形的运用,都只用到排版的技巧,而图标,是 UI 设计中除了插画元素以外唯一需要我们 “绘制”、“创作” 的元素,一涉及到这两件事,难度就直线上升了。

图标可以以一种更高效的方式,将我们想要传递的信息进行浓缩,不仅易于识别,也能让界面更简洁,利于排版,比如下方案例。

既然知道了图标的作用和重要性,那么接下来,就要进一步了解在工作中我们要设计哪些图标。

可以先划分成三种大类:

• 工具图标

• 装饰图标

• 启动图标

下面,我们将为对它们分别进行介绍,以及展示相关的设计类型,方便读者在开始学习具体设计前,对 UI 设计会创作的图标有更全面的认识。

1 工具图标

首先,我们要说的是工具图标。这是我们在日常讨论中提及最频繁的图标类型,即应用内有明确功能、提示含义的标识。作为最常见的图标类型,我们就不需要做太多的说明了。

虽然理解起来容易,但是它所包含的设计样式却并不少,可以把它们归纳成线性、面性两个大类,再分别进行细分。

风格1:线性风格

线性图标,即图形是通过线条的描边轮廓勾勒出来的!多数人对它样式认识的之一反应应该是使用纯色的闭合轮廓,比如上图案例,线性图标的创作空间看似不多,但实际上有非常多的调整空间。

下面我们把它们统一罗列出来。

风格2:面性风格

面性图标,即使用对内容区域进行色彩填充的图标样式。同样,在这类图标中,也不是只能应用纯色的方式进行填充,还有非常多的视觉表现类型。

2 装饰图标

和工具图标比起来,装饰图标的视觉性作用更多。对于一些比较复杂的应用来说,过分的简约并不能弥补信息过多的信噪问题,我们要通过丰富视觉体验的 *** 来增加内容的观赏性,减少一屏内显示内容的数量。

比如在分类列表里,是可以只使用线框和文字把大量内容浓缩到一屏以内,但实际浏览效率并不会增加,而且并不美观。

还有,就是国内的界面设计环境,会根据运营的设计需求进行特殊化处理,尤其在电商领域,首屏的图标都会改成首页风格的样式,增加活动氛围。

装饰性的图标设计,虽然没有明确的规范该怎么做,效果怎么好怎么来,但最常见的类型有四种,下面分别进行介绍。

扁平风格

扁平风格的装饰图标,通常可以理解成是用扁平插画的方式画出来的图标,除了继承扁平的纯色填充特性以外,也相对于普通图标有更丰富的细节与趣味性。

5D 风格

25D是一种偏卡通、像素画风格的扁平设计类型,在一些非必要的设计环境中,使用 25D 会比较容易搭配主流的界面设计风格,有更强的趣味性和层次感。

实物贴图

最后一种,就是采用了真实摄影物体的设计风格。虽然它不属于完全依靠我们创作和绘制出来的,但想想还是放进来合适。因为这种图标的出现频率非常高,有必要再后面掌握它的做法。

3 启动图标

最后,就要说说启动图标了!启动图标的设计比前面两种类型的图标说起来更难,因为它实际上就是把  “LOGO嵌套进系统图标模版”  的图标。

除了必要的规范掌握以外,启动图标的主体物设计就是 LOGO 的设计,已经超出了图标绘制本身的知识点。

当然,还有其它的数之不尽的启动图标设计方式,比如摄影图、游戏原画等,但理解上面这些类型就够了!

前面介绍的三种图标,就是今后在进入 UI 行业设计的内容。虽然图标看起来简单,但可以玩出的花样不少。除了正确设计出图标以外,高低阶的 UI 设计师之间的区别也包含图标设计类型掌握的多寡。

所以,在开始学习前,不要将设计图标的目标局限在最简单的图形绘制上,还有很多有趣的设计形式等待大家去尝试。