* 作者：阮臻

　　* 鏈接：https://rdc.hundsun.com/portal/article/701.html

　　*本文建議閱讀6分鐘，保持學(xué)習(xí)喲~

　　當(dāng)一個項目產(chǎn)品需要制作時,大概流程可以分為3個階段：原型需求分析期、切圖期、動畫交互期。這三個時期都需要會什么呢？看本文達(dá)妹為你解答。

　　隨著前端技術(shù)的不斷演變進(jìn)化，很多東西名字沒變，但本質(zhì)早已今非昔比?！扒袌D”就是其中之一吧。早期“切圖”是非常形象的比喻，就是用PS把設(shè)計稿圖切成一塊一塊，再用編輯器拼在一起，然后直接導(dǎo)出（那時候叫網(wǎng)頁制作無可厚非）。

　　現(xiàn)在的“切圖”是一種思路。看到設(shè)計稿，設(shè)計師腦子里會迅速形成“切圖”思路，哪些平鋪、哪些用純css實現(xiàn)，哪些用png24，哪些合并, UI的層次是怎樣的, 模板怎么組織...... 這是現(xiàn)在的“切圖”方式，也是前端工程師必備的最基本能力。

　　當(dāng)一個項目產(chǎn)品需要制作時,大概流程可以分為3個階段：原型需求分析期、切圖期、動畫交互期。

　　01

　　原型需求分析期

　　在確定產(chǎn)品的功能后，項目組需要在設(shè)計前組織一次需求會議，為前端工程師、后端工程師、產(chǎn)品設(shè)計師做一下產(chǎn)品講解， 然后各方各自評估下，提出疑難點。

　　舉個例子

　　一個功能會涉及到類似淘寶類似的配送地址，要求可以作為搜索條件，這個就會涉及到前端的展示，儲存（編輯時初始化）效果，和數(shù)據(jù)結(jié)構(gòu)，而后端可能會涉及到數(shù)據(jù)庫的儲存方式，查詢方式，從這個功能都可以提出自己的方案，最終合并為最終方案，要求解決前/后端問題，且要達(dá)到產(chǎn)品的需求，盡可能地降低開發(fā)成本，加快開發(fā)速度！

　　拿到確定好的效果圖后，接下來就是要對整體的觀察，確定大致的dom結(jié)構(gòu)，原則上遵循從上到下，從左到右，從外到里的順序。然后思考布局方式，主流方式有浮動（float）、定位（position）、flex。

　　其中flex是一個非常好的css3布局，但是在移動端很多瀏覽器不支持display: flex，僅支持display: -webkit-box，所以為了兼容寫了三種語法：

　　? display: -webkit-box;

　　? display: -webkit-flex;

　　? display: flex;

　　就能保證兼容移動端各種主流瀏覽器，微信端和webview上完美運(yùn)行。

　　02

　　切圖期

　　一. css重置樣式

　　切圖前的準(zhǔn)備工作，首先是切圖前要熟悉公司的重置樣式、公用樣式、公用庫等，因為這樣可以使你少寫代碼。由于不同的瀏覽器對于html標(biāo)簽的解釋各不相同，重置css可以使得html標(biāo)簽在各個瀏覽器下產(chǎn)生相同的表現(xiàn)效果，最簡單的說法就是把瀏覽器提供的默認(rèn)樣式覆蓋掉！這就是CSS reset。

　　例如

　　對常用標(biāo)簽的樣式進(jìn)行重置：

　　

　　▲重置樣式按屬性可以分為物理性css和功能性css。

　　物理性css包含了寬高、字體、顏色、邊距等常規(guī)通用屬性樣式。

　　功能性css類似于js的模塊化，可以多場景復(fù)用的樣式。

　　例如

　　

　　二. 命名書寫規(guī)范

　　CSS書寫規(guī)范使用CSS縮寫屬性：比如padding,margin,font等，按照上、右、下、左順時針順序書寫。這樣精簡代碼同時又能提高用戶的閱讀體驗。

　　

　　三.CSS命名規(guī)范

　　1. 語義化：“help-guest-regist” 就是 “幫助-顧客-注冊”

　　*出現(xiàn)率高的做成基類+擴(kuò)展類 ：class="m-list m-list-1” class="u-btn u-btn-hover”

　　*相同語義的不同類命名 —可直接加數(shù)字或字母區(qū)分 .m-list-1.m-list-2

　　2. 長名稱或詞組可以使用中橫線來為選擇器命名

　　3. 不建議使用“_”下劃線來命名CSS選擇器

　　*比如使用_tips的選擇器命名，在IE6是無效的

　　*能良好區(qū)分Java變量命名(JS變量命名是用“_”)

　　四.切圖質(zhì)量標(biāo)準(zhǔn)

　　切圖質(zhì)量的好壞可以從如下幾個方面來判斷：

　　? 業(yè)務(wù)角度：制作完的HTML網(wǎng)頁還原度高，甚至做到像素級還原；

　　? 技術(shù)角度：圖片體積?。p少網(wǎng)絡(luò)傳輸）、圖片數(shù)量少（減少請求數(shù)量）；

　　? 配合角度：便于后續(xù)制作HTML，特別是制作自適應(yīng)屏幕的網(wǎng)頁。

　　一般來說，圖片總是比字符形式的HTML/CSS體積大，因此總體原則是能用HTML/CSS實現(xiàn)的就不切圖。

　　常見的比如：

　　1.純色背景色：用CSS2的background-color來實現(xiàn)；

　　2.漸變背景色：用background-image配合CSS3的漸變屬性（線性漸變linear-gradient、徑向漸變radial-gradient）來實現(xiàn)；

　　3.邊框顏色：用CSS2的border-color來實現(xiàn)，另外邊框線型可以用border-style實現(xiàn)，如果邊框顏色特別花哨甚至有精妙的圖案，那就只能用圖片加border-image來實現(xiàn)；

　　4.背景投影/陰影：用CSS3的box-shadow實現(xiàn)，可以實現(xiàn)不同樣式顏色的陰影；

　　5.橢圓等不規(guī)則圖形：這個難度相對較大，用CSS3的圓角（border-radius）、變換（transform）來實現(xiàn)，當(dāng)然我個人對于一些圖標(biāo)喜歡用SVG來做，SVG的語法和CSS、HTML極其類似，入門學(xué)習(xí)（點擊直達(dá)）https://w3school.com.cn/svg一小時左右即可。

　　五.圖片格式的選擇

　　常見的網(wǎng)絡(luò)圖片格式有：JPG/JPEG、GIF、PNG、SVG，對于這些圖片格式的比較如下表（每種格式不考慮同種格式版本的差異）：

　　

　　以下是自身從實踐中總結(jié)的幾個要點：

　　1.logo統(tǒng)一切成png透明度的。

　　2.一般情況下臨時圖、ad、banner圖用jpg格式，色彩豐富的、大圖切成jpg。

　　3.在保證圖片的畫質(zhì)情況下，圖片的大小越小越好。

　　4.顏色較少的都用png，用png8還是png24需看圖片具體透明底情況，半透明的切成png24。

　　5.尺寸小的，色彩不豐富的和背景透明的切成gif或者png8的。

　?。↖E6不支持PNG24透明度圖片，需做兼容處理或切成PNG8）

　　6.PS中裁剪完成后ctrl+shift+alt+s 進(jìn)行保存為web可用格式。

　　7.一般來說SVG格式的體積最小，但是IE僅IE9及以上原生支持。

　　上述原則有時候不能一概而論，經(jīng)常需要把圖片存成多種格式、多種顏色位數(shù)進(jìn)行實際比較，在色彩和體積之間找到一個平衡點，其中每張圖片盡量不要大于100kB。

　　六.css雪碧圖

　　從網(wǎng)頁體積來看，切圖必然是切得小一些更好，比如能切1像素寬然后repeat的，就不要切出一長條。重復(fù)的圖形能切一個循環(huán)，就不要切n個循環(huán)。圖片越小，存儲量越小，對網(wǎng)絡(luò)的負(fù)擔(dān)也相應(yīng)會小。

　　但是如果一堆小圖片在一個網(wǎng)頁中加載，會產(chǎn)生大量的HTTP請求，從而拖慢網(wǎng)頁加載速度，這時候就需要考慮把小圖片合并為大圖片，只進(jìn)行一次加載，可以有效的減少http請求數(shù)量，加速內(nèi)容顯示，從而提高效率。

　　所謂css sprite，就是把網(wǎng)頁中一些零星背景圖片整合到一張圖片文件中，再利用CSS的背景圖片定位（background-position：x定位點 y定位點）到要顯示的位置，因此也叫“圖片拼合”技術(shù)。

　　如：.div{ background:url(abc.jpg) no-repeat -30px -50px;}。

　　具體怎么切，其實還需要看網(wǎng)頁布局，因此切圖和HTML靜態(tài)頁面制作不能割裂開來，否則切但的圖和靜態(tài)頁面不在一個頻道上，會導(dǎo)致返工。

　　在此推薦一款工具自動生成sprite：TexturePackerGUI，可以快速拼合出雪碧圖，并且生成出對應(yīng)css，使用非常方便。

　　03

　　動畫交互期

　　高性能移動Web相較PC的場景需要考慮的因素也相對更多更復(fù)雜，總結(jié)為以下幾點：流量、功耗與流暢度。

　　在PC時代我們更多的是考慮體驗上的流暢度，而在移動端本身豐富的場景下，需要額外關(guān)注對用戶基站網(wǎng)絡(luò)流量使用的情況，設(shè)備耗電量的情況。

　　關(guān)于流暢度，主要體現(xiàn)在前端動畫中，在現(xiàn)有的前端動畫體系中，通常有兩種模式：JS動畫與CSS3動畫。JS動畫是通過JS動態(tài)改寫樣式實現(xiàn)動畫能力的一種方案，在PC端兼容低端瀏覽器中不失為一種推薦方案。

　　而在移動端，我們選擇性能更優(yōu)瀏覽器原生實現(xiàn)方案：CSS3動畫。

　　▲CSS3中的三種動畫:

　　1.tranform形變動畫：2d轉(zhuǎn)換。

　　2.transition緩動動畫：property duration timing-function delay（css過渡，使變化以漸變形式呈現(xiàn)）。

　　3.animation逐幀動畫：KeyframesName duration timing-function delay iteration-count direction play-state fill-mode（引用關(guān)鍵幀，并設(shè)計動畫時間，@keyframes：css動畫關(guān)鍵幀為動畫設(shè)計過渡畫面）。

　　要對一個dom進(jìn)行2d轉(zhuǎn)換，比如放大縮小、平移、旋轉(zhuǎn)，就可以使用transform屬性，transform可以設(shè)置的變形有：scale（放大縮?。?translate（平移）,rotate（旋轉(zhuǎn)）,skew（斜切，即扭轉(zhuǎn)）,matrix（以像素精度控制變形效果）。

　　例如

　　div { transform:scale(2,4) translate(20px,20px) rotate(30deg); }

　　要對一個變形進(jìn)行過度漸變處理，就可以使用transition屬性。transition屬性聲稱任何css屬性都可以過度處理（過度對象設(shè)置為all），但實際引用中需要測試。例如對上例的變形進(jìn)行過度處理：div{ transition:transform 2s; }

　　▲transition的優(yōu)點在于簡單易用，但是它有幾個很大的局限:

　　1.transition需要事件觸發(fā)，所以沒法在網(wǎng)頁加載時自動發(fā)生。

　　2.transition是一次性的，不能重復(fù)發(fā)生，除非一再觸發(fā)。

　　3.transition只能定義開始狀態(tài)和結(jié)束狀態(tài)，不能定義中間狀態(tài)，也就是說只有兩個狀態(tài)。

　　4.一條transition規(guī)則，只能定義一個屬性的變化，不能涉及多個屬性。

　　所以，CSS Animation就是為了解決這些問題而提出的，結(jié)合關(guān)鍵幀@keyframes和animation屬性，

　　例如

　　div{ animation:myfirst 2s;}

　　@keyframes myfirst{

　　0%{background:red;}

　　50%{background:blue;}

　　100%{background:yellow;}

　　}

　　在此推薦一款強(qiáng)大的預(yù)設(shè)css3動畫庫：Animate.css。內(nèi)置預(yù)設(shè)了豐富的css3動畫效果，使用引入也非常方便，可以基本滿足日常需求并且快速制作出理想的動效。

　　完成以上3個階段的工作，整個切圖的骨架基本思路就已經(jīng)完成啦，剩下的就是在實踐過程中不斷的添磚加瓦，結(jié)合項目的具體需求，搭建起前端開發(fā)的堅實地基吧！如果你也想成為月入過萬的web前端工程師，點擊閱讀原文趕快報名達(dá)內(nèi)web前端免費訓(xùn)練營~

　　達(dá)內(nèi)web前端免費訓(xùn)練營：專為零基礎(chǔ)、跨行人員設(shè)置的HTML基礎(chǔ)、CSS基礎(chǔ)、Java基礎(chǔ)，特別適合意圖在互聯(lián)網(wǎng)時代，通過掌握技術(shù)快速實現(xiàn)自己高薪夢想的學(xué)員，如果你也想加入高薪一族，點擊“閱讀原文”報名達(dá)內(nèi)2017年4月份免費課程~，就有機(jī)會獲得達(dá)內(nèi)精品免費在線學(xué)習(xí)（TMOOC.CN）會員卡哦~名額有限，先報先得！給自己一個接觸互聯(lián)網(wǎng)高薪技術(shù)的機(jī)會。

　　達(dá)內(nèi)上市集團(tuán)

　　40萬學(xué)員的共同選擇

　　QQ咨詢：2421473554