您現在的位置是:電腦技術吧?>? 組裝維修 ??>??滑屏,自動化屏??>??正文詳情

滑屏,自動化屏

戚潔玉2019-11-20 08:31:40 人圍觀
簡介華為滑屏自H5流行以來,幻燈片互動形式在產品宣傳、廣告、招聘、活動運營等場景中得到了廣泛的應用。微信朋友圈廣告作為微信朋友圈的一種常見形式,其影響力得到了加強和放大。

滑屏的交互形式自從在 H5 中流行起來,便廣泛應用在產品宣傳、廣告、招聘和活動運營等場景中,作為微信朋友圈廣告慣用的形式,其影響力更是得到了強化與放大。

如今滑屏H5可謂玲瑯滿目,數不盡數。

  作為一個 UI工程師,接過很多類似的項目,也曾寫過滑屏的插件,在經歷了不同的需求的洗禮并踩過若干個坑之后,不禁反問自己:應該如何面對每一次類似的需求,在已有的經驗下如何做到體驗更好?如何節省工作量提高效率?面對性能優秀的 iOS 與性能良莠不齊的 Android 平臺,又如何做到體驗統一與性能最優?  第一問:拖拽翻屏,還是滑動翻屏?  頁面隨手勢拖拽后翻屏 滑動后(touchend)后翻屏

  如上面兩個 Gif 圖所示,兩種方式的差異在于:  ● 拖拽翻屏:頁面隨手指拖動而移動,手指松開(touchend)后翻頁  ● 滑動翻屏:頁面不隨手指拖動而移動,手指松開(touchend)后翻頁  看似差別不大的兩種交互,實現復雜度差別巨大,在 Android 中的體驗更是不一樣。

前者需要在每個 touchmove 的時候進行計算與定位,計算量龐大(關注數字變化):

  而后者只需要在松開手指后再進行計算與翻頁,性能大幅提升:

  而且從第一種方案切換到第二種時,交互上的微妙改變并沒有帶來直觀的影響。

所以從性能角度上,滑動翻屏自然是最佳的選擇。

  第二問:滑屏技術的最佳實現方式是什么?  控制 wrapper 滑動 控制每一屏滑動

  如上 Gif 圖所示,滑屏可以在 wrapper 上操作,也可以將每一屏作為獨立的滑動元素。

簡單的滑動可能兩者并無太大差異,但假如把多樣的需求和場景考慮到,可以發現在滑屏上也會細化出很多功能點:  ● 循環滑動  ● 滑動禁用與開啟  ● 預加載 / 延時加載  ● 初始化時顯示某一頁  ● 滾動到某一頁、跳過某一頁  ● 提供滑動前、滑動中、滑動后的接口  ● 滑動時間、速度、緩動效果自定義  ● 考慮動態增刪頁數而無差錯  ● 考慮頁面縮放、橫豎屏切換  在上述要求下,前者已顯得分身乏術,而后者由于其元素間的自由性,可以滿足上述的需求,且效果更佳,雖然實現復雜度會提高。

  最關鍵的是,前者的實現方式在部分安卓上偶爾會出現卡在上一屏與下一屏中間的情況,一開始遇到時做了很多補救都無果,最終才無奈替換了整個滑動方案,采用第二種控制內部元素的方式,可謂血的教訓。

  什么是卡在上一屏與下一屏中間呢,類似這樣:

  簡單分析下原因,整個頁面都通過在 body 上監測 touchmove 時增加 event.preventDefault() 來阻止自然的頁面滑動,但唯獨安卓有時候在有動畫的元素上移動時,body 會捕捉不到 touchmove 事件,頁面可以滾動了,便出現上述可以滑動 wrapper 的情況,而方案二控制每一屏滑動,每屏最寬最高就只是屏幕的寬高,也就不會出現頁面滑動了。

  第三問:首屏需要 Loading 頁嗎?  需要嗎?需要。

不需要嗎?不需要。

  需不需要看需求對 H5 的定位,若是類似微信朋友圈廣告的這種品牌運營 H5,有大量素材作為支撐的頁面,是需要進入時 loading 頁的,這一點希望提前跟產品經理達成共識;但假如頁面是系列活動中比較重要的入口,需要多次進入,則不要有 loading 頁,力求一進入就能直接看到。

  針對有 loading 的情況,還需要考慮:  是否一次性將所有資源 load 完? no no no,即使有專門的 loading 頁,都請分屏加載,否則這里將會流失大量用戶。

  那資源的體積跟時間之間應該形成一個怎樣的認知呢? 看表(根據 Chrome 開發者工具 Network 換算數據):

  上述是理想數值,實際上根據騰訊云統計到的 2G/3G 的下載速率,遠未達到理想的速度:

  根據工信部及三大運營商發布11月用戶發展情況可得知:中國移動用戶 2G 用戶占 41.4%,3G 用戶占 31.3%,4G 用戶占 27.3%。

現狀遠遠沒有長期處于 WiFi 環境下的我們想象的那么美好,雖然這些用戶并非長期使用 2G/3G,但是頁面必須確保在 2/3G 環境下有一個順暢的瀏覽體驗,避免用戶流失。

建議首屏資源在 300KB 左右(大概加載時間為 2~3s 左右),并設置緩存。

  針對無 loading 的情況,還需要考慮:  假如頁面有比較豐富的動畫,需要先加載資源才能被正常播放呢? 要么去掉動畫,要么用 CSS 或 JS 來實現動畫,必須要做出取舍。

  既然是無 loading 的頁面,自然對速度有要求,還能提高加載速度嗎? 可以,請分屏加載。

若希望做到體驗無縫,請在前一屏加載后一屏的資源。

  第四問:內部滾動怎么辦?  內部滾動即某屏內部還有滾動(但實際上系統的滾動跟滑屏的滾動是沖突對立的),如果這一屏不涉及復雜的 DOM,我還是覺得可以使用 iScroll,雖然它在安卓上的性能一直被詬病,但經過非常多安卓機的檢驗,效果還是在可接收范圍內的,但別忘了前提:DOM 不復雜(如活動規則頁)。

  那是否有更好的解決方案呢?不妨回看之前滑屏的最佳實現方式:

  可以看到,在每一屏上進行操作,當上一屏或下一屏滑動到當前屏時,之前的那一屏會去掉 translate 屬性,回歸到最初的狀態(被當前屏蓋在下面,即 position:absolute; left:0; top:0),這個時候,將當前屏的 position:absolute; height:100% 去掉,使其回歸文檔流,那么 body 將會被撐開,頁面可以被正常滑動,是不是連 iScroll 都省了?  嘗試著寫了個 Demo:

  正如你體驗到的那樣,理想很豐滿,現實很骨感,在 PC 上的體驗這個Demo是沒有問題的(請在 Chrome 下模擬手機滑動),然而因為 iOS 和 Android 中很多瀏覽器都自帶 bounce 回彈效果,而 iOS 和 Android 的大部分瀏覽器中,頁面滾動時是會阻止頁面重繪的(JS 的執行也無法立刻生效在頁面中),所以Demo 里看到的效果就是回彈后才翻屏。

所以目前這個方案頁僅限于某些場景使用。

  第五問:背景音樂是默認開啟或是關閉?  之前在做一個宣傳活動 H5 的時候,默認開啟過音樂,發現 28w 曝光只有 800 個人主動關閉音樂。

所以默認開啟還是最優的,在制作音頻的時候注意體積最好在 100~200k 范圍,并且默認音量不應該太高,收尾漸入漸出,還得注意版權。

  然而目前不管是手 Q 或是微信,都存在一個偶現的 bug:在手機中切換頁面或者回到主屏幕,H5 的背景音樂依舊在播放,除非殺掉進程。

初步猜測為 Webview 未正確得到釋放。

  第六問:H5 頁面需要兼顧 PC 平臺嗎?  很多 H5 頁面都只針對移動設備展示,但如果分享的鏈接被人在 PC 中打開呢?比如分享到微博或QQ 空間的鏈接,被正在電腦上瀏覽的人打開,看到的是一個顯示不正常的頁面,這樣的體驗是非常不好的。

所以最好的做法就是準備一個 PC 的掃碼頁面或將內容搬到 PC,打通回路,為 H5 頁面引流。

  正如之前做過的 QQ 時光機項目:

  第七問:動畫如何做低版本退化?  移動端對 CSS3、Canvas、SVG 動畫的支持已經不錯了,目前兼容性較差的系統主要有 Android 2.3,它不支持 animtion-fill-mode 屬性,這會導致動畫播放完后無法保持在最后狀態;不支持 before/after 偽元素的動畫;不支持 animation-timing-function: steps,所以也無法玩轉圖片序列幀;所以可以特別針對這個版本進行差異化處理,通過判斷 UA 對其展示靜態頁面。

  然而最佳的退化方式不應該是版本檢測,而是能力檢測,可以通過 Modernizr 這個組件判斷設備具備的能力。

  第八問:如何做好適配?  適配的核心就是確保內容在不同的屏幕分辨率下顯示正常,經常采用的方式有 REM、Media Query 和 JS CSS,沒有一套永恒不變的適配方案,往往需要多種結合。

如果是比較簡單的展示類H5,可以參考如下的代碼:

  當然,少不了橫豎屏的提示:

  不過在 iPhone4/4s 這種小屏幕下,也可以嘗試取消分屏滑動,直接用瀏覽器原生的滾動。

  第九問:  我們也許還會遇到如下情況:  ● 分享到各個社交平臺(準備分享引導浮層)  ● 使用自定義字體(font spider、fontmin)  ● 圖片資源自動合并成雪碧圖(Compass)  相信對于大部分 UI 開發來說,寫出一個安卓下不卡頓,沒有兼容性問題的頁面是最美好的愿望,有時候甚至可以針對 iOS 跟 Android 專門寫一套代碼,看似工作量大,其實可以規避掉很多不必要的麻煩。

同時也需要跟產品、設計師們在安卓上的體驗退化上達成一致,以免頁面做出來后帶來預期上的落差。

  在追求最佳實踐的路上,永遠少不了層出不窮的問題。

不一而足,無法窮舉,滑屏只是一種形式,內容才是 H5 的精華所在,切勿舍本逐末。

如今可以看到越來越多的創意融入 H5 中(視頻、Canvas、SVG 等),前端世界變得越來越豐富多彩,這對開發者來說是機遇也是挑戰,你我共勉!

版權聲明:本文由 戚潔玉 整理編輯。

原標題:滑屏效果,滑屏設置

轉載注明出處:http://www.dn9ww09s.icu/assemble/13706.html

文章評論

    共有條評論來說兩句吧...

    用戶名:

    驗證碼:

作者推薦

  • 淘寶戰隊,淘寶戰隊名稱

    淘寶戰隊,淘寶戰隊名稱 相關圖片淘寶雙十一戰隊贊怎么來近日,淘寶網正式啟動淘寶雙11團隊活動。我肯定你不知道淘寶雙11團隊是什么?如何與淘寶雙11團隊交友?現在,超人軟件編輯將向您介紹淘寶雙11團隊的相關內...

  • 拼多多品牌入駐條件,怎樣入駐拼多多平臺

    拼多多品牌入駐條件,怎樣入駐拼多多平臺 相關圖片拼多多開店步驟和條件除了淘寶京東,很多商家還將在其他平臺開店,以獲得更大的用戶群和興趣。近兩年興起的拼多多,是很多賣家看好的平臺。品多多多如何進入?品多多進入的條...

  • 3Dgif,gif動態圖片出處第900期

    3Dgif,gif動態圖片出處第900期 相關圖片3d旋轉復制本教程介紹如何使用焰火制作可愛的四葉草旋轉GIF動畫效果。主要說明了如何利用運動軌跡濾波器來模擬三維效果來完成最終的效果。如果你感興趣的話,自己動手吧,觀看小...

  • unabletodownload,unable to verity

    unabletodownload,unable to verity 相關圖片at this timeIPhone用戶在下載應用程序時有時會提示“無法下載應用程序”。這個錯誤有幾個原因。用戶需要逐一檢查。然而unable app...

  • 的布局,網頁的布局一般用什么來實現

    的布局,網頁的布局一般用什么來實現 相關圖片網頁網頁的布局一般為本文以CSS為例實現了左右文本混合布局方法。與您分享以供參考。具體分析如下:CSS圖文混合布局是網頁布局時常用的布局方法。本例是一個典型的左右文字通用...

  • csrssexe是什么進程,csrss進程

    csrssexe是什么進程,csrss進程 相關圖片csrss進程關閉了怎么辦一些玩家反饋,當他們想玩網絡游戲時,系統文件csrss.exe會給出錯誤提示,游戲程序無法正常打開。如何解決這種情況?csrss.exe的進程是什么?Csrssexplorer.exe...

  • 英文字體下載免費,英文字體下載

    英文字體下載免費,英文字體下載 相關圖片英文字體庫下載大全免費1000多個英文字體包來自哪里?今天,我想教你如何釣魚和分享8個提供免費英文字體的高質量網站。你可以來這里找你將來想要的任何字體。總會有一個給你的,...

  • 魔鏡是什么,魔鏡有什么用

    魔鏡是什么,魔鏡有什么用 相關圖片魔鏡的意思近日,美甲正式推出全新功能魔鏡。那魔鏡是什么?魔鏡有什么用?現在,跟隨超人軟件學習Android版本的魔鏡。希望你喜歡魔鏡是什么魔鏡系列...

  • 迅雷58穩定版安卓手機下載,迅雷5版本下載

    迅雷58穩定版安卓手機下載,迅雷5版本下載 相關圖片ios怎么下載迅雷今天的迅雷版本不像是一個下載工具。當界面打開時,各種廣告讓人眼花繚亂,于是很多用戶除了在網絡上尋找其他替代工具外,還紛紛在網上尋找迅雷的舊版本。那么...

  • 日語輸入法,g語怎么打

    日語輸入法,g語怎么打 相關圖片日語如何輸入HTML head script language=javascript!--//定義select original value var oldvalue,ol搜狗輸入法有日語輸入嗎...

熱評文章

  • 種子包含違規內容無法下載,如何下載違規種子文件

    種子包含違規內容無法下載,如何下載違規種子文件 相關圖片手機迅雷怎么下違禁內容當用戶使用霹靂下載資源時,系統會提示用戶霹靂任務包含非法內容,無法繼續下載,因此他們有希望沖到霹靂會員那里。但是,他們發現沒有雞蛋可以使用,...

  • 電腦啟動無限進入bios,電腦bios設置圖解中文

    電腦啟動無限進入bios,電腦bios設置圖解中文 相關圖片戴爾g5散熱能壓住嗎最近,許多小型合作伙伴報告說,他們在使用U盤重新安裝系統的過程中提示需要進入BIOS。那么計算機BIOS是什么意思呢?計算機如何進入BIOS?接下來,超人軟件編b...

  • 感到親切,讓人感到親切

    感到親切,讓人感到親切 相關圖片親切地什么什么幾乎每個網站都有自己的口號。作為網站定位和價值輸出的一部分,它們經常被用作歡迎網站訪客的問候語。它們是網站主頁設計的重要組成部分,是提高網站開放體驗...

  • 手機迅雷敏感資源下載方法,手機迅雷無法下載敏感資源

    手機迅雷敏感資源下載方法,手機迅雷無法下載敏感資源 相關圖片迅雷敏感資源限制怎么破一些用戶在找到下載資源后,興奮地打開迅雷。結果表明,這些資源是敏感資源,無法下載,他們的心幾乎都碎了。遇到這種情況,只能去百度云資源,然后忍...

  • 如何修改網頁編碼,如何修改網頁內容編碼

    如何修改網頁編碼,如何修改網頁內容編碼 相關圖片修改瀏覽器編碼Dreamweaver CS3對新文檔的默認編碼是UTF-8,這對一些只使用GB2312編碼的網站每次修改頁面設置的設計師來說有點麻煩。若要將默認UTF-8代碼網頁修改編碼仍是顯示亂碼...

  • gogo游戲助手如何退款,小藍單車退款2019

    gogo游戲助手如何退款,小藍單車退款2019 相關圖片廣州小藍單車退押金如今的貢獻單車軟件如雨后春筍般涌現,但資金卻有很多不足,甚至用戶的押金也難以退還。其中,有小蘭自行車軟件。小蘭自行車押金怎么退?小蘭自行車的押金...

  • 鉛筆練字還是鋼筆練字,鋼筆和鉛筆的區別

    鉛筆練字還是鋼筆練字,鋼筆和鉛筆的區別 相關圖片太空可以用鉛筆還是鋼筆首先介紹筆工具:位于工具欄左側第四個,默認快捷鍵P如下圖所示調整弧度如下圖所示:先用筆畫一條直線和一條曲線,再畫一條直線只要兩點鋼筆練字用什么...

  • 知乎賬號怎么解綁手機號,怎么解綁知乎的手機號碼

    知乎賬號怎么解綁手機號,怎么解綁知乎的手機號碼 相關圖片該手機號已綁定其他知乎賬號我相信有很多智虎的用戶和朋友都經歷過賬戶暫停。那么你知道如果智虎賬戶被禁用該怎么辦嗎?現在,超人軟件編輯也想為大家介紹一下如何解綁智虎A...

  • cad提供的激活碼怎么獲得,cad激活碼

    cad提供的激活碼怎么獲得,cad激活碼 相關圖片cad2007激活碼獲取CAD是一個經典的繪圖軟件包,具有完善的繪圖功能和強大的編輯功能。它受到許多設計師的青睞。盡管許多新版本的CAD系列已經發布,許多設計師仍然喜歡CAD 2007cad16版激...

  • 十九熱點問題有哪些,十九關注的熱點問題

    十九熱點問題有哪些,十九關注的熱點問題 相關圖片十九熱點詞匯這里有19個關于XML的熱點問題,可以讓您成為XML專家,或者至少可以幫助您了解XML未來的發展方向。12什么是XML?12 OSD、CDF和XML之間的關系是十九報告熱點詞解讀...

關注微信

变脸官网查询