您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

成长值达到300分以上才可以发布哟!~

先看看别人的即刻>

图标设计,原来这么多学问哦~

原创文章 分类: 经验/观点 版权:
1985 10 6 2
2019-04-11
11.7
普通推荐

很多萌新学习UI设计,都是从图标开始涉猎,把图标设计等同于UI设计,就认为UI设计师只需画图标即可,作为一个混迹10年的职场老兵发自肺腑相告,图标是UI设计很重要的模块,但绝不是全部,笔者作为国内较早一批从事UI设计的人,从网页设计转型过来,也是从临摹图标开始,为了撰写这篇图文,特别在我塞满了小电影的硬盘里找出来不少拟物图标,如下:Image titleImage titleImage titleImage titleImage title


搜索枯肠+百度+道听途说,我总结了这种拟物图标的特征:

充分运用物体的光影、结合PS投影、渐变、斜面和浮雕等图层样式,结合实物诸如木质、金属、塑料等材质,将图标写实化设计,将生活中司空见惯的物体搬到界面中,使得认知成本非常低,不论腐乳老幼在无需学习的情况下,可以轻松辨识。


很多萌新继续发问,现在学习UI设计,还需要临摹写实图标吗?

作为成年人的世界,任何事物都不是非黑即白的,凡事都有正方面,我觉得如果说你想画拟物图标用在项目中,那肯定是凤毛麟角的,像一些活动专题、游戏、儿童益智等产品,但是为什么要学呢?Image titleImage title


通过临摹,达到动手实操能力,要知道你是否有设计天赋,动手能力是非常重要的,还能培养观察能力,提升灵感。


一、图标的定义

图标是具有明确指代含义的计算机图形。其中桌面图标是软件标识,界面中的图标是功能标识。它源自于生活中的各种图形标识,是计算机应用图形化的重要组成部分。


二、图标的分类:功能图标、应用图标、装饰图标

1、功能图标

功能图标具有明确表意功能,是图形化的符号,用于替代或者辅助文字传达信息,使用户形成记忆思维,简化用户对复杂文字的记忆。


功能图标分为:

功能按钮图标(可点击)(交互性)

常用于导航、标签、操作

辅助展示图标(不可点击)

常用于数据信息,文字标题辅助、警告提示Image titleImage titleImage title


2、应用图标

软件应用的桌面启动图标,代表一个产品特色,充满个性,已引起用户注意,常用语电脑、手机桌面、APP应用市场Image title


3、装饰图标

装饰性图标用于渲染整个气氛,吸引用户,提升整个画面,不一定具有特定的功能特性,常用插画形式表现,常用于引导页、弹窗、活动专题。Image titleImage titleImage title


三、图标的风格

面形图标、线性图标、线面图标、扁平图标、拟物图标、微质感图标


1、色块图标/剪影

通过剪影的形式,概括性的展示图形外观Image title


2、线型图标

用线的形式勾勒图形外观,重量比面形图标更加轻巧,更加灵活。常见的有:

单色线条、彩色线条、断点线条Image titleImage title


3、线面图标

用线与面组合,通常用深色线条配浅色色块,图标设计更加丰富,更具情感,比较常见的有:

单色线面结合、多色线面结合、MBE图标Image titleImage title


4、扁平图标Image titleImage title


5、拟物图标

这部分图标可以回到本文开篇,这里就不在赘述了。


6、微质感图标Image titleImage titleImage title


四、福利赠送

通过这篇图文相信你对于图标多了一份认知,为了将理论结合实战,末了给大家赠送一些干货福利(精心整理的图标PSD文件),关注公众号转发此文即可获取哦~Image title


知行一教育

提供更优质的设计教程与服务

260粉丝/1关注

诲人不倦老马识途原创超人
就业之星—不想进BAT的设计师,不是好学生UI设计师如何应对职场寒冬
0
Life人生

这头像哪里像混迹十年的职场老兵

精彩!

知行一教育

知行一教育

提供更优质的设计教程与服务

诲人不倦老马识途原创超人

扫描二维码
去手机端查看海报

知行一教育

TA已经获得8枚勋章啦

  • 成就勋章

    • 特别勋章

    • 身份勋章

  • 已拥有

  • 作品

    创造者才是真正的享受者。

  • 经验

    经验是一所好学校,可它的学生却经常旷课。

  • 活跃

    大神都是从围观群众开始的

  • 拓展

    作品、经验、活跃还不能满足你?

京ICP备14007358号-1 / 京公网安备11010802014104号 / Powered by 2008-2019 UI.CN

Cw9sdfed

朕收下了