网站选择弹出窗口还是切换页面?

2016-02-17 03:49 19 1 收藏

岁数大了,QQ也不闪了,微信也不响了,电话也不来了,但是图老师依旧坚持为大家推荐最精彩的内容,下面为大家精心准备的网站选择弹出窗口还是切换页面?,希望大家看完后能赶快学习起来。

【 tulaoshi.com - 平面设计 】

分享较早前的一个小总结,关于在选择弹出窗口还是选择切换页面来承载信息时,可用用来判断的几个角度,合适初学者来读。

1.弹出窗口与切换页面的区别

1) 操作的连贯性 弹出窗口的速度会比打开一个页面的速度要快,响应更及时一些,点击后可以比较快的得到操作的反馈,而切换页面则经常会让用户等待一段时间。

实例一:个人中心中,查看好友照片的操作:

网站选择弹出窗口还是切换页面?,PS教程,图老师教程网

之前查看照片的操作页面会跳转到该好友的空间相册页面,而现在则更改进为弹出窗口,能够很快看到照片的放大图,关掉窗口后,又可以继续浏览其他好友的信息了。

2)操作的延续性 弹出窗口可以保留原页面上的内容,不至于页面被刷新掉;切换页面很有可能刷新,在以下两种情况下是尤其要避免的:用户在原界面上有输入的内容,用户需要根据原有界面的内容,来选择或判断新界面的内容。在这两种情况下最好首选弹出窗口。

实例一:Qzone写日志中插入图片:

网站选择弹出窗口还是切换页面?,PS教程,图老师教程网

用户在写日志的时候插入一张照片,如果这时候插入照片的界面是切换一个页面,用户可能就会担心之前的输入是否还在,而弹出窗口则可以在保留原页面已编辑的文字,在此之上出现一个小型的界面,显示可以插入的照片。

实例二,秀世界中我的储物箱,用户需要看到房间中的效果,来决定从我的储物箱中选择哪个物品放入房间里,用弹出窗口可以比较方便的解决这个问题:

网站选择弹出窗口还是切换页面?,PS教程,图老师教程网

实例三:一个相反的例子,欢乐卡片的应用,制从我的首页页面当中,制作卡片的时候需要哪些卡面是在卡片全攻略页面来说明的,因此用户在制作卡片的时候需要不断切换到卡片全攻略页面来查看需要合成的卡片,因此,在这样的情形下,采用弹出窗口的形式来表现卡片合成向导应该更合适一些。

网站选择弹出窗口还是切换页面?,PS教程,图老师教程网

3) 操作的自然过度 弹出窗口不容易让人迷路,知道自己身处何处;而页面切换了以后用户有时候会产生一下子不知道在哪里的迷惑;弹出窗口页面的内容往往只和当前的操作有关,而且是浮在原有页面上的,用户可以很自然的延续上一操作的结果而继续操作或是浏览下去,而切换的新页面中往往会包含新内容之外的信息: banner、导航、一些固定的栏目等等,用户不能立刻定位到自己想要关注的内容上,因此切换页面的设计应更加关注一致性和承前启后的关联性。

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/pmsj/)

实例一:网吧达人的首页页面1中点击常去的网吧,进入页面2,因为两个页面的结构有所不同,很容易让用户觉得不知身处何处。

页面1:

网站选择弹出窗口还是切换页面?,PS教程,图老师教程网

页面2:

网站选择弹出窗口还是切换页面?,PS教程,图老师教程网

4) 承载的信息量 弹出窗口可承载的信息量有限,操作流程不宜过多。

5) 内容的推广 弹出窗口没有独立的连接地址,在页面推广上有所限制。

实例一:在做信用卡频道的活动列表时,最初的设计是点击活动信息的标题后,用弹出窗口来展示活动详情,然而因为活动页面需要在推广时有独立的地址便于用户能够从其他途径直接访问到活动详情页,因此改为采用切换页面的方式。

网站选择弹出窗口还是切换页面?,PS教程,图老师教程网

2. 弹出窗口与页面内展开的区别?

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/pmsj/)

1)页面内展开能够即时的反馈用户的操作;容易给用户带来自然过度的体验;适合于对主要内容的扩充,更详细的、更近一步的内容,当用户没有看到这些内容并不会影响使用,而打开这些内容,用户可以看到更多、或是得到更丰富的功能。

实例一:个人中心的展开操作,通过页面内展开的形式显示评论信息,它并不是该好友动态的主要内容,因此作为附加信息收在了详情当中。

网站选择弹出窗口还是切换页面?,PS教程,图老师教程网

2)弹出窗口是用户点击按钮后,在页面上浮出一个层来显示进一步的内容,与页面内展开的形式不同的是,弹出层更适用于区域内的内容较为重要的时候使用,比如弹出层内包含一些操作、或重要提示。

实例二:编辑导航的界面中更改选择,下面的预览界面中会直接看到效果。

网站选择弹出窗口还是切换页面?,PS教程,图老师教程网

实例三:二次确认的提示应当采用弹出窗口:

网站选择弹出窗口还是切换页面?,PS教程,图老师教程网

进入论坛参与讨论和交作业

来源:http://www.tulaoshi.com/n/20160217/1578219.html

延伸阅读
标签: 电脑入门
win7系统现在用的人越来越多了,而有一些人知道 win7的3D切换页面 但是不知道如何实现。但是有点人甚至连这个效果都不知道,这篇文章是让大家了解怎么样才能 实现3D切换页面效果 。 1 win7系统要实现3D切换页面 的先决条件: 没有Aero特效,或者你关闭了这个特效。还有普通家庭版的win7系统也没这个特效。而关闭Aero特效中会经常包括的...
标签: Web开发
前言:经常上网的朋友可能会到过这样一些网站,一进入首页立刻会弹出一个窗口,或者按一个连接或按钮弹出,通常在这个窗口里会显示一些注意事项、版权信息   、警告、欢迎光顾之类的话或者作者想要特别提示的信息。其实制作这样的页面效果非常的容易,只要往该页面的HTML里加入几段javascript代码即可实现。下面我就带您剖析它的...
标签: Web开发
想弹就弹 随心所欲定制页面"弹出窗口"——新版网页陶吧上线了,点击 这里 进入新版网页陶吧…… 常泡在网上的朋友对“弹出窗口”一定不会陌生,像新浪、163等网站,一进入首页立刻就会弹出一个窗口,里面通常是一些告示信息,或者FLASH广告等等。其实这样的效果很容易实现,大家随我一起动手吧! 不加修饰的弹出窗口 ...
标签: 浏览器
IE怎么防止弹出窗口?   在浏览网页的时候,网站会弹出广告窗口,怎么防止这些弹出窗口呢? 在使用IE浏览器浏览网站的时候,如果网站有弹出窗口,则会自动将其阻止并发出声音提示。 1.临时允许弹出窗口 如果需要查看被阻止的弹出窗口,可以临时允许弹出窗口。单击安全条,在弹出的菜单中选择临时允许弹出窗口。以后...
    1.弹启一个全屏窗口 <html> <body onload="window.open(' http://www.e3i5.com','example01','fullscreen');"> <b>www.e3i5.com</b> </body> </html>     2.弹启一个被F11化后的窗口 <html> <body onload="window.open(' http://www.e3i5.com','example02','channelm...

经验教程

611

收藏

8
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部