当前位置: 首页 > 图文教程 > 网页制作 > 心得技巧 > 网页设计中图标与网页内容的组合设计

心得技巧
IE8 Beta 1两个地方需要大家注意
提高网站性能中内容有关的10条原则
网页设计者应该从三个方面优化网页
Web 设计 实现干净代码的12条定律[图文]
网页设计必备工具 firefox Web Developer插件 CSS工具组教程
UCenter Home 站点添加统计代码
9款很棒的网页绘制图表JavaScript框架脚本
提高网站可用性的10个小技巧
网站维护页面的列表制作技巧
B2C 网站用户体验细节设计参考
收集12个实用的网页在线工具
设计参考 漂亮和原创的博客设计
收集25个知名网站标志中使用的字体
极尽简约的网站设计实例
个性化创意鲜明的网站设计实例(30个)
水平滚动的网站设计 小结
更受欢迎 更具创造性的深底色网页设计实例
有创意的关于我们网页页面设计
整洁漂亮的网页设计的4项原则
设计参考 WordPress建站成功案例

心得技巧 中的 网页设计中图标与网页内容的组合设计


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-10-01   浏览: 321 ::
收藏到网摘: n/a

为什么要使用图标?设计是为了交流:如果你正在分享的信息不能留住访问者,尽管它是多么的重要或多么的令人激动,这一点都不重要。大多数用户最初浏览网站的时候,他们首页扫视页面上视觉上感兴趣的内容,只有在一些内容引起了他们的注意,他们才将开始阅读。图标是吸引用户浏览你网站内容的一个简单而且有效的方式。

图标和段落分隔有同样的心理作用:他们从视觉上分开内容。一个内容格式好的页面,图标可使文字形成段落和突出重点,这样即容易阅读同时有趣的视觉效果足以长时的吸引用户的注意。

在这个篇文章中,我们展示了在网页设计中使用图标来支持内容的漂亮的例子和最佳做法.

1.怎样去使用图标

使用图标的首要目的是帮助用户更有效的注意和处理信息。通常的做法是使用许多空白和不分散注意力且能增强效果的图标。使用图标甚至可以使极小内容变得更丰富。不需要更多的语言就能进行有效的沟通。图标应该用来提醒注意你的内容,而不是减弱或取代它。

突出功能清单

呈列服务是有效营销中一个实用的且必须的部分。但是列表本身是无聊和乏味的。图标结合你的功能清单将使它们更有吸引力。

280 Slides

在一个web应用程序中,提醒注意新功能

图标是鼓励用户去尝试你网页应用程序中最新最好功能的一个视觉上的邀请。图标应当获取用户的注意,并且把他们指引到新功能上去。一旦你抓住他们的注意力,就告诉他们新功能是多么的好。

Coda

列出不同的应用和产品

在这种情况下,思考作为一个标识的图标,记住:一个标识的目的是在产品和一个特定图片之间建立心理上的结合。图标应当是独特且简单的:大多数图标是128*128px,使用一个简单抽象的方式,虽然小但能表达更多的意思。

Intridea

列出你的服务,并增加可读性

图标应当设计简单并且切题,在此之上去考虑你要表达的内容和你要创建的图标。网站或文章的主题是什么?使用了什么颜色?是什么风格?现代?经典?图标应当使网站的内容和个性要传达的思想在视觉上形成统一。

J. Alexander Woodworking

2.目的和摆放

图标使你的网站更友好、吸引人和专业。甚至展示你所关心的最小的细节。用你的图标来增添创意:把它们放置在标题,侧边栏,功能特色清单最好的位置。

用一个创意效果来强调标题

一个简单的图标能给一个网站添加一些吸引力和个性。

Coffeenatic

吸引读者阅读详细页面

用一个图标能概括你在段落中正在试图包含的几点。这将使文字更容易传达给你的读者。

Rackspace

偏离标题和章节

用图标去提供一个在不同章节文字间的视觉分离点

Defined Clarity

尺寸不是问题!甚至小图标也能起到效果

小图标和大图标一样也能起到同样的视觉兴趣效果,而且不分散注意力。确保图标是容易辨认并且相当靠近他们正在强调的内容。

Morgan Hayes

通过在段落的右侧放置图标来关联事情

在放置图标的事情上不要被老常规绊住了脚,将图标放在右侧是不常见,但它将因此有更吸引人的视觉效果。请注意,虽然这么说,但是这个地方有时还是可能引起混淆的。

South Creative

不同大小和尺寸的图标

发挥创意,改变尺寸和位置将使内容呈现更多的活力和兴趣。

Media Temple

3.选择你的风格

说到风格,目的是为了有效。假设如果你的设计是独特,虽然原创的图标是好的,但让它有效更重要的多。记住,图标是用来充实你的内容和设计,注意怎样使你的图标和你的网站相配匹才是最重要的。不要单纯的从iStockPhoto购买看上去很酷的图标集。或多或少要考虑你的网站风格。

图标集的配匹也是至关重要的,使用不配匹的图标,无论它们单独看上去多么酷,这显然是一个设计错误和很外行的做法,这里有一些例子,图标有效的融入到他们各自的网站中。

使用亮一点的颜色和3D效果补充网站的外观和感觉。

GoodBarry

简单是具有吸引力和实用的。如下所示:

CrowdSPRING

用一个邋遢风格,不同的2D图标能增加一些深度

Take the Walk

在活力和专业之间选择一个独特和一致的风格。

Squarespace

单色图标能帮助强调内容,不会分散注意力。

Studio 7 Designs

变换使用截图和简纯的渐变制作独特的图标。

Gist

不要使用看上去很酷的图标,选择真正配匹你的风格和商标的图标。

Treemo

4.附加的例子

这里收集体了一些有效使用图标集的网站,希望,这些能给你启发一些灵感,在你自已的网站上。

WP Remix

Subcontrast

Shoestring

Raka

Ruby Tuesday

Transmission Apps

Charity Water

Oypro

QBB Help

Euro Languages

Joomla Designs

The Designs

Midnight Apps

Mach 4

WordPress Designers

Holdfire

Wallpaper Script

Lee Munroe

Dallas Usability Professionals

Light CMS

Astuteo

Digital Mash