B2B前端与视觉规范.doc

。。。。。。有限公司
文件
版本号:
B2B前端与视觉规范
发布日期:2016/07/19
目录
1 前端规范编写目的 5
2 前端规范定义 5
前端规范——基本准则 5
前端规范——一般规范 5
框架约定 5
文件/资源命名 5
资源协议 6
文本缩进 6
注释 6
前端规范——HTML规范 7
文档模式(doctype) 7
关注点分离 7
HTML 内容至上 8
Type 属性 9
可用性扩展 10
格式化规则 10
HTML 引号 10
前端规范—— AngularJS 规范 10
作用域(scope) ,视图和控制器的集合区 10
控制器(controller) ,应用的行为 10
模型(model) ,应用的数据 10
视图(view) ,用户能看到的 10
路由(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引号 16
选择器嵌套(SCSS) 16
3 16
前端现状 16
产品化 16
PC 与APP 模块化 16
PC管理后台增加APP设置模块, APP风格设定,皮肤标准化: 17
临时数据存储、更新方案 19
APP动态广告方案 19
APP数据统计 20
短信接口 20
错误代码库标准化、本地化 21
APP UI&前端重构 21
其它说明 22
4 前端框架版本: 22
APP前端开发框架: 22
PC后台管理框架: 22
第三方插件(cordova_plugin): 22
5 UI视觉规范 23
视觉规范说明 23
色值 23
文字 24
标准字号 24
标准字体&weight粗细设定 25
使用样例 26
UI控件 26
UI控件分类 26
UI控件维度和层级 27
度量与边框 28
页面视图规范(Layout) 29
页内控件规范 29
图标(icons) 29
应用图标 29
功能图标 29
UE动效 29
UX 用户体验 29
手势 29
提醒和对话 29
术语和措辞风格 30
品牌元素 30
6 前端APP框架样例——Ionic 30
Ionic CSS常用组件API 30
Ionic javascript 常用组件API 30
Ionic 内建基于AngularJs directive 的javascript UI库。许多组件通过javascript来产生DOM的动态效果。 30
$ionicActionSheet 上拉菜单 30
$ionicPopup弹出框 32
$ionicPopover 浮动框 32
$ionicModal模态对话框 34
$ionicLoading 载入指示器 34
$ionicBackdrop背景幕 34
<ion-tabs>…</ion-tabs> 34
Ionic 指令(Angular direct