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

心得技巧
用户需求导致营销型设计
制作网页应该注意的5个问题
网页心得:策划和设计
网页设计:脚本素材重构用户体验
个人看法:谈谈设计
utf8编码网页包含文件时前面有空行的解决
符合设计规范的设计是好设计吗?
网页设计教程(7):提高网页制作效率
论好的设计
网页设计教程(6):要保持设计激情
网页设计要有目的有思路和想法与坚持
网页设计也要先对网站有全面形象定位
网页设计色彩搭配宝蓝色的介绍
yahoo开发的网页评分插件YSlow的评分规则
网页设计教程(2):论摹仿和抄袭
网页设计教程(1):步骤和整体布局
目前流行的界面设计的十条规则
设计理论:以人为本的设计理念
web2.0产品以及功能简单介绍
网站建设的经验总结

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


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-10-01   浏览: 263 ::
收藏到网摘: 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