WEB界面标准化开发规范

中国移动福建公司网管中心1中国移动通信企业标准XX-X-XXX-2009中国移动福建公司网管系统WEB界面标准化开发规范CMFJNetworkManagementSystemApplicationIntegrateTechnologySpecification版本号：1.0.02009-2-6发布2009-2-6实施中国移动通信集团福建有限公司发布中国移动福建公司网管中心2目录1前言.....................................................................31.1范围...............................................................31.2引用文件...........................................................31.3缩略语.............................................................32参考标准.................................................................43主要内容及约束范围.......................................................54页面设计总体原则.........................................................65页面编码规范.............................................................86窗体基本布局描述.........................................................96.1基本的页面布局.....................................................96.1.1基本的页面布局：上、左、右。.................................96.2布局要求...........................................................96.3布局样例..........................................................127界面最小元素定义........................................................157.1字体..............................................................157.2按钮..............................................................157.3列表..............................................................157.4表格..............................................................167.5文本框............................................................167.6图片..............................................................168通用界面开发要求........................................................178.1登录界面..........................................................178.1.1界面风格要求................................................178.1.2界面操作要求................................................178.1.3登录界面标准样例............................................178.2基于IFrame方式集成界面...........................................188.3其他要求..........................................................199编制历史................................................................20附录1.图标集..............................................................21附录2界面模板样例.........................................................21附录3CSS样例..............................................................21附录4IFrame整合页面框架...................................................21附录5颜色表...............................................................21中国移动福建公司网管中心31前言1.1范围本规范是中国移动福建公司网络运营支撑系统WEB界面标准化开发规范，根据中国移动福建公司各专业网管系统的实施，将会根据建设步骤对本规范进行修改、完善和扩充。本规范由中国移动通信集团福建有限公司网管中心提出并归口。本规范由规范提出并归口部门负责解释。本规范起草单位：中国移动通信集团福建有限公司。本规范主要起草人：黄海辉、倪志刚、陈成钦、陈锡清、邱琰琛、陈庆、陈美娟、鲁仁华、林晓起、吴祥炜、史振煊。本规范解释单位：中国移动通信集团福建有限公司网管中心1.2引用文件1.3缩略语中国移动福建公司网管中心42参考标准《中国移动网管系统监控界面标准化规范》中国移动福建公司网管中心53主要内容及约束范围本规范描述了中国移动福建公司网管系统WEB界面的设计目标、建设原则。本规范描述了中国移动福建公司网管系统WEB界面的总体要求。本规范描述了中国移动福建公司网管系统WEB界面的操作功能。本规范描述了本次技术规范系列引用的规范性文件、统一术语。本规范适用于指导中国移动福建公司网管系统WEB界面的设计和实施。中国移动福建公司网管中心64页面设计总体原则简单明了原则：用户的操作要尽可能以最直接、最形象、最易于理解的方式呈现在用户面前。对操作接口，直接点击高于右键操作，文字表示高于图标示意，尽可能的符合用户对类似系统的识别习惯。符合用户习惯为方便使用的第一原则。其它还包括，实现目标功能的最少操作数原则，鼠标最短距离移动原则等。用户导向原则：为了方便用户尽快熟悉系统，简化操作，应该尽可能的提供向导性质的操作流程。实时帮助原则：用户需要能随时响应问题的用户帮助，每个系统需加入FAQ功能建议提供高级自定义功能：为熟悉计算机及软件系统的高级用户设置自定义功能，可以对已经确定的常规操作以及系统的方方面面进行符合自身习惯的自定义设置。包括常规操作、界面排版、界面样式等种种自定义。界面色彩要求：计算机屏幕的发光成像和普通视觉成像有很大的不同，应该注意这种差别作出恰当的色彩搭配。对于需用户长时间使用的系统，应当使用户在较长时间使用后不至于过于感到视觉疲劳为宜。例如轻松的淡彩为主配色，灰色系为主配色等等。切忌色彩过多，花哨艳丽，严重妨碍用户视觉交互。界面平面版式要求：系统样式排版整齐划一，尽可能划分不同的功能区域于固定位置，方便用户导航使用；排版不宜过于密集，避免产生疲劳感。页面最小：由于Web的网络特性，尽可能减小单页面加载量，降低图片文件大小和数量，加快加载速度，方便用户体验。图片在网络上传送会占用很大的带宽，为了保证页面的下载速度。图片要尽量做到最小，一个单独的图片最大不能超过30K，一页网页中总的图片不能超过80K。网页基本元素的大小限制（参考）：元素类型大小限制K数Logo12K导航Button2-3KBanners25K客户提供的图片20KFlash文件50K一个网页75K（若为SiteMap页面则可以大至100K）屏幕适应：Web界面需要适应不同用户屏幕大小。中国移动福建公司网管中心7浏览器兼容：需要主流浏览器浏览效果（IE6,firefox）。最少垂直滚动：尽可能减少垂直方向滚动，尽可能不超过两屏。避免水平滚动：由于将导致非常恶劣的客户体验，尽可能禁止浏览器水平滚动操作。避免隐藏（右键）操作：浏览器的右键操作不符合用户体验习惯，尽可能避免。原则上不提倡弹出窗口：影响用户体验（可以使用层方式）中国移动福建公司网管中心85页面编码规范每个系统的首页中配置菜单时统一使用index开头的页面名称，如index.jsp、index.html、index.aspx等。客户端访问时的URL类似于。各URL中的字符尽量全为小写字母。每个页面的title必须设置为和菜单配置中相同的中文，例如在菜单项中配置为“客户管理”，则此页面的title也要设置为“客户管理”。页面的编码格式标准为UTF-8，未进行改造的旧系统也可保留原有的GB2312格式。除此之外，不再使用其它编码标准。对于页面中元素的属性设置都需要用引号包括起来；页面文件的路径应使用相对路径；一般不在表现层页面文件中直接编写业务逻辑代码。在Web开发时，一般情况下不允许使用Active控件，JavaApplet等插件开发技术，应使用类似AJAX等标准Web化的方式进行开发。如确有需要使用加载插件，需经局方项目批准。在HTML页面文件中，CSS不应嵌入HTML元素中；也不应将控制代码嵌入HTML文件中中国移动福建公司网管中心96窗体基本布局描述6.1基本的页面布局6.1.1基本的页面布局：上、左、右。页面布局采用：上、左、右布局方式各区域间间隔上下左右模块间间隔margin，统一5px模块边界和内容间间隔padding，统一5px上区域定义：Banner栏，含公司Logo、系统名称、菜单导航，日期、登录帐户、在线人数等等。原则上高最小100像素。用户信息区域显示当前用户信息用户导航区域用户页面导航左区域：导航栏(可选，可自动隐藏，可改变宽度),原则上宽最大不超过1/4用户屏幕，导航深度原则上不超过3层。右区域：工作区（含可选所在模块导航）页脚定义：公司版权信息（链接至统一门户系统），在线问题反馈等等。6.2布局要求界面布局合理,不宜过于密集，也不能过于空旷，按照适当的比例分配空间，利用空间要合理。以此为根本，根据网管系统各个窗体所涉及内容来决定窗体布局的空间分配。一般情况下，窗体应满足左右内容匀称（如图15），每列宽度相同（图16），每行高度相等（图17），内容框内的字体大小相同且对称（图18）等原则；同时弹中国移动福建公司网管中心10出多个窗体时，缺省认为窗体之间的内容应该对齐（图19），默认的窗体大小尺寸应该与字体和屏幕相适应，如果弹出窗口较多，可根据实际需要以层叠方式布局。图1左右匀称示例图图2列宽相等示例图中国移动福建公司网管中心11图3行高相同示例图图4字体对齐示例图中国移动福建公司网管中心12图5多窗口内容默认对齐示例图6.3布局样例中国移动福建公司网络运营支撑系统是采用门户技术对所有网络运营支撑的功能模块进