关于设计系统 About

服务范围 Service

  1. 本设计系统服务 Web 产品,包含端内 HTML5 页面,和端外运营活动页面。
  2. 本设计系统服务 UE 和 FE 同学,既是前端开发的 CSS 规范,也包含 UI 设计的模块化应用和展示。

系统优势 Benefits

  1. 用户体验和视觉设计原则有据可循。
  2. 设计和前端规范的统一,保证Web设计从交互、设计到前端开发的高度还原。

设计思路 Thinking

  1. 本设计系统应用了 Brad FrostAtomic Design System 对 CSS 的编写和设计模块的归纳进行分类。如将模块分为原子(Atomic)和分子(Molecules)等。在 Web 设计开发中,设计师和前端开发通过组织原子和分子,构成组织和页面。
  2. 本设计系统也吸取了腾讯财付通《页面重构中的设计模式》中的面向设计的CSS思想。即将样式分为base、main、skin三个部分,实际上也是从原子到分子再组织成页面的思想。
  3. 上述两条也是2013年以来比较火的 BEM样式设计思想,国内从2011年就已经在Qzone落地,可以说走在世界的前面。
  4. 设计系统的目录分类参考了 Aaron Gustafson 推荐的 Salesforce 的 Design System,应该是2016年 Web 设计领域最好的设计系统。
  5. 设计思想的趋势是相似的。

工程模块 Components

  1. 本设计系统使用 fis-didi 作为开发自动化工具
  2. 应用本设计系统中的编码和设计规范,需要在项目中引入下面两个工程模块:didiui, dd

系统维护 Contribution

Clone Git仓库

  1. Clone UI:访问 https://git.xiaojukeji.com/beatles/ui,Fork 它并 Clone 到本地
  2. Clone Didiui:访问 https://git.xiaojukeji.com/didi-component/didiui,将它 Clone 到本地

添加模块

准备文件

  1. 拉取 didiui 和 ui 的 git 更新
  2. 准备好下面2个文件:
            ui/page/guideline/main.html
            ui/page/guideline/inc/side_menu.html
        
  1. 在 ui/page/guideline/inc/ 中新建模块页面,基础设计组件命名为a_xxx.html,模块设计组件命名为 m_xxx.html,如:

  1. 新页面中的第一个dom设置id="a_xxx"或"m_xxx",如:
            <div id="start_contribution" class="gl_mod">
        
  1. 在 ui/page/guideline/main.html 中按下面的格式引入这个文件:
            <link rel="import" href="./inc/a_inputTxt.html?__inline" />
        
  1. 在 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组件

  1. 模块的 HTML 结构写在新建立的 a_xxx.html 或 m_xxx.html 中,如下图所示
  2. 基础设计组件的 CSS 写在 ui/components/ui_base/ui_base.css 中,依赖的图片和资源也放在这个目录下
  3. 模块设计组件的 CSS 写在 ui/components/ui_base/ui_main.css 中,依赖的图片和资源也放在这个目录下

编写完毕

  1. 编写调试完毕,将 ui/components/ui_base/ 或 ui/components/ui_main/ 下的文件 拷贝至 didiui/ui_style/ 的对应目录下,如有依赖图片或资源,需要修改 component.json 文件
  2. 在 didiui 下,修改 component.json 的版本号
  3. 提交 didiui 到 Git
  4. 提交 ui 到 Git
  5. 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

  1. 移动优先,对设备友好(Mobile First):运用渐进增强的思想,从小屏幕到大屏幕进行连续的体验设计
  2. 内容策略,对环境友好(Content Strategy):内容第一,功能第二,不炫技。
  3. 内容围绕用户,对用户友好(Orbital Content):不为用户体验设置障碍,保证可访问性。

语义化 Semantic

  1. 一个页面有且只有一个 h1 标签
  2. 按需使用 strong, em, blockquote 等
  3. 使用 strong 代替 b 标签,使用 em 代替 i 标签

视觉无障碍优化 Accessibility

可感知性 Perceivable

  1. img 标签上注意加上alt属性,有alt属性的图片,不需要加title属性
  2. a 标签如果不包含文本,或其中的内容没有描述性属性如alt,则必须带上 title 属性
  3. 尽量使用 rem 或 em 单位,保持浏览器字体设置功能可用

可操作性 Operable

  1. 注意 tabIndex 的顺序
  2. 浮层关闭时,tab 焦点要返回之前点开浮层的入口

可理解性 Understandable

  1. 保持合理的 DOM 顺序

健壮性 Robust

  1. 保持渐进增强的 Web 设计方式(高要求)

视觉原则 Visual

基础原则

  1. 设计时应遵循“极简设计”理念,并顺应设计趋势,如无必要勿增实体
  2. 设计稿基于Iphone750x1334分辨率进行设计输出,规范中的所有标注均基于该分辨率
  3. 界面背景尽量以白色和品牌色为主(广告/运营/地图界面除外)
  4. 页面边距、字号、元素长宽、元素间距尽量保持4的整数倍出现
  5. 按钮、卡片等元素描边使用内描边,允许≤1px的设计误差
  6. 界面中的黑色遮罩层属性:48%(纯黑),白色毛玻璃效果;底图高斯模糊10像素,白色遮罩90%透明度
  7. 点击热区统一为黑色8%的透明度(橘色线框按钮点击态使用品牌色8%的透明遮罩)
  8. 规范中的所有字符个数都是以中文字符为基本单位
  9. 页面的卡片以及按钮圆角的大小为8px
  10. 分割线为1像素 颜色为#e5e5e5
  11. 背景颜色为 #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)

Reference

开发习惯 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α 上传

布局框架 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-

字体名称 Unicode

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

iOS

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

字符转义 Character

最常用的字符实体 Character Entities

显示 说明 实体名称 实体编号
半角空格 &ensp; &#8194;
全角空格 &emsp; &#8195;
  不断行的半角空格 &nbsp; &#160;
< 小于 &lt; &#60;
> 大于 &gt; &#62;
& &符号 &amp; &#38;
" 双引号 &quot; &#34;
© 版权 &copy; &#169;
® 已注册商标 &reg; &#174;
商标(美国) &trade; &#8482;
× 乘号 &times; &#215;
÷ 除号 &divide; &#247;

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

显示 实体名称 实体编号
  &nbsp; &#160;
¡ &iexcl; &#161;
¢ &cent; &#162;
£ &pound; &#163;
¤ &curren; &#164;
¥ &yen; &#165;
¦ &brvbar; &#166;
§ &sect; &#167;
¨ &uml; &#168;
© &copy; &#169;
ª &ordf; &#170;
« &laquo; &#171;
¬ &not; &#172;
­ &shy; &#173;
® &reg; &#174;
¯ &macr; &#175;
° &deg; &#176;
± &plusmn; &#177;
² &sup2; &#178;
³ &sup3; &#179;
´ &acute; &#180;
µ &micro; &#181;
&para; &#182;
· &middot; &#183;
¸ &cedil; &#184;
¹ &sup1; &#185;
º &ordm; &#186;
» &raquo; &#187;
¼ &frac14; &#188;
½ &frac12; &#189;
¾ &frac34; &#190;
¿ &iquest; &#191;
À &Agrave; &#192;
Á &Aacute; &#193;
 &Acirc; &#194;
à &Atilde; &#195;
Ä &Auml; &#196;
Å &Aring; &#197;
Æ &AElig; &#198;
Ç &Ccedil; &#199;
È &Egrave; &#200;
É &Eacute; &#201;
Ê &Ecirc; &#202;
Ë &Euml; &#203;
Ì &Igrave; &#204;
Í &Iacute; &#205;
Î &Icirc; &#206;
Ï &Iuml; &#207;
Ð &ETH; &#208;
Ñ &Ntilde; &#209;
Ò &Ograve; &#210;
Ó &Oacute; &#211;
Ô &Ocirc; &#212;
Õ &Otilde; &#213;
Ö &Ouml; &#214;
× &times; &#215;
Ø &Oslash; &#216;
Ù &Ugrave; &#217;
Ú &Uacute; &#218;
Û &Ucirc; &#219;
Ü &Uuml; &#220;
Ý &Yacute; &#221;
Þ &THORN; &#222;
ß &szlig; &#223;
à &agrave; &#224;
á &aacute; &#225;
â &acirc; &#226;
ã &atilde; &#227;
ä &auml; &#228;
å &aring; &#229;
æ &aelig; &#230;
ç &ccedil; &#231;
è &egrave; &#232;
é &eacute; &#233;
ê &ecirc; &#234;
ë &euml; &#235;
ì &igrave; &#236;
í &iacute; &#237;
î &icirc; &#238;
ï &iuml; &#239;
ð &eth; &#240;
ñ &ntilde; &#241;
ò &ograve; &#242;
ó &oacute; &#243;
ô &ocirc; &#244;
õ &otilde; &#245;
ö &ouml; &#246;
÷ &divide; &#247;
ø &oslash; &#248;
ù &ugrave; &#249;
ú &uacute; &#250;
û &ucirc; &#251;
ü &uuml; &#252;
ý &yacute; &#253;
þ &thorn; &#254;
ÿ &yuml; &#255;

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

显示 实体名称 实体编号
ƒ &fnof; &#402;
Α &Alpha; &#913;
Β &Beta; &#914;
Γ &Gamma; &#915;
Δ &Delta; &#916;
Ε &Epsilon; &#917;
Ζ &Zeta; &#918;
Η &Eta; &#919;
Θ &Theta; &#920;
Ι &Iota; &#921;
Κ &Kappa; &#922;
Λ &Lambda; &#923;
Μ &Mu; &#924;
Ν &Nu; &#925;
Ξ &Xi; &#926;
Ο &Omicron; &#927;
Π &Pi; &#928;
Ρ &Rho; &#929;
Σ &Sigma; &#931;
Τ &Tau; &#932;
Υ &Upsilon; &#933;
Φ &Phi; &#934;
Χ &Chi; &#935;
Ψ &Psi; &#936;
Ω &Omega; &#937;
α &alpha; &#945;
β &beta; &#946;
γ &gamma; &#947;
δ &delta; &#948;
ε &epsilon; &#949;
ζ &zeta; &#950;
η &eta; &#951;
θ &theta; &#952;
ι &iota; &#953;
κ &kappa; &#954;
λ &lambda; &#955;
μ &mu; &#956;
ν &nu; &#957;
ξ &xi; &#958;
ο &omicron; &#959;
π &pi; &#960;
ρ &rho; &#961;
ς &sigmaf; &#962;
σ &sigma; &#963;
τ &tau; &#964;
υ &upsilon; &#965;
φ &phi; &#966;
χ &chi; &#967;
ψ &psi; &#968;
ω &omega; &#969;
? &thetasym; &#977;
? &upsih; &#978;
? &piv; &#982;
&bull; &#8226;
&hellip; &#8230;
&prime; &#8242;
&Prime; &#8243;
&oline; &#8254;
&frasl; &#8260;
&weierp; &#8472;
&image; &#8465;
&real; &#8476;
&trade; &#8482;
&alefsym; &#8501;
&larr; &#8592;
&uarr; &#8593;
&rarr; &#8594;
&darr; &#8595;
&harr; &#8596;
&crarr; &#8629;
&lArr; &#8656;
&uArr; &#8657;
&rArr; &#8658;
&dArr; &#8659;
&hArr; &#8660;
&forall; &#8704;
&part; &#8706;
&exist; &#8707;
&empty; &#8709;
&nabla; &#8711;
&isin; &#8712;
&notin; &#8713;
&ni; &#8715;
&prod; &#8719;
&sum; &#8721;
&minus; &#8722;
&lowast; &#8727;
&radic; &#8730;
&prop; &#8733;
&infin; &#8734;
&ang; &#8736;
&and; &#8743;
&or; &#8744;
&cap; &#8745;
&cup; &#8746;
&int; &#8747;
&there4; &#8756;
&sim; &#8764;
&cong; &#8773;
&asymp; &#8776;
&ne; &#8800;
&equiv; &#8801;
&le; &#8804;
&ge; &#8805;
&sub; &#8834;
&sup; &#8835;
&nsub; &#8836;
&sube; &#8838;
&supe; &#8839;
&oplus; &#8853;
&otime; &otimes; &#8855;
&perp; &#8869;
&sdot; &#8901;
? &lceil; &#8968;
? &rceil; &#8969;
? &lfloor; &#8970;
? &rfloor; &#8971;
? &lang; &#9001;
? &rang; &#9002;
&loz; &#9674;
&spades; &#9824;
&clubs; &#9827;
&hearts; &#9829;
&diams; &#9830;

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

显示 实体名称 实体编号
" &quot; &#34;
& &amp; &#38;
< &lt; &#60;
> &gt; &#62;
Π&OElig; &#338;
œ &oelig; &#339;
Š &Scaron; &#352;
š &scaron; &#353;
Ÿ &Yuml; &#376;
ˆ &circ; &#710;
˜ &tilde; &#732;
&ensp; &#8194;
&emsp; &#8195;
&thinsp; &#8201;
‌‌ &zwnj; &#8204;
‍‍ &zwj; &#8205;
‎‎ &lrm; &#8206;
&rlm; &#8207;
&ndash; &#8211;
&mdash; &#8212;
&lsquo; &#8216;
&rsquo; &#8217;
&sbquo; &#8218;
&ldquo; &#8220;
&rdquo; &#8221;
&bdquo; &#8222;
&dagger; &#8224;
&Dagger; &#8225;
&permil; &#8240;
&lsaquo; &#8249;
&rsaquo; &#8250;
&euro; &#8364;

布局 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

  1. 加粗
  2. 正常

字体样式 text-decoration

  1. 下划线
  2. 删除线

文字对齐 text-align

  1. 左对齐
  2. 居中对齐
  3. 右对齐

换行 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>
        

按钮 Btn

.btn1 (面性大按钮)

Span
Anchor Span
Disabled, Span
Disabled, Anchor Disabled, Span

.btn2 (线框大按钮)

Span
Anchor Span
Disabled, Span
Disabled, Anchor Disabled, Span

.btn3 (线框大按钮)

Span
Anchor Span
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

复选框 .inputCheck

输入和下拉 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
&#xe001;
iconfont_f002ridea
&#xe002;
iconfont_f003car
&#xe003;
iconfont_f004safe
&#xe004;
iconfont_f005leaf
&#xe005;
iconfont_f006headphone
&#xe006;
iconfont_f007right
&#xe007;

使用方法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
	}
];

杂项 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 切线焦点

基础样式 Module 扩展样式-小红点 Dot 扩展样式-气泡 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

券 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

  1. 设计规范 V1.0

其他 Other

背景颜色 Background

色值 命名规范 / 类名 应用说明

#ffffff

ColorWhite / .c_bg0

白色:风格主基调,按钮(带背景色)上的文字

#fafafa

ColorLightGray_ssss / .c_bg1

98%灰色:titlebar底色

#f0f0f0

ColorLightGray_sss / .c_bg2

94%灰色:部分页面级背景

Reference

  1. 设计规范 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+

动画示例 Animate Demo

缓动 animation-timing-function

CSS默认缓动

将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');