网页设计技巧:设计精美网页图标技巧

文章描述:满足四大要素!让网页设计中图标更有吸引力。

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

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

图标在网页设计中的作用

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

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

作为概念的视觉参照物,快速引导用户:这在导航元素中最为常见(上图)——比如放大镜代表搜索——非常简单,有时候连文本注释都不需要。
效果突出,因此图标被广泛使用。因此可以在网页设计几乎每个元素中都找到图标的身影:标题、脚注、导航条、列表;图标可以大幅提升页面中元素的浏览效果。

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

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

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

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

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

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

对于一组风格不统一的图标,即使某款图标设计的再棒,也要放弃。视觉统一,关乎到整体设计。
如何实现视觉上的统一?这里有一些小技巧,包括:

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

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

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

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

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

一定限度的自由组合

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

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

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

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

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

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

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

图标要简单易懂

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

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

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

时间: 2024-08-22 14:09:04

网页设计技巧:设计精美网页图标技巧的相关文章

网页设计中文字颜色的搭配技巧

技巧|设计|网页|网页设计|中文 对于做网页的初学者可能更习惯于使用一些漂亮的图片作为自己网页的背景,但浏览一下大型的商业网站,你会发现他们更多运用的是白色.蓝色.黄色等,使得网页显得典雅,大方和温馨.更重要的是,这样可以大大加快浏览者打开网页的速度. 一般来说,网页的背景色应该柔和一些.素一些.淡一些,再配上深色的文字,使人看起来自然.舒畅.而为了追求醒目的视觉效果,可以为标题使用较深的颜色.下面是我做网页和浏览别人的网页时,对网页背景色和文字色彩搭配积累的经验,这些颜色可以做正文的底色,也可

高手传经 网页设计中的几个小技巧

技巧|设计|网页|网页设计 如上图是Relen的个人主页Relen.com,2004版的首页发布信息,尤其是过年前后,利用雪花来点缀页面是非常合适的.注意这里面的雪花的摆设位置是有些技巧的,你可以考虑用黄金分割来支配你的设计思路,以达到合理.舒适的效果. 先排列文字,运用两到三种不同的字体,绝大多数文字对齐左侧,而其中一行突出,形成错落有致的感觉.文字的大小需要调整,主要信息文字大写,字体突出.而其他根据信息主次和平面设计的要求等多种因素进行排列.个别地方使用斜体加强,或用加粗的形式明示. 字体

CSS标准网页设计UL和DIV使用的技巧总结

css|标准|技巧|设计|网页|网页设计 了解结构化CSS设计内容,首先看下面两个例子: <div id="nav"> <ul>  <li></li>  <li></li>  ...... </ul></div> 很多人,包括许多业界大牛,都建议你这样写即可: <ul id="nav"> <li></li> <li><

网页设计中制作Flash站点的技巧

技巧|设计|网页|网页设计|站点 根据Macromedia 顶级Flash设计者,开发者以及可用性专家的建议,我们收集了创建一个具备可用性的Macromedia Flash站点的十大技巧. 这些技巧只是一个开始,我们将继续提供更多的研究,学习与技巧. 1.记住用户的目标 用户往往带着目的访问一个站点,每个链接,每次点击都要合乎他们的经验并且引导他们通向他们的目标.当传输你的页面时,应该让关键的导航链接首先装载--万一用户想转到网站其它的区域.模仿通常的用户图形界面往往可以增加可用性. 2. 记住

设计网页页脚的15个超实用技巧

  编者按:说个事儿,之前打开某"设计工作室"的网站,木想到界面惨不忍睹,缓过神来又注意到页脚设计都没有链接,惊呆后留意了一下,发现很多专业设计师有时也会草草对付页脚设计,所以今天特意把这篇文章分享出来,集合了全部页脚设计的15个设计技巧,来学习咯! 你网站最重要的部分之一就是页脚.是的,我是认真的.这里也许并不适合伟大的设计或者令人印象深刻的内容会存在的区域,但这里是用户寻找信息的地方.所以在设计网站项目时候也不要忽略这个地方. 但是你需要在这里包含哪些元素?如何组织页脚的内容使其不

PS渐变叠加效果设计图标技巧

 PS渐变叠加效果设计图标技巧 1.新建一个800*600像素的白色背景 2.选择钢笔工具,勾画路径,绘制选区,双击图层样式,添加渐变叠加的效果,选用黑白渐变,如图 3.再次双击图层,选择描边3像素,填充颜色为黄色,如图 4.再次进行粉色到白色之间的渐变效果,如图

设计出精美网页需要注意哪些

中介交易 SEO诊断 淘宝客 云主机 技术大厅 一位优秀的网页制作者应当不断追求完美的网页,那么如何将你的网页设计的更精美,更招人注意呢?那就让Uxsheji与大家一块分享交流经验.一篇成熟的网页是需要不断的去维护和不断的去更新的,在更新和维护的过程中要不断的为网页添加更多的图片.链接.对比.表格.动画,这些都是需要进行设计者们不断的去研究的. 一.独树一帜,力求不同 说到网页创新,就不得不从一开始的网页风格上进行研究,同时还要考虑到主页整体风格.颜色的搭配.页面的布局等诸多因素都可以进行创新.

网页制作高手进阶:网页设计中的文字运用

设计|网页|网页设计  如今,互联网越来越走近我们的生活,网上冲浪也渐渐成为我们生活不可缺少的一部分.网络世界五彩缤纷,涌现出大量优秀精美的网页.大量网络信息的呈现,无非就是通过文本.图像.Flash动画等,其中, 文本是网页中最为重要的设计元素.对于网页设计初学者而言,了解和掌握网页设计中的文字排版设计就显得尤为重要,下面笔者想谈谈一己之见.     文字的格式化     1.字号.字体.行距字号大小可以用不同的方式来计算,例如磅(Point)或像素(Pixel).因为以像素技术为基础单位打印

网页响应式设计的现状与趋势

网页响应式设计的现状与趋势 响应式设计的现状与趋势-banner720 从2012年开始到2014年,各大家对Web设计的趋势预测中,都提到响应式设计:2015年网页设计趋势预测中,响应式仍在继续.这个经历了几年依然大热的响应式,在过去的几年里,快速巩固了自己的地位,并掀起了一股网页设计新标准的浪潮.这里本人基于一些资料文献及自己的陋见,谈谈响应式设计的一些现状和趋势. 源起 2010年5月,伊桑.马科特(Ethan Marcotte)在"A List Apart"写了一篇开创性的文章