软件运用系统表示层内的各个组件是软件运用系统的前端界面组件，它们直接与运用该软件运用系统的终极操作者发生各种人机交互行为。如果某个软件运用系统在用户界面上缺少引人瞩目的特色——如操作界面不友好、操作不足谅解和运用不足方便等用户体验不佳，纵然该软件运用系统的性能非常精良或者软件运用系统的整系统统架构设计也比较合理，系统所涉及的业务功能逻辑的实现也都知足了客户的运用需求，但仍旧难以得到利用者的青睐。如下示图为某个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浏览器中的浏览效果的局部截图。
