有哪些方法可以突出网页中的关键内容?

   我有特别的抢眼技巧!今天的好文非常值得拜读,@飞屋睿UIdesign 同学从对比、色彩、字体、留白等方面帮同学们将最关键的内容呈现出来,文末还附上一个特别有效果的检测方法,一眼就能看出你的网站是否合格,周末来充电吧。

  对比:引发兴趣

  为了更好地理解对比在网页设计中的作用,我们先解释下什么是对比。对比就是在一个相对封闭的环境里发生的某种元素间的一种关系。


  只是稍稍对字号大小进行调整,或对色彩进行更改,就会马上改变整个界面的视觉效果。例如,当你看到下面这个网页时,把浅色的背景换为深色,首页引人注目的“try it free”的首要按钮马上在视觉重要性上降级,而最下方的“call us”就会升级为首要的按钮。


  再来看看下图中,颜色和大小是怎样影响我们的界面视觉的。例如,很多人在第一眼扫视而过时,不会仅仅就看到了两个圆。事实上,他们在看这两个圆时,已经获得了这样的信号“一个黑色的大圆和一个红色的小圆”。也就是说,对比关系已经可以在第一时间就进入人们的大脑中,形成强烈的印象。


  商业工具:颜色,大小和形状

  当我们刚开始设计一个页面的时候,一定不要忘记了运用这几个强大的视觉工具:颜色,大小和空间。设计师Alex Bigman就相信颜色和大小在管理着我们的视觉注意,而空间则帮助管理视觉元素间的关系。

  颜色

  简单说,亮色可以在柔和的色彩中凸显出来。这是显而易见的,而更为重要的是,在设计中,你就可以运用这一关系去吸引用户的注意。另外,特定的色彩也能帮助营造网站的整体氛围(例如,蓝色代表宁静,红色显得张扬和富有攻击性等)。


  上面这个网站采用的是视觉体系中的Z模式。在此模式下,他们运用色彩的技巧是非常巧妙的。水蓝色的背景立刻将首要目标按钮凸显在了顶部,这些目标按钮的色彩可以与“get active”的色彩搭配,暗示这一系列的按钮的相关性。而下方的两个大的矩形区域由于形状的相似又相连,因此也暗示着它们之间的相似性。

  大小

  说到大小,我们通常在说的其实也就是网页字体的大小。在传统的从左到右自上而下的阅读模式中,这就已经是个很强大的元素了。这意味着,大号字体或段落的右下角通常是读者最先阅读的地方。因此,字号大一点发挥的就是一种强调作用。


  讲到这一点,不得不提到,著名的网页设计名博Smashing Magazine对50个流行的网页界面进行调查,他们发现这些网站通常都是采用标题字号18~29px,与此匹配的文章主体字号采用12~14px,只是这项调查针对的是英文字体,而中文字体相对来说应该字号会大一些易于辨认。当然,这也只是一个大概的调查,并无绝对。但是,你可以从中获悉更多关于字号比例的排版设计的知识。

  留白

  网页设计的目标什么?简单讲,就是创作一个漂亮的页面。那么,你将所有的漂亮的元素全部堆叠在网页中就漂亮吗?无节制的增加吸引的元素是快速毁掉自己的设计方法之一。一个网页中有可以呼吸的空间是非常重要的,也就是我们总是爱说的留白。减少“视觉噪音”会让页面显得更有重点。


  Usaura的创始人Dmitry就已经指出,适当的留白能增强对网页内容的理解。2004年,一些研究小组就调查过,适当的留白能让人们对网站内容理解程度增长20%。虽然用户并不会直接对留白的页面做些什么,但它却能影响到用户的满足和体验。大家可以看看下图的页面设计。在每一个主体内容,都保留大量留白,用户的视线流得到了保护,让观者专注内容,才是最好的体验。

  网页设计视觉体系的测试:模糊法

  就我所知,有人曾提出这样一个方法来检测自己的网站。尤其是当你的网站有特别要强调的内容时,非常适用。将自己的网站首页,放在PS里模糊5~10个像素,这样来判断那些你想强调的内容是否仍然能吸引到注意。


  上图的网站经过模糊法测试后,我们会发现那些注册按钮和产品特性仍然是很抢眼。这样的元素安排对我们来说就是合理的。

时间: 2024-09-17 04:21:02

有哪些方法可以突出网页中的关键内容?的相关文章

浅议网页中的隐藏内容

隐藏内容就是一段文本,或者一些关键词,被包含在网页中,用户在浏览器中是看不见的,可是搜索引擎却能看见.这样的文字,我们称之为隐藏内容. 其目的是欺骗搜索引擎,来获得较好的关键词排名. 这是一种非常老旧的搜索引擎作弊的手法,几乎所有的主流搜索引擎都可以处理绝大部分的隐藏内容作弊. 可是这样的手段,在现在的网站中,还是时常可以看到,比如我曾经举过的例子,利用图片alt属性和CSS定位的作弊手法. 有时,通过这样的作弊手法,可以获得暂时的排名提高,可是很快就会被发现,也许只是被降低排名,更为严重的,可

JS中使用mailto实现将用户在网页中输入的内容传递到本地邮件客户端_javascript技巧

背景: 想在自己的网站中有这样一个设计: 用户点击提交按钮之后,就会打开本地邮件客户端,并自动将他在输入框中输入的内容作为邮件的内容,像下面这样: mailto可以帮助实现这个功能. 简介: mailto是一种电子邮件协议,通过该协议可以创建一个指向电子邮件地址的超级链接,通过该链接可以在Internet中发送电子邮件.就像在地址栏输入一个网址会打开一个网页一样,输入mailto:name@email.com,就会打开本地邮件客户端,并将邮件发送给name@email.com. 在HTML中使用

&#106avascript网页中显示硬盘内容

网页|显示|硬盘 您听说过网页也能用来显示硬盘内容吗?您肯定不信,因为大多数情况下,我们都是通过"我的电脑"和"资源管理器"来浏览硬盘数据.现在就让我们来看看如何用下面一小段"神奇"的网页代码实现硬盘E盘数据的显示功能.你也一定等急了,很想知道这一切是如何发生的.其实非常简单,只需在网页的<head>和</head>中加入如下网页源代码即可实现.相信我,你也能做到的. 以下是引用片段:<script language

怎么打印网页中选中的内容

  浏览网页时,时不时会碰到自己需要的信息,需要把它们打印出来. 若是打印整个网页,既浪费纸张油墨,还徒增干扰信息.最好的办法是只把有用的信息打印出来.怎么实现呢? 可以这么做: 拖动鼠标选中想要打印出来的网页内容,然后在键盘上按一下"Alt"键,单击"文件-打印".(如果熟悉快捷键,也可以直接用"Ctrl+P"调出"打印"设置窗口) 通常"页面范围"默认设置为"全部",这里我们把它更改

如何打印网页中选中的内容

  拖动鼠标,选中想要打印出来的网页内容,单击"文件-打印".(若没有找到可以在键盘上按一下"Alt"键,如果熟悉快捷键,也可以直接用"Ctrl+P"调出"打印"设置窗口). 通常"页面范围"默认设置为"全部",这里我们把它更改为"选定范围".完成后单击"打印"即可. 相对于大多数用户来说,在打印前习惯先打印预览.在进行选择性打印时要怎么预览呢?先

网页中flash的trace方法输出数据

我的js类jdhcn.js中的一个flashDebug方法: 功能: flash的调用些方法能在网页中看到flash的trace方法输出的数据: 方法: 1.init(w,h,z);//w为显示界面的宽度,h为显示界面的高,z为层级(最好放在最顶层):<此方法可以省略> 2.trace(str);//要输出的数据. 使用: 1.把jdhcn.js导入,点击下载jdhcn.js. 2.在body里可以重写一个函数(也可以不写). 程序代码: 以下为引用的内容: <script langua

怎么提取网页中的视频、音乐歌曲、flash、图片等多媒体文件

打开网页后,发现里面有好看的视频.好听的音乐.好看的图片.很炫的flash,是不是想把它们弄到自己电脑上或手机.mp4上?但很多时候视 频无法下载,音乐只能试听,或者好听的背景音乐根本就不知道什么名字,更别说怎么下了:至于图片直接右键另存为即可,不过如果网页突然关掉了,但又想把看 过的图片弄下来,而忘了图片网页地址或者不想再通过历史记录打开,这时又该怎么办? 其实这些问题都能很好的解决,并且很简单,只要用一个软件来替你从电脑的缓存中搜索一下就OK了,因为网页中显示的内容基本上全部都在缓存中,如果

谈一谈网页中单个页面如何做好SEO优化

摘要: 做为站长你可能经常听到一句话:内容为王.其中的王实际就是指用户所需要的内容,对于搜索引擎优化来说,任何排名靠前的页面,首先他必须有一些优质的内容. 当然这里我们并不 做为站长你可能经常听到一句话:内容为王.其中的"王"实际就是指用户所需要的内容,对于搜索引擎优化来说,任何排名靠前的页面,首先他必须有一些优质的内容. 当然这里我们并不想谈及如何把内容做好,而是想谈下网页中单个页面如何做好SEO优化,同时又能提高用户体验,让用户更容易接受你的内容. 1,网页内容的长度 对于搜索引擎

网页中的“复制链接”该如何设计

<用户研究角度看设计>系列是淘宝的用户研究团队在可用性测试之后的点滴思考.在每次与淘宝用户的直接接触.观察用户的操作之后,作为体验分析师的我们总是会感慨:"为什么有些细节设计看似已经很显眼了,用户就是没有注意到?"."为什么用户偏偏要那样去理解?"."用户在那个流程中为什么陷入困惑,甚至不能完成任务了?",然后,我们会思考这界面背后的原因,分析用户当时具体说了什么,是什么原因导致用户那样理解--这个过程需要非常严谨的思考,因为向设计师