浅谈如何让网页设计中图标更有吸引力

YANGJINGSHIWO

YANGJINGSHIWO

2016-02-17 00:11

下面请跟着图老师小编一起来了解下浅谈如何让网页设计中图标更有吸引力,精心挑选的内容希望大家喜欢,不要忘记点个赞哦!

图标在网页设计中用途广泛,几乎每个网站中都存在着图标。通过这些小小的图标,可以方便的实现视觉引导和功能划分。如果选用恰当,图标能和页面中的图片有机融合,保持视觉上的一致性,同时也能够和整个网站的风格相契合。图标并不是华而不实的小玩意儿,小图标有大用处。在网页设计中,如果设计师并不擅长图标设计,那么就需要在图标选择上下功夫了。

浅谈如何让网页设计中图标更有吸引力,PS教程,图老师教程网

一般来说,根据使用手法、使用场合的不同,一张图像可以有多种解读,图标亦如此。图标不但能够吸引用户的注意力,还能分割页面中的区域,最为重要的事,图标能够提供一种视觉隐喻,能赋予物体某种含义,这样用户扫一眼便能知晓功能,因此,图标是一种提高用户体验的工具。

图标在网页设计中的作用

图标可以说是一种不稳定的视觉元素,因为图标包含了太多的意象,可以扮演不同的角色。一个铅笔的图标,就能代表很多意义,可以代表设计,也可以代表出售铅笔,也可以代表素描。图标最主要应用于:

浅谈如何让网页设计中图标更有吸引力,PS教程,图老师教程网

视觉上分割内容:让内容更具有吸引力和可读性。经常被应用到网站的主体、列表、或者其他文本较多的元素中。

浅谈如何让网页设计中图标更有吸引力,PS教程,图老师教程网

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/pmsj/)

作为概念的视觉参照物,快速引导用户:这在导航元素中最为常见(上图)比如放大镜代表搜索非常简单,有时候连文本注释都不需要。

效果突出,因此图标被广泛使用。因此可以在网页设计几乎每个元素中都找到图标的身影:标题、脚注、导航条、列表;图标可以大幅提升页面中元素的浏览效果。

优秀的图标具备哪些优点?

浅谈如何让网页设计中图标更有吸引力,PS教程,图老师教程网

我们不难发现,图标是优秀网页设计中不可或缺的部分,但如果使用不当或者图标设计的不到位,那么辨识度就很差,用户也难以理解。因此我们需要 外观精致、意味深刻的图标,比如上面这套就不错。

尽管图标设计说来话长,而且也比较复杂,但是图标对各种设计来说,都大有裨益。无论是何种设计,如果想要使用图标,那么必须记住下面这两点:概念传达完善、具备视觉有效性。

如何保持图标的视觉有效性?

图标能够很好的组织相关内容,吸引注意力,将用户引导至重要信息处,前提是,图标要与内容、其他图标、整个网站的视觉风格一致。

图标系列应该保持视觉统一

对于一组风格不统一的图标,即使某款图标设计的再棒,也要放弃。视觉统一,关乎到整体设计。

如何实现视觉上的统一?这里有一些小技巧,包括:

浅谈如何让网页设计中图标更有吸引力,PS教程,图老师教程网

使用相同的颜色或者配色,如上图

浅谈如何让网页设计中图标更有吸引力,PS教程,图老师教程网

将所有的图标设置为形状相同,如上图。

浅谈如何让网页设计中图标更有吸引力,PS教程,图老师教程网

边界属性要一致,如上图。

浅谈如何让网页设计中图标更有吸引力,PS教程,图老师教程网

效果要一致,比如说渐变、透明、阴影等效果,如上图。

浅谈如何让网页设计中图标更有吸引力,PS教程,图老师教程网

最后,还要考虑图标的视觉风格是否与内容、网站的风格一致。

一定限度的自由组合

浅谈如何让网页设计中图标更有吸引力,PS教程,图老师教程网

有时一款网页设计仅仅采用一套图标,但如果不够用,可以尝试采用多套图标,上图的This website,就采用了多套图标,只不过这几套图标的维度相同。而且这几套图标也不在一块儿工作,他们应用于不同的页面,彼此之间并无不和谐。只要熟练掌握这种变通的方法,那么图标的选择更加自由。

图标应该和网站整体设计相配

当然,图标与其他设计元素搭配的方法说不清、道不尽。但是从基本触发,有两种方法:

浅谈如何让网页设计中图标更有吸引力,PS教程,图老师教程网

图标与网站整体形成鲜明的对比: 当图标作为导航时,这种方法非常奏效,比如上图的社交媒体链接,更能够吸引注意力。

浅谈如何让网页设计中图标更有吸引力,PS教程,图老师教程网

图标的视觉风格要与整体设计风格相似: 像上图中的图标,与整个页面风格完美契合,提供了一种视觉上的和谐感。

如何用图标完善的传达概念

通过逻辑性和一致性来传达概念。

图标要简单易懂

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/pmsj/)

浅谈如何让网页设计中图标更有吸引力,PS教程,图老师教程网

每个人都有每个人的见解,图像的解释也不是绝对的,可能一部分人能够理解这款图标,另一部分人就不能。但图像的传达能力比文字强,比如说上图中的图标,就能清晰的传达含义。

浅谈如何让网页设计中图标更有吸引力,PS教程,图老师教程网

但有时候,设计师试图在图标信息图中添加复杂的概念,结果图标的混淆作用大约传达作用,比如上图。这种情况下,就需要做进一步的信息提炼,回归内容。如果还是无法解决问题,那么说明图标在此次设计中并不适用。建议多多了解一下信息图设计,这种设计就非常注重图标的概念传达。

网页设计发展迅猛,图标设计同样进步飞快。曾经无法用图标传达的概念,现今已经可以通过技巧来实现传达,图标成为了网页设计师的重要工具。立足基本,多进行实践与创新,相信你的设计会越来越充满艺术感,越来越易于理解。

展开更多 50%)
分享

猜你喜欢

浅谈如何让网页设计中图标更有吸引力

平面设计 海报设计 广告设计 画报设计 签名设计 服装设计 名片设计 画册设计 版式设计 商标设计
浅谈如何让网页设计中图标更有吸引力

如何让你的风光照片更有吸引力?

摄影 人像摄影 静物摄影
如何让你的风光照片更有吸引力?

什么是极简主义 如何打造极简风格家居

家居设计 装修设计
什么是极简主义 如何打造极简风格家居

男人认为瘦的女人更有吸引力

男人 女人 女性健康
男人认为瘦的女人更有吸引力

教你打造更有吸引力的移动产品

平面设计 海报设计 广告设计 画报设计 签名设计 服装设计 名片设计 画册设计 版式设计 商标设计
教你打造更有吸引力的移动产品

2017榻榻米书房设计装修效果图 榻榻米书房设计图片

榻榻米 书房 装修设计 书房设计 平面设计
2017榻榻米书房设计装修效果图 榻榻米书房设计图片

让风光照片更有吸引力的6个技巧

摄影 人像摄影 静物摄影
让风光照片更有吸引力的6个技巧

5个让风光相片更有吸引力的小技巧

摄影 人像摄影 静物摄影
5个让风光相片更有吸引力的小技巧

2017春夏女装风衣外套流行趋势

服装设计 平面设计 设计 服装搭配
2017春夏女装风衣外套流行趋势

浅谈如何尝试网页设计中不对称的美

浅谈如何尝试网页设计中不对称的美

金色版iPhone 5S和iPhone 5C的PSD模型素材

金色版iPhone 5S和iPhone 5C的PSD模型素材
下拉加载更多内容 ↓