B2B前端与视觉规范.docx

文件
版本号：
B2B前端与视觉规范
发布日期：2016/07/19
B2B前端与视觉规范
目录
前端规范编写目的 5
前端规范定义 5
前端规范一一基本准则 5
前端规范一一 一般规范 5
框架约定 5
文件/资源命名 5
资源协议 6
文本缩进 6
注释 6
前端规范一一 HTMLB范 7
文档模式(doctype) 7
关注点分离 7
HTML内容至上 8
Type 属性 10
可用性扩展 10
格式化规则 10
HTML 引号 10
前端规范—— An gularJS 规范 10
作用域(scope)，视图和控制器的集合区 错误！未定义书签。
控制器(controller)，应用的行为 10
模型(model)，应用的数据 错误！未定义书签。
视图(view)，用户能看到的 11
路由(router)—视图的切换 11
指令(directives)，扩展 HTML 语法 11
过滤器(filters)，数据本地化 11
$ , AngularJS 的命名空间(namespace) 11
前端规范—— CSS和Sass (SCSS) 规范 11
ID 和 class 类名 11
合理的避免使用 ID 12
CSS选择器中避免标签名 12
尽可能的精确 12
尽可能的可重用 13
缩写属性 14
0和单位 14
ID和Class (类)名的分隔符 14
声明顺序 14
声明结束 15
属性名结束 15
选择器和声明分离 15
规则分隔 15
CSS 弓 I号 16
选择器嵌套(SCSS) 16
16
前端现状 16
产品化 17
PC 与 APP 模块化 17
PC管理后台增加APP设置模块，APP风格设定，皮肤标准化： 17
临时数据存储、更新方案 19
APP动态广告方案 20
APP数据统计 20
短信接口 20
错误代码库标准化、本地化 21
APP UI&前端重构 21
其它说明 22
前端框架版本： 22
APP前端开发框架： 22
PC后台管理框架: 22
第三方插件(cordova_plugin ): 22
UI视觉规范 23
视觉规范说明 23
色值 23
文字 24
标准字号 24
标准字体 &weight 粗纟田设定 25
使用样例 26
UI 控件 26
UI控件分类 26
UI控件维度和层级 27
度量与边框 27
页面视图规范(Layout ) 29
页内控件规范 29
图标(icons ) 29
应用图标 29
功能图标 29
UE 动效 29
UX用户体验 29
手势 29
提醒和对话 29
术语和措辞风格 29
品牌元素 30
6 前端APP框架样例——Ionic 30
Ionic CSS 常用组件 API 30
Ionic javascript 常用组件 API 30
Ionic 内建基于 AngularJs directive 的 javascript UI 库。许多组件通过 javascript
来产生 DOM勺动态效果。 30
$ion icActi on Sheet 上拉菜单 30
$ionicPopup 弹出框 32
$ionicPopover 浮动框 32
$io nicModal 模态对话框 34
$ionicLoading 载入指示器 34
$ionicBackdrop 背景幕 34
<ion- tabs> </ion -tabs〉 34
Ionic 指令(Angular directive in Ionic ) 错误!未定义书签。
使用 Chrome Inspect 调试 Ionic App 35
An droid真机调试 Ionic App :地址栏输入 35
前端 PC框架样例 smartadmin & bootstrap 35
Smartadmin 组件 35
bootstrap CSS 组件 35
bootstrap javascript API 35
参考文档 35
1 前端