UI最重要组建之一就是图标,随着扁平化设计的发展趋势,越来越注重图标的简洁与寓意表达,平面图标已占主导地位。

什么是图标?

图标正确打开方式是这样的!

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

图标的分类

按功能分类图标分为:

1、启动类图标

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

2、系统图标

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

按设计形式分类分为:

1、扁平化图标

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

2、拟物化图标

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

图标设计原则

说完图标的分类之后,我们来说说设计这些图标,我们需要去遵循什么原则呢?

1、可识别性原则

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

2、差异性原则

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

3、统一性原则

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

4、尺寸大小尺寸与格式

图标一般有以下几种尺寸:

ios

Android

图标有以下几种格式:

png , jpg ,svg

图标UI设计初级技法

1. 多用布尔运算

做图标时,能用基本图形进行布尔运算的时候,尽量不要使用钢笔,这样做的好处有如下三点:

1)让你的图标更加规范

2)对图形结构理解更加深刻

3)后期更改形状更加方便

如果使用钢笔直接去画,其实我们很难画的特别规范,而且后期调整也很麻烦,最正确的方法就是去思考他的结构,这样一个外形是否可以使用基本图形进行组合来实现,在经过思考与尝试后会发现,其实他是用一个圆形和三个矩形组合而成的,如下图:

2. 图形的比例关系

图形内部结构要注意元素构成之间的比例,有黄金比例分割也有感性的平衡方法。严谨的图标比例可参照苹果IOS图标规范案例,打好内部统一结构线进行图形绘制和比例分配。

3. 图标的识别性

图标识别性分:可辨识性和区别性,这本身就是一对矛盾体,我们在实际操作时就是不断解决矛盾的过程。

设计师们有时会过于注重形式,忽略了本身的功能,导致图标难以识别,这打破了它最重要的图形意象属性—图标的传达含义功能必须放在首位。 图标设计理念的本质是减到最简形态-简化图标是出于降低学习曲线的需要;良好的用户体验可以定义在很多方面,但衡量标准之一是减少了多少用户思考的成本。清晰是一个 好界面的最重要特征。

4.图标的美观性

1)图标的风格统一、整体性强

2)传达含义清晰、准确、容易记忆

3)有一定的主题文化蕴含其中

有主题性文化的图标,一般更具备娱乐性和欣赏性。是的,图标设计本身也是有故事性的,在单独的个体中体现出“道具”的概念,更容易引起用户的兴趣。

因此,作为专业视觉设计师的你,在时间充足的情况下,千万不要去网上下几个图标直接拿来用,你会上瘾的,并且也会被一些行内人进行批判,因为他们很容易就能看出来你做的图标是直接在网上下载的,比如下面这样的图标:

我们在做系列图标的时候,一定要在前期给图标设定一个风格及原则,使之看起来与众不同,例如下面的图标:

一眼看上去,我们就可以看出上面图标的特点,线条是断开的、所有的图标都是一笔画出来的,这些都可以让你的图标变得与众不同。再比如你也可以从颜色上做文章,如下图:

其实方法还有很多,大家可以多多尝试与创新。

如何把不同尺寸ico格式图标_还在为图标设计犯难?这篇告诉你图标设计so easy!...相关推荐

  1. 如何把不同尺寸ico格式图标_iConvert Icons——图标创建转换工具

    iConvert Icons for mac是Mac os平台上的一款帮助用户制作图标的Mac软件,iConvert Icons for mac图标现在可以创建和从几乎任何格式转换图标的最简单的方法. ...

  2. css加号图标_一个标签的72变,打造一个纯CSS图标库

    每次要用到图标的时候都会到 icono 去copypaste,但每次用到的时候尺寸都各不一样,总是要调整参数,巨烦.当然你可以会想到用zoom.scale来做缩放,但是这样的缩放会使得线宽也变粗了,不 ...

  3. 实现 消息提醒图标_用了5年苹果手机都不知道,原来小汽车图标是这个意思 ! ! !...

    阅读本文前,请您先点击上面的"蓝色字体",再点击"关注",这样您就可以继续免费收到文章了.每天都会有分享,都是免费订阅,请您放心关注.注图文来源网络,侵删 用了 ...

  4. 如何设置自定义任务栏图标_如何为任何应用程序自定义Windows 7任务栏图标

    如何设置自定义任务栏图标 Would you like to change out the icons on your taskbar with a beautiful set of icons th ...

  5. 把svg图标制作成字体图标_让我们用SVG符号和CSS变量制作彩色图标

    把svg图标制作成字体图标 by Sarah Dayan 通过莎拉·达扬 让我们用SVG符号和CSS变量制作彩色图标 (Let's make multi-colored icons with SVG ...

  6. vc 隐藏桌面所有图标_如何在Windows上隐藏或取消隐藏所有桌面图标

    vc 隐藏桌面所有图标 If you like a clean desktop, Windows can be a little obnoxious. Many programs you instal ...

  7. 手机号正则表达式验证_还不会正则表达式?看这篇!

    前言 正则表达式是很多程序员,甚至是一些有了多年经验的开发者薄弱的一项技能.大家都很多时候都会觉得正则表达式难记.难学.难用,但不可否认的是正则表达式是一项很重要的技能,所有我将学习和使用正则表达式时 ...

  8. 含半透明像素的PNG如何转换ico格式文件

    进入6月就一直忙,专栏的文章也迟迟未更新,这篇拖拖拉拉的1个月才写完.是实际工作中遇到的问题,总结下来,万一其他的UI设计师遇到了,就可以少走弯路. ico文件是图标文件格式,UI设计师一般都做过这种 ...

  9. ico格式的计算机图标,ICO(Windows的图标文件格式)_百度百科

    ICO (Windows的图标文件格式) 语音 编辑 锁定 讨论 上传视频 ICO是Windows的图标文件格式,图标文件可以存储单个图案.多尺寸.多色板的图标文件.一个图标实际上是多张不同格式的图片 ...

最新文章

  1. 兆比特每秒和兆字节每秒_号称100兆、200兆的宽带,为什么实际下载速度只有几MB?...
  2. python怎么安装requests库-Python3.6安装及引入Requests库的实现方法
  3. 【小松教你手游开发】【unity实用技能】给每个GameObject的打开关闭加上一个渐变...
  4. DataView数据视图的使用 winform
  5. apt-get 与 apt-cache使用
  6. python按行读取excel文件_python3读取excel文件只提取某些行某些列的值方法
  7. C#学习基本概念---xcopy(复制文件和目录树)
  8. iOS获取label的高度模仿博友
  9. 谷歌语音识别功能Live Transcribe,让AI帮助语言障碍者“说话”
  10. 海淘第一单——KindleTouch
  11. kali foremost 分离文件_只需 1 分钟,这个网站用 AI 分离歌曲的人声、伴奏和乐器声...
  12. dlna 斐讯r1怎么用_挽救智障——斐讯R1:固件升级、安装DLNA和Soundwire
  13. 12月Java原生商城APP源码-完全开源
  14. 在精简版的xp添加删除程序里面没有IIS的解决方法
  15. MIKE水动力笔记3_岸线及水深数据之根据遥感影像绘制岸线的方法
  16. Swift:一天学会,三天写项目
  17. springMVC-RESTful约束下dispatcher拦截对象优化
  18. 293、Java中级10 -【多线程】 2020.03.31
  19. Apache Zeppelin安装和启动
  20. 服务器挂起文件怎么删除,挂起的更改

热门文章

  1. vscode配置anaconda3
  2. CRNN竞赛程序实现过程
  3. 训练大规模语音数据集后的结果分析报告
  4. 神经网络最容易忽略的问题影响了网络的性能(图像识别)
  5. C语言引用不同路径下的头文件的方法
  6. Invalid icon file 原因
  7. 详解基于朴素贝叶斯的情感分析及 Python 实现
  8. 面包好吃却五毒俱全,吃前请三思!
  9. IOS --自带二维码扫描
  10. 《搜索引擎-信息检索实践》7.2.1 分类应用与检索/BM25检索模型