企业形象网站建设解决方案   |   集团公司网站建设解决方案   |    协会门户网站建设解决方案
您所在位置:首页 > 建站知识

网站设计

Website development

?能帮你在设计项目中用好小图标

发布时间:2017-01-13 09:46:14

TAGS:网站设计

能帮你在设计项目中用好小图标.jpgldy上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

图标是设计项目中几乎必不可少的一个组成部分,但是在图标的具体使用上,讲究并不少。 假如你曾仔细浏览网站,应该已经看过不少图标设计的实战案例。ldy上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

就例如近的AI教程系列当中,多数全是教你如何设计图标和小插画的:
ldy上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


ldy上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

1、强化视觉ldy上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

avenir-clinicldy上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

并不是所有的图片都能给客户带来惊艳的感觉,很多时候,图片也不足以撑起整个设计的视觉和形式感。ldy上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


ldy上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

这个时候,图标的重要性就凸显出来了。许多有趣的图标和图片结合起来使用,能够强化图片的内容,提供额外的信息,给予客户以交互的提示,从视觉、交互、体验三个层面对设计进行提升。ldy上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


ldy上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

以上面的牙医诊所的网站为例,整体的设计就颇为有趣,亲切,且充满活力。网页中的人物角色旁边的灯泡图标中,就加入了牙齿的元素,非常点题。网页左右侧的色彩对比也平衡了整体视觉,左侧偏白的部分和白色的图标相互呼应。网页其他的地方也合理地运用小图标来强化视觉。ldy上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


ldy上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

2、引导交互ldy上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


ldy上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

boone-wineldy上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

尽管有许多网页和APP模板中都会采用三栏式的图片+文字的布局,但实际上图标并不必需在特定的地方出现。ldy上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

图标本身是驱动整个界面交互性的一个关键元素,它可以出如今各个不同的地方,也可以结合视差滚动的设计手法,让图片随着滚动而不断运动,横跨多屏,引导客户与屏幕不停地互动。
ldy上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

Boone Selections 这个网站就使用各种图片展现了葡萄酒从生产到运输的流程,借助图标来驱动整个视觉,引导客户不停的滚动浏览。随着客户的滚动,图标和各种元素之间不断地进行互动。
ldy上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


ldy上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

3、使用动效ldy上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


ldy上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

sweet-punkldy上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

虽然我们看到的绝大多数的图标全是静态的,但是从来没有人规定死它们必须是静止的。那么,就让图标动起来吧!ldy上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


ldy上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

不过,动态图标的设计也应该是有规则、有目的的。优秀的动态图标的运动方式和内容应该是有关联的,同时它的运动速度应该是适中的,因为过快的变化或许会让客户猝不及防,但是太慢了又会让客户等待太久。控制好节奏,动效会非常的令人着迷。ldy上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


ldy上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

Sweet Punk 这个网站同样采用了灯泡这样的图标元素,但是和之前的案例不同的地方在于,设计师在其中暗藏了许多可用鼠标光标触发的动效。围绕着灯泡的三圈线条会缓慢的浮动,当光标靠近的时候会靠近光标,如同活物一样。而当光标移动到灯泡上的时候,其中的火焰会快速地闪动,速度非常快,和周围的动效形成速度差。ldy上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


ldy上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

4、创建图标集群ldy上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


ldy上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

bellaiconsldy上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

不同形状、不同风格的图标一旦成群结对地出如今屏幕上,总能带来不一样的体验。虽然这样的应用方式常见于图标推荐类的网站,但是它实际上有着更为广泛的应用范畴。ldy上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


ldy上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

你可以考虑将图标摆成不同的阵列,假如你想强化视觉,甚至可以将图标放大来使用。图标本身可以用作链接的如何,也可以单纯只是当作指引性的图片。图标集群可以用很多图标,也可以只包含两三个。如何使用,使用多少,更多取决于你的设计决策过程。ldy上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


ldy上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

使用图标集群的一个重要好处在于,它会让你跳出日常图标的使用窠臼,重新思考图标的使用办法。它的另外一个好处在于,你可以基于某个图标包来设计,也可以根据需求自定义。这个时候,你可以一边“玩弄”图标,一边做设计。ldy上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


ldy上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

5、结合流行元素ldy上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

icon-historyldy上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

图标是整个设计项目的诸多组成部分之一,它必需契合整个设计策略。仔细审视你所必需设计的内容和风格,再将图标和流行的元素结合起来,营造出适合现代风格的美学特征。ldy上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

图标的一大特色就是它的灵活性。它从形状到细节都可以充满艺术性,从手绘风到扁平化,从精致拟物到艺术化处理都很容易实现。一旦你确定了整体风格,设计一套风格匹配的图标并不是太难的事情。
ldy上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

而上面这个关于图标历史的网站就展示了多年来图标风格的演变,这个网站本身研究的内容就已经很酷了,更别说其中所承载的风格多样的图标了。这些图标所呈现出来的风格、色彩、使用办法和规格都非常值得研究学习。
ldy上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


ldy上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

6、稍加调整ldy上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


ldy上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

puds-coldy上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

虽然图标是可以自由设计的,但是许多特定功能、特定场合所能使用的图标好不要标新立异,例如社交媒体链接、搜索、购物车、导航箭头等图标。这些图标的基本特征是约定俗成的,太过“富有创意”的构思或许会毁掉它们的基本可用性。ldy上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


ldy上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

不过你可以在这些图标的样式上动脑筋。调整色彩、修改形状,甚至重新绘制。而这其中,主要的诀窍在于,保持基本的视觉识别度的前提下,加入一些独特的构思,确保客户不会质疑图标本身的含义。ldy上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


ldy上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

简单的修改本来能做的事情不少。将图标有针对性的结合你的整体设计来进行修改,让它们更加贴合你的设计和风格。优设的这篇进阶技巧文应该能帮到你:《提高可用性!6个新人进阶该学的图标设计小技巧》ldy上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


ldy上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

Little Puds & Co. 的网站就是这么做的。这个品牌色本身是玛卡龙绿,为了让网站的整体风格保持一致,设计师将社交媒体链接和搜索按钮的色彩都调整成了品牌色,这样保持了视觉的一致性,又不会质疑图标本身的功能。ldy上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


ldy上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

7、自定义手绘ldy上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


ldy上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

infinity-foodldy上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

图标本身可以视作为一个微缩的图画,虽然图标大多趋向于扁平风,并且其中相当一部分是采用线条勾勒的,但是图标本身还是能玩出很多花样的,尤其是当你想玩出属于自己的风格的时候。ldy上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


ldy上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

典型的就是采用自己手绘的图标,这样的图标通常很难划归到常见的分类中,但是他们有明显带有个人风格。手绘图标本身就是一种带有品牌属性的东西。ldy上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


ldy上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

所以,你可以参考 Infinity Foods 的设计。你可以打开他们的网站,看看他们全套的图标全是怎样设计的,这种个人风格浓郁的设计,本身就足以营造出区别于同行的特色。ldy上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


ldy上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

不过假如你想知晓那些扁平风线性图标是怎样画出来的话,这个教程就非常恰好你了:《AI教程!手把手教你绘制扁平化的线性图标》ldy上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


ldy上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

结语ldy上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


ldy上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

虽然图标设计或许是设计项目中被考虑的少的元素,但是它们或许是有趣的设计元素之一。一套精心设计的图标用好了,能给整个设计增色不少。ldy上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

原创不易,未经授权,严禁转载

原文地址:/i,72,7050,0.html

客户评价

更多+
  • 感谢特马资料qq群,系统提前完成,在整个项目周期内,特马资料qq群对待我们并不像是对待客户,更像是朋友一样,每一次,都能以专业的角度向我们提出更合理、更有效的解决方案,并快速、细致地完成我们的每一个需求,再次感谢以至诚之心做事的特马资料qq群团队。

    潘涛

  • 我是东方龙马集团,在云智家做了2个企业官网,服务态度超级好。假如想做网站,选择他家一定不后悔。性价比高,服务态度好。值得你的信赖!

    谭娇

  • 技术好,设计精良,操作便利,很专业!配套的服务和后续的服务都很好,网站封面堪称精品,运行方便,后台操作的简单。技术还会耐心教我,很好的特马资料qq群(上海)科技有限公司,建站很不错的。

    陈曦

  • 不错,价格比较合适,要点是响应速度蛮快,有什么难题都会马上给你解决,公司很满意,因为他们全是针对每个项目建了相应的讨论组,有难题可以再里面提出,人员分工到位,解决难题很及时。

    张经理

联系方式

工作时间:10:00-19:00
咨询电话:010-64758810
客服邮箱:net@cnlink.cc

服务领域

  • 网站定制开发
  • PC网站设计
  • 域名邮箱
  • 网站维护
  • 网站二次开发
  • 响应式网站设计
  • 虚拟主机
  • 网站优化
  • 网站设计开发
  • 创意设计
  • 云主机
  • 项目合作

合作伙伴

All Rights Reserved.©2010-2016 特马QQ群|资料网站京公网安备 110105019435 京ICP备123124426号
本网站设计已受版权保护,任何公司及个人不得复制,违者将依法追究责任,特此声明。法律顾问:上海市辉瑞律师事务所。
嘿,我来帮您!