繁體中文当前位置: 首页 > 图文教程 > 网页制作 > 心得技巧 > 网页设计中图标与网页内容的组合设计
- 心得技巧
- 品牌网站的交互设计分析
- 设计参考:40个about-us网页设计实例
- 网页设计理论:面包屑设计
- 移动版本的电子商务网站:首页和导航设计
- 移动版本的电子商务网站:搜索和目录页设计
- 设计心得：网站搜索的用户体验设计
- 总结网站导航怎么设计才好呢？
- 40个漂亮的应用插画风格的网页设计实例
- 网站设计风格:logo和导航的设计
- 网站设计实例:网页二级导航菜单处理案例
- WEBJX收集相当不错的邋遢风格的网站设计实例
- 14个杂点和粗糙背景风格网站设计实例
- 设计欣赏:50个非常漂亮的Flash网站
- 10个有用的网站界面设计技术和最佳做法
- 10个在文字排版/网页布局中的常见错误
- 设计参考:定义和理解上下文语境
- 关于格言引用设计的创造性的例子和最佳做法
- 网页设计中图标与网页内容的组合设计
- 37个很棒的旅游行业网站设计
- 72个电子商务网站产品价格列表设计实例
心得技巧 中的 网页设计中图标与网页内容的组合设计
出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-10-01 浏览: 261 ::
收藏到网摘: n/a
为什么要使用图标？设计是为了交流：如果你正在分享的信息不能留住访问者，尽管它是多么的重要或多么的令人激动，这一点都不重要。大多数用户最初浏览网站的时候，他们首页扫视页面上视觉上感兴趣的内容，只有在一些内容引起了他们的注意，他们才将开始阅读。图标是吸引用户浏览你网站内容的一个简单而且有效的方式。
图标和段落分隔有同样的心理作用：他们从视觉上分开内容。一个内容格式好的页面，图标可使文字形成段落和突出重点，这样即容易阅读同时有趣的视觉效果足以长时的吸引用户的注意。
在这个篇文章中，我们展示了在网页设计中使用图标来支持内容的漂亮的例子和最佳做法.
1.怎样去使用图标
使用图标的首要目的是帮助用户更有效的注意和处理信息。通常的做法是使用许多空白和不分散注意力且能增强效果的图标。使用图标甚至可以使极小内容变得更丰富。不需要更多的语言就能进行有效的沟通。图标应该用来提醒注意你的内容，而不是减弱或取代它。
突出功能清单
呈列服务是有效营销中一个实用的且必须的部分。但是列表本身是无聊和乏味的。图标结合你的功能清单将使它们更有吸引力。
在一个web应用程序中，提醒注意新功能
图标是鼓励用户去尝试你网页应用程序中最新最好功能的一个视觉上的邀请。图标应当获取用户的注意，并且把他们指引到新功能上去。一旦你抓住他们的注意力，就告诉他们新功能是多么的好。
列出不同的应用和产品
在这种情况下，思考作为一个标识的图标，记住：一个标识的目的是在产品和一个特定图片之间建立心理上的结合。图标应当是独特且简单的：大多数图标是128*128px,使用一个简单抽象的方式，虽然小但能表达更多的意思。
列出你的服务，并增加可读性
图标应当设计简单并且切题,在此之上去考虑你要表达的内容和你要创建的图标。网站或文章的主题是什么？使用了什么颜色？是什么风格？现代？经典？图标应当使网站的内容和个性要传达的思想在视觉上形成统一。
2.目的和摆放
图标使你的网站更友好、吸引人和专业。甚至展示你所关心的最小的细节。用你的图标来增添创意：把它们放置在标题，侧边栏，功能特色清单最好的位置。
用一个创意效果来强调标题
一个简单的图标能给一个网站添加一些吸引力和个性。
吸引读者阅读详细页面
用一个图标能概括你在段落中正在试图包含的几点。这将使文字更容易传达给你的读者。
偏离标题和章节
用图标去提供一个在不同章节文字间的视觉分离点
尺寸不是问题！甚至小图标也能起到效果
小图标和大图标一样也能起到同样的视觉兴趣效果，而且不分散注意力。确保图标是容易辨认并且相当靠近他们正在强调的内容。
通过在段落的右侧放置图标来关联事情
在放置图标的事情上不要被老常规绊住了脚，将图标放在右侧是不常见，但它将因此有更吸引人的视觉效果。请注意，虽然这么说，但是这个地方有时还是可能引起混淆的。
不同大小和尺寸的图标
发挥创意，改变尺寸和位置将使内容呈现更多的活力和兴趣。
3.选择你的风格
说到风格，目的是为了有效。假设如果你的设计是独特,虽然原创的图标是好的，但让它有效更重要的多。记住，图标是用来充实你的内容和设计，注意怎样使你的图标和你的网站相配匹才是最重要的。不要单纯的从iStockPhoto购买看上去很酷的图标集。或多或少要考虑你的网站风格。
图标集的配匹也是至关重要的，使用不配匹的图标，无论它们单独看上去多么酷，这显然是一个设计错误和很外行的做法，这里有一些例子，图标有效的融入到他们各自的网站中。
使用亮一点的颜色和3D效果补充网站的外观和感觉。
简单是具有吸引力和实用的。如下所示：
用一个邋遢风格,不同的2D图标能增加一些深度
在活力和专业之间选择一个独特和一致的风格。
单色图标能帮助强调内容，不会分散注意力。
变换使用截图和简纯的渐变制作独特的图标。
不要使用看上去很酷的图标，选择真正配匹你的风格和商标的图标。
4.附加的例子
这里收集体了一些有效使用图标集的网站，希望，这些能给你启发一些灵感,在你自已的网站上。
Dallas Usability Professionals
评论 (0) All
