B2B前端与视觉规范Word文档下载推荐.docx

1、2.5.9 声明顺序 142.5.10 声明结束 152.5.11 属性名结束 152.5.12 选择器和声明分离 152.5.13 规则分隔 152.5.14 CSS引号 162.5.15 选择器嵌套 （SCSS） 163 前端重构V2.0 163.1 前端现状 163.2 产品化 163.2.1 PC 与APP 模块化 163.2.2 PC管理后台增加APP设置模块， APP风格设定，皮肤标准化： 173.2.3 临时数据存储、更新方案 193.2.4 APP动态广告方案 193.2.5 APP数据统计 203.2.6 短信接口 203.2.7 错误代码库标准化、本地化 213.2.8 A

2、PP UI&前端重构 213.2.9 其它说明 224 前端框架版本： 224.1 APP前端开发框架：4.2 PC后台管理框架：4.3 第三方插件（cordova_plugin）：5 UI视觉规范 235.1 视觉规范说明 235.2 色值 235.3 文字 245.3.1 标准字号 245.3.2 标准字体&weight粗细设定 255.3.3 使用样例 265.4 UI控件 265.4.1 UI控件分类 265.4.2 UI控件维度和层级 275.4.1 度量与边框 285.5 页面视图规范（Layout） 295.6 页内控件规范 295.7 图标（icons） 295.7.1 应用图

3、标 295.7.2 功能图标 295.8 UE动效 295.9 UX 用户体验 295.9.1 手势 295.9.2 提醒和对话 295.9.3 术语和措辞风格 305.10 品牌元素 306 前端APP框架样例Ionic 306.1 Ionic CSS常用组件API 306.2 Ionic javascript 常用组件API 30Ionic 内建基于AngularJs directive 的javascript UI库。许多组件通过javascript来产生DOM的动态效果。 306.2.1 $ionicActionSheet 上拉菜单 306.2.2 $ionicPopup弹出框 326

4、.2.3 $ionicPopover 浮动框 326.2.4 $ionicModal模态对话框 346.2.5 $ionicLoading 载入指示器 346.2.6 $ionicBackdrop背景幕 346.2.7 346.2.8 Ionic 指令（Angular directive in Ionic） 356.3 使用Chrome Inspect调试Ionic App 36Android真机调试 Ionic App：地址栏输入 367 前端PC框架样例smartadmin & bootstrap 367.1 Smartadmin 组件 367.2 bootstrap CSS组件 367.

5、3 bootstrap javascript API 368 参考文档 361 前端规范编写目的 改善可读性、保持一致性规范前端代码，设计师标准化输出UI视觉，便于团队协同开发，统一编码风格和前端样式。 提高团队协作效率，前端后期优化维护，保持前端架构纯净。 B2B产品化，增强产品配置灵活度。 2 前端规范定义2.1 前端规范基本准则 符合web标准，语义化html。 结构、表现、行为代码分离。 遵循框架优先、可重用原则。 代码简洁明了有序。 页面注释明确，后期可维护性强。2.2 前端规范 一般规范2.2.1 框架约定严格按照Ionic、smartAdmin、bootStrap、angular

6、Js框架文档约定，正确使用和嵌套框架提供的结构组件、表现组件、行为组件。2.2.2 文件/资源命名所有的文件名遵循同一命名约定。减号-分隔文件名、资源名。确保文件命名总是以字母开头而不是数字。资源的字母名称全为小写。需要对文件增加前后缀或特定的扩展名（比如 .min.js, .min.css），或一串前缀（abc.main.min.css）。使用点分隔符来区分这些在文件名中带有清晰意义的元数据。引入javascript库文件，文件名须包含库名称及版本号及是否为压缩版。不推荐MyScript.jsmyCamelCaseName.cssi_love_underscores.html1001-scr

7、ipts.jsmy-file-min.css推荐my-script.jsmy-camel-case-name.cssi-love-underscores.htmlthousand-and-one-scripts.jsmy-file.min.css文件夹及文件名英文语义化命名：admin 后台管理目录app app应用目录product-*.html 产品相关 search-*.html 搜索相关 2.2.3 资源协议当引入图片或其他媒体文件、样式、脚本时，URLs 所指向的具体路径，不要指定协议部分（http:, https:），除非这两者协议都不可用。不指定协议使得 URL 从绝对的获取路径

8、转变为相对的，在请求资源协议无法确定时非常好用。.example background: url（ url（/ 2.2.4 文本缩进一次缩进两个空格。 a href=#Test/li/ul2.2.5 注释注释协同开发时了解代码写法和目的的唯一途径。没有任何代码是可以完全自解释的。代码注释，永远也不嫌多。写注释应注意：不要写你的代码都干了些什么，而要写你的代码为什么要这么写，背后的考量是什么。当然也可以加入所思考问题或是解决方案的链接地址。var offset = 0;if（includeLabels） / Add offset of 20 offset = 20; /* * If the la

9、bels are included we need to have a minimum offset of 20 pixels * We need to set it explicitly because of the following bug * */如果希望注释被提取，使用“/*”开头，否侧用“/*”或“/*”等。2.3 前端规范HTML规范2.3.1 文档模式（doctype）页面所遵循的文档模式为html5规范。2.3.2 申明文档的编码charset,与文件本身编码保持一致默认使用UTF-8编码meta charset=utf-82.3.3 关注点分离区分不同的关注点，信息（HTM

10、L 结构）、外观（CSS）和行为（JavaScript）。为了使它们成为可维护的干净整洁的代码，尽可能分离开。严格地保证结构、表现、行为三者分离。文档和模板中只包含结构性的 HTML；表现代码，移入样式表；动作行为，移入JS脚本。不使用页内样式（.no-good ）；不在元素上使用 style 属性（hr style=border-top: 5px solid black不使用页内脚本（alert（no good）不使用表象元素（, centerfont不使用表象 class 名（red, left, center）；HTML5语义化标签，HTML原来以DIV布局的方式也慢慢的在改变；常用的语

11、义化标签有article nav aside section header footer hgroup等；DOCTYPE html PUBLIC -/W3C/DTD XHTML 1.0 Transitional/EN http:/www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtdhtml xmlns=/www.w3.org/1999/xhtmlhtmlheadlink rel=stylesheet href=base.cssgrid.csstype.css/headbodyh1 style=font-size: 3rem/h1Im a subtit

12、le and Im bold!/bDare you center me!/center alert（Just dont.）;/body/htmlmain.cssh1 class=titlediv class=sub-title/div script async src=main.js2.3.4 HTML 内容至上不要让非内容信息污染HTML。不要通过 HTML 来解决设计问题， HTML只关注内容。HTML 标签的目的，是为了不断地展示内容信息。不要引入一些特定的 HTML 结构来解决一些视觉设计问题，譬如用图片展示图标（将 img 元素当做用来做视觉设计的元素，img是内容标签）。不推荐在H

13、TML标签中添加样式属性，标签中的align属性，body标签上的background属性，td和tr标签上的height、width、nowrap、bgcolor、valign等属性，iframe标签中的frameborder、marginheight、scrolling等属性。此类属性应该废弃，并通过添加CSS样式来实现相同的效果。以下例子展示了误将 HTML 用来解决设计问题的情况：span class=text-boxsquare/span See the square next to me?.text-box .square display: inline-block; width:

14、 1rem; height: background-color: red;- Thats clean markup! -.text-box:before content:;图片和 SVG 图形能被引入到 HTML 中的唯一理由是它们需呈现与内容相关的信息，如果做为装饰，请用样式表写进来：- Content images should never be used for design elements!img src=square.svg alt=Square /* We use a :before pseudo element with a background image to solve

15、the problem */ url（square.svg） no-repeat; background-size: 100%;2.3.5 Type 属性省略样式表与脚本上的 type 属性。HTML5 中两者默认的 type 值就是 text/css 和 text/javascript， type 属性可以忽略掉。在老旧版本的浏览器中也基本安全可靠。2.3.6 可用性扩展HTML5 语义化标签如果使用得当，许多可用性问题引刃而解。ARIA 规则在一些语义化的元素上可为其添上默认的可用性角色属性，使用得当的话已使网站的可用性大部分成立。假如你使用 nav, aside, main, foote

16、r 等元素，ARIA 规则会在其上应用一些关联的默认值。更多细节可参考 Using WAI-ARIA in HTML。另外一些角色属性则能够用来呈现更多可用性情景（role=tab）。2.3.7 格式化规则在每一个块状元素，列表元素和表格元素后，加上一新空白行，并对其子孙元素进行缩进。内联元素写在一行内，块状元素还有列表和表格另起一行。2.3.8 HTML 引号使用双引号（“”） 而不是单引号（）。div class=news-articlenews-article2.4 前端规范 AngularJS 规范本段只对AngularJS在B2B项目中为了维护标准化做统一规范，具体公共规约请参考ja

17、vascript和AngularJS官方文档。2.4.1 控制器（controller） ，应用的行为仅为应用的行为负责。注意控制器和视图view分离、控制器和指令directive分离、控制器和过滤器filter分离、控制器和Service分离。 不要将视图污染到控制器，控制器不应该包含任何关于渲染代码（DOM引用或者片段）。任何小段视图代码确保写到视图模板中（交由模板view控制）； 不要在控制器中格式化数据（交由过滤器filter控制）； 不要在控制器中操作DOM（交由指令directive控制）。 不要在控制器中使用http远程数据调用（交由服务Service控制）。2.4.2 视图（

18、view） ，用户能看到的视图不应该包含任何行为。控制器和视图没有直接的调用关系，视图与控制器多对多关系。2.4.3 路由 （router） 视图的切换 使用路由更新视图切换。 不允许任何跳过路由的视图切换。2.4.4 指令（directives） ，扩展HTML语法 使用指令更新、修改DOM的元素（E）、样式类（C）、属性（A）、注释（M），不要在控制器中编写控制代码（控制器、服务、也不是应用程序的其他地方）。 指令扩展HTML 语法, 将行为与DOM 转换的自定义元素和属性关联起来, 创建复用的UI 组件，扩展HTML表示能力。2.4.5 服务（service），数据调用；远程API调用、

19、数据集。2.4.6 过滤器（filters） ，数据本地化使用过滤器格式化本地数据。2.4.7 $ ， AngularJS的命名空间（namespace）为了防止意外的命名冲突，AngularJS为可能冲突的对象名加以前缀$请不要在自己的代码里用做前缀，以免和AngularJS代码发生冲突。2.5 前端规范 CSS 和 Sass （SCSS） 规范2.5.1 ID和class类名使用可以反应元素位置、元素目的用途的名称。不要用没有语义指向、晦涩难懂的名称。.fw-800 font-weight: 800;.red color:.art-list-heavy .home-important 2.

20、5.2 合理的避免使用IDID不应该被应用于样式。ID的样式不能被复用并且每个页面中你只能使用一次ID。使用ID唯一有效的是确定网页或整个站点中的位置。始终考虑使用class，而不是id，除非需要定位且只使用一次。#content .title font-size: 2em;.content .title 含有ID选择器权重很高。一个只包含一个ID选择器权重高于包含1000个class（类）名的选择器。浏览器优先使用ID。2.5.3 CSS选择器中避免标签名当构建选择器时应该使用清晰，准确和有语义的class（类）名。不要使用标签（Element）选择器。只关心class（类）名，而不是标签代

21、码名称，这样更容易维护。功能分离的要求下,在表现层中不允许分配html标记/语义。只使用具有实际意义的class（类）名，不使用元素选择器。div.content header.content-header h2.title .content .content-header .my-title 2.5.4 尽可能的精确直接子选择器：需要匹配到一个DOM末端的选择器，具体场景下使用用，可有效避免影响其它样式。后代选择器：通用样式下使用。article class=content news-contentNews eventThis is a news article contentteaserB

22、uy this下面的CSS将应用于有title类的全部三个元素，要解决content类下的title类 和 teaser类下的title类下不同的样式，为避免冲突，需要更精确的选择器再次重写他们的样式BEM。 2rem; .title .content-body 1.5rem; .teaser 1.2rem;2.5.5 尽可能的可重用样式按职能划分：全局样式定义，布局样式定义，模块样式定义，BEM方式单个页面样式定义（“Block”区块,“Element”元素,“Modifier”修饰符）。样式定义举例：layout：.l-960 .l-left .l-right；global：.g-red .g-title .g-price；mod：.m-login .m-breadcrumb .m-slide；BEM：.homeimgslide-item-img没有前缀字母的样式定义为全局样式。模块或页面样式必须语义化命名。模块属性或状态样式区分使用“-”分隔，block的不同状态或不同版本：.block-modifi