图标的设计-高度浓缩的图形

 人参与 | 时间:2010年11月01日 09:45

如果你想给网站折腾点什么,对代码、CSS不精通的朋友,那么试试增加、修改点小图标吧,一款简约的网站风格最适合在图标上下点功夫。

在Web2.0刚流行那段时间,网页的无框架、无色彩(纯白色)的网页设计叫个性、潮流,在近几年,网页如果还是一堆没点缀的网页,叫雷同。现在,简单、大气的网页是流行的趋势,博客亦是如此。而在网页设计里表达出的细节就是图标。如下图所示,2000-2005年左右比较流行的个人网站和一个用图标表现网站的对比图。

图标的设计-高度浓缩的图形 建站教程 第1张

(2000-2005年国内典型的个人网站——阿江守候)

图标的设计-高度浓缩的图形 建站教程 第2张

(用静态图像表现内容的概念)

在此之前卢松松先讲讲图标的概念:在很久很久以前(其实就是几年前),用像素逐点逐点地进行绘制图标是最好的选择,这是因为当时的计算机性能并不高,使用像素可以节省图标的体积,也便于快速读取。早些的操作系统使用的都是像素图标(包括现在使用的大部分手机和mp4等)。例如下图:

图标的设计-高度浓缩的图形 建站教程 第3张

(早些的操作系统使用的都是像素图标)

当然这样的也很有魅力,但现在的操作系统所能支持的图标格式(如PNG)已经可以实现多通道透明渐变了,也就是说,你可以给图标加上阴影甚至模糊的效果。而在windows vista出现后,PC支持的图标尺寸达到了256*256像素。包括我在内,很多人都使用photoshop或illustrator来绘制大尺寸图标,而且能通过缩放得到不同尺寸,像素图标就不行了,不同的尺寸都要设计师一个点一个点逐一绘制)。

对于网页设计来说,图标只是图片而已,他的格式通常是gif、jpeg或png,总之只要能在浏览器中显示就行。所以你可以随意使用像素或写实的风格。当要注意的是,想要给网站搭配出特色个性的风格,选择(或制作)优秀的图标还需要注意一下几点:

一:不要“词不达意”

图标必须要适合所代表的意思,最理想的情况是,在没有辅助说明文字的条件下,用户仍然能理解什么意思。

图标的设计-高度浓缩的图形 建站教程 第4张

百度中的“地图”、“百度统计”、“百科”、“MP3”等等,但也有少数几个的含义不那么明显,“搜索开放”、“手机”、“网站导航”。也许你通过旁边的文字就能明白这个栏目的含义。

二:小而简单

图标应当小而简单,应该让用户一目了然,它们毕竟是辅助元素,所以不能设计得过大,更不能喧宾夺主,占据显要的位置。另一方面,网页设计本身特征也不赞成我们使用大图片。

“一目了然“的意思是,你需要让用户能够理解它们的含义,并且能够毫不费力的区别不同图标。这个道理很简单,如果每个图标看起来都差不多,就仅仅是个图案而已,就没有任何的辨别性和指向性。

下面推荐几个我常去的的图标下载站:

站酷图标下载

站长之家图标库

创意在线PNG素材库

素材中国图标下载

桌面天下图标库

 

顶: 0踩: 0

来源:,欢迎分享,(QQ/微信:13340454)