動效標(biāo)準(zhǔn)
- 應(yīng)該調(diào)整每個持續(xù)時間，來適應(yīng)不同的移動距離、每個元素的速度、和表面的變化。而不是所有動畫都用同樣的持續(xù)時間。
- 工程機(jī)械等稍微莊重的網(wǎng)站 入場動畫稍微放緩，移動距離不用太長；出場動畫 可以縮短持續(xù)時間，這樣用戶就會減少對他的注意力。
實(shí)現(xiàn)標(biāo)準(zhǔn)##
- 默認(rèn)功能分區(qū)增加出場效果，如客戶有特殊要求除外。
- 按鈕移上有觸控效果且相同屬性按鈕全站統(tǒng)一。
- 鏈接可跳轉(zhuǎn)的地方都得有手型和觸控效果,像新聞列表等。
- 深色背景上的a標(biāo)簽，默認(rèn)為白色在鼠標(biāo)移上去變色不明顯的情況下，保持白色字體加下劃線。
- 頁面下層主體與footer間距統(tǒng)一。
- 新聞頁碼 與底部間距統(tǒng)一。
- 用height:0,padding-bottom:百分比 來進(jìn)行響應(yīng)式布局時，外面需套一層div 來進(jìn)行可視化操作。
- 默認(rèn)有返回頂部按鈕，且在滾動到頁面中下位置時出現(xiàn)，在頁面頂部時隱藏。
- 圖標(biāo)如果不是用圖標(biāo)庫里的，應(yīng)使用雪碧圖，避免鼠標(biāo)移上后在加載時間內(nèi)圖標(biāo)空白。
- 響應(yīng)到移動端，隱藏 大圖標(biāo)等 非主要?元素和圖片，只保留主要內(nèi)容，減少加載時間，減少請求數(shù)量，避免頁面過長
- 響應(yīng)到移動端，取消復(fù)雜的入場動畫，鼠標(biāo)移上等交互效果。
- 標(biāo)題盡量用統(tǒng)一樣式名，移動端統(tǒng)一縮小。
- h3,h4,h2 標(biāo)簽 line-height：1em 方便找間距。
- 響應(yīng)到移動端，多欄變單欄。
- 首頁banner 單張圖片大小不超過 300k, 保存web格式時盡量選擇‘連續(xù)’，即由模糊到清晰的加載方式
- 前端截字
- 移動端分享，忠旺，彈出提示
- 視差插件，移動端取消視差。
- 初始化閃動或者樣式錯亂的情況可以給父級元素添加opc0 起緩沖作用。
- 字號標(biāo)準(zhǔn) 單獨(dú)設(shè)置
- 輔助色系-標(biāo)題-按鈕
- 圖片比例問題，16：9 or 4:3 or 1:1
- 單頁數(shù)據(jù)太多，響應(yīng)到移動端 頁面太長，也不利于 瀏覽和查找
- 在綜合頁，欄目標(biāo)題默認(rèn)添加a鏈接。其余元素默認(rèn)不添加鏈接。
- 設(shè)計稿中 ，應(yīng)充分利用標(biāo)注功能，使后期對接人員能夠更清晰的理解設(shè)計師的想法和用意，而不是單純的只靠口頭交接，常見的如一些交互效果等。
勾選連續(xù)加載模式
- 上傳錄入圖片統(tǒng)一保存 為 web 格式,且大小盡量控制在200k以內(nèi)
- 首頁 banner 視頻 盡量控制在6M以內(nèi)，可通過縮短時長，降低質(zhì)量來進(jìn)行壓縮（ 視頻放在客戶服務(wù)器除外）
-
作為專業(yè)的網(wǎng)站開發(fā)團(tuán)隊(duì)，在網(wǎng)站測試階段，測試人員和設(shè)計以及前端實(shí)現(xiàn)都應(yīng)該有意識，并且學(xué)會使用 chrome調(diào)試工具來查看資源加載情況,找出超出大小標(biāo)準(zhǔn)和占用較長加載時間的圖片或視頻進(jìn)行單獨(dú)優(yōu)化。
chrome調(diào)試工具
