在现代网页设计中的模态窗口.docx

在现代网页设计中的模态窗口.docx

《在现代网页设计中的模态窗口.docx》由会员分享，可在线阅读，更多相关《在现代网页设计中的模态窗口.docx（29页珍藏版）》请在冰豆网上搜索。

在现代网页设计中的模态窗口

网页设计本质上讲就是把信息组织成一种可读，实用，功能性的并且可以方便的格式。

良好的内容组织是至关重要的，当你在建立一个网站的时候你需要一个强大的布局。

  您可以使用众多的界面元素和结构去组织内容，如jQuery内容滑动器（slider）和模态窗口（modalwindows。

从根本上说，就是窗口浮动在网页上。

模态窗口有许多优点。

 例如，当一个模态窗口包含一个较小的元素时，用户并不需要加载一个完成的全新新页面就可以访问它。

（达到同样效果的另一种方式来是使用基于AJAX的标签）。

 通过模态窗口，您提高网站的可用性。

一次又一次的加载网页是会令大多数用户感到烦扰，因此避免这种状况绝对是一件好事。

 模态窗口也可以为您以节省空间通过避免使用不需要出现在主页面的大元素。

 例如，您只需提供一个链接，缩略图或某种按钮， 而不是把完整的视频的放在网页上。

在这篇文章里面，我们将了解建立多态窗口的最佳做法和趋势。

 我们也会提供许多良好的模态窗口的例子和一些脚本来帮助您开始建设他们。

你可以对下面的文章也感兴趣：

o30ScriptsForGalleries,SlideshowsandLightboxes  

oHowToUseHelpElementsToImproveYourDesigns

o8LayoutSolutionsToImproveYourDesigns

oDesigningDrop-Down-Menus:

ExamplesandBestPractices

oBreadcrumbsinWebDesign

WhentoUseModalWindows 何时使用模态的Windows

模态窗口是一个很好的结构元素，但是他们并不一定适合所有的内容或媒体类型。

这里有几个元素素，您应该考虑使用模态窗口。

LightboxforImages/Videos 为了图片/视频的lightbox 

最明显的使用模态窗口的是lightbox，用一种干净和实用的方式来展示图片和视频。

 使用lightbox展示图片，用户不需要只是为了一个单一的图片或视频而加载新的页面。

 模态窗口也在内容布局中节省了空间，使您只显示图片或视频的缩略图，点击缩略图，它的模态窗口打开。

 使用缩略图代替整个元素，你需要少得多的空间而且布局看起来更有组织。

此外，你通常会模糊或渐暗模态窗口后面的的背景，把焦点放在图片或视频本身，从而创造一个良好的环境使访问者可以查看媒体。

  对褪色，模糊模态窗口的背景的细节，看下面给出的样式实例。

当使用了lightbox来实现一个图像画廊，一定要确定链接每个图像到相同的lightbox，提供“下一个”和“上一个”的按钮，使用户可以方便的浏览的一组图片。

用户可以不关闭并重新打开模态窗口，以查看画廊中的每一幅画。

ContactForms联系表单

在模态窗口中的表单是一种常见的联系表单。

 模态窗口为了这个目的做的很好，是因为您不用为了这个功能建立一个完整的网页。

 依据可用性来说，立即可用和容易找到对于联系表单是非常重要的。

 使用浮动窗口，联系表单在每个页面是容易访问。

 联系表单一般很小，所以他们会相当不错组装在这些窗口中。

Sign-Up/Log-InForms注册/登录表单

你可以用一个模态窗口来代替一个单独的页面让用户登录和注册。

这种方法可以让表单在每一个页面可用并且容易访问。

你可以包含一个登录创库在页面的标题的地方、

Alerts/Notices警告/提示

当您想提醒用户一个关键功能或行动将发生，最好的方法是通过一个模态窗口。

 当一个模态窗口在一个页面打开，用户不能忽视它，因为它将直接显示在屏幕中央，那里真是用户关注的地方。

此外，其余内容将褪色并禁用，因此用户什么都不能做，直到他们看到模太窗口然后单击关闭。

在下面的截图中，您可以看到一个模态窗口被用来提醒用户将进行下载。

请注意，你不应该使用模态窗口作为弹出的代替办法。

 请确定只有当当前会话中有很重要的事情发生的时候警示访问者。

 在许多情况下，一个简单的褪色块布局回比一个模态窗口好得多。

HelpElements/Tips 帮助元素/贴士

额外的帮助元素和提示内容是没有必要对于网站的功能和导航，所以你不想让他们占据空间并且放在主要内容里面。

 并不是所有的用户想要使用他们。

 然而，他们需要放在谁想要使用它们就能轻易找的位置，因此使用模态窗口似乎可以合理地显示帮助内容和技巧。

用户可以方便地打开和关闭它们，而且不需要把它们当作页面的内容和功能。

以下是一个很好的帮助元素在浮动窗口的例子。

 这个窗口远小于其他的我们已经看到，但它包含着类似的功能。

例如，通过一个半透明的边界使视觉上分离并且有一个“退出”（关闭）按钮在右上角。

SearchBoxes搜索框

这是一个不太常见的做法，但你会偶尔会看到模态窗口中包含搜索框。

先进的搜索功能会占用了不少的空间，因此，您可以把它在一个浮动窗口以防止大搜索框占据大量空间。

 你可以在下面的截图看到这在实例中。

EmbeddingPDFs嵌入PDFs

有时候你需要嵌入文件在你的网站上，如PDF格式的简历。

 你可以使用模态窗口，代替用户可以点击下载PDF到他们的电脑或其他的嵌入的PDF的方式，达到同样的目的。

 以这种方式，PDF格式可以很容易地浏览，而不会影响用户体验的。

通过模糊的背景，你也把重点放在你的PDF格式，提高了可用性。

UsabilityandStylingPractices可用性和样式实例

下面列出的可用性和样式的做法和趋势，在你创建模态窗口的时候记得这些。

BlurandFadeOutBackgroundofWindow模糊和渐暗窗口背景

对于可用性和样式最重要的是淡出浮动窗口后面的页面。

 你将会看到这样的实例几乎无处不在，最常于lightboxes用来显示媒体文件。

 通过淡出网页，您将让用户所有的注意力集中在浮动窗口上。

 如果背景不淡出，用户甚至可能不会马上意识到窗口是“漂浮”的网页上面而不是部分的主要布局。

 一个窗口物理地浮在网页上的样子使增加了网站的维度。

它看起来更整洁并且消除混乱。

总体而言，淡出提供窗口和页面所需的分隔度，增强了功能性和实用性。

确保淡出的程度，但留下一个轻微的不透明，使用户知道该网页并没有消失。

例如，一个黑色淡出加上75％左右不透明效果就非常好。

但是，对于网站的一个白色的背景，褪色的页面用白色并且一点点不透明，再加上使用落下式阴影。

有时你会看到一个模态窗口，并不淡出整个页面，而是具有很强的阴影来增加层次感。

 这就造成同样的效果，并提供了类似的视觉分离。

你可以在下面的截图看到使用这种技术完美使用。

ExitStrategy:

Button,ClickOutsideWindow,EscapeKey退出策略：

按钮，点击窗口外，退出

为了提高功能性，始终提供一个退出按钮在窗口上面的角落里。

 标准做法是用一个简单的圆形带有“X”图形的按钮，这样做对于用户来说非常整洁并且相当明显。

 在下面的lightbox中，你可以清楚地看到退出按钮。

其他允许用户关闭模态窗口的方式是让他们点击窗口后面的页面，点击模态窗口中的显示元素或者使用Esc键。

DisableAllOtherPageFunctions禁用页面上其他所有功能

禁用窗口背后页面里的所有功能。

 当模态窗口打开的时候，它应该是去焦点，并且没有按钮应该能够被点击。

 浮动窗口应该跟其余内容分离开来，所以禁用页面能创建一个更好的分离。

 保持页面滚动功能是一个好主意，不过，如果需要的话， 用户至少应该有一些自由返回到页面。

UsingTransitionEffects使用过渡效果

过渡效果的小细节，如果用正确的方式做看起来会很不错。

 一个很好的过渡效果是模态窗口的渐进渐出。

但是，不要做的太过让点用户觉得烦。

 保持渐变的简短但要稍微能注意到。

在下面的例子中，灰色的模糊背景渐进渐出，创造了非常好的效果。

Scripts,ToolsandPlug-InsForLightboxesandModalWindows

LightboxesandModalWindow的脚本，工具和插件

当你开始集成模态窗口的进程的时候，你可能需要一些东西来构建它。

 这里有11个出色的基于模态窗口的jQuery脚本和插件。

 每个都有自己独特的特点和功能，所以查看他们所有的。

FancyLightbo

这是一个比较好的LightboxjQuery插件。

 它很时尚并且非常具有功能性。

它有整洁的风格，标记功能和网页很好的整合，并与AJAX结合。

Lightbox2

这是原版的lightbox的脚本，仅仅只是为了图片而创建的。

它简单的风格而且支持一组图片的浏览。

FacebookImage/ContentViewer

这有一个基于facebook浮动窗口很棒的脚本。

它支持图片和内容，并且用跟facebook非常著名的窗口相似的风格

WoorkMootoolsLightbox

这是一个来自woork的很棒的教程，他指导你怎么创建一个简单的lightbox的脚本。

这个脚本包含了支持一组图片和标签的特性。

nyroModaljQueryPlug-In

这个简单的窗口插件支持所有形式的媒体文件，包括ajax。

他也有很好的显示/隐藏的效果。

jQueryAlertDialog

这个jQuery插件是用来警告和对话的窗口。

它拥有众多的功能并且可以很好的传递信息给用户。

LightWindow

这里是一个有很多特性的综合性的lightbox的脚本，例如嵌入pdf，支持多个图片画廊，SWF执行等等。

PrototypeWindowClass

另外一个深入系列的的脚本，有各种不同的功能，例如对话框，登录窗口，ajax内容窗口，图片lightboxes等。

ThickBox3.1

一个很流行的lightbox工具，Thickbox。

他支持图片，在线内容和AJAX。

prettyPhoto

这是一个时尚的图片lightbox，很好的支持图片集。

jQueryExpose

这个是有一点不同于模态窗口的脚本。

他展示选中的HTML元素。

当你单击一个特定的元素，页面剩下的元素会渐出。

这是一个很棒的模态窗口的替代品。

它也支持页面的渐出而是注意力集中在选中元素上。

ShowcaseofModalWindows 模态窗口的展示

Grooveshark

Grooveshark是一个结构量和风格良好的应用。

模态窗口也无一例外，一个模态窗口，被用在用户的注册登录的模块。

Digg

Digg是另外一个使用浮动窗口来注册和登录的用户生成的网站。

登录的链接放在页面的标题处。

注意一个半透明的边界被用来代替渐出和投影。

这个边界提供了更多的视觉隔离感。

AppleMovieTrailer

Apple在很多地方使用模态窗口。

你可以看到一个窗口备用来观看电影预告片。

这个窗口建立的很好使得大的视屏文件不会影响到窗口的表现。

AppleiMac:

DesignGallery

另外一个Apple网站的模态窗口的例子。

它有非常简单干净但是强烈的投影来实现视觉隔离。

Espionage

另外一个一个图片的lightbox的例子。

在这个例子中，图片扩展到窗口的边缘，并且推出按钮直接覆盖在图片上。

在这里没有边界是必要的因为强烈的色彩对比

Daylite3

一个很好备件渐出的窗口的例子。

多个页面内容被集成在一个单一的模态窗口中。

Behance

另外一个联系表单，这里有一个熟悉的“发送给朋友”的元素，这个被警察放在模态窗口中。

因为网页有很深的背景色，一个淡的半透明的边界被用来做分隔。

Facebook

Facebook有非常容易辨识的模态窗口。

这个包含信息链接到一个帮助元素在注册表单里。

并且，一个很强的半透明边界。

KISSmetrics

这是一个很棒的在模态窗口登录表单。

这个表单有良好的风格并且包含了帮助元素来提高可用性：

只是因为登录窗口并不意味着你可以忽视可用性。

NasiBriyaniLounge

另外一个登录表单。

这个有一点不同。

他是用一个简单的弹出窗口代替一个完整的模态窗口。

PixelightCreative

一个自由职业者网站里的lightbox。

当你单击每一个工作档案，一个大一点的图被打开在lightbox

Capo

另外一个时尚的窗口，这是一个软件漫游的视频，这是一个普通的例子。

它和包含了一个简单的边界和投影。

Accept-Idea

另外一个浮动窗口附属于搜索窗口。

当你输入一个查询，结果显示在模态窗口里。

这个窗口有基本的功能，包括一个推出按钮和边界。

TheTypographicDeskReference

一个很简单的模态窗口，用强阴影来增加深度。

EvernoteWebApplication

这个显示一个警告当你打开一个Everbote‘s网页应用。

注意页面是怎么渐出的，它是的所有的注意力集中在窗口内容中。

Iceberg

另外一个在浮动窗口的登录表单。

着一个没有渐出和阴影而用一个边界来分隔。

ViewziCorporate

一个漂亮风格的模态窗口。

注意干净的大腿处按钮在上角，大的填充和半透明背景。

MailChimp

这个lightbox有半透明边界和页面的渐出。

TheResumator

注意这个怎么强烈的图片背景跟页面背景的对比。

一个标签被用在这里而不是属于窗口，创捷了很好的外观。

CheckoutApp

一个风格很不错的图片模态窗口，这个窗口用一个投影来增加深度并且一个实心的边界提供给多的分隔感。

Pixelmator

另外一个很好的下载警告例子。

这个警告当下载开始的时候离开弹出，注意非常棒的样式，就像窗口的轻微不透明。

Ballpark

这里有一个视频的模态窗口，通常用在公司和软件的网站里。

你经常看到QuickTime和SW在模态窗口里，但是这个是嵌入一个Vimeo的视频。

并且有非常好的渐进和渐出效果，

Backpack

这是另外一个用来放视频的窗口，再次注意页面是怎么渐出更淡的而不是更深的颜色。

Guifx

Animagelightboxforaportfolio,alwaysagreatideaifyouwanttoincludelargerimagestoshowdetailsofyourwork.

一个为了作品档案的图片lightbox，如果你想包括一个大一点的图片显示你的工作详细一点的信息的话，这是一个很好的主意。

FurtherResources

Youmaybeinterestedinthefollowingrelatedposts:

o30ScriptsForGalleries,SlideshowsandLightboxes

oHowToUseHelpElementsToImproveYourDesigns

o8LayoutSolutionsToImproveYourDesigns

oDesigningDrop-Down-Menus:

ExamplesandBestPractices

oBreadcrumbsinWebDesign

AbouttheAuthor关于作者

MattCronin是一个自由网页和图片设计者。

他是SpoonfedDesign 的作者。

一个设计博客，包括一些很好的提示，教程，灵感等等。

 SpoonfedDesign是VAEOUCreativeNetwork的一部分, 它是一个即将推出一些新服务的新成立企业。