软件项目实训及课程设计——如何合理地设计软件应用系统的Web表示层

软件项目实训及课程设计指导——如何合理地设计软件应用系统的Web表示层

1、用户界面是软件应用系统的门面，在设计和开发实现时必须高度重视

软件应用系统表示层内的各个组件是软件应用系统的前端界面组件，它们直接与应用该软件应用系统的最终操作者发生各种人机交互行为。如果某个软件应用系统在用户界面上缺乏引人注目的特色——如操作界面不友好、操作不够体贴和应用不够方便等用户体验不佳，即使该软件应用系统的性能非常优异或者软件应用系统的整体体系架构设计也比较合理，系统所涉及的业务功能逻辑的实现也都满足了客户的应用需求，但仍然难以获得使用者的青睐。如下示图为某个Web应用系统的数据查询显示结果页面局部截图。

2、熟悉和应用与Web表示层功能实现有关的核心技术

（1）XHTML+ CSS + JS技术

XHTML本身并不是什么新的标记语言，它其实是更“规范”的 HTML 版本。可以这样理解XHTML标记语言：“XHTML = HTML + XML”，也就是满足“XML语法”要求的HTML页面。

W3C组织发布XHTML技术规范的主要目的是希望Web应用系统的开发人员能够设计并实现出比较“严谨”和“规范”的HTML页面，也就是要求Web页面设计者能够按照XML（eXtensible Markup Language，可扩展的标记语言）的“语法规范”进行Web页面设计，以避免Web浏览器在页面信息显示时产生出“二义性”的错误，并保证在各个不同的Web浏览器中能够实现一致的显示效果。

（2）CSS 是 Cascading Style Sheet 的缩写

CSS译作“层叠样式表单”，它是用于增强和控制Web网页的样式并允许将样式信息与Web网页内容相互分离的一种标记性语言。Web应用系统的开发人员利用CSS的规则定义，可以统一规范Web网页的“整体格式”，而不必要分别给Web网页上的每一个HTML标签单元做属性设置和表现定义。

CSS能够改进常规的HTML标签的显示风格设置的不足，因为常规的HTML标签的“显示风格”的设置是直接在HTML标签中通过标签内带的属性设置来达到。而应用CSS进行Web页面的“表现”定义，不仅可以扩展HTML标签的属性定义的不足，而且还能够达到将Web页面的“内容”（数据）与“表现”（显示风格）相互分离，提高Web页面的可维护性。

（3）JS是JavaScript脚本语言的缩写

Web应用系统的开发人员利用JavaScript脚本语言编程实现Web应用系统中的各种行为——行为就是对Web页面中各种内容的交互及操作。应用“XHTML+ CSS + JS”技术可以实现将Web页面中的“内容”和“表现”以及“行为”三者相互分离，这将更易于对Web页面中的“内容”的维护和“表现”形式的扩展、“行为”功能实现的可扩展和可维护性。

（4）J2EE Web核心技术——JSP和Servlet组件技术

J2EE Web组件中的JSP（Java Server Pages，Java服务器端页面开发技术）组件技术是由Sun公司（现为Oracle公司）倡导、许多公司参与，最终由Sun公司发布的一种针对Java技术平台下的动态网站开发技术的标准（目前为JSP2.4版本）。

JSP构建在Java Servlets技术基础之上。因此，JSP其实是一种Web服务器端的动态网站实现技术。一个JSP页面是由标准的HTML标签、CSS样式单文件、JavaScript脚本程序及JSP服务端标签和嵌入其中的Java程序脚本代码所组成，并以*.jsp作为JSP页面文件的扩展名。如下示图为一个*.jsp Web页面的代码示例的局部截图。

J2EE Web组件中的Servlet组件技术是使用Java Servlet 应用程序编程接口及相关类和方法所构成的 Java 程序，它在服务器端的Servlet容器（如Tomcat服务器环境）中运行并遵守Sun公司发布的Servlet组件技术规范。而Servlet组件技术详细地规范和定义了容器的基本功能和Servlet的程序结构和编程实现的接口。如下示图为Servlet程序代码示例局部截图。

（5）Web2.0中的RIA和AJAX技术

富因特网应用程序RIA技术是取B/S（Browser/Server，浏览器/Web服务器）结构之长与C/S（Client/Server，客户机/服务器）模式之长，是个非常好的系统结构模式，因为它可以将胖客户端应用程序的优点与瘦客户端应用程序的部署和可管理性优点结合起来。当然，富因特网应用程序中的“富”的概念主要包含两方面：数据模型的丰富和用户界面的丰富。

富因特网应用程序所具有的主要特点如下：丰富的表现能力和强大的客户端处理能力，不仅可以最大限度地使用本地系统的资源，也还能够实现无刷新地更新Web客户端屏幕内容。蓝梦客户关系信息管理系统（CRM系统）应用JavaScript + AJAX（Asynchronous JavaScript and XML，异步JavaScript和XML）技术实现RIA的效果——其中JavaScript用于客户端界面的显示和数据处理，而AJAX技术则用于客户端与服务器的信息传输。

因为JavaScript在客户端的表现力不容置疑，利用JavaScript脚本语言程序几乎可以实现类似Windows应用程序界面效果。而AJAX技术一直被用于实现“无刷新”的Web页面，它和JavaScript脚本程序相互配合可以完成数据从Web服务器和Web客户端的传输。

3、Web应用系统用户界面设计的基本原则——尽可能操作简单和方便用户应用

软件应用系统的设计和开发人员必须重视系统表示层内的相关组件的设计和编程实现，这不仅包括程序组件的结构和组件类之间的关系，努力提升软件应用系统的用户体验。而且也还包括Web应用系统的用户体验设计，在设计和功能实现时除了应该要遵守如下的基本原则：以用户为中心、视觉美观、主题明确、内容与形式统一等原则之外，也还需要遵守如下的原则。

（1）遵守简单明了、简洁清新的原则

俗话说“简约就是美（简单就是美）”，这个短短的一句话就道出了美丽的实质。软件应用系统的设计人员（特别是界面设计者如前端美工人员）寻找和发现美丽，却常常忘了美丽其实是很简单的——这反映在软件应用系统的用户界面的设计方面，用户操作的要求和交互的信息要尽可能以最直接、最形象和最易于理解的方式呈现在用户面前。

下图所示为示例项目银行账户信息管理系统中的开户操作的功能页面内容设计效果图示局部截图。

（2）遵守操作灵活、使用方便的设计原则

符合用户应用习惯和方便用户使用的第一原则；另外，为了能够方便用户尽快地熟悉本软件应用系统，应该简化软件应用系统中的核心功能的操作过程，尽可能地提供操作向导形式的操作界面；同时再辅助提供实时帮助提示信息（文字、图片或者声音等形式）以进一步提示在完成某个功能操作过程中的各种要求。

在示例项目银行账户信息管理系统中大量地应用Ajax（Asynchronous JavaScript and XML，异步JavaScript 和XML）技术提供实时、有针对性的帮助提示信息（文字、图片或者声音等形式），请见下图所示的用户登录功能页面中的用户名称动态提示的图示效果。

因为软件应用系统的使用者（也就是通常所指的用户）不一定全都是计算机专业的技术人员或者相关的专业人员，而无需提供有关的帮助提示信息。软件应用系统本身在运行过程中应该要根据功能操作的实现过程分时、分步提供在线求助的功能，甚至为用户提供使用向导，这无疑会给使用者用户带来极大的方便性和简洁性。

4、每个Web页面文件的容量应该尽可能小以达到快速浏览和显示

在软件应用系统的Web页面设计时，系统前端设计和开发人员首先应该尽可能地减小每个Web页面的文件长度以减少Web页面的加载量——这就需要设计和开发人员尽可能地优化Web页面内的HTML（HyperText Markup Language，超文本标记语言）标签代码，这包括在发布Web页面时，去掉HTML文档中的注释信息以及冗余的换行标记等标识说明信息类的标签。

其次，还应该要在保证图片精度的应用要求下尽可能地降低Web页面中的各个图片文件大小和数量，加快Web页面加载的速度。

另外，许多Web页面设计人员为了能够使Web页面更绚丽，通常会在Web页面中内嵌Flash动画或者Gif动态图片文件以辅助提供动态信息的应用要求，但如果在Web页面中滥用Flash动画会严重影响Web页面的响应速度。

5、保证Web页面的浏览效果能够兼容各种主流的浏览器软件

基于B/S（Browser/Server，浏览器/服务器模式）体系架构的软件应用系统的Web页面需要适应和满足面向全世界或者某个地区的访问者的浏览要求，而这些访问者可能会使用不同厂商所提供的不同的浏览器软件。而目前不同厂商的浏览器系统对W3C组织所发布的HTML标准的支持是有差别的，导致软件应用系统中的同一Web页面在不同的浏览器系统环境中的浏览显示效果最终表现出不相同的效果。

因此，系统前端设计和开发人员还需要针对不同的Web浏览器进行兼容方面的测试，并提供对应的解决方案——如Internet Explorer、Firefox、Chrome和Opera等浏览器。

为此，在Web页面设计时应该应用“CSS+DIV”技术实现。因为，采用“CSS+DIV”技术实现的Web页面不但符合W3C组织所发布的HTML标准，并且还非常美观。下图所示为示例项目银行账户信息管理系统在微软IE浏览器中的浏览效果的局部截图。

来源：与杨先生共同进步