| 加入收藏| 设为首页| 联系我们

首页 站长学习 站长之家 源码下载 建站素材 书籍教程 常用工具
 您现在的位置: 动力中国 >> 冲浪宝典 >> 网页浏览 >> 文章正文  
 [图文]如何提高网页中图片显示的用户体验(附源码下载)
 

如何提高网页中图片显示的用户体验(附源码下载)_网页浏览_www.it958.cn

http://www.domcn.org  文章来源:本站收藏  点击数:

  关键字:如何提高网页中图片显示的用户体验(附源码下载)_网页浏览_www.it958.cn

文章中加入适量的图片不仅可以更好的说明和补充文章的内容,而且还可以极大的减缓阅读者在阅读较长篇幅文章时的疲劳和不安。所以图文混排较好的文章能给阅读者更好的用户体验和享受。但是令人遗憾的是很多的网页图片的显示并不十分理想,非但没有给阅读者带来好的阅读享受,反而给文章的阅读带来了不少的麻烦。其中的“麻烦制造者”就是尺寸很大的图片。如何适当的显示大尺寸的图片则变成了解决问题的关键。

对于大尺寸的图片显示以前的做法主要有以下几种:

1.用width和height强制将大图片显示时变小,点击图片时在新的页面中显示大尺寸的图片。
2.用iframe将图片套起来限制图片的最大占用尺寸,用局部的横向和竖向滚动条来观看全局。
3.用缩略图方式,平时显示一个小的图片,点击图片时在新的页面中显示大尺寸的原图。

第1种实现最简单,而且很方便,但是就目前中国的网速来看这种方法尤其致命的弊端。
第2种方法是愚蠢的方法,先不说iframe不提倡用,就是网页上一坨坨的滚动条就让人想点X。
第3种是最成熟也是现在实用最多的办法。不可否则缩略图+原图的方法就目前的中国网速而言是最好的模式,这个方法的问题也不是这点,而是那个弹出的新窗口。新的窗口意味着客户计算机资源的消耗。现在就看看你的windows任务栏上到底有多少打开的窗口你就知道这种弹出新窗口的方法是多么令人讨厌。虽然现在多tab浏览器已经很多,但是也需要在新的tab呈现大尺寸图片,阅读者必须先离开当前的阅读窗口(tab),到新弹出的窗口(tab)才能看到大尺寸的原图,然后还需要回到原来的阅读窗口。这样会打断阅读者的阅读连贯性,容易分散阅读者的注意力,加速阅读者的阅读疲劳。所以说这也不是一种用户体验好的方法。

如何显示图片才能给阅读者较好的用户体验呢。微软的MSDN Magazine 网站给了我们一些参考。(http://msdn.microsoft.com/msdnmag/issues/07/04/ASPNET20/default.aspx文章也很不错,推荐看看)。

其中有个图片,你试着点击一下小图就可以立即得到大尺寸的原图。缩略图和大尺寸原图的切换在利用javascript脚本在同一个窗口中无停滞的切换,给人一种很俐落的感觉。

方法一:利用文档替换来实现显示缩略图原图的方法。它的好处是符合传统的用户操作习惯和阅读习惯。缺点是:破坏原有文档布局。

参数说明:ToggleImages(hideImage, showImage)

hideImage:欲隐藏的文档标签;
showImage:欲显示的文档标签;

研究一下代码就知道如何实现,不再多说。但是必须提醒一下:它的写法很糟糕,不符合web标准,不提倡那种style直接写到前台的做法。我提供的Demo源码中已经对此做出了适当的修正。
(下载地址:http://www.cnblogs.com/Files/JustinYoung/pictureUE.rar)

另外一种方法是利用悬浮层来显示缩略图的原图,这个方法通用性很强,不仅可以用来显示缩略图的原图,还可以用于其他用途,例如用来显示一些描述和文档补充等等。它的好处是不占用文档流中的空间而是悬浮出来的层,这样不会影响原文档的布局。缺点是:当原图很大的时候,有可能出现横向滚动条,而此滚动条的操作体验很差。

对几个重要参数说明一下:at_attach(parent, child, showtype, position, cursor)
parent :引发出现悬浮层事件的父容器便签ID;
child :悬浮层便签ID;
showtype :引发出现悬浮层事件的行为。可以是click或者是hover;
cursor :父容器鼠标样式;

这两种方法都是通过缩略图+大尺寸原图来解决网速问题,通过在同一个窗口显示大尺寸图片来解决阅读的连续性问题。是用户体验度较高的网页显示图片的方法,值得推荐。


如何提高网页中图片显示的用户体验(附源码下载)_网页浏览_www.it958.cn
  • 上一篇文章:

  • 下一篇文章:
  •  热门文章
    普通文章 电子邮件改头换面 四公司畅谈未
    普通文章 PC病毒史上最声名狼藉的八大病
    普通文章 Rails系统中的AJAX开发技术简析
    普通文章 基于ASP.NET AJAX框架实现表单
    普通文章 开发ASP.NET AJAX客户端定制行
    普通文章 用JFreeChart对JSP报表进行增强
    普通文章 SQL Server 2005上的CLR和ADO.
    普通文章 SQL Server 2005的XML支持机制
    普通文章 Firefox中标签式浏览技巧大全
    普通文章 Tomcat中的Session和Cookie大揭
     
     推荐文章
    推荐文章 把Google地图嵌入网页 就是这么
    推荐文章 迅雷搜索候选资源出错的解决
    推荐文章 轻松去除迅雷里的各种广告和资
    推荐文章 突破限制 免费领养到QQ空间五级
    推荐文章 Rational统一过程RUP贴近中小软
    推荐文章 构建自己的轻量级XML DOM分析程
    推荐文章 WPS Office 2007技巧:妙用配置
    推荐文章 Excel 2007:求余数函数实用进阶
    推荐文章 浅谈ASP.NET的Postback
    推荐文章 软件开发中项目需求管理简述
     
     相关文章
    没有相关文章
    设为首页 | 加入收藏 | 广告合作 | 联系站长 | 版权申明 |
    动力中国为网友提供免费学习资料,可用资源,如果您认为我们的相关内容侵害到了您的权利请联系管理员
    Copyright © 2006-2008 domcn.org All Rights Reserved.