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--modi