让你的网页告别“失焦”

来源 :电脑爱好者 | 被引量 : 0次 | 上传用户:liutaostdio
下载到本地 , 更方便阅读
声明 : 本文档内容版权归属内容提供方 , 如果您对本文有版权争议 , 可与客服联系进行内容授权或下架
论文部分内容阅读
  网页是一个图文并茂的文本,当我们打开网页,会以怎样的方式去浏览这个网页呢?
  一项研究表明,浏览者在打开网页后,会按照F型的浏览路线阅读网页(图1)。浏览者首先会在网页的最上部分形成一个自左向右的水平浏览轨迹,然后目光下移,水平扫描比上一区域更短的部分。完成以上两步以后,浏览者会将目光转向左侧,作自上而下的浏览。
  这个名叫“眼球追踪研究”的项目由一位美国专家发起,他最后得出结论,要想让网页上的文字传播更有效,就不能照搬报刊等印刷体的文章。
  因为浏览网页的人不会彻底去读完一个篇幅过大的网页文字,有时更多是在搜寻关键字,而且放在网页上的文字要在前两段就把重要内容提出来。
  基于此,许多做网页设计的人会在通篇做些处理,让重要信息突出,形成一个网页的视觉焦点。
  在摄影上,视觉焦点是在有限的视线范围内快速捕捉你自己认为吸引你的区域。
  而在互联网产品中,就是指设计的页面上最吸引人注意的地方,视线上集中交汇的地方,这个位置就叫焦点。在网页设计中,这样的设计能够引导用户将关注点集中在你想让他关注的区域,这包括文字和图片。
  如何聚焦文字
  先来说如何做网页文字的视觉焦点设计。
  一位朋友的网站想给一家企业做宣传,提交了文本,生成文字页面(图2)。
  这是一篇推广文,乍看之下,一般人的第一反应都是,整个屏幕一片模糊,不知从哪里开始看,不知道文章写点什么,对象是什么,对自己有没有用。这一系列问题同一时间迸发出来,浏览者会被大量的信息淹没,而产生心理上的焦虑,最终结果是赶快离开这个网页。因此,我建议他将网页做一些处理(图3)。
  我的处理方法是弱化信息干扰,突出重点,可以很清楚地看到整个推广文的重点─中国密度板门户。视觉焦点会在不自觉中停留在“中国密度板门户”几个字上面。
  但相信到此为止,大脑对于阅读整篇一看就知道不好玩、纯广告的文字仍有抗拒,推广目的仍没有达到。其实这是一件大家心知肚明的事情,类似的推广文一般很少指望浏览者能当热门小说来拜读,唯一指望的是客户能在视线扫视停留的几分之一秒内,关键信息能到他的脑海里面。因此,我建议这位朋友做进一步的修改(图4)。
  这类网页的文章对于读者来说从来是不会逐字逐句地阅读,而是跳跃地扫视,因此,我们一定要将关键信息高亮显示出来更易于读者把握重要信息。在这次的修改中网址被突出显示,希望能引起有兴趣的读者可以复制这个网址去网站看看。
  如何让图片传达焦点信息
  在一个网页上,与文字相比较,图片更为重要,但是现在很多网页上的图片都是“失焦”设计,如何让图片更为聚焦,以引导浏览者知道你想要强调什么目的。我提供以下思路。
  方法一:适当给图片添加圆形
  也许你会问我,为什么不添加方形、平行四边形、三角形,而偏偏要选择圆形?我可以告诉各位读者,圆形是由极其细小的边角组成,在变化当中图形会变得越来越有乐趣,圆形在几何图形中具有平滑流畅的边缘,会更让人感觉轻松、愉悦。设计需要增加乐趣的时候,我们可以多运用流畅线条的图形来让页面活跃起来。
  在图5这个瑜伽培训机构的页面,如果美女穿着一身白色的瑜伽服加上白色的背景,会让她和背景无法分离,整个画面没有立体感,当然美女其实本身就是一个很重要的视觉焦点,当我们给美女加了圆形边框后,视觉焦点就转移到圆形边框包括着的美女上。最后将圆形填充,视觉焦点就转移到填充色的圆形的美女上。
  同样地,在一家销售童装的网站,有一个五个儿童的合影,原始的图片让人觉得整体画面平平,人物排列没有层次,视觉上给人感觉很散。如果我们给中间那个小男孩添加个圆形边框进行处理,会让你想表达的图形首先进入用户眼球。到了这一步其实还不够,我们再进一步将所要强调的人物进行变大的处理,这样就使这张图片主次分明,焦点突出,画面活跃立体(图6)。
  方法二:剪切、配色及加线
  在化妆品网站上,我们可以看到美女特别多,但是美女多了也有麻烦,看了美女而忘记看要介绍的化妆品,这种做法有点得不偿失,在这类网站中,图片的视觉焦点尤其显得重要。
  原始图片是一个漂亮的外国妞,而经过处理后,制作者只用了眼睛部分,在文字色彩的选用上,用了美女眼睛颜色最接近的颜色(图7、8)。
  在一个口红厂家的网页上,他们选用一个美女给他们代言,但是,原始图片的问题很大:图片很香艳,与口红没有半毛钱的关系(图10)。制作者如果像上文一样把这个图片剪切了,会很可惜,所以他巧妙地在嘴唇区域添加了两条曲线(图11)。这两条曲线所形成的区域并没有破坏原始图片的美感,而且还进一步对想要强调的区域增加了表现效果。
其他文献
数学是一门基础性的学科,对于学生能力的培养是非常重要的,能够有效地提升学生的逻辑思维能力以及计算能力,对学生今后的学习和发展来说是具有重要意义的.作为一门理性学科,
我院学报(自然科学版)于1986年12月被批准国内外公开发行后,随即参加了CUJA(Chinese University Journal Abstracts)系统,即中国高校学报论文文摘英文磁带文献库,至今我们已
摘要: 主要阐述邯钢西区炼钢厂一级,二级,三级的网络情况,提出钢铁企业并结合炼钢厂生产网络来说明亟待解决的问题和解决办法。  关键词: 网络结构;生产网;防病毒  中图分类号:TP311 文献标识码:A 文章编号:1671-7597(2012)1020039-02  1 邯宝公司网络及网络安全系统总体架构  邯宝公司主干网络系统规划根据业务和功能划分共分为四大区域:外部接入区、管理网区域、生产网区
新课程改革的实施,在语文学科方面,改革最大的亮点是设置了语文选修课程。选修课程分为五个系列,分别是诗歌与散文、小说与戏剧、新闻与传记、语言文字应用、文化论著研读,每
“学术榜”第二榜是对我国30个省、市的科学家在国际权威性杂志上发表论文多少进行科学计量排序;用我国专利局受理的29个省、市的专利数目进行技术计量排序的。并配发本刊记
旅游归来,为了和大家分享快乐,小谭同学想把精心拍摄的大量图片和视频传送给好友们观赏。不过面对一大堆体积颇为巨大的图片和视频文件,如果使用QQ传输的话,可是一件费时费力的苦差。不过这难不倒聪明的小谭同学,借助于两款软件,小谭让数量众多、体积庞大的图片和视频急速瘦身,通过QQ传输自然快多了。  为图片文件快速“瘦身”  RoboSizer支持大多数的网络软件(包括浏览器、Email软件、即时聊天工具等
2013年8月14日,在中国台北国际航天暨防御工业展会上,台湾海军展示了雄风3超声速反舰巡航导弹的地面机动发射车样车。研制雄风系列反舰导弹的中国台湾中山科学研究院表示,地
因为预算有限,小黄新买的笔记本并没有预装操作系统,忙活了一番终于自己搞定了系统和驱动的安装,但在玩有些3D游戏时总会出现卡顿的现象。在联想远程软件服务的帮助下,终于让
乙型肝炎(乙肝)是对人类危害极大的疾病之一,核苷类抗乙肝病毒(HBV)药物治疗乙肝疗效显著,临床应用广泛的有拉米夫定、阿德福韦酯、恩替卡韦、替比夫定等。本文就该类药物的
初中地理是学生接触地理知识的起始阶段,所以在这一阶段培养学生自主学习地理知识是非常重要的,对于学生以后的地理知识学习和发展都有很大的帮助。所以,在初中地理教学中,教