菜单 关闭

为什么帧很糟糕(大多数时候)

通过 雅各布·尼尔森12月1日,一千九百九十六

总结:框架打破了Web的统一模型,引入了一种新的方式来查看尚未很好地集成到Web其他方面的数据。


无框架标志从我收到的邮件来看,到目前为止,我在AlertBox专栏中所做的最具争议性的声明是将“使用帧”列为第一个网页设计十大错误manbetx官方网站手机版.

对于新的或没有经验的网页设计师,manbetx官方网站手机版我坚持我最初的建议。框架:说不。

关于高技能网页设计师使用框架,manbetx官方网站手机版我已经稍微改变了我的看法:那些真正地知道他们在做什么,有时可以用框架来达到很好的效果,即使是经验丰富的设计师也建议尽量少用框架。manbetx官方网站手机版

框架的基本问题

TimBerners-Lee最初的网页设计的一部分天才在于在一个想法中完全统一了几个概念,manbetx官方网站手机版页面

  • 用户的看法屏幕上的信息
  • 单位航行(当你点击一个链接或像书签一样激活一个导航动作时,你会得到什么)
  • 文本的地址用于通过网络检索信息(URL)
  • 在服务器和作者的编辑单元(除非使用嵌入对象(如图像文件),而图像文件确实要求作者为一个页面管理多个文件)

网页的基本设计是以网页为信息的原manbetx官方网站手机版子单位,网页的概念渗透到网络的各个方面。原始网络的简单性有助于它的易用性和快速普及。

框架打破了Web的统一模型,引入了一种新的查看数据的方法没有很好的整合到网络的其他方面。带框架,用户在屏幕上的信息视图现在由序列导航操作而不是单一的导航动作。

导航不适用于框架,因为导航单位与视图单位不同。如果用户在浏览器中创建书签,他们在以后跟踪书签时可能无法获得相同的视图,因为书签不包含页面框架状态的表示。

更糟的是,URL停止工作:浏览器顶部显示的地址信息不再构成窗口中显示信息的完整规范。如果作者复制URL以将其作为超文本锚定包含在自己的某个页面中,那么该锚定将不会引导读者进入所需的视图,而是引导读者进入框架集的初始状态。同样地,如果用户决定向朋友发送电子邮件,并建议签出页面,如果使用了框架,则从浏览器复制URL将不起作用,因为URL指向框架集,而不是当前视图(包含朋友感兴趣的信息)。鉴于社会过滤是互联网上最强大的信息发现机制之一,禁用URL作为寻址机制是一个巨大的灾难。

框架的实现问题

除上述基本问题外,当前的框架实现有几个小问题。这些问题将在未来几年消失,但对于1997年manbetx官方网站手机版(甚至可能是1998年)完成的设计,它们仍然是最小化框架使用的理由。

有帧的用户挑战浏览器

Interse 1996年11月的浏览器统计数据显示了以下浏览器使用分布:

  • Netscape 2:13%的用户
  • Netscape 3:47%的用户
  • Internet Explorer 3:28%的用户
  • 其他浏览器或早期版本:13%的用户

由于四舍五入,百分比总和为101%。因此,13%的用户甚至不能看见有框架的网站。当然,原则上可以使用 为这些用户提供替代内容的功能,但大多数设计师不必manbetx官方网站手机版费心设计他们的页面的两个版本,并为支持浏览器版本的框架保留下载站点的“有用”链接。<p><p>13%的用户仍在使用Netscape 2,它有一个最坏的可用性问题要在Web上看到,目前为止:浏览器中的后退按钮简单化你没有在有框架的网站上工作。背面功能是一个绝对必要的安全网,它让用户有信心在他们可以随时回到坚实的基础上自由导航。我们从一些最早的用户导航行为研究中了解到,back是Web浏览器中第二个最常用的导航功能(在简单的“单击链接跟踪”操作之后)。因此,断开后退按钮不小于可用性灾难。<p><p>结合这两种统计数据得出结论,超过四分之一的用户要么根本看不到帧,要么只能在遇到严重可用性问题时这样做。尽管其中许多用户将在明年升级,到1997年底,可能还有10%左右。请记住,许多人并不把网络浏览视为他们生活的中心部分,因此也不会投入太多精力来跟上不断变化的工具。<p>so,即使框架改进了设计,manbetx官方网站手机版他们只为3/4的用户这样做,这意味着,为了值得付出额外的努力和加重框架问题的风险,许多浏览器无法适当地打印框架页面。当然,大多数浏览器不打印任何东西但至少正常情况下,正常情况下,常规的页面都是完整的。带框架,打印命令通常会导致打印单个帧。使用滚动框架打印整页很困难:应该只打印框架的可见部分,还是应该允许内容扩展并占用比屏幕上更多的空间?<p><h3>创作问题</h3><p>The original release of html was simple enough that many people learned it without any problems.框架是另一回事,不过。像<code>comp.infosystems.www.authoring.html这样的新闻组充斥着来自web作者的问题,他们迫切需要知道为什么他们的框架不能按预期工作。框架目前很难学习,许多网页作者编写错误代码。<p><h3>Search Problems<h3><p><a class=“out”href=“http://www.eric-a-hall.com/articles/19980209.html”title=“case study:how search enginesmanbetx官网手机登陆 index and describe a site with and with out frames-eric hall's net.opinion feb.1998“>Search Engines have trouble with frame s”(搜索引擎在使用帧时有问题),因为它们不知道要将哪些帧组合作为导航单元包括在索引中。<p><h3>User Preferences.<h3><p>Many websites th a t provide user s a choice between regular and framed versions have found th a t most user s prefer frame free designs.<p><h2>when it's ok to use frame s.<h2><manbetx官方网站手机版p使用帧的主要问题是确保URL继续工作。这样做,所有超文本链接的锚标记中必须有一个<code>target=“Top”<code>attribute(例如,<code><a href=foo.html target=“Top”><code>)。添加<code>>顶部</code>可使浏览器清除所有帧,并用新的帧集替换整个窗口。目标帧集可能有许多帧与出发帧集中的帧相同,并将缓存在浏览器中,但原则上,通过强制完全重新加载,浏览器获取目标的新URL。这意味着导航操作(例如,bookmarking)再次工作,并且该URL可供其他人链接到。<p><p>The only exception from the need to use a<code>target=“_to p”<code>attribute is when frames are used as a shortcut for scrolling within a single page.例如,一个很长的目录或其他字母表列表可以在顶部有一个框架,列出字母表中的字母。单击其中一个字母将导致列表在另一帧内滚动,同时保持用户在同一页上,因此不会破坏导航。<p>frames are also used for“meta pages”that comment on other pages.例如,Web设计样manbetx官方网站手机版式指南可能需要将设计原则的讨论与遵循(或打破)规则的整个页面的实时示例混合在一起。在这些情况下,嵌入的页面应被视为嵌入的图像(即使它是作为独立页面实现的),并且用户将要添加书签的“主要”信息应是注释框的内容。<p>finally,似乎在HTML 4.0中引入的<a href=“https://www.w3.org/tr/wd-frames-970331”>inline frames<a>内联的框架将从属于主页面,用户仍然可以在主页上加书签并像往常一样导航。由于主流浏览器仍然不实现HTML4.0,我们不知道内联帧是否会有自己的实现问题:特别是,是否能找到打印具有滚动内嵌框架的页面的好方法是值得怀疑的。(我目前的最佳猜测是,最好打印滚动内嵌框架的当前可见部分,以保持主页的布局,但有些用户可能希望打印整个内容,因此,可能需要混乱的选项设置。)<p><h2>towards a richter node model.<h2><p>in the long term,我们需要一个比框架更丰富的网络超文本节点模型。例如,复合节点,类型节点,节点的层次嵌套,具有不同视图的节点,具有影响其他节点的操作的节点都是在超文本研究中探讨过的所有想法。当我们朝着这些更丰富的信息结构前进时,保留网络的积极属性将是很重要的。<p><h2>have these conclusions changed?<h2><p>在我们的课程中学习最新的可用性指南,网址为<a class=“new”href=“//www.swagol.com/events/tutorials/usability.html”title=“nielsen norman group:conference tutorial outline”>web page ux design<a>at the<a class=“new”href=“//www.swagol.com/training/”manbetx官网手机登陆title=“conference program and list of usability trai万博官manbetx官方网站手机版网manbetx下载ning tutorialS“>UX Conference”(用户体验会议)这篇文章</span>:<strong><a href=“https://twitter.com/intent/tweet?url=//www.swagol.com/articles/why frames suck most of the time/&text=why frames suck(most of the time)&via=nngroup“>twitter<a><a href=“http://www.linkedin.com/shareArticle”?mini=true&url=//www.swagol.com/articles/why frames suck most of the time/&title=why frames suck(most of the time)&source=nielsmanbetx官网手机登陆en%20norman%20group“>linkedin<a><a href=“http://www.facebook.com/sharer.php”?u=//www.swagol.com/articles/why frames suck most of the time/“>facebook<a><a href=“mailto:?”subject=nn/g文章:Why frames suck(大多数时间)&body=//www.swagol.com/articles/Why frames suck most of the time/“>email</a>><hr/><section>><footer class=“l-subvision”><div class=“learn more”><h2>learn more</h2><p><a href=“/articles/subscribe/”>subscribe to the weekly newsletter</a>to get notifieD about future articles.<P><DIV><DIV class=“row show for small down related content”><DIV class=“column small-12”><H3>articles<H3><ul class=“no bullet”><li><a href=“/articles/in page links/?lm=为什么大多数时候帧都很糟糕&pt=文章“>锚定可以吗?在页面链接中重新评估lm=为什么帧会占用大部分时间&pt=文章“>产品对比表,manbetx官网手机登陆服务,和功能lm=why frames suck most of the time&pt=article“>give thanks for good ux</a><li><a hrefmanbetx官网手机登陆=”/articl万博官网manbetx下载es/top-10-underming/?lm=why frames suck most of the time&pt=article“>Top 10 During web design misses.</a><li><a href=”/articles/modal nonmodal dialog/?lm=why frames suck most of the time&pt=article“>modal&nonmodal dialogs:when(manbetx官方网站手机版&when not)to use them.<a><li><ul><div><div class=“column small-12 topic links”>all articles about:<ul><span id=“gadataalltopics”class=“ga data layer”aria hidden=“true”>web usab易用性,Web趋势,UI元素,设计错误,计算机历史</h3><ul class=“no bullet”><li><a href=“/courses/human mind/?lm=why frames suck most of the time&pt=article“>The human mind and usability.<a><li><a href=”/courses/ux basic training/?lm=why frames suck most of the time&pt=Article“>ux basic training</a>><li><a href=”/Courses/web page design/?lm=why frames suck most of the time&pt=article“>web page ux design</a>><li><a href=”/courses/emerging patterns web design/?lm=why frames suck most of the time&pt=article“>Emerging patterns in interface design(接口设计中的新兴模式)</a><li><ul><div class=“small-12 column”><h3>research reports<h3><ul class=“no bullet”><li><a href=“/reports/b2b websites usabiliTy?lm=why frames suck most of the time&pt=article“>B2B website availability for converting users into leads and customers</a>><li>><a href=”/reports/strategic design faqs/?lm=why frames suck most of the time&pt=article“>Strategic design for frequently asked questions.<a><li><ul><div class=“small-12 column”><h3>online seminals.<h3><ul class=“no bullet”><li><a href=“/online seminals/funDamental缺陷平面设计/?lm=why frames suck most of the time&pt=article“>The fundamental defect in flat design</a><li><a href=”/online minuals/millennials online/?lm=why frames suck most of the time&pt=article“>Millennials online</a>><li><a href=”/online minuals/university websites/?lm=why frames suck most of the time&pt=article“>大学网站UX Essentials</a><li><ul><div><div class=“hide for small down row related content”><div class=“medium-6 columns”><div><h3>articles.<h3><ul class=“no bullet”><li><a href=“/articles/in page links/?lm=为什么大多数时候帧都很糟糕&pt=文章“>锚定可以吗?在页面链接中重新评估lm=为什么帧会占用大部分时间&pt=文章“>产品对比表,manbetx官网手机登陆服务,and Features</a></li> <li><a href="/manbetx官网手机登陆articles/万博官网manbetx下载ux-thanks/?lm=why-frames-suck-most-of-the-time&pt=article">Give Thanks for Good UX</a></li> <li><a href="/articles/top-10-enduring/?lm=why-frames-suck-most-of-the-time&pt=artmanbetx官方网站手机版icle">Top 10 Enduring Web-Design Mistakes</a></li> <li><a href="/articles/modal-nonmodal-dialog/?lm=why-frames-suck-most-of-the-time&pt=article">Modal & Nonmodal Dialogs: When (& When Not) to Use Them</a></li> </ul> </div> <div> <h3>Research Reports</h3> <ul class="no-bullet"> <li><a href="/reports/b2b-websites-usability/?lm=why-frames-suck-most-of-the-time&pt=article">B2B Website Usability for Converting Users into Leads and Customers</a></li> <li><a href="/reports/strategic-design-faqs/?lm=why-frames-suck-most-of-the-time&pt=article">Strategic Design for Frequently Asked Questions</a></li> </ul> </div> </div> <div class="medium-6 columns"> <div> <h3>UX Conference Training Courses</h3> <ul class="no-bullet"> <li><a href="/courses/human-mind/?lm=why-frames-suck-most-of-the-time&pt=article">The Human Mind and Usability</a></li> <li><a href="/courses/ux-basic-training/?lm=why-frames-suck-most-of-the-time&pt=article">UX Basic Training</a></li> <li><a href="/courses/web-page-design/?lm=why-frames-suck-most-of-the-time&pt=article">Web Page UX Design</a></li> <li><a href="/courses/emerging-patterns-web-design/?lm=why-frames-suck-most-of-the-time&pt=article">Emerging Patterns in Interface Design</a></li> </ul> </div> <div> <h3>Online Seminars</h3> <ul class="no-bullet"> <li><a href="/online-seminars/fundamental-flaw-flat-design/?lm=why-frames-suck-most-of-the-time&pt=article">The Fundamental Flaw in Flat Design</a></li> <li><a href="/online-seminars/millennials-online/?lm=why-frames-suck-most-of-the-time&pt=article">Millennials Online</a></li> <li><a href="/online-seminars/university-websites/?lm=why-frames-suck-most-of-the-time&pt=article">University Website UX Essentials</a></li> </ul> </div> </div> </div> <div class="row related-videos l-subsection"> <div class="small-12 columns"><h3>Videos</h3></div> <ul class="medium-block-grid-3 topic-related"> <li class="publication-list-item video"> <div class="video-container"> <div class="thumbnail"> <a href="/videos/designing-search-suggestions/?lm=why-frames-suck-most-of-the-time&pt=article" class="thumbnail-container"><img src="https://media.nngroup.com/media/videos/thumbnails/Designing_Search_Suggestions_Thumbnail.jpg.420x236_q95_autocrop_crop_upscale.jpg" /><span class="background fa fa-stop"></span><span class="fa fa-youtube-play"></span></a> </div> <div class="caption"> <a href="/videos/designing-search-suggestions/?lm=why-frames-suck-most-of-the-time&pt=article">Designing Search Suggestions</a> <time>4 minute video</time> </div> </div> </li> <li class="publication-list-item video"> <div class="video-container"> <div class="thumbnail"> <a href="/videos/effective-online-advertising/?lm=why-frames-suck-most-of-the-time&pt=article" class="thumbnail-container"><img src="https://media.nngroup.com/media/videos/thumbnails/5_Tips_for_Effective_Online_Advertising_Thumbnail.jpg.420x236_q95_autocrop_crop_upscale.jpg" /><span class="background fa fa-stop"></span><span class="fa fa-youtube-play"></span></a> </div> <div class="caption"> <a href="/videos/effective-online-advertising/?lm=why-frames-suck-most-of-the-time&pt=article">5 Tips for Effective Online Advertising</a> <time>4 minute video</time> </div> </div> </li> <li class="publication-list-item video"> <div class="video-container"> <div class="thumbnail"> <a href="/videos/usability-physical-world-vs-web/?lm=why-frames-suck-most-of-the-time&pt=article" class="thumbnail-container"><img src="https://media.nngroup.com/media/videos/thumbnails/Usability_in_the_Physical_World_vs_on_the_Web_Thumbnail.jpg.420x236_q95_autocrop_crop_upscale.jpg" /><span class="background fa fa-stop"></span><span class="fa fa-youtube-play"></span></a> </div> <div class="caption"> <a href="/videos/usability-physical-world-vs-web/?lm=why-frames-suck-most-of-the-time&pt=article">Usability in the Physical World vs.在网络上</a><time>4 minute video<time><div><div><li><ul><div><footer><article><div><div class=“row”><div class=“column small-12 show for small down l-navrail announcements”><div><div><div><footer id=“pagefooter”><div class=“row hide for print”><div class=“small-12 medium-6 columns show for medium up”><h4>popular topics</h4><ul class=“topics”><li><a href=“/topic/applications/”>application design<a><li><a href=“/topic/ux design process/”>design流程</a>><li>><a href=“/topic/e-commerce/”>e-commerce design<a>><li>><a href=“/topic/eyetracking/”>eyetracking<a>><li>><a href=“/topic/human computer interaction/”>human computemanbetx官方网站手机版r interaction<a>><li>><a href=“/topic/information arch万博官网manbetx下载itecture/”>information ar体系结构</a>><li>><a href=“/topic/interaction design/”>interaction design<a>><li>><a href=“/topic/intranets/”>intranet design<a>><li>><a href=“/topic/mobile and tablet design/”>mobile and tablet design<a>><li>><a href=“/topic/劝说design/”>劝说design</a>><li>><a href=“/topic/research methods/”>research methods</a>><li>><a href=“/topic/user testing/”>user testing</a>><li>><a href=“/topic/web availability/”>web availability<a>><li>><a href=“/topic/writing web/”>web writing&content strategy</a></li><ul>><div><div class=“small-12 medium-6 columns”><div class=“row”><div class=“small-5 medium-5 columns”><h4>about</h4><ul class=“no bullet”><li><a href=“/about/contact/”>contact information<a>><li><a href=“/about/”>about us</a>><li><li><a href=“/about/why nn g/”>why nn/g?<a>><li><a href=“/return policy/”>return policy</a>><li><a href=“/cookie declaration/”>cookie declaration</a>><li><a href=“/privacy policy/”>privacy policy</a>><ul>><div class=“small-7 medium-7 columns”><h4>follow us.<ul class=“social”><li><a href=“/articles/subscribe/”class=“button newsletter”>subscribe to our newsletter.<a><lmanbetx官网手机登陆i><a href=“https://twitter.com/nngroup”class=“button”><span class=“fa fa twitter”aria hidden=“true”><span>follow nn/g on twitter.<a><li><a href=“/feed/rss/”class=“button”><span class=“fa rss square”aria hidden=“true”><span>subscribe to our rss feed</a>.<li><ul><ul class=“website s”><li>visit don norman's website<br><a href=“https://www.jnd.org/”target=“new”>www.jnd.org</a><li><li>visit tog's website.<br><a href=“https://www.asktog.com/”target=“new”>www.asktog.cmanbetx官网手机登陆om</a>.<li>.<ul>.<div>.<div>.<div class=“row”><div class=“small-12 columns copyright”><p><a href=“/copyright and reprint info/”>copyright</a>?1998-2019 Nielsen Norman Group,保留所有权利。<p><div><div><footer><button id=“back to to p”title=“back to to p”><span class=“text”><span class=“fa caret up arrow”aria hidden=“true”><span><br/>to p</span><button><script type=“text/javascript”src=“https://media.nngroup.com/static/js/afa4ad2d5088.js”><script src=“https://media.nngroup.com/static/js/scroll to fixed.js“><script><script src=“https://media.nngroup.com/static/js/collapsle.js”><script><script type=“text/javascript”>;$(function()var lastscrolltop=window.pageyoffset document.documentelement.scrolltop;function scrolltotopdisplay()var scrolltopthreshold=570;var currentcrolltop=window.pageyoffset document.dcrolltop;var$el=$(\35;backtototop;backtotop);;if(CurrentScrolltop>lastScrolltop);var滚动偏移量=CurrentScrolltop lastScrolltop;if(滚动偏移量>1);$el.hide();\\125;;;;;;els;if(CurrentScrolltop==0);$el.hide();;els;if($(Window.Scrolltop()>ScrollTop阈值);$el.show();$el.show();125;$el.EL.Hide.Hide();\;\\=CurrentScrollTop;函数ScrollToTop()$(窗口.SCROLLTOP(0);}函数InStRotoTopToE()({ Foundation,UsList.Simple()){ ScLoopTopDeScript()}($(SytOuttoPoTo));单击(函数({ ScRotoTopToE);;});} IITScLotoTopToE(;)} /Script>< Script > $(函数){var $菜单= $('Nav.Mouth');var$mainmenu=$menu.find('>ul');var$子菜单=$mainmenu.find('li>ul');var$menutogleButtons=$('header.main').find('.toggle');函数togglemenu(open)open=open==未定义?真实:开放;$menutogleButtons.toggleClass('active');$menu.slidetoggle(300,函数());$submenus.hide();}$menutogleButtons.on('单击',托格勒梅努);$mainmenu.find('a').on('click',函数(e)var$子菜单=$(this).siblings('ul');var$openLinks=$menu.find('open').not(this);$SubmenuS.Not($SubmenuU.Slideup();$openlinks.removeclass('open');$(this).toggleClass(“open”);$Submenu.SlideToggle();(});$('ToggleSearchForm')。单击(函数(事件)$(this).ToggleClass('opened');$('header.main>.search.hide for medium up').toggleClass('hide-for-small-down');event.preventDefault();$('MobileSearchTerm').focus();返回错误;(});$.get(“/cart/ajax/header/”,函数(json)if(json.html!='')$('.shopping cart').append(json.html);$('.shopping cart a').prepend('<span class=“fa shopping cart”><span>');$('.shopping cart').toggleClass('hide');});$.get('/api/user/login_status/',函数(json)var$loginlink=$('loginlink');if(json.authenticated)var profile_name=json.name.trim()profile';$loginlink.html('<a href=“/profile/”>'+profile_name+'.<a><a href=“/logout/”“>logout<a>');}else$loginlink.html('<a href=“/log in/”>登录到UX认证</a>');万博官网manbetx下载});(});<script><script>function push cookieconsent()cookiebot.consent.preferences&&datalayer.push(event:“cookieconsent preferences”);cookiebot.consent.statistics&&datalayer.push(event:“cookieconsent statistics”);cookiebot.consent.marketing&&datalayer.push(event:“cookieconsent marketing};<script><script>function cookiebotcallback ou onaccept()//The cookiebotcallback ou onaccept will only fire the last defined//instance of the callback function,因此pushcookieconsent需要//添加到在其他//模板中定义的回调的任何实例中。请参见视频详细信息模板以获取示例。pushCookieConsent();};<script src=“https://media.nngroup.com/static/js/articles.js?201manbetx官网手机登陆70829“><script><script type=“text/javascript”>function insertvideoplaceholder()$(“videocontainer”).html('<p>You must accept cookies in the“targeting”category in order to display youtube videos.html('<p>You must accept cookies in the“targeting”category in order to display youtube vid<a href=“javascript:cookiebot.renew();”>更改您的cookie同意首选项</a><p>');}函数insertvideo()$(“videocontainer”).html('<div class=“flex video widescreen youtube”><iframe src=“https://www.youtube.com/embed/?rel=0“frameborder=“0”allowfullscreen><iframe><div>');}if(cookiebot.consent==未定义)insertvideo();}函数cookiebotcallback ou onaccept()pushcookieconsent();if(cookiebot.consent==未定义cookiebot.consent.marketing)insertvideo();}else insertvideoplaceholder();};函数cookiebotcallback_ondecline()pushcookieconsent();如果(!)cookiebot.consent.marketing)insertvideoplaceholder();}}<脚本>。</body></html>