B2B前端与视觉规范Word文档下载推荐.docx
《B2B前端与视觉规范Word文档下载推荐.docx》由会员分享，可在线阅读，更多相关《B2B前端与视觉规范Word文档下载推荐.docx（42页珍藏版）》请在冰豆网上搜索。
2.5.9声明顺序14
2.5.10声明结束15
2.5.11属性名结束15
2.5.12选择器和声明分离15
2.5.13规则分隔15
2.5.14CSS引号16
2.5.15选择器嵌套（SCSS）16
3前端重构V2.016
3.1前端现状16
3.2产品化16
3.2.1PC与APP模块化16
3.2.2PC管理后台增加APP设置模块，APP风格设定，皮肤标准化：
17
3.2.3临时数据存储、更新方案19
3.2.4APP动态广告方案19
3.2.5APP数据统计20
3.2.6短信接口20
3.2.7错误代码库标准化、本地化21
3.2.8APPUI&
前端重构21
3.2.9其它说明22
4前端框架版本：
22
4.1APP前端开发框架：
4.2PC后台管理框架：
4.3第三方插件（cordova_plugin）：
5UI视觉规范23
5.1视觉规范说明23
5.2色值23
5.3文字24
5.3.1标准字号24
5.3.2标准字体&
weight粗细设定25
5.3.3使用样例26
5.4UI控件26
5.4.1UI控件分类26
5.4.2UI控件维度和层级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.8UE动效29
5.9UX用户体验29
5.9.1手势29
5.9.2提醒和对话29
5.9.3术语和措辞风格30
5.10品牌元素30
6前端APP框架样例——Ionic30
6.1IonicCSS常用组件API30
6.2Ionicjavascript常用组件API30
Ionic内建基于AngularJsdirective的javascriptUI库。
许多组件通过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.8Ionic指令（AngulardirectiveinIonic）35
6.3使用ChromeInspect调试IonicApp36
Android真机调试IonicApp：
地址栏输入36
7前端PC框架样例——smartadmin&
bootstrap36
7.1Smartadmin组件36
7.2bootstrapCSS组件36
7.3bootstrapjavascriptAPI36
8参考文档36
1前端规范编写目的
✧改善可读性、保持一致性规范前端代码，设计师标准化输出UI视觉，便于团队协同开发，统一编码风格和前端样式。
✧提高团队协作效率，前端后期优化维护，保持前端架构纯净。
✧B2B产品化，增强产品配置灵活度。
2前端规范定义
2.1前端规范——基本准则
✧符合web标准，语义化html。
✧结构、表现、行为代码分离。
✧遵循框架优先、可重用原则。
✧代码简洁明了有序。
✧页面注释明确，后期可维护性强。
2.2前端规范——一般规范
2.2.1框架约定
严格按照Ionic、smartAdmin、bootStrap、angularJs框架文档约定，正确使用和嵌套框架提供的结构组件、表现组件、行为组件。
2.2.2文件/资源命名
所有的文件名遵循同一命名约定。
减号‘-’分隔文件名、资源名。
确保文件命名总是以字母开头而不是数字。
资源的字母名称全为小写。
需要对文件增加前后缀或特定的扩展名（比如.min.js,.min.css），或一串前缀（abc.main.min.css）。
使用点分隔符来区分这些在文件名中带有清晰意义的元数据。
引入javascript库文件，文件名须包含库名称及版本号及是否为压缩版。
不推荐
MyScript.js
myCamelCaseName.css
i_love_underscores.html
1001-scripts.js
my-file-min.css
推荐
my-script.js
my-camel-case-name.css
i-love-underscores.html
thousand-and-one-scripts.js
my-file.min.css
文件夹及文件名英文语义化命名：
admin后台管理目录
appapp应用目录
…
product-***.html产品相关
search-***.html搜索相关
……
2.2.3资源协议
当引入图片或其他媒体文件、样式、脚本时，URLs所指向的具体路径，不要指定协议部分（http:
https:
），除非这两者协议都不可用。
不指定协议使得URL从绝对的获取路径转变为相对的，在请求资源协议无法确定时非常好用。
.example{
background:
url（
}
url（//
2.2.4文本缩进
一次缩进两个空格。
<
ul>
<
li>
ahref="
#"
>
Test<
/a>
/li>
/ul>
2.2.5注释
注释协同开发时了解代码写法和目的的唯一途径。
没有任何代码是可以完全自解释的。
代码注释，永远也不嫌多。
写注释应注意：
不要写你的代码都干了些什么，而要写你的代码为什么要这么写，背后的考量是什么。
当然也可以加入所思考问题或是解决方案的链接地址。
varoffset=0;
if（includeLabels）{
//Addoffsetof20
offset=20;
/**
*Ifthelabelsareincludedweneedtohaveaminimumoffsetof20pixels
*Weneedtosetitexplicitlybecauseofthefollowingbug*
*/
如果希望注释被提取，使用“/**”开头，否侧用“/*”或“/***”等。
2.3前端规范——HTML规范
2.3.1文档模式（doctype）
页面所遵循的文档模式为<
!
DOCTYPEhtml>
html5规范。
2.3.2申明文档的编码charset,与文件本身编码保持一致
默认使用UTF-8编码<
metacharset="
utf-8"
2.3.3关注点分离
区分不同的关注点，信息（HTML结构）、外观（CSS）和行为（JavaScript）。
为了使它们成为可维护的干净整洁的代码，尽可能分离开。
严格地保证结构、表现、行为三者分离。
文档和模板中只包含结构性的HTML；
表现代码，移入样式表；
动作行为，移入JS脚本。
不使用页内样式（<
style>
.no-good{}<
/style>
）；
不在元素上使用style属性（<
hrstyle="
border-top:
5pxsolidblack"
不使用页内脚本（<
script>
alert（'
nogood'
）<
/script>
不使用表象元素（<
b>
<
u>
center>
font>
不使用表象class名（red,left,center）；
HTML5语义化标签，HTML原来以DIV布局的方式也慢慢的在改变；
常用的语义化标签有articlenavasidesectionheaderfooterhgroup等；
DOCTYPEhtmlPUBLIC"
-//W3C//DTDXHTML1.0Transitional//EN"
"
http:
//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
htmlxmlns="
//www.w3.org/1999/xhtml"
html>
head>
linkrel="
stylesheet"
href="
base.css"
grid.css"
type.css"
/head>
body>
h1style="
font-size:
3rem"
/h1>
I'
masubtitleandI'
mbold!
/b>
Dareyoucenterme!
/center>
alert（'
Justdont...'
）;
/body>
/html>
main.css"
h1class="
title"
divclass="
sub-title"
/div>
scriptasyncsrc="
main.js"
2.3.4HTML内容至上
不要让非内容信息污染HTML。
不要通过HTML来解决设计问题，HTML只关注内容。
HTML标签的目的，是为了不断地展示内容信息。
不要引入一些特定的HTML结构来解决一些视觉设计问题，譬如用图片展示图标（将img元素当做用来做视觉设计的元素，img是内容标签）。
不推荐在HTML标签中添加样式属性，标签中的align属性，body标签上的background属性，td和tr标签上的height、width、nowrap、bgcolor、valign等属性，iframe标签中的frameborder、marginheight、scrolling等属性。
此类属性应该废弃，并通过添加CSS样式来实现相同的效果。
以下例子展示了误将HTML用来解决设计问题的情况：
spanclass="
text-box"
square"
/span>
Seethesquarenexttome?
.text-box>
.square{
display:
inline-block;
width:
1rem;
height:
background-color:
red;
--That'
scleanmarkup!
-->
.text-box:
before{
content:
"
;
图片和SVG图形能被引入到HTML中的唯一理由是它们需呈现与内容相关的信息，如果做为装饰，请用样式表写进来：
--Contentimagesshouldneverbeusedfordesignelements!
imgsrc="
square.svg"
alt="
Square"
/>
/*Weusea:
beforepseudoelementwithabackgroundimagetosolvetheproblem*/
url（square.svg）no-repeat;
background-size:
100%;
2.3.5Type属性
省略样式表与脚本上的type属性。
HTML5中两者默认的type值就是text/css和text/javascript，type属性可以忽略掉。
在老旧版本的浏览器中也基本安全可靠。
2.3.6可用性扩展
HTML5语义化标签如果使用得当，许多可用性问题引刃而解。
ARIA规则在一些语义化的元素上可为其添上默认的可用性角色属性，使用得当的话已使网站的可用性大部分成立。
假如你使用nav,aside,main,footer等元素，ARIA规则会在其上应用一些关联的默认值。
更多细节可参考UsingWAI-ARIAinHTML。
另外一些角色属性则能够用来呈现更多可用性情景（role="
tab"
）。
2.3.7格式化规则
在每一个块状元素，列表元素和表格元素后，加上一新空白行，并对其子孙元素进行缩进。
内联元素写在一行内，块状元素还有列表和表格另起一行。
2.3.8HTML引号
使用双引号（“”）而不是单引号（‘’）。
divclass='
news-article'
news-article"
2.4前端规范——AngularJS规范
本段只对AngularJS在B2B项目中为了维护标准化做统一规范，具体公共规约请参考javascript和AngularJS官方文档。
2.4.1控制器（controller），应用的行为
仅为应用的行为负责。
注意控制器和视图view分离、控制器和指令directive分离、控制器和过滤器filter分离、控制器和Service分离。
✧不要将视图污染到控制器，控制器不应该包含任何关于渲染代码（DOM引用或者片段）。
任何小段视图代码确保写到视图模板中（交由模板view控制）；
✧不要在控制器中格式化数据（交由过滤器filter控制）；
✧不要在控制器中操作DOM（交由指令directive控制）。
✧不要在控制器中使用http远程数据调用（交由服务Service控制）。
2.4.2视图（view），用户能看到的
视图不应该包含任何行为。
控制器和视图没有直接的调用关系，视图与控制器多对多关系。
2.4.3路由（router）–视图的切换
✧使用路由更新视图切换。
✧不允许任何跳过路由的视图切换。
2.4.4指令（directives），扩展HTML语法
✧使用指令更新、修改DOM的元素（E）、样式类（C）、属性（A）、注释（M），不要在控制器中编写控制代码（控制器、服务、也不是应用程序的其他地方）。
✧指令扩展HTML语法,将行为与DOM转换的自定义元素和属性关联起来,创建复用的UI组件，扩展HTML表示能力。
2.4.5服务（service），数据调用；
远程API调用、数据集。
2.4.6过滤器（filters），数据本地化
使用过滤器格式化本地数据。
2.4.7$，AngularJS的命名空间（namespace）
为了防止意外的命名冲突，AngularJS为可能冲突的对象名加以前缀"
$"
请不要在自己的代码里用"
做前缀，以免和AngularJS代码发生冲突。
2.5前端规范——CSS和Sass（SCSS）规范
2.5.1ID和class类名
使用可以反应元素位置、元素目的用途的名称。
不要用没有语义指向、晦涩难懂的名称。
.fw-800{
font-weight:
800;
}
.red{
color:
.art-list-heavy{
.home-important{
2.5.2合理的避免使用ID
ID不应该被应用于样式。
ID的样式不能被复用并且每个页面中你只能使用一次ID。
使用ID唯一有效的是确定网页或整个站点中的位置。
始终考虑使用class，而不是id，除非需要定位且只使用一次。
#content.title{
font-size:
2em;
.content.title{
含有ID选择器权重很高。
一个只包含一个ID选择器权重高于包含1000个class（类）名的选择器。
浏览器优先使用ID。
2.5.3CSS选择器中避免标签名
当构建选择器时应该使用清晰，准确和有语义的class（类）名。
不要使用标签（Element）选择器。
只关心class（类）名，而不是标签代码名称，这样更容易维护。
功能分离的要求下,在表现层中不允许分配html标记/语义。
只使用具有实际意义的class（类）名，不使用元素选择器。
div.content>
header.content-header>
h2.title{
.content>
.content-header>
.my-title{
2.5.4尽可能的精确
直接子选择器：
需要匹配到一个DOM末端的选择器，具体场景下使用用，可有效避免影响其它样式。
后代选择器：
通用样式下使用。
articleclass="
contentnews-content"
Newsevent<
content-body"
titlecontent-title"
Checkthisout
p>
Thisisanewsarticlecontent<
/p>
teaser"
Buythis<
teaser-content"
Yey!
/article>
下面的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
升级会员 