最新消息:文章中包含代码时,请遵守代码高亮规范!

UI——图标风格【原创】

Android Shirley 368浏览 0评论

无论是PC端还是移动端的UI设计,图标的运用必不可少。

图标,用图形来说话;科学证明人对图像的记忆要远远大于对文字的记忆,“左脑负责:逻辑、语言、数学、文字、推理、分析;右脑负责:图画、音乐、记忆、情感、想象、创意”;图形和文字的结合更能加深印象,提升功能的应用性。因此在UI设计中对图形图像的应用还是蛮多的,这样既能增加产品的美观性,使产品不再死板呆滞,又能提升产品的应用便捷性,即交互的优化!

那么,图标的运用我们又要注意些什么呢?无论是网页还是APP,作为设计师大家都知道要使页面的设计风格统一,保证产品的整体性、连贯性,以及用户使用时的习惯性。因此图标的设计运用在视觉上最重要的也是风格统一。

图标设计风格有:线性图标、面性图标、填充图标(线面结合性图标)、扁平图标、手绘风格图标和拟物图标。

一、线性图标

线性图标,顾名思义是由或粗或细的线组合的图标,线性图标的运用要注意的是线的粗细要保持一致,角是否是圆角或者直角,如果有断点,断点是否一致。

线性风格的图标相信也是得到大多数设计师的偏爱的,它简洁大方,易搭配!2014年前后掀起了一片扁平化的风潮,线性图标也在扁平化的风潮上火了一把。

二、面性图标

面性图标,即用块状色彩拼合裁切而成的图标;其特点是代表性强以及醒目易操作。

在UI设计中,面性图标的使用也是相当广泛的,它不但色彩可以绚丽多样,对于用户来说也更加容易发现和操作,它与色彩的完美结合能够更好的向用户传达产品的主题信息,以及加深客户对产品的印象。

三、填充图标(线面结合性图标)

填充图标,即面性和线性图标的一次完美结合,去年突然盛行一时MBE风格图标就是线性和面性的完美结合,即体现了图标的功能性,又使图标变的更加活泼及亲近广大用户,极大的改善了页面的单一和呆滞!也促进了设计师对图标的进一步开发与应用。

 

MBE风格图标

在图标设计的创意趋于平淡的时候,一位网名叫MBE的设计师发布的他的作品,就是如下风格的图标,用线条,断点,鲜明色彩,图形点缀的风格,有的还带上了表情,十分可爱,在设计师的圈子里引发一股热潮,越来越多的设计师开始尝试这种风格的设计,并约定俗称的称之为MBE风格,后来还发展成了一些动效的MBE图标,甚至影响国内几大大流量APP的的改版风格。

四、扁平图标

自从14年左右扁平化的兴起,大家都知道似乎一夜之间所有的设计趋势都在向扁平化靠拢,扁平化,说白了就是二次元,去除一切复杂、冗余的东西,使设计不再厚重,而是更加的轻便简洁,上边说过线性图标在扁平化的设计中得到了很好的运用;那么,随着扁平化的发展,扁平图标也就应运而生,它是响应设计风潮的存在,其实扁平化图标与面性图标本质相同,只是扁平化图标更加的平面,拒绝一切渐变、投影、纹理、及特效。使页面更加的整洁干净。

五、手绘风格图标和拟物图标

手绘和拟物风格的图标,在近几年已经渐渐的在设计中淡化了,但是并不是说它消失了,在游戏等UI设计中还是比较常见的;手绘和拟物,大家从字面上也就大致可以理解到这两种风格的图标比较贴合实际,也就是更加注重对事物的还原。也就是从抓住细节、纹理、质感等特点来使图标达到逼真的效果!这两种图标的运用对设计师要求也就相对过高了,运用的不好很容易导致页面沉重复杂,或者更严重的是不伦不类。当然这两种图标的绘制也是有一定难度的!对于现在来说这两种图标在页面内的使用还是比较少的,更多的体现在桌面的图标上。

手绘图标

拟物图标

(部分图片来自网络,侵删)

 

转载时请注明出处及相应链接,本文永久地址:http://blog.it985.com/21959.html


pay_weixin
pay_weixin
微信打赏
pay_weixin
支付宝打赏
感谢您对作者Shirley的打赏,我们会更加努力!    如果您想成为作者,请点我

您必须 登录 才能发表评论!