近十年来，界面设计和系统功能设计相分离成为界面设计的主流思想，界面代码根据界面描述模型来自动生成已成为开发人员的目标。为提高图形用户界面的开发效率和质量，许多界面模型被提了出来。这些模型分为概念模型和陈述模型两类。这两类模型各有其优缺点：概念模型的优点在于直接针对界面、描述简洁，缺点在于无法支持全过程开发；陈述模型的优点在于支持全过程开发、支持自动生成、描述能力强，缺点在于模型设计过于复杂，模型整合比较困难。介绍了一种支持用户界面自动生成的界面模型FMP，它借鉴了概念模型和陈述模型的优点，以实现图形交互系统自动生成、支持系统体系结构设计为目标，包括功能模型、内在模型和基于界面模板的表示模型三个部分。其中基于界面模板的表示模型突破了现有的表示模型缺乏对交户对象之间的关系考虑的局限性，并且吸收和借鉴用户界面设计模式的思想。本课题的核心在于，从整体上对基于FMP模型的Web用户界面设计模式进行阐述，详细介绍了三种具体的用户界面设计模式：自由格式设计模式、表格格式设计模式和图形格式设计模式。其中，自由格式设计模式是三种设计模式介绍的重点，提出自由格式设计模式的需求和设计实现结构，探讨自由格式设计模式的形式化规范，完善用户对界面模板自由格式布局的灵活控制。给出自由格式设计模式、图形格式设计模式以及表格格式设计模式从AUI模型到Asp.net页面之间的代码自动生成，它们是基于FMP模型的Web用户界面设计模式的重要组成部分。最后，文章以自由格式展示模式给出具体的测试实例，进一步验证正确地实现了从界面模板自由格式展示到Asp.net页面之间的映射；验证了生成代码逻辑上的正确性和使用上的健壮性；验证了基于FMP模型的Web用户界面设计模式加快了Web页面的开发速度。