网页设计特技 使用图标来支持页面内容

  在做视觉设计时,如何高效地使用图标是一门学问:该使用什么样的图标?图标该放在哪里?大小如何?图标的使用是否帮助用户更好更快的理解内容,亦或是增加了他们的理解负担甚至产生误导?在本文中,我们将展示很好的例子和网页设计中使用图标来支持内容的最佳做法。

  为什么使用图标?设计就是传达信息:如果你的网站不能吸引用户,这个问题不在于你分享的信息有多重要、有多刺激。在访问一个网站的最初,大多数用户首先扫描页面来寻找视觉上看着有趣的内容,只有某些事物引起了他们的注意力,他们才真正开始阅读。图标是一个简单、有效的方式吸引用户阅读你网站上的内容。

  图标起着与分段一样的心理效果:在视觉上,图标打破了内容,使之不那么让人生却。通过图标将内容划分成几个容易理解的段落和重点,这样的页面很容易阅读,在视觉上也足够有趣以维持用户的注意。因此,不要再浪费时间写那么多无人阅读的内容了,开始使用图标吧!

  1.如何使用图标

  使用图标的首要目标应该是帮助用户更有效地吸收和处理信息。一般的做法是使用大量的空白和那些能增强内容的图标。图标通过给予内容更多的实质和有效的传达,能很好地丰富内容。图标应该用来吸引用户注意信息内容,而不是削弱或取代它。

  *让功能清单更有趣

  列出服务清单是有效的市场推中实用、必要的一部分,但本质上来说,清单是乏味和无聊的。在您的功能清单中使用图标将使其更具有吸引力。

  280 Slides

  

  * 吸引用户关注Web应用程序的新功能

  图标是一个视觉邀请,吸引用户去试用Web应用程序的最新、最强大的功能。图标应该捕捉用户的注意力,并引导他们到新的功能上。一旦抓住了他们的注意力,告诉他们是什么使得新功能如此伟大。

  Coda

  

  *罗列不同的应用和产品

  在这种情况下,把图标想成是logo,记住logo的目标是在产品和特定的图像建立精神联系。图标应该独特而简单的:大部分的图标只有128*128像素的,因此要用最低限度的方法,用少表达更多的信息。

  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 7Designs

  

  Gist

  

  不要仅仅因为图标看起来很酷而使用它们,选择哪些与你的风格和品牌相符合的图标:

  Treemo

  

  除此之外,还有很多很好的例子,限于篇幅,这里就不一一列举了。如果大家有兴趣,可以查看原文How to use icons to support content in Web design 的第四部分-Additional Examples

  文章来源:www.cn8f.com

时间: 2024-10-25 18:49:21

网页设计特技 使用图标来支持页面内容的相关文章

网页设计中使用图标支持内容的最佳做法

在做视觉设计时,如何高效地使用图标是一门学问:该使用什么样的图标?图标该放在哪里?大小如何?图标的使用是否帮助用户更好更快的理解内容,亦或是增加了他们的理解负担甚至产生误导?今天恰好看到了一篇很好的文章,可以帮助我们了解该如何使用图标来支持内容,故翻译如下: 为什么使用图标?设计就是传达信息:如果你的网站不能吸引用户,这个问题不在于你分享的信息有多重要.有多刺激.在访问一个网站的最初,大多数用户首先扫描页面来寻找视觉上看着有趣的内容,只有某些事物引起了他们的注意力,他们才真正开始阅读.图标是一个

网页设计中的图标的使用技巧与资源合集

  提到图标设计,似乎每个设计师都有话说,但是要做好图标设计真的那么容易么?今天这篇文章针对网页设计领域的图标设计进行了相对全面的梳理,从设计技巧到设计资源一应俱全,但愿能帮上你! 图标是每一个现代UI中不可或缺的组成部分,它们不仅能协助UI布局组织内容,而且轻量级的图标融入界面也不会喧宾夺主.不仅手机和平板的APP UI中会大量用到各种图标,而且iPod和智能手表的界面中也是如此,这正是因为图标具备快速直观传达信息的能力. 在网页设计刚刚兴起的时代,小图标就已经被早期的网页设计师和开发者投入使

让网页设计中的图标更具吸引力的几大要素

图标在网页设计中的作用 图标在网页设计中用途广泛,几乎每个网站中都存在着图标.通过这些小小的图标,可以方便的实现视觉引导和功能划分.如果选用恰当,图标能和页面 中的 图片有机融合,保持视觉上的一致性,同时也能够和整个网站的风格相契合.图标并不是华而不实的小玩意儿,小图标有大用处.在网页设计中,如果设计师并不擅 长图标设计,那么就需要在图标选择上下功夫了. 一般来说,根据使用手法.使用场合的不同,一张图像可以有多种解读,图标亦如此.图标不但能够吸引用户的注意力,还能分割页面中的区域,最为重要的事,

学校要求做ASP的留言管理网页,已经初步构画了页面内容,但是不会代码,求教!!!非常感谢

问题描述 我初步的构思是一个用户留言页面,一个管理员登录页面,一个留言管理页面,用户留言页面和管理员登录页面已经自己搞定了,留言管理页面已经构画好了,但是不知道怎么实现相对应的功能,求代码!!!下面就是页面的设计样式,()里面标注的就是功能代码要求,希望有会的大神能把符合下述页面功能的详细代码回复给我,不胜感激啊!!*页面开始留言管理页面退出(按钮,按下后关闭页面)自动编号姓名性别地址QQ电话留言内容留言时间处理结果操作12345678910查找(按钮+文本框,在文本框内输入要查找的内容,按下后

网页设计中图标与网页内容的组合设计

为什么要使用图标?设计是为了交流:如果你正在分享的信息不能留住访问者,尽管它是多么的重要或多么的令人激动,这一点都不重要.大多数用户最初浏览网站的时候,他们首页扫视页面上视觉上感兴趣的内容,只有在一些内容引起了他们的注意,他们才将开始阅读.图标是吸引用户浏览你网站内容的一个简单而且有效的方式. 图标和段落分隔有同样的心理作用:他们从视觉上分开内容.一个内容格式好的页面,图标可使文字形成段落和突出重点,这样即容易阅读同时有趣的视觉效果足以长时的吸引用户的注意. 在这个篇文章中,我们展示了在网页设计

从多层面来阐述网页设计的专业性

打开百度或谷歌,搜索一下网络公司,网页设计,网站建设等相关信息.找到的结果中,没有任何网络公司不是标识自己是专业网页设计的机构.但你很难看到网页设计专业性到底如何评判.网页设计专业性的体现,不能是一句空谈或自夸.需要实实在在的效果和评测标准. 我们从多层面来阐述网页设计的专业性. A.颜色和布局 在网页设计的众多环节中,页面布局.颜色搭配是最为重要的环节之一.有很多网站以其成功的色彩搭配.灵活布局令人过目不忘.专业的网页设计,应该遵循最基本的设计准则: 准则一:请珍惜网页使用的颜色. 准则二:颜

使用框架和滑动门技术进行网页设计

以前看过一些类似的文章,但这些文章文字在理论上阐述得比较多,没有从技术角度来分析和实现滑动门效果,前段时间心血来潮对此作了一番专门的研究,这里就把我的所得奉献给大家. 一.什么是滑动门技术? 导航按钮 如上图,简单地说,滑动门技术就是:当点击页面上的导航按钮后这个导航按钮的CSS特性发生变化,从而区别于该组的其他导航按钮,提示给操作者,当前浏览的内容就是这个CSS特性发生变化的按钮所指向的内容.这种效果的一大好处在于,在多导航的页面上能够清晰地反映当前浏览内容隶属于哪个栏目或者哪个类,同时给人以

网页设计参考:精美的网站页脚设计案例

文章描述:本文中就有20个创新精美的网站页脚设计案例,希望能为设计者们带来创作的灵感. 网站的页脚已不仅仅再是网站底部显示版权信息和附加链接的简单区域了,近年来一个比较有意思的网页设计趋势就是给精美的页面配上更吸引人的页脚.越来越多的设计者已经意识到,一个精心设计的页脚不仅为网站带来额外的视觉效果,而且也能更好的提升网站的易用和互动性.本文中就有20个创新精美的网站页脚设计案例,希望能为设计者们带来创作的灵感. Seyart Design WeNew Media Stand & Ea Magni

网页设计的专业与非专业

我们浏览任何一个网页,仅从界面上就可以轻易的识别出专业和非专业的区别,那么怎么才能让网页设计的专业.漂亮.好看?这就要涉及到美术的一些基本常识.首先网页风格的形成主要依赖于网页的版式设计,页面的色调处理,还有图片与文字的组合形式等. 一.版面编排 网页设计首先涉及到的是页面的版面编排问题."版面编排"实际上就是中国古代画论中的"经营位置".网页作为一种版面,既有文字,又有图片.文字有大有小,还有标题和正文之分:图片也有大小,而且有横有竖之别.图片和文字都需要同时展示