热线电话
13321960829

Website News

网站建设相关文章资讯

您现在的位置:
主页 建站资讯 网站设计百科
如何设计成套的界面图标?
发布时间:2018-03-23 08:43

 

如何设计成套的界面图标?

 

UI设计中图标的使用频率越来越高,尤其在终端屏幕尺寸越来越多的情况下,图标是一种抽象的符号,图标能代替文字向用户一致、高效地理解信息。

今天小编给大家总结一下设计整套图标的要点:

 

一、图标设计的一致性

 

界面中的图标一般都是整套设计的,风格和特征保持一对致。同样的功能和信息图标也保持一致的形态。

二、图标表达的意思要清晰


界面中的图标一定要准确地传达要表达的信息,能更快的告诉用户这是什么?如果图标复杂且无法表达这是什么?那么就失去意义了。

 

 

三、图形质量高,清晰,有创新


图标设计一定要图形质量高,换句话来说就是图形清晰、没有毛刺、干净,这样才能使界面看起来高品质。图标是界面的基础。在基础打好的情况下,
尽量加入一些独特的有吸引力的细节,类似现在很多的“情感化设计”

 

 

四、图标要易于扩展

 

我们在最初设计图标时应该定义好图标的视觉特征与延伸规划,让图标易于在原来的基础上扩展设计。

 

五、图标使用场景分类

 

1.图标使用场景分析

图标使用场景分析也要考虑分析好,不同的界面和场景使用不同的图标样式、尺寸等。比如个人中心里列表页使用的图标大小和频道页使用的图标大小是不同的。空白界面的图标
设计应该也是不同的。

01.承载的作用
例如一个播放器界面图标,播放图标是一个功能入口,最重要的作用是快速清晰的表达信息,告诉别人这个是播放。

02.重要性
功能图标重要性为播放器界面中的第一位,与其并第一位的还有暂停。并且要明白基次是返回,等图标。不同重要级别的图标设计的大小和视觉强度是不同的,要进行
明确的区分。

03.信息复杂度
播放器内容非常复杂,这个环境就决定了播放器图标设计要越简洁越好,以便可以区分。

 

04.扩展性、
大型APP会在大框架不变的情况下,加入很多小功能,或者版本更新,那么我们在定义样式时必须选择可扩展性的样式。

 

六、图形样式


图形样式是图标向用户传达品牌信息及产品调性非常重要的一部分。尽管网上很多可以参考的,但是设计图标时也为不能盲目。设计图标必须结合产品定位,设计
符合品牌调性和产品特性的图形样式。

 

以某视频播放网站频道界面图标为例,根据使用场景推导出频道图标设计的一些信息

a.频道图标作为每个内容频道的入口,重要且数量多,需要基于明确的规则进行设计;
b.所处界面信息比较单一,可容纳稍微复杂的样式
c.视频类目为不断扩展,并且以后还会增加类目

推导得出:
a.内容类目推展并且会以剧集为频道,意味着图标设计需要兼容剧集LOGO,在这种情况下基本可以排除线型
图标,用面来兼容LOGO样式

b.默认频道为60个,以后图标数会越来越多这是可以预见的。图标多,为了界面不混乱,可以推导出图标需要使用同色系的双色做为规则。

 

六、绘制草图


提炼好特征后,在纸上画草图是非常必要的。草图只是让我们脑海里的想法初步得到效果呈现,并不需要非常细节。

 

 

七、AI绘制

 

绘制过程就不好说明了,这里说一下重点。

1.定义图标输出的尺寸和视觉基准区域,这里我们需要建立形状基准线,也可以叫作参考线,参考区域。自己可以手动画,网上也有。

 

八、整体细节调整

 

图标单个设计好以后,我们把图标动作到实际中看。修改,整合。
看是否整体能达到一致的视觉大小和视觉平衡,整体一套放在一起,看一下效果。

相关文章

友情链接:上海网站建设公司 | 上海电商开发 |