B2B前端與視覺規(guī)范

1、B2B前端與視覺規(guī)范。有限公司文件 版本號：V1.0B2B前端與視覺規(guī)范 發(fā)布日期：2016/07/19目 錄1前端規(guī)范編寫目的52前端規(guī)范定義52.1前端規(guī)范基本準(zhǔn)則52.2前端規(guī)范 一般規(guī)范52.2.1框架約定52.2.2文件/資源命名52.2.3資源協(xié)議62.2.4文本縮進(jìn)62.2.5注釋62.3前端規(guī)范HTML規(guī)范72.3.1文檔模式（doctype）72.3.2關(guān)注點(diǎn)分離72.3.3HTML 內(nèi)容至上82.3.4Type 屬性92.3.5可用性擴(kuò)展102.3.6格式化規(guī)則102.3.7HTML 引號102.4前端規(guī)范 AngularJS 規(guī)范102.4.1作用域(scope) ，視圖

2、和控制器的集合區(qū)102.4.2控制器(controller) ，應(yīng)用的行為102.4.3模型(model) ，應(yīng)用的數(shù)據(jù)102.4.4視圖(view) ，用戶能看到的102.4.1路由 (router) 視圖的切換112.4.2指令(directives) ，擴(kuò)展HTML語法112.4.3過濾器(filters) ，數(shù)據(jù)本地化112.4.4$ ， AngularJS的命名空間(namespace)112.5前端規(guī)范 CSS 和 Sass (SCSS) 規(guī)范112.5.1ID和class類名112.5.2合理的避免使用ID122.5.3CSS選擇器中避免標(biāo)簽名122.5.4盡可能的精確122.5

3、.5盡可能的可重用132.5.6縮寫屬性142.5.70 和單位142.5.8ID 和 Class（類） 名的分隔符142.5.9聲明順序142.5.10聲明結(jié)束152.5.11屬性名結(jié)束152.5.12選擇器和聲明分離152.5.13規(guī)則分隔152.5.14CSS引號162.5.15選擇器嵌套 (SCSS)163前端重構(gòu)V2.0163.1前端現(xiàn)狀163.2產(chǎn)品化163.2.1PC 與APP 模塊化163.2.2PC管理后臺增加APP設(shè)置模塊， APP風(fēng)格設(shè)定，皮膚標(biāo)準(zhǔn)化：173.2.3臨時數(shù)據(jù)存儲、更新方案193.2.4APP動態(tài)廣告方案193.2.5APP數(shù)據(jù)統(tǒng)計203.2.6短信接口20

4、3.2.7錯誤代碼庫標(biāo)準(zhǔn)化、本地化213.2.8APP UI&前端重構(gòu)213.2.9其它說明224前端框架版本：224.1APP前端開發(fā)框架：224.2PC后臺管理框架：224.3第三方插件（cordova_plugin）：225UI視覺規(guī)范235.1視覺規(guī)范說明235.2色值235.3文字245.3.1標(biāo)準(zhǔn)字號245.3.2標(biāo)準(zhǔn)字體&weight粗細(xì)設(shè)定255.3.3使用樣例265.4UI控件265.4.1UI控件分類265.4.2UI控件維度和層級275.4.1度量與邊框285.5頁面視圖規(guī)范（Layout）295.6頁內(nèi)控件規(guī)范295.7圖標(biāo)（icons）295.7.1應(yīng)用圖標(biāo)295.7

5、.2功能圖標(biāo)295.8UE動效295.9UX 用戶體驗295.9.1手勢295.9.2提醒和對話295.9.3術(shù)語和措辭風(fēng)格305.10品牌元素306前端APP框架樣例Ionic306.1Ionic CSS常用組件API306.2Ionic javascript 常用組件API30Ionic 內(nèi)建基于AngularJs directive 的javascript UI庫。許多組件通過javascript來產(chǎn)生DOM的動態(tài)效果。306.2.1$ionicActionSheet 上拉菜單306.2.2$ionicPopup彈出框326.2.3$ionicPopover 浮動框326.2.4$ion

6、icModal模態(tài)對話框346.2.5$ionicLoading 載入指示器346.2.6$ionicBackdrop背景幕346.2.7346.2.8Ionic 指令（Angular directive in Ionic）356.3使用Chrome Inspect調(diào)試Ionic App36Android真機(jī)調(diào)試 Ionic App：地址欄輸入367前端PC框架樣例smartadmin & bootstrap367.1Smartadmin 組件367.2bootstrap CSS組件367.3bootstrap javascript API368參考文檔361 前端規(guī)范編寫目的 改善可讀性、保

7、持一致性規(guī)范前端代碼，設(shè)計師標(biāo)準(zhǔn)化輸出UI視覺，便于團(tuán)隊協(xié)同開發(fā)，統(tǒng)一編碼風(fēng)格和前端樣式。 提高團(tuán)隊協(xié)作效率，前端后期優(yōu)化維護(hù)，保持前端架構(gòu)純凈。 B2B產(chǎn)品化，增強(qiáng)產(chǎn)品配置靈活度。 2 前端規(guī)范定義2.1 前端規(guī)范基本準(zhǔn)則 符合web標(biāo)準(zhǔn)，語義化html。 結(jié)構(gòu)、表現(xiàn)、行為代碼分離。 遵循框架優(yōu)先、可重用原則。 代碼簡潔明了有序。 頁面注釋明確，后期可維護(hù)性強(qiáng)。2.2 前端規(guī)范 一般規(guī)范2.2.1 框架約定嚴(yán)格按照Ionic、smartAdmin、bootStrap、angularJs框架文檔約定，正確使用和嵌套框架提供的結(jié)構(gòu)組件、表現(xiàn)組件、行為組件。2.2.2 文件/資源命名所有的文件名遵

8、循同一命名約定。減號-分隔文件名、資源名。確保文件命名總是以字母開頭而不是數(shù)字。資源的字母名稱全為小寫。需要對文件增加前后綴或特定的擴(kuò)展名（比如 .min.js, .min.css），或一串前綴（abc.main.min.css）。使用點(diǎn)分隔符來區(qū)分這些在文件名中帶有清晰意義的元數(shù)據(jù)。引入javascript庫文件，文件名須包含庫名稱及版本號及是否為壓縮版。不推薦MyScript.jsmyCamelCaseName.cssi_love_underscores.html1001-scripts.jsmy-file-min.css推薦my-script.jsmy-camel-case-name.c

9、ssi-love-underscores.htmlthousand-and-one-scripts.jsmy-file.min.css文件夾及文件名英文語義化命名：admin 后臺管理目錄app app應(yīng)用目錄product-*.html 產(chǎn)品相關(guān) search-*.html 搜索相關(guān) 2.2.3 資源協(xié)議當(dāng)引入圖片或其他媒體文件、樣式、腳本時，URLs 所指向的具體路徑，不要指定協(xié)議部分（http:, https:），除非這兩者協(xié)議都不可用。不指定協(xié)議使得 URL 從絕對的獲取路徑轉(zhuǎn)變?yōu)橄鄬Φ模谡埱筚Y源協(xié)議無法確定時非常好用。不推薦.example background: url(推薦.e

10、xample background: url(/2.2.4 文本縮進(jìn)一次縮進(jìn)兩個空格。 Test 2.2.5 注釋注釋協(xié)同開發(fā)時了解代碼寫法和目的的唯一途徑。沒有任何代碼是可以完全自解釋的。代碼注釋，永遠(yuǎn)也不嫌多。寫注釋應(yīng)注意：不要寫你的代碼都干了些什么，而要寫你的代碼為什么要這么寫，背后的考量是什么。當(dāng)然也可以加入所思考問題或是解決方案的鏈接地址。不推薦var offset = 0;if(includeLabels) / Add offset of 20 offset = 20;推薦var offset = 0;if(includeLabels) /* * If the labels are

11、 included we need to have a minimum offset of 20 pixels* We need to set it explicitly because of the following bug * */ offset = 20;如果希望注釋被提取，使用“/*”開頭，否側(cè)用“/*”或“/*”等。2.3 前端規(guī)范HTML規(guī)范2.3.1 文檔模式（doctype）頁面所遵循的文檔模式為html5規(guī)范。2.3.2 申明文檔的編碼charset,與文件本身編碼保持一致默認(rèn)使用UTF-8編碼2.3.3 關(guān)注點(diǎn)分離區(qū)分不同的關(guān)注點(diǎn)，信息（HTML 結(jié)構(gòu)）、外觀（CSS）和

12、行為（JavaScript）。為了使它們成為可維護(hù)的干凈整潔的代碼，盡可能分離開。嚴(yán)格地保證結(jié)構(gòu)、表現(xiàn)、行為三者分離。文檔和模板中只包含結(jié)構(gòu)性的 HTML；表現(xiàn)代碼，移入樣式表；動作行為，移入JS腳本。不使用頁內(nèi)樣式（.no-good ）；不在元素上使用 style 屬性（）；不使用頁內(nèi)腳本（alert(no good)）；不使用表象元素（, , , , ）；不使用表象 class 名（red, left, center）；HTML5語義化標(biāo)簽，HTML原來以DIV布局的方式也慢慢的在改變；常用的語義化標(biāo)簽有article nav aside section header footer hgr

13、oup等；不推薦 Im a subtitle and Im bold! Dare you center me! alert(Just dont.); 推薦 Im a subtitle and Im bold! 2.3.4 HTML 內(nèi)容至上不要讓非內(nèi)容信息污染HTML。不要通過 HTML 來解決設(shè)計問題， HTML只關(guān)注內(nèi)容。HTML 標(biāo)簽的目的，是為了不斷地展示內(nèi)容信息。不要引入一些特定的 HTML 結(jié)構(gòu)來解決一些視覺設(shè)計問題，譬如用圖片展示圖標(biāo)（將 img 元素當(dāng)做用來做視覺設(shè)計的元素，img是內(nèi)容標(biāo)簽）。不推薦在HTML標(biāo)簽中添加樣式屬性，標(biāo)簽中的align屬性，body標(biāo)簽上的back

14、ground屬性，td和tr標(biāo)簽上的height、width、nowrap、bgcolor、valign等屬性，iframe標(biāo)簽中的frameborder、marginheight、scrolling等屬性。此類屬性應(yīng)該廢棄，并通過添加CSS樣式來實(shí)現(xiàn)相同的效果。以下例子展示了誤將 HTML 用來解決設(shè)計問題的情況：不推薦 See the square next to me?.text-box .square display: inline-block; width: 1rem; height: 1rem; background-color: red;推薦 See the square nex

15、t to me?.text-box:before content: ; display: inline-block; width: 1rem; height: 1rem; background-color: red;圖片和 SVG 圖形能被引入到 HTML 中的唯一理由是它們需呈現(xiàn)與內(nèi)容相關(guān)的信息，如果做為裝飾，請用樣式表寫進(jìn)來：不推薦 See the square next to me?推薦 See the square next to me?/* We use a :before pseudo element with a background image to solve the pro

16、blem */.text-box:before content: ; display: inline-block; width: 1rem; height: 1rem; background: url(square.svg) no-repeat; background-size: 100%;2.3.5 Type 屬性省略樣式表與腳本上的 type 屬性。HTML5 中兩者默認(rèn)的 type 值就是 text/css 和 text/javascript， type 屬性可以忽略掉。在老舊版本的瀏覽器中也基本安全可靠。2.3.6 可用性擴(kuò)展HTML5 語義化標(biāo)簽如果使用得當(dāng)，許多可用性問題引刃而解。

17、ARIA 規(guī)則在一些語義化的元素上可為其添上默認(rèn)的可用性角色屬性，使用得當(dāng)?shù)脑捯咽咕W(wǎng)站的可用性大部分成立。假如你使用 nav, aside, main, footer 等元素，ARIA 規(guī)則會在其上應(yīng)用一些關(guān)聯(lián)的默認(rèn)值。更多細(xì)節(jié)可參考 Using WAI-ARIA in HTML。另外一些角色屬性則能夠用來呈現(xiàn)更多可用性情景（role=tab）。2.3.7 格式化規(guī)則在每一個塊狀元素，列表元素和表格元素后，加上一新空白行，并對其子孫元素進(jìn)行縮進(jìn)。內(nèi)聯(lián)元素寫在一行內(nèi)，塊狀元素還有列表和表格另起一行。2.3.8 HTML 引號使用雙引號(“”) 而不是單引號()。不推薦推薦2.4 前端規(guī)范 Ang

18、ularJS 規(guī)范本段只對AngularJS在B2B項目中為了維護(hù)標(biāo)準(zhǔn)化做統(tǒng)一規(guī)范，具體公共規(guī)約請參考javascript和AngularJS官方文檔。2.4.1 控制器(controller) ，應(yīng)用的行為僅為應(yīng)用的行為負(fù)責(zé)。注意控制器和視圖view分離、控制器和指令directive分離、控制器和過濾器filter分離、控制器和Service分離。 不要將視圖污染到控制器，控制器不應(yīng)該包含任何關(guān)于渲染代碼（DOM引用或者片段）。任何小段視圖代碼確保寫到視圖模板中（交由模板view控制）； 不要在控制器中格式化數(shù)據(jù)（交由過濾器filter控制）； 不要在控制器中操作DOM（交由指令direc

19、tive控制）。 不要在控制器中使用http遠(yuǎn)程數(shù)據(jù)調(diào)用（交由服務(wù)Service控制）。2.4.2 視圖(view) ，用戶能看到的視圖不應(yīng)該包含任何行為?？刂破骱鸵晥D沒有直接的調(diào)用關(guān)系，視圖與控制器多對多關(guān)系。2.4.1 路由 (router) 視圖的切換 使用路由更新視圖切換。 不允許任何跳過路由的視圖切換。2.4.2 指令(directives) ，擴(kuò)展HTML語法 使用指令更新、修改DOM的元素（E）、樣式類（C）、屬性（A）、注釋（M），不要在控制器中編寫控制代碼（控制器、服務(wù)、也不是應(yīng)用程序的其他地方）。 指令擴(kuò)展HTML 語法, 將行為與DOM 轉(zhuǎn)換的自定義元素和屬性關(guān)聯(lián)起來,

20、創(chuàng)建復(fù)用的UI 組件，擴(kuò)展HTML表示能力。2.4.3 服務(wù)(service)，數(shù)據(jù)調(diào)用；遠(yuǎn)程API調(diào)用、數(shù)據(jù)集。2.4.4 過濾器(filters) ，數(shù)據(jù)本地化使用過濾器格式化本地數(shù)據(jù)。2.4.5 $ ， AngularJS的命名空間(namespace)為了防止意外的命名沖突，AngularJS為可能沖突的對象名加以前綴$。請不要在自己的代碼里用$做前綴，以免和AngularJS代碼發(fā)生沖突。2.5 前端規(guī)范 CSS 和 Sass (SCSS) 規(guī)范2.5.1 ID和class類名使用可以反應(yīng)元素位置、元素目的用途的名稱。不要用沒有語義指向、晦澀難懂的名稱。不推薦.fw-800 font

21、-weight: 800;.red color: red;推薦.art-list-heavy font-weight: 800;.home-important color: red;2.5.2 合理的避免使用IDID不應(yīng)該被應(yīng)用于樣式。ID的樣式不能被復(fù)用并且每個頁面中你只能使用一次ID。使用ID唯一有效的是確定網(wǎng)頁或整個站點(diǎn)中的位置。始終考慮使用class，而不是id，除非需要定位且只使用一次。不推薦#content .title font-size: 2em;推薦.content .title font-size: 2em;含有ID選擇器權(quán)重很高。一個只包含一個ID選擇器權(quán)重高于包含100

22、0個class(類)名的選擇器。瀏覽器優(yōu)先使用ID。2.5.3 CSS選擇器中避免標(biāo)簽名當(dāng)構(gòu)建選擇器時應(yīng)該使用清晰，準(zhǔn)確和有語義的class(類)名。不要使用標(biāo)簽(Element)選擇器。只關(guān)心class(類)名，而不是標(biāo)簽代碼名稱，這樣更容易維護(hù)。功能分離的要求下,在表現(xiàn)層中不允許分配html標(biāo)記/語義。只使用具有實(shí)際意義的class(類)名，不使用元素選擇器。不推薦div.content header.content-header h2.title font-size: 2em;推薦.content .content-header .my-title font-size: 2em;2.5.

23、4 盡可能的精確直接子選擇器：需要匹配到一個DOM末端的選擇器，具體場景下使用用，可有效避免影響其它樣式。后代選擇器：通用樣式下使用。 News event Check this out This is a news article content Buy this Yey! 下面的CSS將應(yīng)用于有title類的全部三個元素，要解決content類下的title類 和 teaser類下的title類下不同的樣式，為避免沖突，需要更精確的選擇器再次重寫他們的樣式BEM。不推薦.content .title font-size: 2rem;推薦.content .title font-size:

24、2rem;.content .content-body .title font-size: 1.5rem;.content .content-body .teaser .title font-size: 1.2rem;2.5.5 盡可能的可重用樣式按職能劃分：全局樣式定義，布局樣式定義，模塊樣式定義，BEM方式單個頁面樣式定義(“Block”區(qū)塊,“Element”元素,“Modifier”修飾符)。樣式定義舉例：layout：.l-960 .l-left .l-right；global：.g-red .g-title .g-price；mod：.m-login .m-breadcrumb .

25、m-slide；BEM：.homeimgslide-item-img沒有前綴字母的樣式定義為全局樣式。模塊或頁面樣式必須語義化命名。模塊屬性或狀態(tài)樣式區(qū)分使用“-”分隔，block的不同狀態(tài)或不同版本：.block-modifier;.block-error;.block-default;2.5.6 縮寫屬性CSS對一個樣式提供了各種縮寫屬性，盡可能使用。border-top: 0;font: 100%/1.6 palatino, georgia, serif;padding: 0 1em 2em;2.5.7 0 和單位省略“0”值后面的單位。不要在0值后面使用單位，除非有值。不推薦paddi

26、ng-bottom: 0px;margin: 0em;推薦padding-bottom: 0;margin: 0;2.5.8 ID 和 Class（類） 名的分隔符使用連字符（中劃線）分隔ID和Class（類）名中的單詞。在選擇器中不要使用除了連字符（中劃線）以外的任何字符來連接單詞和縮寫。不推薦.demoimage .error_status 推薦#video-id .ads-sample 2.5.9 聲明順序為了保證更好的可讀性和掃描權(quán)重。遵循以下順序： 結(jié)構(gòu)性屬性： display position, left, top, right etc. overflow, float, clea

27、r etc. margin, padding 表現(xiàn)性屬性： background, border etc. font, text2.5.10 聲明結(jié)束為了保證一致性和可擴(kuò)展性，每個聲明應(yīng)該用“;”結(jié)束，每個聲明換行。2.5.11 屬性名結(jié)束屬性名的冒號后使用一個空格。出于一致性的原因，屬性和值（但屬性和冒號之間沒有空格）的之間始終使用一個空格。不推薦h3 font-weight:bold;推薦h3 font-weight: bold;2.5.12 選擇器和聲明分離每個選擇器和屬性聲明總是使用新的一行。不推薦a:focus, a:active position: relative; top: 1

28、px;推薦h1,h2,h3 font-weight: normal; line-height: 1.2;2.5.13 規(guī)則分隔規(guī)則之間始終有一個空行（換行符）分隔。推薦html background: #fff;body margin: auto; width: 50%;2.5.14 CSS引號屬性選擇器或?qū)傩灾涤秒p引號（”），而不是單引號（）括起來。URI值（url()）不要使用引號。2.5.15 CSS屬性樣式書寫順序?qū)傩詴鴮戫樞颍?位置屬性(position, top, right, z-index, display, float等) 大小屬性(width, height, paddin

29、g, margin) 文字屬性(font, line-height, letter-spacing, color- text-align等) 背景屬性(background, border等) 其他屬性(animation, transition等)2.5.16 選擇器嵌套 (SCSS)目前開發(fā)框架中沒有使用SCSS選擇器，暫不規(guī)約。3 前端重構(gòu)V2.03.1 前端現(xiàn)狀 B2B的移動端、PC端均使用框架開發(fā)，已約定了Web組件樣式、嵌套格式，除了遵循前端基礎(chǔ)規(guī)約開發(fā)，同時嚴(yán)禁修改原框架文件。 大多場景下只需只定義Web組件的色彩、大小和H5動效即可；需重寫其樣式請單獨(dú)新建文檔用同名樣式重寫。

30、App端已約束在框架規(guī)約內(nèi)開發(fā)，重構(gòu)工作重點(diǎn)在代碼標(biāo)準(zhǔn)化和精減化。 Pc端的框架文件已受污染，頁面源碼結(jié)構(gòu)、書寫位置、書寫方式混亂，建議重新下載框架源碼，只保留angularJS功能層代碼，view層重寫。3.2 產(chǎn)品化3.2.1 PC 與APP 模塊化參考：ionic模塊化.zipvar lazyConfig = modules: ionic, ngCordova, required : , resources: ;lazyModules.forEach(function (module) APPUtil.getFileData(modules/ + module + /config.jso

31、n,function(config) config = JSON.parse(config); for(var name in config) lazyConfig.modules.push(name); lazyConfig.required.push(name); lazyConfig.resourcesname = modules/ + module + / + configname; ););3.2.2 PC管理后臺增加APP設(shè)置模塊， APP風(fēng)格設(shè)定，皮膚標(biāo)準(zhǔn)化： 方法一：后臺管理UI樣式數(shù)據(jù)庫,根據(jù)行業(yè)設(shè)計多個UI樣式包，放入APP單獨(dú)文件夾，和入口文件（index.html）引用

32、的CSS地址對應(yīng)，在后臺即時切換； 方法二：后臺管理UI樣式數(shù)據(jù)庫,APP主色調(diào)，搭配色UI自定義、CSS基礎(chǔ)庫與自定義CSS文件分離, 自定義CSS寫在入口文件中（index.html）； .assertive, a.assertive color: myColor !important; 此方法類似騰訊MT增量更新技術(shù)方案。經(jīng)調(diào)查，增量更新方案在 appStore 受限制，但不限制在localstorge保存臨時變量數(shù)據(jù)，localhost最大可保存5M臨時數(shù)據(jù)。 后臺自定義參數(shù)示例APP打開后連網(wǎng)API，更新自定義數(shù)據(jù)。display=false，渲染APP默認(rèn)樣式。display=tr

33、ue，加載服務(wù)器傳來的數(shù)據(jù)；APP自定義參數(shù)API列表（全局變量）：參數(shù)名稱類型參數(shù) 描述activityTitleString activityTitle :, display:true/false活動中心標(biāo)題自定義headerBgString headerBg :#fc0, display:true/false定義APP頂部和底部色系，在不更新APP即可改變APP主色調(diào)，用于臨時的活動主題配色?；蚬袒瘞追N配色，“春節(jié)色”、“中秋色”等。headerColorString headerColor :, display:true/falsefooterBgString footerBg :,

34、display:true/falsefooterColorStringfooterColor:, photo2 :, display:true/falseadsPhotoString photo :, display:true/false引導(dǎo)頁廣告圖，獲取廣告內(nèi)容后登錄前顯示+倒計時+跳過。loginBgDayString photo :, display:true/false登錄頁白天背景l(fā)oginBgNightString photo :, display:true/false登錄頁晚上背景 APP樣式庫獨(dú)立，更改入口index.html的CSS文件名即可更新全站樣式：/resources

35、/mystyle./img/./css/mystyle.css./ fonts/CSS文件名可以是寫死的，也可以是后臺配置變量引入的。3.2.3 臨時數(shù)據(jù)存儲、更新方案localstorage里面存儲的上次下載版本的CSS內(nèi)容和版本號，啟動APP與服務(wù)器比對版本號。當(dāng)APP系統(tǒng)內(nèi)存不足時，localStorage可能會被清除，所以每次打開APP時判斷數(shù)據(jù)是否為空，需要時聯(lián)網(wǎng)下載數(shù)據(jù)。3.2.4 APP動態(tài)廣告方案商業(yè)活動對于APP是必須的，在PC后臺建立可配置的APP廣告系統(tǒng)。1. 登錄前、登錄后全屏彈窗。2. 自定義活動色調(diào)，重大活動時通過PC后臺自定義APP配置，重寫APP主色調(diào)。3.2.

36、5 APP數(shù)據(jù)統(tǒng)計友盟統(tǒng)計，指數(shù)全面、免費(fèi)API：3.2.6 短信接口阿里大魚，云通信服務(wù)平臺：3.2.7 錯誤代碼庫標(biāo)準(zhǔn)化、本地化404:你的頁面去火星還沒回來,500:,；3.2.8 APP UI&前端重構(gòu)結(jié)構(gòu)、表現(xiàn)、行為三者分離。文檔和模板中只包含結(jié)構(gòu)性的 HTML； App UI重設(shè)計 CSS樣式分離，表現(xiàn)代碼，移入樣式表：不使用頁內(nèi)樣式（.no-good ）；不在元素上使用 style 屬性；不使用表象元素（, , , , ）；不使用表象 class 名（red, left, center） 表象元素以class重寫； 表象class 語義化； Class類組件化分組：全局元素 bo

37、dy、html全局組global: g-*, color-*,;布局組layout: l-*;控件組 input-*，select-*;圖標(biāo)組 icons-*;模塊組module: mod-product*，包含以下子分類：-頁面組list、content、view、cart: mod-*-list, mod-*-content;-頁面元素 mod-*-content-title, mod-*-content-title;-頁面元素狀態(tài),用-分隔 mod-*-content-title-active 動作行為，移入JS腳本。不使用頁內(nèi)腳本（alert(no good)）； APP樣式皮膚化,皮

38、膚樣式表和皮膚圖標(biāo)、圖片移到單獨(dú)文件包:resources/themes/-common/-default/-style/-image/-font/3.2.9 其它說明 PC 端 最小化運(yùn)行環(huán)境。目前PC端首次加載無用資源過多，區(qū)分系統(tǒng)級、模塊級、頁面級資源。 預(yù)加載、按需加載。 文字、圖片實(shí)施標(biāo)準(zhǔn)化文檔：文字長度、圖片大小與類型（jpg、png、gif）。 非特殊情況下CSS樣式文件外鏈至HEAD之間，JAVASCRIPT文件外鏈至頁面底部。 頁面中圖標(biāo)制作成文字圖標(biāo)。 正式輸出，使用壓縮工具壓縮JS、CSS、jpg、gif。 HTML Gzip壓縮。4 前端框架版本：4.1 APP前端開發(fā)

39、框架： Ionic -v1.2.4; AngularJS -v1.4.3; ngCordova -v0.1.26-alpha. Android APP 打包環(huán)境 Android Studio或同等環(huán)境，兼容Android4.1 以上； IOS APP打包環(huán)境 Xcode，兼容IOS 7.0 以上； Ionic V2：IOS 8+ , Android 4.4+ , Windows 104.2 PC后臺管理框架：基于五星訂制系統(tǒng)的JAVA開發(fā)環(huán)境與SmartAdmin響應(yīng)式布局框架： JAVA API; SmartAdmin - v1.4.1; AngularJS -v1.2.16; jquery

40、 -v1.8.2; Bootstrap -v 第三方插件（cordova_plugin）：5 UI視覺規(guī)范5.1 視覺規(guī)范說明 本視覺規(guī)范適用于利達(dá)智造B2B采購系統(tǒng)移動端（android and ios）使用。 H5移動開發(fā)中，UI設(shè)計稿不必考慮屏幕點(diǎn)距。Android和ios自動計算并適配。 此規(guī)范標(biāo)注使用字體為windows字體，App實(shí)際應(yīng)用時調(diào)用的字體為android或ios的瀏覽器默認(rèn)字體。 本規(guī)范供主要參考，實(shí)際開發(fā)中可根據(jù)需求做相應(yīng)調(diào)整。 本規(guī)范基于九牧定貨寶（V1.0）升級。5.2 色值使用標(biāo)準(zhǔn)色或信息色來標(biāo)記可交互的元素，使用警示色標(biāo)記錯誤或關(guān)鍵流程信息，提供

41、統(tǒng)一的、易識別的視覺風(fēng)格。在內(nèi)容區(qū)域，可以給按鈕添加邊界或背景。位于欄（Bar）、動作列表（Action Sheet）和警告框（Alert）中的按鈕可以不需要邊界，因為用戶知道在這種區(qū)域中大多數(shù)選項是可交互的。但是在內(nèi)容區(qū)域，有必要使用邊界或背景將按鈕從其他內(nèi)容中區(qū)分出來。重要提醒：一套APP的 UI配色請不要使用多于一個主色調(diào)、兩個環(huán)境配色的方案；主色調(diào)依據(jù)產(chǎn)品使用企業(yè)的VI或銷售產(chǎn)品的性質(zhì)決定（譬如企業(yè)VI主色調(diào)或銷售的產(chǎn)品是服飾等方式來配色 ）避免給可交互和不可交互的元素使用相同的顏色。色彩是表明UI元素交互屬性的方式之一。如果可交互和不可交互的元素使用相同的顏色，用戶將會難以判斷哪些區(qū)

42、域是可點(diǎn)的。5.3 文字5.3.1 標(biāo)準(zhǔn)字號APP字號依從IOS和Android系統(tǒng)瀏覽器字號設(shè)定，系統(tǒng)瀏覽器默認(rèn)字號是16px/pt。5.3.2 標(biāo)準(zhǔn)字體&weight粗細(xì)設(shè)定 字體weight（100-900），定義由粗到細(xì)的字符。導(dǎo)航、標(biāo)題、正文、備注，根據(jù)文字重要程度指定字體權(quán)重，從細(xì)體到半粗到粗體。 400 等同于 normal，而 700 等同于 bold。多數(shù)情況下請用normal默認(rèn)值定義標(biāo)準(zhǔn)的字符，少用bold 700以上粗體。 bold定義粗體字符。 bolder定義更粗的字符。 lighter定義更細(xì)的字符。 inherit規(guī)定應(yīng)該從父元素繼承字體的粗細(xì)。 使用參考：在最

43、小的三種文本尺寸中，字間距相對較大；而在最大的三中文本尺寸中，字間距相對緊湊。為了區(qū)分標(biāo)題與內(nèi)容樣式，標(biāo)題樣式使用更重的值。導(dǎo)航欄、工具欄的文本使用相同的字號，而內(nèi)容文本的樣式則使用中小尺寸的設(shè)置（值為12-14px）。文本總是使用常規(guī)或者中重，一般不適用輕或者加粗。5.3.3 使用樣例5.4 UI控件5.4.1 UI控件分類 欄（Bars: Navigation Bar、Toolbar、Tab Bar、）：包含了上下文信息來指引用戶他們所在的位置，以及控件來幫助用戶導(dǎo)航或執(zhí)行操作。工具欄和導(dǎo)航欄或標(biāo)簽欄相似，但是工具欄不具導(dǎo)航作用。工具欄為用戶提供了可以控制當(dāng)前屏幕內(nèi)容的控件（比如“編輯”、

44、“保存”按鈕）。 內(nèi)容視圖（Content Views）：包含了應(yīng)用的具體內(nèi)容以及某些操作行為，比如滾動、插入、刪除、排序等等。 控件（Action Controls, Page Control）：內(nèi)容控件用于執(zhí)行頁內(nèi)操作；頁面控件直觀地告訴用戶有多少個項目或頁面，以及當(dāng)前所處位置。 臨時視圖（Temporary Views） popUp、actionSheeds、modal：短暫出現(xiàn)給予用戶重要信息或提供更多的選擇和功能。 約定路由，提供給用戶到達(dá)每一屏的唯一路徑。如果某屏內(nèi)容用戶需要在不改變場景下查看，可以考慮使用視臨時圖，例如模態(tài)視圖、動作菜單或警告框（Modal View、Action

45、 Sheet、Alert）。 模態(tài)給用戶提供一種不脫離主任務(wù)的方式去完成一個任務(wù)或者獲得信息，但是也會臨時性的阻止用戶對應(yīng)用的其他部分進(jìn)行交互操作。盡可能的減少應(yīng)用中的模態(tài)。僅在以下情境可以考慮使用模態(tài)：必須引起用戶關(guān)注的時候；一個依賴主窗口的任務(wù)需要完成的時候；很明確需要被放棄，為了避免在模棱兩可的狀態(tài)下遺漏用戶信息的時候。始終提供明顯、安全的退出模態(tài)任務(wù)的途徑。 以上幾種元素必需在UI控件功能、用戶習(xí)慣、內(nèi)容主從、任務(wù)主從關(guān)系約定下使用，詳細(xì)指引請參考IOS和Android交互設(shè)計指南。5.4.2 UI控件維度和層級App中深度是可以被感知的，x、y軸控制大小，z軸空間控制元素優(yōu)先級。層級

46、：優(yōu)先考慮z軸空間，app層級表達(dá)內(nèi)容和內(nèi)容操作的重要性、優(yōu)先級。5.4.1 度量與邊框 基準(zhǔn)網(wǎng)絡(luò)：所有組件都與間隔為 8px 的基準(zhǔn)網(wǎng)格對齊。排版/文字（Type）與間隔為 4px 的基準(zhǔn)網(wǎng)格對齊。在工具條中的圖標(biāo)同樣與間隔為 4px 的基準(zhǔn)網(wǎng)格對齊。規(guī)則適用于移動設(shè)備、平板設(shè)備以及桌面應(yīng)用程序。 邊框與間距：垂直外邊距和水平外邊距,各有 8px邊框。帶有圖標(biāo)或者頭像的內(nèi)容有 36px 的左邊距。移動設(shè)備系統(tǒng)計算2x、3放大。 269頁。按鈕滑過、點(diǎn)擊、不可點(diǎn)狀態(tài)5.5 頁面視圖規(guī)范（Layout）5.6 頁內(nèi)控件規(guī)范參照Ionic、bootstrop框架約定。（頭部 Header、底部 Footer、導(dǎo)航條 Tabs、內(nèi)容 Content、按鈕 Buttons、列表 List、分隔符 Divider、圖標(biāo) Icons、按鈕 Buttons、頭像 Avatars、縮略圖 Thumbnails、清單 Inset Lists、卡片 Cards、輸入框 Input、切換 Toggle、選擇框 Checkbox、單選框 Radio Buttons、選擇框 Select、滑塊 Range、柵格 Grid）5.7 圖標(biāo)（icons）5.7.1 應(yīng)用