电商资讯

手机图标的总结

日期: 2018-07-25 11:24 访问量: 类型:

对于自己做个总结吧,分享了自己做图标的经验。

前言

手机是人类进入信息化社会最伟大的发明之一,是科学技术发展的产物,在经历了通讯娱乐功能后,手机正以交互体验的身份被人们接受,手机图标作为最直观图形标识,其视觉设计呈现出的可识别性与美观性将作用于手机本身,影响用户对手机、对应用使用的持久性与好感度。

图标作为手机界面中的设计元素和交互控件,在人机交互中起到承上启下的作用。文章从图标的定义、风格、特征三个方面进行阐述,对图标做出详细的解释,以及对日常界面中常见图标进行分类并注释,以及如何利用图标的特征去绘制图标等。让我们制作出既符合审美又能体现人机交互的图标。

文章摘要

一、什么是图标

二、什么是手机图标

三、手机图标的风格

四、手机图标的特征

五、如何设计图标

六、总结

手机图标的总结

一、什么是图标?

图标是指具有代表意义的图形符号,能够快速传达信息,方便记忆。它可以引导人们行动,提醒人们注意或者警示。例如:紧急出口,注意行人,禁止吸烟等...

二、什么是手机图标?

手机图标不仅仅是一个控件,更是具有指代意义的符号,简洁的图形图像涵盖众多信息,并能让用户快速明白其所指代的内容,便于记忆,快捷传播。手机界面图标具有引导和标识作用。以其产生的作用来划分,可以将图标分为 功能图标 、 标识图标 。

功能图标是指用户可以通过功能图标的引导对界面进行点击操作,从而得到该功能页面跳转,或者功能触发等体验。界面的功能图标有:界面操作栏图标、界面主功能图标以及内容功能操作图标

界面操作栏图标

1.线与线图标

2.面与面图标

3.线与面图标

4.线面结合图标

5.动效图标

线与线图标:轻简干练,易识别和记忆

面与面图标 :视觉冲击强,易识别和记忆

线与面图标 :视觉冲击强,易识别和记忆,交互体验强

线面结合图标 :视觉冲击强,易识别和记忆,趣味性强

动效图标 :视觉冲击强,易识别和记忆,趣味性强,交互体验强

界面功能图标

1.系统功能图标

2.界面主功能图标

3.内容功能操作图标

系统功能图标:通过对该功能图标点击可以进行相应功能页面的跳转或者执行该功能操作。

界面主功能图标:界面活动以及主功能入口。

内容功能操作图标:部分产品界面内容区域的功能图标。

标识图标是对界面功能进行释义或者引导的图标。

1.功能标识图标

2.功能引导图标

功能标识图标:主要通过图标对该功能做释义和引导

三、手机图标的风格?

图标的风格大概可总结为 扁平风格 , 拟物风格 等风格。

扁平风格图标是将界面的图标抽象化、极简化和符号化。通过对实物进行处理和优化,做简化。代表有线性图标,面性图标等图标。

线性图标

1.圆角边图标

2.直角边图标

3.断线图标

4.复杂线性图标

5.双色图标

6.一笔画图标

圆角边图标:首先是受iPhone圆角风格设计的影响,其次圆角的东西能够让用户接受起来更友 好,体验更加便捷,并且能够适用于各个行业中。

直角边图标:直角的东西外形比较硬朗,坚固,结实。方方正正的图标让人看上去具备稳重感 因此此类图标被广泛的运用在金融领域。体验出金融的可靠性,让投资者放心踏实。

断线图标:在视觉平衡的原则下对图标的拼接处进行断线的设计。这样看上去可以让图标更个 性更具备趣味感。

复杂线性图标:复杂线性图标是指通过增加图标的某些局部细节,使图标更具层次性和个性。

双色图标:通过对图标的辅线或者关键线添加不同的颜色,让图标看上去根据有层次感。这种 简约的风格很适合年轻人的审美,同时也适合各类小清新产品。

一笔画图标:这是一种很独特的图标,每个图标都只使用了一根连续的线。首先需要设计师对 图标要有高度的总结能力和审美能力,画一根线很容易。但是画一根线既能表达 出图形的含义,又要具备良好的审美是需要功底的。这类图标很小众,不是特别 适用于界面,每个地方都比较完美的同时也降低了用户体验。

面性图标

1.线面结合图标

2.面性图标

3.双色面性图标

4.多色面性图标

5.半透明图标

6.渐变色图标

7.长投影图标

线面结合图标:它通过线和面的结合方法手法,既灵活、又具有表现能力。图标的整体以线为主 色块为辅。这样不仅能抓住图标的形体特征,又能丰富图标的细节。

面性图标:就实际物体的形状进行总结和提炼,这样的图标视觉冲击强。自苹果ios 11风格 以来,这样的图标被大量的运用到标签功能图标。

双色面性图标:对面性图标根据实际物体进行配色,又或许是处理过后的类似色,对比色。 这样的图标更具有感染力,也增加了趣味性。

多色面性图标:多色意思就是彩色的意思。可以通过颜色去表现出不同的层次。让图标看上 去层次更丰富,也更具有视觉冲击力。但是这样的图标不能适用于大众产品 或者大量的使用在界面中。它会不利于产品性的建设,也会影响到用户体验。

半透明图标:通过在图标的部分区域降低不透明度,或者在有色的背景下,将图标的辅形上做 不透明度,这样可以让图标层次感更强,更具有冲击力,一般运用在界面的主要 功能区域,或者手机主题。这种小清晰的设计符合当代的审美,也是当前最流 行的图标风格之一。

渐变色图标:渐变色可以是通过一种颜色去调整明度或者纯度,也可能是通过颜色到颜色的渐 变,通过这些方式体现出图标的层次感和立体感。但是需要具备对色彩的把握和 认识,不然用起来会适得其反。

长投影图标:长投影图标是扁平化设计的一种延伸。45°的长投影,这种风格可以让人想起 早期苏联海报和拼贴的马列维奇等人,其发起的现实主义成为社会主义唯一可 以被接受的设计风格。它能够更加引人注目。

拟物风格图标是将界面的图标利用一切装饰效果,诸如阴影,透视,纹理,渐变等手段再现原有物体效果,表现出真实世界的物体形态。通过对实物做优化,代表有轻拟物图标,拟物图标等图标。

轻拟物图标:通过对显示物体进行总结和优化。对图形添加渐变、投影、纹理等效果,让图标 更加丰富。

拟物图标:通过对真实世界的认识,能够让用户快速的理解它。它既有体积,同时也有质感。 虽然它很细腻美观,但是却直接影响到了用户体验。对人机体验没有帮助。加上 它的制作过程很复杂,工作成本高,文件占据内存大,慢慢的被扁平的风格所取 代。但是此类图标被运用到手机主题,和启动图标上面。毕竟还是有少部分人喜 欢这种情怀的东西。尤其是锤子手机就走这样的设计路线。

其他风格图标随着界面多元化的发展,界面的风格也趋向多元化。其代表有:2.5D风格图标、MBE风格图标、手绘风格图标。

2.5D风格图标:2.5D就是运用扁平的设计手法让图标能够在一个平面内带有立体效果,主要 利用物体的透视,让图标具有的体积感。这种图标创意新颖,突破传统,更 具备冲视觉击力,成为现在界面流行的趋势之一。

MBE风格图标:源自于2015年年底法国设计师MBE所创作出的图标风格,图标的描边起到了 对界面的绝对隔绝,突显内容,表现清晰,化繁为简。

手绘风格图标:这类图标的难度系数最大,它不同于拟物图标,他需要通过对现实物体的处 理加上自己的想法将它重新绘制出来!不仅要懂素描基础原则和对色彩知识 的以及物体光影的处理,还要有扎实的美术基础以及手绘功底。通常这类图 标多用于游戏界面中。

四、手机图标的特征

一套成熟的图标,需要具备 统一性 、 识别性 、 审美性 这三个属性。

统一性是指界面图标的风格统一,大小统一,配色统一。

风格统一:是指界面图标的风格要统一处理,并且对整体图标的大小和细节调整,让其看起来,更统一更合理。

大小统一:是指相同属性的图标视觉大小要统一,而不是设计中的物理尺寸大小统一。我们知道同样大的正方形、长方形,三角形,圆形是不一样大的,所以我们要确保它的视觉大小统一。在界面中的图标也是一样的。我们必须遵循同样的原则。现在我们以48*48像素,长方形、正方形、三角形、圆形做范例。

颜色统一:是指图标区域的配色需要看上去统一,我们可以调整颜色的明度和饱和度。

识别性是根据图标的释义进行总结,归类和定性。抓住物体的特点,进行优化处理。好比男厕和女厕,首先我们会将所有的人分成男女,然后通过针对男人和女人的外形,服饰,和其他特点等进行设计。

审美性是指人通过对图标的理解和分析,客观的对图标的大小,比例,颜色等进行处理。比如尖锐的东西会让人觉得不友好,平均的东西看久了有些呆板的意思,过于饱满的东西让人觉得透不过气等。

五、如何去设计图标

设计图标的四个步骤, 定义 、 提炼 、 绘制 、 调整 。

定义首先我们要确定做什么类型的图标,哪个模块的图标以及多大的图标。然后结合公司品牌和产品做延展。tab区域图标还可以直接使用LOGO图形或者使用LOGO品牌色,这样可以让品牌性更强。

tab图标定义

1.公司LOGO图形

2.公司LOGO品牌色

公司LOGO图形

公司LOGO品牌色

其他图标定义

其他图标大都可以根据产品定位,以及根据图标的释义做延展。就音乐做个范例。

提炼提取物体独有的特点,让图标更具有识别性。然后简单的表达出来。

绘制我们可以提前将图标大概的绘画在纸上,去整套的构思每一个图标。然后通过专 业的软件将其按照界面规范实现。

在界面中我们我们要保证整体性,确保统一视觉大小的图标。

不同物体的视觉大小不一样,所以我们要统一的去调节。

调整首先我们把绘制好的图标,整体的去调整。对每一个图标的细节进行修改和调节, 确保能达到一致的视觉大小和视觉平衡。

六、总结

首先,我们要知道图标设计是界面的基础,它不仅是考验设计师的基本功,同时好的图标设计能够提升用户体验,能够强化品牌独特性。

其次,我们在做图标设计的同时,也应该知道不同地方的图标表达手法也不一样。漂亮的设计固然重要,但是我们不能忽略它是否能够准确无误的表达它的作用。

最后,此篇文章只是个人总结,可能有很多方面没有考虑周全。希望大家仁者见仁,智者见智。欢迎大家指正交流。

淘宝网合作伙伴奖

商家后台金牌淘拍档

年度金服务合作伙伴