Web应用程序界面编写规范

如何规范软件开发过程中的界面设计？如果详细设计阶段对于界面的设计做了严格的说明，那么开发阶段的界面设计不会存在问题，但是很多项目组在进行完概要设计后直接进入编码阶段，这样如何规范项目整体的界面风格就是一个需要认真解决的问题。针对这样的问题我的解决方式是，对系统中所有的界面进行分类，例如：数据列表、简单数据操作、复杂业务操作、工作流程处理等，然后对每一类操作界面编写相应示例，在示例中表明需要规范处理的地方，然后汇编成册形成界面开发规范，下面对简单数据操作界面的规范进行示例说明：

简单数据操作页面编写说明

1、ASPX页面：

说明：代码中圆括号标注的片断需要符合规范

<%@ Page language="c#" Codebehind="AppNew.aspx.cs" AutoEventWireup="false" Inherits="ManagementSystem.Administration.AppNew" %>

<%@ Register TagPrefix="uc1" TagName="Header" Src="../UserControls/Header.ascx" %>

<%@ Register TagPrefix="uc1" TagName="Footer" Src="../UserControls/Footer.ascx" %>

<uc1:header id="Header1" runat="server"></uc1:header>（包含头文件）

<form id="Form1" method="post" runat="server">

         <table class="body">（内容Table）

                   <tr>

                            <td class="body">（内容Td）

                                     <table class="body">（内容Table）

                                               <tr>

                                                        <TD class="dialog_header" colSpan="2">（如果包含内容主体头，设置主体头）

                                                                 <TABLE class="body">

                                                                           <TR>

                                                                                    <TD align="center" width="30">（设置主体头图标位置）<asp:image id="Image1" runat="server" ImageUrl="../Images/header.gif"（设置主体头图标）></asp:image></TD>

                                                                                    <TD>新增应用程序：</TD>

                                                                           </TR>

                                                                 </TABLE>

                                                        </TD>

                                               </tr>

                                               <tr>

                                                        <td colSpan="2"><br>

                                                        </td>（正文开始前空行）

                                               </tr>

                                               <tr>

                                                        <td class="itemHeader"（数据字段列样式）>应用程序名称：</td>

                                                        <td><asp:textbox id="appNameTxt" CssClass="textbox"（各类控件样式，参见控件样式列表） runat="server" Width="275px"></asp:textbox><asp:requiredfieldvalidator id="RequiredFieldValidator1" runat="server" ErrorMessage="*" ControlToValidate="appNameTxt"></asp:requiredfieldvalidator></td>

 

                                               </tr>

                                               <TR>

                                                        <TD class="itemHeader">（数据字段列样式）<FONT face="宋体">连接地址：</FONT></TD>

                                                        <TD><asp:textbox id="urlPathTxt" CssClass="textbox" runat="server" Width="440px"></asp:textbox></TD>

                                               </TR>

                                               <TR>

                                                        <TD class="itemHeader">（数据字段列样式）<FONT face="宋体">排序：</FONT></TD>

                                                        <TD><asp:textbox id="orderByTxt" CssClass="textbox" runat="server"></asp:textbox><asp:regularexpressionvalidator id="RegularExpressionValidator1" runat="server" ErrorMessage="只能输入整数！" ControlToValidate="orderByTxt"

                                                                           ValidationExpression="^[0-9]+$"></asp:regularexpressionvalidator></TD>

                                               </TR>

                                               <tr>

                                                        <td colSpan="2"><asp:label id="errorLbl" runat="server" ForeColor="Red"></asp:label><br>

                                                        </td>（正文结束放置错误提示Label或者直接空行）

                                               </tr>

                                               <tr>

                                                        <td colSpan="2"><FONT face="宋体">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp; （第一个提交按钮距离左边距10个空格）</FONT>

                                                                 <asp:button class="buttonbar" id="Button1" runat="server" Text="确 定" CssClass="button"（按钮样式）></asp:button><FONT face="宋体">&nbsp;&nbsp; （按钮间距2个空格）

                                                                 </FONT>

                                                                 <asp:button class="buttonbar" id="Button2" runat="server" Text="取 消" CausesValidation="False"

                                                                          CssClass="button"></asp:button></td>

                                               </tr>

                                               <tr>

                                                        <td colSpan="2"><br>

                                                        </td>（内容结束空行）

                                               </tr>                                     

                                     </table>

                            </td>

                   </tr>

         </table>

</form>

<uc1:footer id="Footer1" runat="server"></uc1:footer>

2、设计时界面：

3、运行时界面：

 

以上是自己的简单解决方案，希望各位能够贡献自己更加有用的方法。