亚洲AV永久无码精品网站在线观看,国产乱人伦偷精品视频不卡,免费精品国自产拍在线播放

　　* 作者：阮臻

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

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

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

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

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

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

　　原型需求分析期

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

　　舉個(gè)例子

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

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

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

　　? display: -webkit-box;

　　? display: -webkit-flex;

　　? display: flex;

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

　　切圖期

　　一. css重置樣式

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

　　例如

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

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

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

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

　　例如

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

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

　　三.CSS命名規(guī)范

　　1. 語(yǔ)義化：“help-guest-regist” 就是 “幫助-顧客-注冊(cè)”

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

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

　　2. 長(zhǎng)名稱或詞組可以使用中橫線來(lái)為選擇器命名

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

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

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

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

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

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

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

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

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

　　常見的比如：

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

　　2.漸變背景色：用background-image配合CSS3的漸變屬性（線性漸變linear-gradient、徑向漸變r(jià)adial-gradient）來(lái)實(shí)現(xiàn)；

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

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

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

　　五.圖片格式的選擇

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

　　以下是自身從實(shí)踐中總結(jié)的幾個(gè)要點(diǎn)：

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

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

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

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

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

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

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

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

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

　　六.css雪碧圖

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

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

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

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

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

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

　　動(dòng)畫交互期

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

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

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

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

　　▲CSS3中的三種動(dòng)畫:

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

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

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

　　要對(duì)一個(gè)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); }

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

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

　　1.transition需要事件觸發(fā)，所以沒(méi)法在網(wǎng)頁(yè)加載時(shí)自動(dòng)發(fā)生。

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

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

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

　　所以，CSS Animation就是為了解決這些問(wèn)題而提出的，結(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動(dòng)畫庫(kù)：Animate.css。內(nèi)置預(yù)設(shè)了豐富的css3動(dòng)畫效果，使用引入也非常方便，可以基本滿足日常需求并且快速制作出理想的動(dòng)效。

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

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

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

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

　　QQ咨詢：2421473554