网站和网络应用程序正在变得互动性越来越强每一天。网站上的内容比印刷内容更有优势，如果我们愿意，我们可以让我们的用户与它们互动。我们已经讨论过了站点导航模式和流行Web内容表示模式．
现在，让我们探索一些UI模式互动网站内容．
在位编辑
就地编辑对于web应用程序来说是一个很有价值的UI，它允许用户创建或编辑内容。就地编辑意味着用户可以在页面中显示的位置编辑值，而不必转到具有另一个界面的新页面。就地编辑经常出现在WYSIWYG编辑器和专注于数据输入或组织的应用程序中(例如思维导图应用程序)。
何时使用
在你的网页应用中使用就地编辑作为UI设计模式。它使用起来更直观，用户之间的困惑也更少。
例子
下面是就地编辑的两个例子。Flickr在这个广受欢迎的照片分享网站上，用户可以编辑照片标题和某些其他信息。
可爱的图这款思维导图应用有一个就地编辑编辑器，使用起来超级简单。
拷贝盒子
复制框在与访问者共享格式化文本或代码时非常有用。复制框提供格式化的文本，可以轻松复制到用户的剪贴板。有些网站有自动复制功能，这样用户在框内点击文本时，文本就会被复制。
这节省了时间，让不太懂技术的用户更容易复制他们需要的文本。在大多数情况下，框旁边会显示一个说明，指示文本已自动复制。其他时候，提供了用于复制文本的按钮或提供了键盘快捷键。
何时使用
当你想让你的访问者从你的网站复制格式化的文本或代码时，使用一个复制框。
例子
下面是三个在网站界面上使用的拷贝框的例子。Snook.ca本博客在显示代码段的地方使用了复制框。
网页设计墙这个流行的网页设计博客使用了代码片段的复制框。
这个网站上使用的拷贝框的格式有点不同，代码显示在描述的平行位置，而不是下方。
输入建议和原谅格式
允许多种输入的搜索框和其他输入字段正变得越来越流行。例如，一个地图应用程序可能允许用户在同一个输入框中输入邮政编码、坐标或城市和州，然后建议对输入进行更正，或者允许用户按原样输入，并让服务器端代码解析和更正输入的数据。这减少了混乱，使访问者能够更快更容易地提供他们想要的信息。
与多个输入框相比，它还有助于实现更精简和更干净的布局。
何时使用
任何时候，当一个盒子有多种可能的输入时，使用输入建议和允许多种输入类型的宽容格式是有意义的。
例子
这里有三个输入建议和宽恕格式的例子。由达斯汀·柯蒂斯设计的这个重新设计的模型将使用一种宽容的格式来预订旅行，允许用户以他们想要的方式输入搜索词。
谷歌日历谷歌Calendar中的快速添加功能使用自动建议和可原谅的输入格式。
必应地图当你在寻找方向时，必应地图提供了宽大的搜索输入。
多步骤的
任何时候，当你有一个冗长的网页表单需要访问者进行交互时(例如，结账表单、问卷调查和注册表单)，如果你把它分成多个步骤，就不会那么令人生畏了。多步骤的一个常见做法是向用户显示他们正在进行流程的哪一步以及他们还剩下多少步。
注意，多步骤并不能否定web表单应该尽可能简短的事实。
何时使用
任何时候，当您有一个表单或其他流程需要回答超过6个问题时，如果您将其分解为多个步骤，对用户都是有帮助的。不过要记住，步骤太多也会让人沮丧，所以一定要考虑到这种情况。另外，确保在每个步骤之间都保存了答案，以防用户遇到任何问题。
另外，要确保用户可以回顾并返回到前面的步骤中更改或编辑他们的答案。
例子
下面是四个多步骤web表单的例子。这个网站的注册过程采用了三步web表单。
这个直播平台有一个三步注册过程。
Autobutler.dk这个网站采用了五步注册流程，但每一步都很短。
创建手机网站有四个步骤。
内容悬停控件
内容片段的UI控件可以使其更容易交互。当您将鼠标悬停在目标内容上时，通常会出现这些控件。例如，Facebook在新闻提要中大量使用了悬停控件。
将鼠标悬停在某人的状态在您的新闻提要，你可以选择阻止他们或从您的提要删除他们的更新。将鼠标悬停在你自己的Facebook状态或评论上，你可以选择删除它。它是用户友好的，并消除混乱的用户界面。
何时使用
任何时候，当你需要容易访问但不经常使用的功能时，悬停控件都是完美的解决方案。
例子
下面是几个用于内容的悬停控件示例。脸谱网在Facebook上，鼠标悬停控制允许管理员编辑Facebook页面的信息。
推特Twitter使用悬停控件来显示回复推文的选项，以及转发选项和其他控件。
