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