设计和实现 Web 应用程序界面

注：本文转自网络 作者不明

设计好的用户界面从来都不是一件容易的事情，而设计 Web 应用程序界面尤其富有挑战性。在本文中，我首先概括地谈一谈关于 web 应用程序界面的设计考虑因素以及关于如何选择合适的实现技术。然后我将深入介绍使用 JavaServer Faces 的 web 应用程序界面的一个方面，特别是如何定制标准的错误消息。

 

设计考虑因素

为了最终获得实用且易用的 web 应用程序界面，需要正确处理许多事情：

• 导航 。因为 web 应用程序在浏览器中运行，因此用户希望能够使用浏览器的按钮进行导航（例如，使用 Back 按钮返回上一页面）。然而，正确处理这种类型的导航非常棘手，因此设计鼓励用户使用其他方式进行导航的界面非常重要。建议将用户界面设计得看起来尽可能像 传统的图形用户界面 (GUI) — 使用通用 GUI 小部件，如用于选择选项的树、显示所选项不同方面的选项卡以及顶部的菜单栏链接。此外，一定要记住 web 应用程序是由面向任务的页面组成的，这些页面必须以特定的顺序进入，而不像传统 web 站点中那样包含一组形式自由的链接。必须只允许用户直接跳转到特定页面，例如不同任务的主页面。
• 书签 。书签与导航相关，并且也可能难以在 web 应用程序中支持；例如，您不希望用户收藏仅是提交表单的结果的页面。虽然我不喜欢普通 Web 站点上的 HTML 框架，但框架在应用程序中可能非常有用，因为它们可以防止用户收藏个别页面。
• Web 应用程序限制 。 让我们来面对这种情况：web 应用程序永远不能拥有和传统的 GUI 应用程序一样的交互性，至少利用当前的浏览器技术无法做到。在 GUI 中，可以容易地让用户选中表中的多行，然后单击一次全部删除它们。相反，在 web 应用程序中，您必须以不同的方式来处理这种情况，例如在每一行放一个复选框，用户可以选中它来选择一行。传统的 GUI 还能轻松地根据用户输入来动态启用或禁用输入小部件，例如当单击了一个单选钮或复选框时。在 web 应用程序中实现动态界面组件一般需要 JavaScript 代码，因此在浏览器中禁用了 JavaScript 的用户将无法使用这种应用程序。除非您对您的用户群有完全的控制权，否则您应当以其他方式将不同选项提供给用户（例如，将单选钮与按钮组合来激活新的选 项，或使用链接来激活选项）。
• 页面大小 。尽管人们习惯滚动页面来在线阅读完整的文章，但当与每个任务相关的所有信息都包含在一个易读的页面中，或者如果仅在页面的一部分中包含滚动（利用内部框架的帮助）或通过将 Next/Previous 按钮用于大型表，用户将发现 Web 应用程序更易于使用。

 

“尽早验证用户界面是否有意义的一种很好的方式是使用模型和用户指南草稿。”

以我的经验，尽早验证用户界面是否有意义的一种很好的方式是使用模型和用户指南草稿。在编写代码之 前，我会创建纯 HTML 页面，并用它们制作用户指南早期版本中的屏幕截图，然后我请同事（或者在理想情况下请最终用户）来评阅这种早期版本。如果您以前没有试过这种策略，那么您 将吃惊地发现它不仅能够有效地揭示纯界面设计问题&#x