作为设计师，我们总是试图从我们的界面中获得最大的价值，最大化我们所拥有的空间。虽然多年来已经设计了许多解决方案，但其中最重要的一个始终影响着访问者访问他们所寻找的内容的方式。从简单的技巧，如工具提示而且下拉菜单，到复杂单页网站由Ajax提供支持，进步的信息披露已成为一股强大的力量。
本文探讨的方法进步的信息披露以及它对我们界面设计工作的影响。
什么是渐进披露?
在我们开始之前，让我们快速定义渐进披露。我们都知道破坏性的杂乱会影响可用性因此，尽可能简化界面是有意义的。
渐进式披露将内容分成更小、更容易理解的块(只在需要时显示它们)。例如，HTML元素可以对用户隐藏可见性或显示CSS中的属性;以及为事件编写脚本，例如onclick可以使东西出现时请求。通过使用这些内容表示设计模式，我们可以保持我们的界面简单，帮助用户更轻松地完成他们的任务。
好的，坏的和冷漠的
问题是，用户可能相当苛刻。大多数人都要求他们用来完成日常任务的工具具有强大的功能和灵活性——我们在网络上为他们提供了越来越复杂的交付方法——但用户也希望以简单的方式交付这种功能。例如，许多用户可能想要功能丰富的应用程序，而不需要学习他们已经知道的任何东西(例如，不需要阅读使用手册)。
这种双重需求复杂性而且易用性必须要处理，即使这两件事看起来是截然相反的。
渐进式披露可以为网站带来简单和丰富的功能。渐进式披露的想法最初是作为软件设计的指导方针。
当您单击菜单中的一个项目时，通常会出现一个对话框，其中包含一系列精心组织的选项。披露不仅发生在可见的对话框中，还发生在用于在类别之间移动的选项卡中。在网络上，由于用户需求的增加，这种技术已经开始被依赖。
网页设计者会公开页面的部分内容，根据需要提供次要的“高级”选项。渐进式披露的好处如下:
- 简洁、简单、高效的界面(小屏幕的天赐礼物)
- 重要内容的优先顺序是将最初的焦点放在最常见的功能上
- 不太重要的内容被隐藏起来，以免让访问者感到困惑
- 如果减少滚动和需要更少的刷新，则可以节省时间
- 由于新手用户会采取更容易、更易于管理的步骤，所以错误发生的几率更小
也有一些缺点需要考虑:
- 可访问性可能很棘手，比如帮助屏幕阅读器导航到页面部分
- 页面加载时间是否会因为预加载内容的大小而增加
- 客户端技术，如JavaScript (Ajax)，CSS3或闪光可能被用户禁用(因此您必须考虑到优雅的降级，这可能会增加开发时间)
- 太多的选择导航路径可能会让人困惑
- 搜索引擎和社交网络的索引可能会受到渐进式披露方法的影响(例如在使用
显示:没有;CSS属性)
渐进式披露基础
在设计一个考虑到逐步披露的网站时，我们应该将内容按优先级划分为主要或次要类别。主要内容立即出现在页面的正常流中(并且高度可见)。次要内容通过以下三种方式为自己创造空间:
- 在请求时占用浏览器窗口的一部分(正如我们看到的在请求时向下滑动的内容)
- 替换布局中的可见内容(例如在选项卡界面中)
- 覆盖主要内容(如在lightbox/模态窗口)
一级和二级披露方法以不同的方式实现其目的。
渐进式披露设计模式
让我们看看渐进式披露在设计工作中的一些表现方式。因为这种技术已经存在很长一段时间了，设计师们想出了一些创新的方法来给内容添加深度和内容，同时让可读性和用户的学习曲线更容易。与任何模式一样，每个网站都有自己的要求，你应该在更新你的布局之前调查你的选择。
主要的渐进式披露方法
以下是一些主要的披露方法。
超链接
单击一个链接会将我们重定向到另一个页面(或者在片段链接的情况下滚动到目标内容)。这可能会导致丢失可见内容，但这是导航内容的最基本和可识别的方式。
滚动
滚动提供了一种按优先级顺序显示内容的方法。这很简单，只要确保重要内容出现在页面的上方就可以了。
CSS媒体查询
不同的浏览设备对内容有不同的要求。例如，打印样式表可以删除不必要的大块(如菜单)并避免浪费墨水。媒体查询，这在文章中已经讨论过响应式网页设计在屏幕尺寸较小的情况下(上网本和智能手机的情况就是如此)，将内容从普通视图中删除，也有助于实现这种披露效应。
服务器端技术
语言，例如PHP使我们能够向数据库、外部文件甚至其他网站发出请求。当用户需要这些内容时，我们可以围绕他们创造体验，而不仅仅是展示通用的静态内容。
二级渐进披露方法
下面是一些二次披露的方法。
鼠标和焦点事件
如果你用了:徘徊伪类，您将知道我们可以基于鼠标事件(如鼠标悬停)动态地样式化内容。对悬停事件的反应可能包括显示工具提示、显示选项卡内容或在下拉菜单中显示菜单。焦点事件(可以使用:专注动态伪类)也可以以类似的方式帮助逐步公开。
有条件的CSS
特别是两个CSS3伪类(:目标而且:检查)可用于渐进披露(在这里查看概念验证）.
Ajax
通过使用Ajax，内容按需技术已经显著流行起来。Ajax允许我们根据用户的决定请求新内容，然后嵌入它，而不需要刷新页面。然而，JavaScript对于这个过程是必不可少的(对于少数用户来说可能会有问题)。
弹出窗口
虽然许多设计师不推荐它们，但弹出窗口是另一种渐进披露的形式。通过与当前页面的交互，它们会弹出一个新窗口或新内容。这种方法比其他方法更不干净，更有侵略性。
模态窗口
渐进披露并不总是涉及交换内容(无论是临时的还是长期的)。您可以显示一个lightbox、一个逐步向导或一个对话框，从而将焦点放在所请求的内容上。
要记住的一些事情
有了所有这些技术，我们应该着重介绍一些使用这种动态内容表示形式的指导方针。我们已经讨论了这种方法的优点和缺点。下面，您将找到一些关于如何最好地消除或最小化对用户体验的任何损害的实用建议。
保持简洁，首先确定单页还是多页布局适合您的内容(将长文章和教程扩展到多个页面上没有坏处)。您需要确保公开的内容得到用户的充分注意(例如，灯箱使背景褪色以减少噪声)。限制选择，这样用户就不会被过多的选项和内容所淹没，而是要提供足够的选项让他们做出明智的决定。
永远不要强迫用户选择一个选项。
一页还是多页?设计师经常面临这个问题。
和往常一样，兼容性对该过程至关重要。您采用的方法应该有良好的浏览器支持。如果您选择带有悬停事件的下拉菜单，那么您可能需要使用锚链接来确保这一点IE6用户可以看到下拉菜单。
如果你使用Flash或JavaScript，那么要确保在它们没有可用的时候有替代方案，这一点很多网页设计师都忘记了。这些都是基本要点，但仍然很重要!
用户可以禁用脚本和Flash，因此要确保有可用的替代方案。
为了避免可见性的怪癖，给你的链接贴上标签，这样用户就能知道下一步要做什么。有逻辑地组织和组织你的机制(让副本随机出现在屏幕上是没有帮助的)，使用行动调用指向用户的关键数据(因为材料不会立即可见，用户需要知道他们可以在哪里找到内容)。
神秘肉导航就像猜谁，没有乐趣。
此外，关于可访问性，确保屏幕阅读器能够有效地浏览公开的内容。清楚地使用跳过链接和标记片段标识符(因为大多数屏幕阅读器将此作为读取页面部分内容的指示，而不是重复所有内容)。
在内容和主体中嵌入跳转链接有助于定位屏幕阅读器用户。
最后，关于性能的说明。从技术上讲，渐进式公开允许我们将内容隐藏起来，或者不显示在页面上，直到需要时才显示(这减少了页面请求和跨部门下载)。但是，如果只是将内容隐藏起来，直到用户需要时才加载，那么单页布局的性能可能会受到影响，因为没有使用的内容正在被加载。
尽管Ajax缓解了这一问题(通过异步请求)，但这仍然是一个问题(Ajax会导致大量的持久网络流量，这可能会降低网站的速度)。
展示逐步披露的例子
以下是现实世界中渐进式披露的几个例子。
超链接很简单。用户只需点击并进入一个有更多内容的页面。
传统的滚动使画布下方的内容可见。
窗口中间滚动可以通过iframes和CSS overflow属性启动。
位置滚动(将用户推到页面下方)可以通过脚本触发。
打印样式表揭示内容，希望没有垃圾!
媒体查询可以收缩和扩展内容，以适应不同的设备
亚马逊有一个产品数据库，并通过服务器端请求公开它们。
工具提示可以临时显示内容，而且可以相当优雅。
导航选项卡可用于将页面的部分分组并划分为类别。
web表单中的下拉菜单不仅可以通过列表实现，还可以通过选项输入实现。
断接框(滑出菜单)可以以结构化的方式显示各种选项。
使用目标或选中的伪类会给人一种多页深度的感觉。
JavaScript改变可见性的方法创建的效果类似于CSS3，但具有兼容性的优势。
可以通过交换内容来生成面板。
(该事件甚至可以是计时的。)
一些网站使用AJAX请求来加快内容的显示速度。
弹出窗口通常不受用户欢迎，但它们是一种公开形式。
网站可以用Flash做惊人的事情。
遗憾的是所有的缺点。
Aightbox效果在网络上随处可见。它们能很好地容纳小物件。
循序渐进的向导可以将逐步披露的内容分解为可消化的块。
对话框和警报窗口为决策提供了基本的细节级别。
总结
在屏幕上显示内容有许多不同的方法，逐步显示是最令人兴奋的方法之一。它使我们越来越不需要刷新页面，也不需要导航到一个独特的位置，只为了看一些轻微的变化;它甚至允许我们简化网站的复杂方面。增强一个网站是很简单的，但是最大化可用空间却是一项相当艰巨的任务。
当你为客户或自己制作设计时，考虑披露可能对你的工作流程产生的影响。也许冗长的网络表单会变得更容易;也许您可以使用lightbox来更好地区分页面上有用的内容;为了减少信息过载，总是可以选择给用户更多(或更少)的选择。无论你如何向访问者展示你的精彩内容，都要考虑到它，要有创意!
