* 作者：阮臻

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

　　*本文建議閱讀6分鐘，保持學習喲~

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

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

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

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

　　01

　　原型需求分析期

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

　　舉個例子

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

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

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

　　? display: -webkit-box;

　　? display: -webkit-flex;

　　? display: flex;

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

　　02

　　切圖期

　　一. css重置樣式

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

　　例如

　　對常用標簽的樣式進行重置：

　　

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

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

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

　　例如

　　

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

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

　　

　　三.CSS命名規(guī)范

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

　　*出現率高的做成基類+擴展類 ：class="m-list m-list-1” class="u-btn u-btn-hover”

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

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

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

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

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

　　四.切圖質量標準

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

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

　　? 技術角度：圖片體積小（減少網絡傳輸）、圖片數量少（減少請求數量）；

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

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

　　常見的比如：

　　1.純色背景色：用CSS2的background-color來實現；

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

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

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

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

　　五.圖片格式的選擇

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

　　

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

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

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

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

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

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

　　（IE6不支持PNG24透明度圖片，需做兼容處理或切成PNG8）

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

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

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

　　六.css雪碧圖

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

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

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

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

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

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

　　03

　　動畫交互期

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

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

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

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

　　▲CSS3中的三種動畫:

　　1.tranform形變動畫：2d轉換。

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

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

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

　　例如

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

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

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

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

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

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

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

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

　　例如

　　div{ animation:myfirst 2s;}

　　@keyframes myfirst{

　　0%{background:red;}

　　50%{background:blue;}

　　100%{background:yellow;}

　　}

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

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

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

　　達內上市集團

　　40萬學員的共同選擇

　　QQ咨詢：2421473554