UI设计规约(一)：兼容JQuery UI

1. 简介

      本文档主要介绍了UI设计的指导原则以及UI的功能性需求，并结合CSS对UI进行了功能性划分。

1.1 目标

      改善UI的无序及混乱状态，赋予UI的业务性意义，促进UI的复用与持续性改进，充分利用CSS的继承、组合等特性，保证一致的UI风格。
      对开发人员而言，不需要了解复杂的CSS属性，只需要使用HTML DOM元素的class属性就能达到展现的目的，同时能通过style属性进行扩展（扩展的内容不能包含颜色、背景图片等破坏UI的风格）。

2. 功能

      UI设计原则应满足从粗到细，从整体到局部的设计原则，注重UI整体风格的统一性。
      从功能上来划分，UI元素可以划分为布局性元素、基本组件元素、状态型元素、UI构件元素、辅助性元素、图标以及个性化元素。

2.1 布局性元素

      布局性元素决定了程序的整体的布局风格，主要是指页面区域的划分，例如头部区域、内容展示区、版权声明区、菜单区、功能区等，见下图示例。

      布局性元素都是容器，应该尽可能设计得粗放些（不要把每个元素做得太重，CSS样式同理），便于重复使用与扩展，推荐使用DIV进行布局，其class命名建议使用ui-layout-前缀。
      如.ui-layout-header {
width:100%;
height:200px;
}

2.2 基本组件元素

      基本组件元素是为控件服务的，例如一个普通的面板（见图2）可划分为容器定义、头部区与内容区，其class命名建议使用ui-widget-前缀。
      基本组件元素包括：
1. ui-widget:容器定义。
2. ui-widget-header：控件头部定义。
3. ui-widget-content:控件内容区定义。
4. ui-widget-shadow:控件阴影定义。
5. ui-widget-overlay:控件遮照效果定义。

2.3 状态型元素

      状态型元素用于与用户的交互，通过元素颜色、背景的变化来提示用户进行适当的操作，其class命名建议使用ui-state-前缀，主要包括以下几种状态：
1. ui-state-disabled:禁止状态；
2. ui-state-default：默认状态
3. ui-state-info:信息提示
4. ui-state-hover:鼠标滑过状态
5. ui-state-active:激活状态
6. ui-state-highlight:高亮状态；
7. ui-state-alert:警告；
8. ui-state-error:错误状态；

2.4 UI构件元素

      UI构建元素包括tab、tree等各种控件，一般来说，如果前面地基本组件元素、状态型元素设计得较好的话，此处控件可由程序员轻松完成拼装。

2.5 辅助性元素

      辅助性元素主要用于简化程序员的开发难度，其class命名建议使用ui-helper-前缀，包括以下几种元素：
1. ui-helper-hidden：隐藏元素
2. ui-helper-clearfix:清除元素状态

2.6 图标

      控件图标与快捷图标，建议采用ui-icon命名空间。

2.7 个性化元素

      系统的个性化元素。