Web设计系统

关于设计系统 About

服务范围 Service

本设计系统服务 Web 产品，包含端内 HTML5 页面，和端外运营活动页面。

本设计系统服务 UE 和 FE 同学，既是前端开发的 CSS 规范，也包含 UI 设计的模块化应用和展示。

系统优势 Benefits

用户体验和视觉设计原则有据可循。

设计和前端规范的统一，保证Web设计从交互、设计到前端开发的高度还原。

设计思路 Thinking

本设计系统应用了 Brad Frost 的 Atomic Design System 对 CSS 的编写和设计模块的归纳进行分类。如将模块分为原子（Atomic）和分子（Molecules）等。在 Web 设计开发中，设计师和前端开发通过组织原子和分子，构成组织和页面。

本设计系统也吸取了腾讯财付通《页面重构中的设计模式》中的面向设计的CSS思想。即将样式分为base、main、skin三个部分，实际上也是从原子到分子再组织成页面的思想。

上述两条也是2013年以来比较火的 BEM样式设计思想，国内从2011年就已经在Qzone落地，可以说走在世界的前面。

设计系统的目录分类参考了 Aaron Gustafson 推荐的 Salesforce 的 Design System，应该是2016年 Web 设计领域最好的设计系统。

设计思想的趋势是相似的。

工程模块 Components

本设计系统使用 fis-didi 作为开发自动化工具

应用本设计系统中的编码和设计规范，需要在项目中引入下面两个工程模块：didiui, dd

系统维护 Contribution

Clone Git仓库

Clone UI：访问 https://git.xiaojukeji.com/beatles/ui，Fork 它并 Clone 到本地

Clone Didiui：访问 https://git.xiaojukeji.com/didi-component/didiui，将它 Clone 到本地

添加模块

准备文件

拉取 didiui 和 ui 的 git 更新

准备好下面2个文件：

            ui/page/guideline/main.html
            ui/page/guideline/inc/side_menu.html

在 ui/page/guideline/inc/ 中新建模块页面，基础设计组件命名为a_xxx.html，模块设计组件命名为 m_xxx.html，如：

新页面中的第一个dom设置id="a_xxx"或"m_xxx"，如：

            <div id="start_contribution" class="gl_mod">

在 ui/page/guideline/main.html 中按下面的格式引入这个文件：

            <link rel="import" href="./inc/a_inputTxt.html?__inline" />

在 ui/page/guideline/inc/side_menu.html 中加入对这个页面的导航，如：

            <li class="item"><a tabindex="0" href="javascript:;" data-href="a_check" class="lk f_load">单选复选框 inputCheck</a></li>

编写didiui组件

模块的 HTML 结构写在新建立的 a_xxx.html 或 m_xxx.html 中，如下图所示

基础设计组件的 CSS 写在 ui/components/ui_base/ui_base.css 中，依赖的图片和资源也放在这个目录下

模块设计组件的 CSS 写在 ui/components/ui_base/ui_main.css 中，依赖的图片和资源也放在这个目录下

编写完毕

编写调试完毕，将 ui/components/ui_base/ 或 ui/components/ui_main/ 下的文件拷贝至 didiui/ui_style/ 的对应目录下，如有依赖图片或资源，需要修改 component.json 文件

在 didiui 下，修改 component.json 的版本号

提交 didiui 到 Git

提交 ui 到 Git

didi publish

设计和代码预览

在组件编写中，通过下面的结构可以实现设计和代码预览：


<div class="mod_item">
<div class="part_ui">

<div class="gl_table"><table class="gl_tb">
<tr>
<td>
<!-- f_code代表其中的组件可以在Guideline中查看源代码，为了使用方便，每个 f_code 中必须是一个可以单独使用的组件 -->
<div class="f_code">

    <!-- 组件编写开始-->
    <div class="blankTip">
        <div class="pic">
            <img src="/img/ico_blankTip.jpg" />
        </div>
        <h3 class="mt10 tx_14 c_t0 tx_c">您还没有任何消息</h3>
        <p class="mt5 tx_12 c_t3 tx_c">您还没有任何消息</p>
        <div class="btnwrap">
            <span class="btn btn1"><a href="javascript:;">按钮</a></span>
        </div>
    </div>
    <!-- 组件编写结束 -->

</div>
</td>
</tr>
</table></div>

</div>
</div>

效果如下：

用户体验 Experience

面向未来的友好设计 Principle

移动优先，对设备友好(Mobile First)：运用渐进增强的思想，从小屏幕到大屏幕进行连续的体验设计

内容策略，对环境友好(Content Strategy)：内容第一，功能第二，不炫技。

内容围绕用户，对用户友好(Orbital Content)：不为用户体验设置障碍，保证可访问性。

语义化 Semantic

一个页面有且只有一个 h1 标签

按需使用 strong, em, blockquote 等

使用 strong 代替 b 标签，使用 em 代替 i 标签

视觉无障碍优化 Accessibility

可感知性 Perceivable

img 标签上注意加上alt属性，有alt属性的图片，不需要加title属性

a 标签如果不包含文本，或其中的内容没有描述性属性如alt，则必须带上 title 属性

尽量使用 rem 或 em 单位，保持浏览器字体设置功能可用

可操作性 Operable

注意 tabIndex 的顺序

浮层关闭时，tab 焦点要返回之前点开浮层的入口

可理解性 Understandable

保持合理的 DOM 顺序

健壮性 Robust

保持渐进增强的 Web 设计方式（高要求）

Reference

视觉原则 Visual

基础原则

设计时应遵循“极简设计”理念，并顺应设计趋势，如无必要勿增实体

设计稿基于Iphone750x1334分辨率进行设计输出，规范中的所有标注均基于该分辨率

界面背景尽量以白色和品牌色为主（广告／运营／地图界面除外）

页面边距、字号、元素长宽、元素间距尽量保持4的整数倍出现

按钮、卡片等元素描边使用内描边，允许≤1px的设计误差

界面中的黑色遮罩层属性：48%（纯黑），白色毛玻璃效果；底图高斯模糊10像素，白色遮罩90%透明度

点击热区统一为黑色8%的透明度（橘色线框按钮点击态使用品牌色8%的透明遮罩）

规范中的所有字符个数都是以中文字符为基本单位

页面的卡片以及按钮圆角的大小为8px

分割线为1像素颜色为＃e5e5e5

背景颜色为 #f0f0f0和＃ffffff

标准兼容 Compatible

移动端文档类型声明（DTD）

HTML5

						<!DOCTYPE HTML>
						<html>

PC端文档类型声明（DTD）

HTML5

						<!DOCTYPE HTML>
						<html>

或 XHTML1.0

						<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
						<html xmlns="http://www.w3.org/1999/xhtml">

兼容性

因嘀嘀业务只涉及 iOS 和 Android 平台，故兼容性以 mobile webkit 浏览器为主

Mobile	Desktop
Safari (Webkit) Chrome (Blink) QQ Browser (X5) Wechat Webview (X5)	Safari (Webkit) Chrome (Blink) IE9+ (Trident)

Mobile

Desktop

Safari (Webkit)

Chrome (Blink)

QQ Browser (X5)

Wechat Webview (X5)

Safari (Webkit)

Chrome (Blink)

IE9+ (Trident)

Reference

http://caniuse.com

开发习惯 Suggestion

HTML

文档设置：utf-8 无BOM

注意代码封闭

常见问题 Not do this

						<input type="text">
						<img src="img.png">
						<p>some text here.

规范写法 Do this

						<input type="text" />
						<img src="img.png" />
						<p>some text here.</p>

块状元素嵌套内联元素

常见问题 Not do this

						<a>
							<div>
								some text here.
							</div>
						</a>

规范写法 Do this

						<div>
							<a>
								some text here.
							</a>
						</div>

CSS

link 方式引入的 CSS，首行设置 @charset "utf-8"

避免使用 id 定义，尽量使用 class

选择器层级避免超过 4 层

CSS书写格式：正常属性单行，带前缀的属性换行

常见问题 Not do this

						.selector{
							display:inline-block;
							font-size:12px;
							color:#f00;
							-webkit-box-sizing:border-box;
							box-sizing:border-box
						}

规范写法 Do this

						.selector{ display:inline-block; font-size:12px; color:#f00;
							-webkit-box-sizing:border-box;
							box-sizing:border-box;
							background:#000
						}

Less 或 Sass 等 CSS 预处理器的书写方法可以采用全部换行

省略不需要的单位和小数点前面的0

常见问题 Not do this

						.selector{ font-size:0.5rem;}
						.selector{ margin:0px}

规范写法 Do this

						.selector{ font-size:.5rem}
						.selector{ margin:0}

RGB格式的颜色注意缩写

常见问题 Not do this

						.selector{ color:#ff0000}

规范写法 Do this

						.selector{ color:#f00}

CSS书写顺序，引起reflow的在前，引起repaint的在后：位置 > 布局 > 尺寸 > 渲染

常见问题 Not do this

						.selector{ color:#000; width:30px; display:block; top:-2px; position:relative}

规范写法 Do this

						.selector{ position:relative; top:-2px; display:block; width:30px; color:#000}

私有属性在前，标准属性在后

常见问题 Not do this

						.selector{
							transform:rotate(30deg);
							-webkit-transform:rotate(30deg);
							-moz-transform:rotate(30deg);
							-o-transform:rotate(30deg);
							-ms-transform:rotate(30deg)
						}

规范写法 Do this

						.selector{
							-webkit-transform:rotate(30deg);
							-moz-transform:rotate(30deg);
							-o-transform:rotate(30deg);
							-ms-transform:rotate(30deg);
							transform:rotate(30deg)
						}

为不支持CSS3的浏览器写出降级方案，且降级属性在前，优化属性在后

常见问题 Not do this

						.selector{ background-color:rgba(0,0,0,.7)}

规范写法 Do this

						.selector{ background-color:#000; background-color:rgba(0,0,0,.7)}

图片加载之前，铺上一层和图片主色相似的背景色

常见问题 Not do this

						.selector{ background:url(img.png);}

规范写法 Do this

						.selector{ background:#789abc url(img.png);}

display: inline的写法

常见问题 Not do this

						.selector{ display:inline; padding-left:30px; margin-right:30px; height:100px; float:left;} // display:inline-block 时，避免写 水平方向的 margin 或 padding，height 和 float 属性

display: inline-block的写法

常见问题 Not do this

						.selector{ display:inline-block; float:left} // display:inline-block 时，避免写 float 属性

注意 Notice

						.selector{ display:inline-block; *display:inline; *zoom:1} // PC 端如果要适应 IE7

CSS禁止的写法

常见问题 Not do this

						*{} /* 禁用全局选择器 */
						.selector *{} /* 同上 */
						p{} /* 禁止直接定义一个标签 */
						.selector{ color:#000!important}

优先使用CSS2

常见问题 Not do this

						li{ margin-bottom:10px}
						li:last-child{ margin-bottom:0}

规范写法 Do this

						li{ margin-top:10px}
						li:first-child{ margin-top:0} /* first-child是CSS2规范，last-child是CSS3规范 */

响应式设计的媒体查询断点，按照移动优先的原则，分辨率从小到大顺序写

常见问题 Not do this

						.selector{}
						@media (max-width:1003px){
							.selector{}
						}
						@media (max-width:768px){
							.selector{}
						}

规范写法 Do this

						.selector{}
						@media (min-width:768px){
							.selector{}
						}
						@media (min-width:1003px){
							.selector{}
						}

动画的百分比，逐条写出，不缩写（某些安卓缩写有问题）

常见问题 Not do this

						@keyframes ani{
							0%,100%{ transform:translateX(0)}
							50%{ transform:translateX(100%)}
						}

规范写法 Do this

						@keyframes ani{
							0%{ transform:translateX(0)}
							50%{ transform:translateX(100%)}
							100%{ transform:translateX(0)}
						}

图片资源

区分内容图片和装饰图片，内容图片用 img 方式引入，装饰图片用background或border-image方式引入

使用 sprite

照片存储jpg，质量60

需要放在纯色背景上的透明图片，存储 png8，杂边设置为后面的背景色

需要放在复杂颜色背景上的透明图片，存储为 png32（Photoshop“存储为Web格式”中的 png24），使用压缩工具压缩为 pngα 上传

Reference

Nicholas C. Zakas: "CSS Lint Rules"

布局框架 HTML Frame

移动页面 Mobile Web

下面是由 didi init page 初始化的代码。

body 元素上加上 ontouchstart=""，可以保证 :active 伪类生效。

<!DOCTYPE html>
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
<meta name="format-detection" content="telephone=no" />
<title>Hitch</title>
</head>

<body ontouchstart="">

<div id="main">

</div>

<!-- 基础同步依赖代码 --> 
<!--SCRIPT_PLACEHOLDER-->
<!-- resourcemap --> 
<!--RESOURCEMAP_PLACEHOLDER-->
<!--
    @require "/lib/lib.js"
    @require "/css/lib.css"
    @require "didiui"
-->
<script>
var dd = require('dd');
require('./main.js');
</script>

</body>
</html>

样式重置 CSS Reset

移动页面 Mobile Web

下面是工程组件 didi-component/didireset 中的代码。

注意，如项目中使用了 didiui，其中就已经包含 didireset，无需在项目中再写 CSS reset 代码；如项目中没有使用 didiui，则需要 require 'didireset'。

body 的根字号设置为 100%(1rem)，浏览器默认设置下渲染为 16px

        /* CSS RESET
================================================================
 *
 * PROJECT: Hitch;
 *
================================================================*/
body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
form,
input,
textarea,
p,
blockquote,
th,
td,
header,
footer,
nav,
article {
  margin: 0;
  padding: 0;
}
body {
  font-size: 100%;
  line-height: 1.5;
  font-family: Helvetica, Arial, sans-serif;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
header,
footer,
nav,
article {
  display: block;
}
ol,
ul {
  list-style: none;
}
fieldset,
img,
video,
form {
  border: 0;
  max-width: 100%;
  vertical-align: top;
}
address,
caption,
cite,
code,
dfn,
em,
strong,
th,
var {
  font-style: normal;
  font-weight: normal;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
caption,
th {
  text-align: left;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: 100%;
  font-weight: normal;
}
iframe {
  vertical-align: top;
}
/* 默认 */
strong {
  font-weight: 800;
}
sup {
  vertical-align: text-top;
}
sub {
  vertical-align: text-bottom;
}
/* 表单 */
input,
textarea,
select,
button {
  outline: none;
  resize: none;
  font-size: 1rem;
  line-height: 1.5;
  font-family: Helvetica, Arial, sans-serif;
}
input,
button {
  white-space: nowrap;
  vertical-align: middle;
}
textarea {
  resize: none;
  overflow-y: auto;
}
/* 链接 */
a {
  text-decoration: none;
  outline: none;
  cursor: pointer;
}
a:link,
label,
body {
  -webkit-tap-highlight-color: transparent;
  -webkit-focus-ring-color: transparent;
}
a:hover {
  text-decoration: none;
}
@media (min-width: 768px) {
  body {
    -webkit-user-select: auto;
  }
}

样式命名 Classification

CSS命名规则

<style>
/* DIDI CSS INDEX - [base/main/skin]
================================================================
 *
 * PROJECT: Hitch;
 * AUTHOR:  Someone;
 *
----------------------------------------------------------------
 *
 * [命名规则]
 * 命名使用下划线连接, 驼峰只用于区分单词
 * g_:  [global_]   结构: w_和w_xxx_i[_inside]嵌套出现;
 * m_:  [module_]   模块: m_下有hd(可选),bd(必选),ft(可选) 后跟驼峰名称如m_xxxExtra或编号如m_xxx_1区分同类模块;
 * e_:  [expand_]   扩展类;
 * n_:  [new_]      实例类;
 * f_:  [function_] 和样式关联的JS操作类;
 *
 * [模块命名规则]
 * 基类:  m_模块名(_[名称|编号]);
 * 扩展类: e_无前缀基类模块名_[名称|无前缀父级基类模块名];
 * 实例类: n_无前缀基类模块名_[作用|状态]_[名称|无前缀父级基类模块名];
 *
----------------------------------------------------------------
 *
 * [base]
 * 1. CSS RESET;
 * 2. 基础代码;
 * 3. 基础模块;
 * 4. 基础图标;
 *
 * [main]
 * 1. 模块;
 * 2. 结构;
 *
 * [skin]
 * 1. 文字;
 * 2. 边框;
 * 3. 背景;
 * 4. 其他;
 *
 * [addition]
 * a. 动画;
 * b. JS使用类;
 * c. MEDIA QUERIES;
 * 
================================================================*/

/* 1 模块
================================================================*/

.m_selector{}

/* 2 结构
================================================================*/

.g_selector{}
</style>

CSS前缀对比

	全局结构	模块、组件	通过js引入的交互样式
Hitch	.g_	.m_, .e_, .n_	.f_ 或 .js_
腾讯微博	.w-	.m_, .e_, .n_	.f_
腾讯财付通	无	.mod-, .exp-, .new-	无
去哪儿	.g-	.m-, .ui-	.js-

Reference

字体名称 Unicode

Font-family 避免使用中文名称，优先使用英文名称

iOS

系统	字体名称	font-family	示例文字
iOS9及以上	San Francisco	-apple-system-font	字体示例 Sample Text
iOS9及以上	苹方	PingFang SC	字体示例 Sample Text
iOS7及以上	Helvetica Neue	HelveticaNeue	字体示例 Sample Text
iOS7以下	Helvetica	Helvetica	字体示例 Sample Text
iOS7以下	黑体-简	Heiti SC	字体示例 Sample Text

Android

系统	字体名称	font-family	示例文字
Android 5.0及以上	思源黑体	Notosans	字体示例 Sample Text
Android 5.0以下	Droid Sans Fallback	Droidsansfallback	字体示例 Sample Text
Android 4.0及以上	Roboto	Roboto	字体示例 Sample Text
Android 4.0以下	Droid Sans	Droid Sans	字体示例 Sample Text
MIUI V8	小米兰亭	MI LanTing_GB	字体示例 Sample Text
MIUI V5	方正兰亭黑(中文西文皆是)	Lantinghei SC	字体示例 Sample Text

WinPhone

字体名称	font-family	示例文字
Segoe UI	Segoe UI	字体示例 Sample Text
方正等线体	DengXian	字体示例 Sample Text

Mac OS

中文名	英文名	UNICODE
华文细黑	STHeiti Light [STXihei]	\534E\6587\7EC6\9ED1
华文黑体	STHeiti	\534E\6587\7EC6\9ED1
华文楷体	STKaiti	\534E\6587\6977\4F53
华文宋体	STSong	\534E\6587\5B8B\4F53
华文仿宋	STFangsong	\534E\6587\4EFF\5B8B
丽黑 Pro	LiHei Pro Medium	\4E3D\9ED1 Pro
丽宋 Pro	LiSong Pro Light	\4E3D\5B8B Pro
标楷体	BiauKai	\6807\6977\4F53
苹果丽中黑	Apple LiGothic Medium	\82F9\679C\4E3D\4E2D\9ED1
苹果丽细宋	Apple LiSung Light	\82F9\679C\4E3D\7EC6\5B8B

WINDOWS

中文名	英文名	UNICODE
新细明体	PMingLiU	\65B0\7EC6\660E\4F53
细明体	MingLiU	\7EC6\660E\4F53
标楷体	DFKai-SB	\6807\6977\4F53
黑体	SimHei	\9ED1\4F53
宋体	SimSun	\5B8B\4F53
新宋体	NSimSun	\65B0\5B8B\4F53
仿宋	FangSong	\4EFF\5B8B
楷体	KaiTi	\6977\4F53
仿宋_GB2312	FangSong_GB2312	\4EFF\5B8B_GB2312
楷体_GB2312	KaiTi_GB2312	\6977\4F53_GB2312
微软正黑体	Microsoft JhengHei	\5FAE\x8F6F\6B63\9ED1\4F53
微软雅黑	Microsoft YaHei	\5FAE\8F6F\96C5\9ED1

OFFICE (参考)

中文名	英文名	UNICODE
隶书	LiSu	\96B6\4E66
幼圆	YouYuan	\5E7C\5706
华文细黑	STXihei	\534E\6587\7EC6\9ED1
华文楷体	STKaiti	\534E\6587\6977\4F53
华文宋体	STSong	\534E\6587\5B8B\4F53
华文中宋	STZhongsong	\534E\6587\4E2D\5B8B
华文仿宋	STFangsong	\534E\6587\4EFF\5B8B
方正舒体	FZShuTi	\65B9\6B63\8212\4F53
方正姚体	FZYaoti	\65B9\6B63\59DA\4F53
华文彩云	STCaiyun	\534E\6587\5F69\4E91
华文琥珀	STHupo	\534E\6587\7425\73C0
华文隶书	STLiti	\534E\6587\96B6\4E66
华文行楷	STXingkai	\534E\6587\884C\6977
华文新魏	STXinwei	\534E\6587\65B0\9B4F

Reference

字符转义 Character

最常用的字符实体 Character Entities

显示	说明	实体名称	实体编号
	半角空格	&ensp;
	全角空格	&emsp;
	不断行的半角空格
<	小于	<	<
>	大于	>	>
&	&符号	&	&
"	双引号	"	"
©	版权	©	©
®	已注册商标	®	®
™	商标（美国）	™	™
×	乘号	×	×
÷	除号	÷	÷

ISO 8859-1 (Latin-1)字符集

显示	实体名称	实体编号

¡	¡	¡
¢	¢	¢
£	£	£
¤	¤	¤
¥	¥	¥
¦	¦	¦
§	§	§
¨	¨	¨
©	©	©
ª	ª	ª
«	«	«
¬	¬	¬

®	®	®
¯	¯	¯
°	°	°
±	±	±
²	²	²
³	³	³
´	´	´
µ	µ	µ
¶	¶	¶
·	·	·
¸	¸	¸
¹	¹	¹
º	º	º
»	»	»
¼	¼	¼
½	½	½
¾	¾	¾
¿	¿	¿
À	À	À
Á	Á	Á
Â	Â	Â
Ã	Ã	Ã
Ä	Ä	Ä
Å	Å	Å
Æ	Æ	Æ
Ç	Ç	Ç
È	È	È
É	É	É
Ê	Ê	Ê
Ë	Ë	Ë
Ì	Ì	Ì
Í	Í	Í
Î	Î	Î
Ï	Ï	Ï
Ð	Ð	Ð
Ñ	Ñ	Ñ
Ò	Ò	Ò
Ó	Ó	Ó
Ô	Ô	Ô
Õ	Õ	Õ
Ö	Ö	Ö
×	×	×
Ø	Ø	Ø
Ù	Ù	Ù
Ú	Ú	Ú
Û	Û	Û
Ü	Ü	Ü
Ý	Ý	Ý
Þ	Þ	Þ
ß	ß	ß
à	à	à
á	á	á
â	â	â
ã	ã	ã
ä	ä	ä
å	å	å
æ	æ	æ
ç	ç	ç
è	è	è
é	é	é
ê	ê	ê
ë	ë	ë
ì	ì	ì
í	í	í
î	î	î
ï	ï	ï
ð	ð	ð
ñ	ñ	ñ
ò	ò	ò
ó	ó	ó
ô	ô	ô
õ	õ	õ
ö	ö	ö
÷	÷	÷
ø	ø	ø
ù	ù	ù
ú	ú	ú
û	û	û
ü	ü	ü
ý	ý	ý
þ	þ	þ
ÿ	ÿ	ÿ

数学和希腊字母标志 symbols, mathematical symbols, and Greek letters

显示	实体名称	实体编号
ƒ	&fnof;	ƒ
Α	Α	Α
Β	Β	Β
Γ	Γ	Γ
Δ	Δ	Δ
Ε	Ε	Ε
Ζ	Ζ	Ζ
Η	Η	Η
Θ	Θ	Θ
Ι	Ι	Ι
Κ	Κ	Κ
Λ	Λ	Λ
Μ	Μ	Μ
Ν	Ν	Ν
Ξ	Ξ	Ξ
Ο	Ο	Ο
Π	Π	Π
Ρ	Ρ	Ρ
Σ	Σ	Σ
Τ	Τ	Τ
Υ	Υ	Υ
Φ	Φ	Φ
Χ	Χ	Χ
Ψ	Ψ	Ψ
Ω	Ω	Ω
α	α	α
β	β	β
γ	γ	γ
δ	δ	δ
ε	ε	ε
ζ	ζ	ζ
η	η	η
θ	θ	θ
ι	ι	ι
κ	κ	κ
λ	λ	λ
μ	μ	μ
ν	ν	ν
ξ	ξ	ξ
ο	ο	ο
π	π	π
ρ	ρ	ρ
ς	&sigmaf;	ς
σ	σ	σ
τ	τ	τ
υ	υ	υ
φ	φ	φ
χ	χ	χ
ψ	ψ	ψ
ω	ω	ω
?	&thetasym;	ϑ
?	&upsih;	ϒ
?	ϖ	ϖ
•	•	•
…	…	…
′	′	′
″	″	″
‾	&oline;	‾
⁄	&frasl;	⁄
℘	&weierp;	℘
ℑ	&image;	ℑ
ℜ	&real;	ℜ
™	™	™
ℵ	&alefsym;	ℵ
←	←	←
↑	↑	↑
→	→	→
↓	↓	↓
↔	↔	↔
↵	&crarr;	↵
⇐	⇐	⇐
⇑	&uArr;	⇑
⇒	⇒	⇒
⇓	&dArr;	⇓
⇔	⇔	⇔
∀	∀	∀
∂	∂	∂
∃	∃	∃
∅	∅	∅
∇	∇	∇
∈	∈	∈
∉	∉	∉
∋	&ni;	∋
∏	∏	∏
∑	∑	∑
−	−	−
∗	&lowast;	∗
√	√	√
∝	&prop;	∝
∞	∞	∞
∠	&ang;	∠
∧	&and;	∧
∨	&or;	∨
∩	∩	∩
∪	∪	∪
∫	∫	∫
∴	&there4;	∴
∼	&sim;	∼
∝	&cong;	≅
≈	≈	≈
≠	≠	≠
≡	&equiv;	≡
≤	≤	≤
≥	≥	≥
⊂	⊂	⊂
⊃	⊃	⊃
⊄	&nsub;	⊄
⊆	&sube;	⊆
⊇	&supe;	⊇
⊕	&oplus;	⊕
&otime;	&otimes;	⊗
⊥	&perp;	⊥
⋅	⋅	⋅
?	&lceil;	⌈
?	&rceil;	⌉
?	&lfloor;	⌊
?	&rfloor;	⌋
?	&lang;	〈
?	&rang;	〉
◊	&loz;	◊
♠	&spades;	♠
♣	&clubs;	♣
♥	&hearts;	♥
♦	&diams;	♦

重要的国际标记 markup-significant and internationalization characters

显示	实体名称	实体编号
"	"	"
&	&	&
<	<	<
>	>	>
Œ	&OElig;	Œ
œ	&oelig;	œ
Š	&Scaron;	Š
š	&scaron;	š
Ÿ	&Yuml;	Ÿ
ˆ	&circ;	ˆ
˜	&tilde;	˜
	&ensp;
	&emsp;

‌‌	&zwnj;	‌
‍‍	&zwj;	‍
‎‎	&lrm;	‎
‏	&rlm;	‏
–	–	–
—	—	—
‘	‘	‘
’	’	’
‚	&sbquo;	‚
“	“	“
”	”	”
„	&bdquo;	„
†	&dagger;	†
‡	&Dagger;	‡
‰	&permil;	‰
‹	&lsaquo;	‹
›	&rsaquo;	›
€	€	€

Reference

布局 Instant Layout

运营页面等临时布局可以尽量用下面的样式拼装页面，节省书写 CSS 代码。

浮动 float

left

right

            // 左浮动
            <div class="left"></div>

            // 右浮动
            <div class="right"></div>

            // 清除浮动
            <div class="clearfix"></div>

显示状态 display, visibility

dis_b

dis_inb

dis_in

            // display:block
            <div class="dis_b"></div>

            // display:inline
            <div class="dis_in"></div>

            // display:inline-block
            <div class="dis_inb"></div>

            // visibility: visible
            <div class="vis_on"></div>

            // visibility: hidden
            <div class="vis_off"></div>

内边距 padding

            // padding-top:5px / padding-right:5px / padding-bottom:5px / padding-left:5px /
            <div class="pt5"></div>
            <div class="pr5"></div>
            <div class="pb5"></div>
            <div class="pl5"></div>

            // padding-top:10px / padding-right:10px / padding-bottom:10px / padding-left:10px /
            <div class="pt10"></div>
            <div class="pr10"></div>
            <div class="pb10"></div>
            <div class="pl10"></div>

            // padding-top:15px / padding-right:15px / padding-bottom:15px / padding-left:15px /
            <div class="pt15"></div>
            <div class="pr15"></div>
            <div class="pb15"></div>
            <div class="pl15"></div>

            // padding-top:20px / padding-right:20px / padding-bottom:20px / padding-left:20px /
            <div class="pt20"></div>
            <div class="pr20"></div>
            <div class="pb20"></div>
            <div class="pl20"></div>

            // padding-top:0 / padding-right:0 / padding-bottom:0 / padding-left:0 /
            <div class="pt0"></div>
            <div class="pr0"></div>
            <div class="pb0"></div>
            <div class="pl0"></div>

外边距 margin

ml5

ml10

ml15

ml20

            // margin-top:5px / margin-right:5px / margin-bottom:5px / margin-left:5px /
            <div class="mt5"></div>
            <div class="mr5"></div>
            <div class="mb5"></div>
            <div class="ml5"></div>

            // margin-top:10px / margin-right:10px / margin-bottom:10px / margin-left:10px /
            <div class="mt10"></div>
            <div class="mr10"></div>
            <div class="mb10"></div>
            <div class="ml10"></div>

            // margin-top:15px / margin-right:15px / margin-bottom:15px / margin-left:15px /
            <div class="mt15"></div>
            <div class="mr15"></div>
            <div class="mb15"></div>
            <div class="ml15"></div>

            // margin-top:20px / margin-right:20px / margin-bottom:20px / margin-left:20px /
            <div class="mt20"></div>
            <div class="mr20"></div>
            <div class="mb20"></div>
            <div class="ml20"></div>

            // margin-top:0 / margin-right:0 / margin-bottom:0 / margin-left:0 /
            <div class="mt0"></div>
            <div class="mr0"></div>
            <div class="mb0"></div>
            <div class="ml0"></div>

垂直对齐方式 vertical-align

d

o

g

d

o

g

d

o

g

d

o

g

            // 顶部对齐 vertical-align:top
            <div class="vt_t"></div>

            // 居中对齐 vertical-align:middle
            <div class="vt_m"></div>

            // 底部对齐 vertical-align:bottom
            <div class="vt_b"></div>

            // 基线对齐 vertical-align:baseline
            <div class="vt_bl"></div>

文字 Font & Text

字体 font-family

移动端中文采用默认系统字体，一般不需要专门定义。如iOS下渲染为 PingFang SC 或 Heiti SC，Android下渲染为 Droidsansfallback，小米系统下渲染为 Lantinghei SC 等。

如必须使用特殊字体，可视具体情况使用 WebFont 工具压缩字体文件，或使用图片代替。

宋体 Simsun

微软雅黑 Microsoft Yahei

苹方 PingFang SC

Helvetica, Arial, sans-serif

Courier New

sans-serif

字号 font-size

Desktop's Chrome 支持最小字号为 12px（即设计字号24px）

10px - 30px 范围内，每个字号都有对应的类名，如 .tx_11, .tx_13 等

字样	字号 / 设计字号	命名规范 / 类名	应用说明
字样	10px / 20px	FontSizeSmall_s / .tx_10	弱提示 / 引导文字，标签 / 角标文字
字样	12px / 24px	FontSizeSmall / .tx_12	摘要，次要信息，辅助信息，titlebar取消操作
字样	14px / 28px	FontSizeMedium / .tx_14	用于大多数文字：子标题，一级导航，正文摘要／内容，结构化摘要
字样	16px / 32px	FontSizeLarge / .tx_16	页面title
字样	19px / 38px	FontSizeLarge_x / .tx_19	弹层title，全局titlebar
字样	21px / 42px	FontSizeLarge_xx / .tx_21	特殊文字
字样	26px / 52px	FontSizeLarge_xxx / .tx_26	特殊文字
字样	34px / 68px	FontSizeLarge_xxxx / .tx_34	特殊文字
字样	49px / 98px	FontSizeLarge_xxxxx / .tx_49	特殊文字

字重 font-weight

加粗
正常

字体样式 text-decoration

下划线
删除线

文字对齐 text-align

左对齐
居中对齐
右对齐

换行 break

            // 强制换行，等于word-wrap:break-word + word-break:break-all
            <div class="tx_br"></div>

            // 强制不换行，溢出文字以省略号处理，等于 white-space:nowrap + overflow:hidden + text-overflow:ellipsis
            <div class="tx_nbr"></div>

Reference

WebFont 工具，可按需压缩中文字体，负责人李健

按钮 Btn

.btn1 （面性大按钮）

Anchor

Span

Anchor Span

Disabled, Anchor

Disabled, Span

Disabled, Anchor Disabled, Span

.btn2 （线框大按钮）

Anchor

Span

Anchor Span

Disabled, Anchor

Disabled, Span

Disabled, Anchor Disabled, Span

.btn3 （线框大按钮）

Anchor

Span

Anchor Span

Disabled, Anchor

Disabled, Span

Disabled, Anchor Disabled, Span

.btn1m （面性中按钮）

Anchor Span

Disabled, Anchor Disabled, Span

.btn2s （线框小按钮）

Anchor Span

Disabled, Anchor Disabled, Span

单选复选框 inputCheck

单选框和复选框，label 的 for 属性要和 input 的 id 配对，input 尽量安排在 label 标签内。

单选框 .inputCheck

Option1 Option2

复选框 .inputCheck

Option1 Option2

输入和下拉 inputTxt

输入框 .inputTxt

文本域 .inputTxt

DIV模拟文本域 .inputTxt

下拉框 .inputTxt

进度 progress （规范外，供参考）

progress_bar

loading...

progress_circle

图标 Icon

SVG矢量图标 .iconsvg

SVGsprite方式引入，可以定义多彩图标

彩色 SVGsprite 可通过 Illustrator 存储为 SVG 格式，然后通过 IcoMoon 工具管理

纯色 Icon 建议采用下面的 Font 方式引入

	.icon12: 24px	.icon14: 28px	.icon16: 32px	.icon19: 38px	.icon20: 40px	.icon24: 48px	.icon32: 64px	.icon40: 80px
iconsvg_s001didi
iconsvg_s002ridea
iconsvg_s003ridea

Font矢量图标 .iconfont

纯色图标，通过font-size改变图标尺寸，通过 color 样式改变颜色

iconfont_f001didi 	iconfont_f002ridea 	iconfont_f003car 


iconfont_f005leaf 	iconfont_f006headphone 	iconfont_f007right 

使用方法1：使用 CSS 类名，如：

<i class="iconfont iconfont_f001didi"></i>

使用方法2：在 HTML 中使用转义字符，如：

<i class="iconfont">&#xe001;</i>

注意：使用iconfont前，需要配置fis-conf.js，以允许打包字体格式。

var userAfterRoadMap = [
	{
		reg: '/config/**',
		release: false
	},
	{
		reg: /.+?(eot|ttf|woff|svg|mp3|zip)$/,
		release: '${releaseDir}$&'
	},
	//其他文件不发布
	{
		reg: '**',
		release: false
	}
];

Reference

杂项 Others

鼠标手型 cursor (Desktop)

默认

箭头

手指

            // 默认
            <div class="cur_auto"></div>

            // 箭头
            <div class="cur_default"></div>

            // 手指
            <div class="cur_pointer"></div>

头像 Avatar

.avatar

气泡和红点颜色：#ff3b30

红点：大于80px 切线内角

红点：小于或等于80px 切线焦点

气泡：大于120px 4等分右上角

气泡：120px - 80px 3等分右上角

气泡：小于80px 切线焦点

扩展样式-气泡 Pop	类名 Class Name	设计尺寸 Size (Density = 200%)
99	.avatar30	60px × 60px
99	.avatar32	64px × 64px
99	.avatar40	80px × 80px
99	.avatar48	96px × 96px
99	.avatar50	100px × 100px
99	.avatar55	110px × 110px
99	.avatar60	120px × 120px
99	.avatar70	140px × 140px
99	.avatar80	160px × 160px

Reference

设计规范：气泡与红点位置

券 Ticket

.ticket

¥3

优惠券

有效期至2016-06-15

新用户专享

消息体 msgBox

基本 .msgBox

Didi Chuxing

8小时以前

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

无消息部分 .msgBox

DD

出行241次

无用户名部分 .msgBox

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

富消息体框架 .msgBox

DD

8小时以前

空页面提示 blankTip

.blankTip

您还没有任何消息

按钮

文字 Color

普通文字 Text

色值	命名规范 / 类名	应用说明
#666666	ColorGray / .c_t0	40%灰色：次要信息
#333333	ColorDarkGray / .c_t1	20%灰色:title bar标题文字，正文标题 / 结构化摘要，常规按钮文字
#fa8919	ColorOrange / .c_t2	标准橘色：主导航 / 二级导航当前态，价格，强提醒
#adadad	ColorLightGray / .c_t3	68%灰色：文本框内的引导文案，功能列表中的弱引导文字
#cccccc	ColorLightGray_s / .c_t4	80%灰色：按钮不可点击态文字
#ffa033	ColorLightOrange / .c_t5	亮橘色：文字链接，消息系统图标,列表中的营销标签
#52b786	ColorGreen / .c_t6	拼车订单价格描述
#878787	ColorLinkGray / .c_t7	53%灰色：再区分等级的次要信息，次要信息（慎用）
#ffffff	- / .c_tw	白色

链接 Link (未出现在设计规范中，供参考)

色值	命名规范 / 类名	应用说明
#fa8919	- / .c_a0	默认链接色
#336666	- / .c_a1	弱链接色

Reference

设计规范 V1.0

其他 Other

背景颜色 Background

色值	命名规范 / 类名	应用说明
#ffffff	ColorWhite / .c_bg0	白色：风格主基调，按钮（带背景色）上的文字
#fafafa	ColorLightGray_ssss / .c_bg1	98%灰色:titlebar底色
#f0f0f0	ColorLightGray_sss / .c_bg2	94%灰色:部分页面级背景

Reference

设计规范 V1.0

浮层 DidiDialog

dd.dialog

方法不变，可参考原文档

dd.dialog.alert("当前不是WIFI网络, 下载离线地图包需要18.2m流量，继续下载吗？");

alert1

dd.dialog.alert("小标题--嘀嘀打车送你回家", "大标题", "按钮名称");

alert2

var opts = {
    icon: {
        url: "https://static.xiaojukeji.com/webapp/images/i-plaint.png",
        width: "8px",
        height: "36px"
    },
    title: "大标题--DD",
    tip: "小标题--DD送你回家",
    btn: {
        val: "按钮名称",
        handler: function() {
            //确认回调
        }
    }
};
dd.dialog.alert(opts);

alert3

dd.dialog.confirm("标题", function() {
     alert("确认操作");
     //确认操作
 });

confirm1

var opts = {
    text: "标题",
    icon: {
        url: "https://static.xiaojukeji.com/webapp/images/i-plaint.png",
        width: "8px",
        height: "36px"
    },
    cancel: {
        id: "",
        val: "取消1",
        kls: "",
        handler: function() {
            // alert(0)
        }
    },
    confirm: {
        id: "",
        val: "确定2",
        kls: "",
        handler: function() {
            // alert(1)
        }
    }
}
dd.dialog.confirm(opts);

confirm2

dd.dialog.loading("加载文案..",5000);

loading1

var opts = {
    text: "加载文案加载文案加载文案加载..",
    icon: {
        width: "43px",
        height: "34px",
        url: "https://static.xiaojukeji.com/webapp/images/i-loading.gif"
    }
};
dd.dialog.loading(opts);

loading2

```
dd.dialog.flatLoading();
		        
```
flatLoading1

var opts = {
    text: "加载文案..",
    icon: {
        width: "43px",
        height: "34px",
        url: "https://static.xiaojukeji.com/webapp/images/i-loading.gif"
    }
};
dd.dialog.flatLoading(opts);

flatLoading2

```
dd.dialog.logoLoading(5000);
		        
```
logoLoading

dd.dialog.tip("提示..",5000);

tip1

var opts = {
    text: "提示文案..",
    icon: {
        url: "https://static.xiaojukeji.com/webapp/images/i-tip.png",
        width: "45px",
        height: "45px"
    }
};
dd.dialog.tip(opts);

tip2

var str='<div style="background:#fff;width:280px;height:50px;padding:10px;">div地方地方</div>';
var _dialog=dd.dialog.Fn(str);
_dialog.show()

Fn1-字符串插入

var _el = document.createElement('div');
_el.innerHTML="ddd";
_el.style.cssText="background:#fff;padding:10px;"
var _dialog=dd.dialog.Fn(_el);
_dialog.show()

Fn2-dom插入

var opts={
    type:"alert",
    wallCss:"background: #ff0000;",
    wrapCss:"background: #fff;width: 87.5%;text-align: center;",
    title:{
        cssText:" color:#900; font-size:1rem;",
        txt:"title标题"
    },
    tip:{
        color:"#999",
        size:".75rem",
        txt:"tip标题"
    },
    icon: {
            url: "https://static.xiaojukeji.com/webapp/images/i-plaint.png",
            width: "8px",
            height: "36px",
            cssText:"border:1px solid #333;"
        },
    btns: [{
            id:  "btn-cancel",
            val: "按钮1实力",
            kls: "btn btn2",
            event: "click",
            handler: function(e) {
                _dialog.hide()
            }
        }, {
            id: "btn-ok",
            val:  "按钮2实力",
            kls:  "btn btn1",
            event:  "click",
            handler: function(e) {
                
            }
        },{
            id:  "btn-cancel",
            val: "按钮1实力",
            kls: "btn btn3",
            event: "click",
            handler: function(e) {
                
            }
        }],
    ext:'按钮说明',
    close:{
        cssText:"background:#eee;border-radius:50%;"
    }
};
var _dialog=dd.dialog.Fn(opts);
_dialog.show()

Fn3-obj插入

动画原则 Animate Rule

基本动画原则

减少打扰：避免干扰用户正常的阅读体验，减少作为交互的动画（减小页面性能的 repaints 和 reflows 消耗，让用户尽快看到内容），如使用交互动画，需要保持有序的交互引导。

提升体验：利用动画增强用户体验，适当运用作为内容的动画（Flash / Video / Canvas / CSS / Gif）。

聚焦内容：网页的本质是静态文档（页面）。最早页面没有动画。动画属于依赖技术的高级web需要。引导性：动画 > 图片 > 图形 > 文字

避免犯错：如果没有考虑好，不要使用动画。

基本CSS动画规则

速度和节奏 animation-duration

如页面无音乐，标准CSS动画速度 (animation-duration) 等于 0.2s，同一个页面中，所有的动画速度应该是标准动画速度的倍数。

如页面有音乐，需要考虑音乐和动画的节奏和谐。标准CSS动画速度等于一小节或一拍的时长。以 6/8 拍（以八分音符为一拍，每小节6拍），每分钟96个八分音符为例，一小节时长 = 60秒/96拍*6拍 = 3.75秒；一拍时长 = 60秒/96拍 = 0.625秒

下面举两个控制了标准CSS动画速度的H5页面为例：

H5项目，可点击查看	音乐	标准CSS动画速度
遇见美好，邂逅浪漫	拍号：3/4；速度：100bpm（每分钟 100 个四分音符）	1.8s（即一小节时长：60秒/100*3拍）
顺风侠	拍号：2/4；速度：105bpm（每分钟 105 个四分音符）	0.57s（即一拍时长：60秒/105拍）

缓动 animation-timing-function

标准CSS动画缓动 (animation-timing-function) ：ease-in-out

CSS动画的兼容 Compatible

PC端浏览器对 CSS transform / transition 动画的支持范围：IE10.0+, Firefox25.0+, Chrome31.0+, Safari7.0+, Opera17.0+

Reference

动画示例 Animate Demo

缓动 animation-timing-function

CSS默认缓动

线性 linear	缓解 ease	渐入 ease-in


渐出 ease-out	渐入渐出 ease-in-out

Reference

将didiui引入项目

Didiui（样式库）

Didiui 是基础 UI 样式库，包含本 Guideline 中所罗列的基本 CSS 样式和模块。用来替代原 common-ui。

安装

进入fis-didi项目根目录(如果没有则通过didi init project初始化一个)

didi install didi-component/didiui

使用

在项目任意可编写JS代码处使用

var didiui = require('didiui');

dd（对话框浮层）

dd 可以和 didiui 一起使用，也可单独使用

若和 didiui 一起使用，项目中需要 require 'didiui'（已包含 didireset）和 'dd' 两个组件

若单独使用 dd ，项目中需要require 'didireset' 和 'dd' 两个组件

安装

进入fis-didi项目根目录(如果没有则通过didi init project初始化一个)

didi install didi-component/dd

使用

在项目任意可编写JS代码处使用

var dd = require('dd');

显示	实体名称	实体编号

¡	¡	¡
¢	¢	¢
£	£	£
¤	¤	¤
¥	¥	¥
¦	¦	¦
§	§	§
¨	¨	¨
©	©	©
ª	ª	ª
«	«	«
¬	¬	¬

®	®	®
¯	¯	¯
°	°	°
±	±	±
²	²	²
³	³	³
´	´	´
µ	µ	µ
¶	¶	¶
·	·	·
¸	¸	¸
¹	¹	¹
º	º	º
»	»	»
¼	¼	¼
½	½	½
¾	¾	¾
¿	¿	¿
À	À	À
Á	Á	Á
Â	Â	Â
Ã	Ã	Ã
Ä	Ä	Ä
Å	Å	Å
Æ	Æ	Æ
Ç	Ç	Ç
È	È	È
É	É	É
Ê	Ê	Ê
Ë	Ë	Ë
Ì	Ì	Ì
Í	Í	Í
Î	Î	Î
Ï	Ï	Ï
Ð	Ð	Ð
Ñ	Ñ	Ñ
Ò	Ò	Ò
Ó	Ó	Ó
Ô	Ô	Ô
Õ	Õ	Õ
Ö	Ö	Ö
×	×	×
Ø	Ø	Ø
Ù	Ù	Ù
Ú	Ú	Ú
Û	Û	Û
Ü	Ü	Ü
Ý	Ý	Ý
Þ	Þ	Þ
ß	ß	ß
à	à	à
á	á	á
â	â	â
ã	ã	ã
ä	ä	ä
å	å	å
æ	æ	æ
ç	ç	ç
è	è	è
é	é	é
ê	ê	ê
ë	ë	ë
ì	ì	ì
í	í	í
î	î	î
ï	ï	ï
ð	ð	ð
ñ	ñ	ñ
ò	ò	ò
ó	ó	ó
ô	ô	ô
õ	õ	õ
ö	ö	ö
÷	÷	÷
ø	ø	ø
ù	ù	ù
ú	ú	ú
û	û	û
ü	ü	ü
ý	ý	ý
þ	þ	þ
ÿ	ÿ	ÿ

显示	实体名称	实体编号

¡	¡	¡
¢	¢	¢
£	£	£
¤	¤	¤
¥	¥	¥
¦	¦	¦
§	§	§
¨	¨	¨
©	©	©
ª	ª	ª
«	«	«
¬	¬	¬

®	®	®
¯	¯	¯
°	°	°
±	±	±
²	²	²
³	³	³
´	´	´
µ	µ	µ
¶	¶	¶
·	·	·
¸	¸	¸
¹	¹	¹
º	º	º
»	»	»
¼	¼	¼
½	½	½
¾	¾	¾
¿	¿	¿
À	À	À
Á	Á	Á
Â	Â	Â
Ã	Ã	Ã
Ä	Ä	Ä
Å	Å	Å
Æ	Æ	Æ
Ç	Ç	Ç
È	È	È
É	É	É
Ê	Ê	Ê
Ë	Ë	Ë
Ì	Ì	Ì
Í	Í	Í
Î	Î	Î
Ï	Ï	Ï
Ð	Ð	Ð
Ñ	Ñ	Ñ
Ò	Ò	Ò
Ó	Ó	Ó
Ô	Ô	Ô
Õ	Õ	Õ
Ö	Ö	Ö
×	×	×
Ø	Ø	Ø
Ù	Ù	Ù
Ú	Ú	Ú
Û	Û	Û
Ü	Ü	Ü
Ý	Ý	Ý
Þ	Þ	Þ
ß	ß	ß
à	à	à
á	á	á
â	â	â
ã	ã	ã
ä	ä	ä
å	å	å
æ	æ	æ
ç	ç	ç
è	è	è
é	é	é
ê	ê	ê
ë	ë	ë
ì	ì	ì
í	í	í
î	î	î
ï	ï	ï
ð	ð	ð
ñ	ñ	ñ
ò	ò	ò
ó	ó	ó
ô	ô	ô
õ	õ	õ
ö	ö	ö
÷	÷	÷
ø	ø	ø
ù	ù	ù
ú	ú	ú
û	û	û
ü	ü	ü
ý	ý	ý
þ	þ	þ
ÿ	ÿ	ÿ

显示	实体名称	实体编号

¡	¡	¡
¢	¢	¢
£	£	£
¤	¤	¤
¥	¥	¥
¦	¦	¦
§	§	§
¨	¨	¨
©	©	©
ª	ª	ª
«	«	«
¬	¬	¬

®	®	®
¯	¯	¯
°	°	°
±	±	±
²	²	²
³	³	³
´	´	´
µ	µ	µ
¶	¶	¶
·	·	·
¸	¸	¸
¹	¹	¹
º	º	º
»	»	»
¼	¼	¼
½	½	½
¾	¾	¾
¿	¿	¿
À	À	À
Á	Á	Á
Â	Â	Â
Ã	Ã	Ã
Ä	Ä	Ä
Å	Å	Å
Æ	Æ	Æ
Ç	Ç	Ç
È	È	È
É	É	É
Ê	Ê	Ê
Ë	Ë	Ë
Ì	Ì	Ì
Í	Í	Í
Î	Î	Î
Ï	Ï	Ï
Ð	Ð	Ð
Ñ	Ñ	Ñ
Ò	Ò	Ò
Ó	Ó	Ó
Ô	Ô	Ô
Õ	Õ	Õ
Ö	Ö	Ö
×	×	×
Ø	Ø	Ø
Ù	Ù	Ù
Ú	Ú	Ú
Û	Û	Û
Ü	Ü	Ü
Ý	Ý	Ý
Þ	Þ	Þ
ß	ß	ß
à	à	à
á	á	á
â	â	â
ã	ã	ã
ä	ä	ä
å	å	å
æ	æ	æ
ç	ç	ç
è	è	è
é	é	é
ê	ê	ê
ë	ë	ë
ì	ì	ì
í	í	í
î	î	î
ï	ï	ï
ð	ð	ð
ñ	ñ	ñ
ò	ò	ò
ó	ó	ó
ô	ô	ô
õ	õ	õ
ö	ö	ö
÷	÷	÷
ø	ø	ø
ù	ù	ù
ú	ú	ú
û	û	û
ü	ü	ü
ý	ý	ý
þ	þ	þ
ÿ	ÿ	ÿ