B2B前端与视觉规范.doc

。。。。。。 文件 版本号：V1.0 B2B前端与视觉规范 发布日期：2016/07/19 目 录 1 前端规范编写目的 5 2 前端规范定义 5 2.1 前端规范——基本准则 5 2.2 前端规范—— 一般规范 5 2.2.1 框架约定 5 2.2.2 文件/资源命名 5 2.2.3 资源协议 6 2.2.4 文本缩进 6 2.2.5 注释 6 2.3 前端规范——HTML规范 7 2.3.1 文档模式（doctype） 7 2.3.2 关注点分离 7 2.3.3 HTML 内容至上 8 2.3.4 Type 属性 9 2.3.5 可用性扩展 10 2.3.6 格式化规则 10 2.3.7 HTML 引号 10 2.4 前端规范—— AngularJS 规范 10 2.4.1 作用域(scope) ，视图和控制器的集合区 10 2.4.2 控制器(controller) ，应用的行为 10 2.4.3 模型(model) ，应用的数据 10 2.4.4 视图(view) ，用户能看到的 10 2.4.1 路由 (router) – 视图的切换 11 2.4.2 指令(directives) ，扩展HTML语法 11 2.4.3 过滤器(filters) ，数据本地化 11 2.4.4 $ ， AngularJS的命名空间(namespace) 11 2.5 前端规范—— CSS 和 Sass (SCSS) 规范 11 2.5.1 ID和class类名 11 2.5.2 合理的避免使用ID 12 2.5.3 CSS选择器中避免标签名 12 2.5.4 尽可能的精确 12 2.5.5 尽可能的可重用 13 2.5.6 缩写属性 14 2.5.7 0 和单位 14 2.5.8 ID 和 Class（类） 名的分隔符 14 2.5.9 声明顺序 14 2.5.10 声明结束 15 2.5.11 属性名结束 15 2.5.12 选择器和声明分离 15 2.5.13 规则分隔 15 2.5.14 CSS引号 16 2.5.15 选择器嵌套 (SCSS) 16 3 前端重构V2.0 16 3.1 前端现状 16 3.2 产品化 16 3.2.1 PC 与APP 模块化 16 3.2.2 PC管理后台增加APP设置模块， APP风格设定，皮肤标准化： 17 3.2.3 临时数据存储、更新方案 19 3.2.4 APP动态广告方案 19 3.2.5 APP数据统计 20 3.2.6 短信接口 20 3.2.7 错误代码库标准化、本地化 21 3.2.8 APP UI前端重构 21 3.2.9 其它说明 22 4 前端框架版本： 22 4.1 APP前端开发框架： 22 4.2 PC后台管理框架： 22 4.3 第三方插件（cordova_plugin）： 22 5 UI视觉规范 23 5.1 视觉规范说明 23 5.2 色值 23 5.3 文字 24 5.3.1 标准字号 24 5.3.2 标准字体weight粗细设定 25 5.3.3 使用样例 26 5.4 UI控件 26 5.4.1 UI控件分类 26 5.4.2 UI控件维度和层级 27 5.4.1 度量与边框 28 5.5 页面视图规范（Layout） 29 5.6 页内控件规范 29 5.7 图标（icons） 29 5.7.1 应用图标 29 5.7.2 功能图标 29 5.8 UE动效 29 5.9 UX 用户体验 29 5.9.1 手势 29 5.9.2 提醒和对话 29 5.9.3 术语和措辞风格 30 5.10 品牌元素 30 6 前端APP框架样例——Ionic 30 6.1 Ionic CSS常用组件API 30 6.2 Ionic javascript 常用组件API 30 Ionic 内建基于AngularJs directive 的javascript UI库。许多组件通过javascript来产生DOM的动态效果。 30 6.2.1 $ionicActionSheet 上拉菜单 30 6.2.2 $ionicPopup弹出框 32 6.2.3 $ionicPopover 浮动框 32 6.2.4 $ionicModal模态对话框 34 6.2.5 $ionicLoading 载入指示器 34 6.2.6 $ionicBackdrop背景幕 34 6.2.7 ion-tabs…/ion-tabs 34 6.2.8 Ionic 指令（Angular directive in Ionic） 35 6.3 使用Chrome Inspect调试Ionic App 36 Androi