网页超级链接该以什么方式打开?

所属分类: 网页制作 / CSS 阅读数: 1361
收藏 0 赞 0 分享

一直以来都有这样一个困惑,那就是打开页面间的链接时是在原窗口转换还在新窗口打开呢?如果是在原窗口里转换页面的话,那我还想使用原页面的信息呢?但是在新窗口打开的话,到时候可能是一屏幕的窗口(现在的浏览器都提供标签式浏览——我认为这是浏览器至今为止最好的改进,但也会造成成堆的标签排在那而不知道到底哪个才是自己想要的),很容易就让人迷失在窗口里。也许该说按特定的环境使用特定的方式,可是这个特定的环境又是哪些呢?
其实这个特定的环境也是个不特定的环境,比如说从新闻列表打开新闻内容页,按常理链接内容页的时候应该是打开新窗口,看完这个新闻后直接关闭这个新开的窗口,这也符合人们在网络上阅读的习惯。可是我看新闻等列表型的内容时有一个这样的习惯,那就是在列表页的时候点击打开所有想看的新闻内容页,然后再一个一个的查看,因为我不想看一个新闻然后关一个窗口又返回列表页去打开另一个新闻窗口,但是这个不可避免的就会满屏幕的出现新窗口或者是标签栏里排满了标签。
那有没有更好的办法呢?有什么办法即可以让我看到所有想看的新闻,而又不用面对满屏幕的窗口或是堆叠的标签呢?
有一种方法是当我从新闻总列表页打开某一类新闻其中的一条的时候,使用新窗口或是新标签打开,然后这一类新闻的列表会出现在这个内容页里,看过的新闻自动消失在这个列表里,再然后看这一类新闻的时候可以直接在这个窗口里转换,如果还想看另一类别的新闻,那就到新闻总列表页去打开另一类的新闻内容页。
这样的确是可以很大程度的减少新窗口量或是标签量。可是我们不得不考虑到这样一点,当用户在使用这种模式的网站时就会多出一项认知的过程,无疑在易用性上又过不了关。而且这种模式的网站如果导航系统没设计好的话,很有可能就会让用户产生迷路的感觉。
所以并不推荐以上所说的方式,还是老老实实的在新闻总列表点一条看一个吧。
可是即使是这样子的操作方式,也涉及到一个问题,就是打开页面链接的方式的统一性。
如果你在一个新闻列表页页,打开第一条新闻的时候是新开的窗口(标签),可是当你点击第二条新闻的时候却是在原窗口里转换的,那么你会想到什么?莫名其妙外加一头雾水。
当然这种情况并不常出现,在同一个新闻列表页面里更是不太可能会出现。可是如果这个新闻列表页是不同类型的呢?比如说一个是数码新闻列表页,另一个是软件新闻列表页,在数码新闻列表页里打开新闻用的是打开新窗口的方式,可是在软件新闻列表页打开新闻却用的是在原窗口转换的方式。这个时候用户该破口大骂了,为什么同样的类型却用的是不同的方式?!
一致性并不只是表现在页面排版等视觉上,还包括操作方式等交互行为上。
最近在使用yupoo网的相册服务时就发现了一个这样一个同类型却用不同方式的问题。yupoo提供了好多种查看别人照片的方式,比如说通过搜索、随便逛逛、最近上传、最近七天的靓照、最近一月的靓照、一年前的今天等,可是这些方式提供出的照片预览页在打开链接时却出现了不一致的方式。
以上几种方式提供出的照片预览页都可以算是新闻列表页,点击其中的照片就像点击一条新闻一样,可是问题却在这里出现,通过搜索、随便逛逛、最近上传、最近七天方式打开的照片预览页点击打开其中一张照片的方式是新开窗口(标签),可是当通过最近一月的靓照、一年前的今天方式来打开其提供的预览中的照片时却是直接在原窗口里转换的。
如果说从通过搜索等方式提供的预览页打开照片使用新窗口是为了用户返回来重新寻找照片,那为什么从本月推荐等方式就不能返回来重新查看照片呢?如果说通过搜索等方式提供的照片预览页是一类照片的合集,那本月推荐的照片就不算合集?用户从本月推荐里并不只是想看其中的某一张照片,而应该是跟通过搜索一样的想查看更多的照片。
当我第一次使用这个最近一月的靓照功能时,我以为他跟最近七天的靓照的方式应该是一样的,点击照片后在新窗口(标签)打开链接,本来我是准备多点几张然后再一张一张看的,可是当我点下第一张的时候发现窗口转换掉了,要想看其他最近一月的靓照还得重新来过。这顿时让我产生一种被人欺骗的感觉。
如果通过搜索、最近上传等方式提供的预览页在点击照片时采用的也是在原窗口转换的话,那么用户最多只是会感觉到不方便而已,并不会有被欺骗的感觉。在这一点上flickr做得很统一,不管是通过什么方式去查看照片时都是采用在原窗口里转换的方式,虽然有些不方便可是至少不会有被欺骗的感觉。
如何保持交互的统一性?如何不让用户产生被欺骗的感觉?多多从用户的角度去考虑吧。
更多精彩内容其他人还在看

CSS配合JavaScript做酷的动态页面效果

  利用CSS配合JavaScript的可以做很多更酷的动态页面效果,在本教程的最后给大家简单介绍一下CSS配合JS的应用。首先,要搞清楚事件和动作的概念。在客户端脚本中,JavaScript 通过对事件进行响应来获得与用户的交互。例如,当用户单击一个按钮或者在某段文字上移动鼠标
收藏 0 赞 0 分享

WEB标准,Web前端开发工程师必备技术列表

  想要打造并拥有一流的Web产品开发团队,在团队成员基础能力上一定要下功夫。对于Web前端产品开发来说,仅仅掌握Web1.0时代简单的"网页套接"是完全不够的。我结合自己的团队配备,特此罗列了Web前端产品工程师所涉及的技能列表如下:   通过许多实际项目,
收藏 0 赞 0 分享

用CSS制作Alpha滤镜测试板

alpha滤镜给制作网页特效提供了较大的创作空间,但由于它控制参数较多,在实际应用时,为了确定一组合适的参数值,不得不反复调整修改,在编辑窗口和预览窗口来回倒腾,甚是麻烦,本文介绍了一种简单的方法。制作一个“Alpha滤镜参数测试板”,在测试板上输入参数
收藏 0 赞 0 分享

非常流行的所谓的气泡窗口

普通的Alt无法自定义风格,而Sweet Titles通过JS脚本与CSS的集合.自定义了这种伪Alt风格. 前一段时间非常流行的,就所谓的气泡窗口(鼠标移到链接处出现的). 我们这里实现的用的是Sweet Titles的插件.显示效果完全由CSS控制.. 先下载Sweet Ti
收藏 0 赞 0 分享

CSS教程:li和ul标签用法举例

LI代码的格式化: A).运用CSS格式化列表符: ul li{ list-style-type:none; } B).如果你想将列表符换成图像,则: ul li{ list-style-type:none; list-style-image: url(/blog/images/
收藏 0 赞 0 分享

CSS教程:CSS中的定位(position)

  使用CSS来定位页面内层的位置,一直是比较难以掌握的事情,很多时候,往往被绝对定位的元素,总是以浏览器的左上角为坐标原点,此时,如果浏览器的大小改变,被定义的层就会偏离设计想要的位置,让人很挠头。   其实,要想控制好层的绝对定位,只要理解CSS中关于定位
收藏 0 赞 0 分享

CSS教程:盒模型(BOX Model)

  如果想熟练掌握DIV和CSS的布局方法,首先要对盒模型有足够的了解。每个HTML元素都可以看作一个装了东西的盒子,盒子里面的内容到盒子的边框之间的距离即填充(padding),盒子本身有边框(border),而盒子边框外和其他盒子之间,还有边界(margin),如图1所示。
收藏 0 赞 0 分享

无延迟翻滚的图形与CSS混合风格按钮

  在一个具有图形背景的按钮中添加CSS风格的文本,这种建立按钮的方法结合了具有CSS翻滚(CSS rollover)标记的开发速度和效率,从而有效地提高按钮外表图像的三维效果。   相比于常规的图形按钮,这些图形/CSS混合按钮可易于建立和载入,因为你只需要为空白按钮外面
收藏 0 赞 0 分享

css里expression实现界面对象的批量控制

用过css样式我们就知道, 可以定义一批对象的class属性来指定同一个样式来统一界面. 但如何统一同类型的对象的事件? 比如:界面有无数个 <img src="**.jpg"> 如何实现鼠标经过此图片, 图片的src变成是**_over.jpg?
收藏 0 赞 0 分享

CSS教程:水平对齐(text-align)

  水平对齐(text-align),用以设定元素内文本的水平对齐方式。   1.语法   text-align具体参数如下: 语法:text-align:left|right|center|justify 说明:设定元素内文本的水平对齐方式。 参数:left:左
收藏 0 赞 0 分享
查看更多