一個(gè)頁(yè)面祥款,日均億人圍觀清笨,數(shù)以百計(jì)終端承載;
跳躍指尖刃跛,點(diǎn)按觸碰拖拽抠艾,絲般順滑,極致體驗(yàn)桨昙;
你還在為手勢(shì)交互開發(fā)困擾嗎检号,你還在為碎片化兼容性心塞嗎?
去 exp touch 看看:
豐富手勢(shì)交互封裝蛙酪,完美 demo 盡現(xiàn)齐苛。
讓我們共同見證,指尖滑起的瞬間桂塞。
本文是一篇純軟文凹蜂,PM、運(yùn)營(yíng)藐俺、后端炊甲、老板、水果大哥欲芹、酸奶小妹卿啡、保潔阿姨,閱讀統(tǒng)統(tǒng)絕無(wú)障礙(技術(shù)細(xì)節(jié)文章會(huì)令寫)菱父,底部超多可愛的 gif 圖 demos颈娜。如果你已經(jīng)厭倦營(yíng)銷文章的自吹自擂,那么作為前端程序員浙宜,以下內(nèi)容官辽,我想先和你談?wù)劗a(chǎn)品和交互體驗(yàn)。
首先 exp touch 是一個(gè)超級(jí) tiny & sexy 的前端手勢(shì)庫(kù)粟瞬,而且 exp touch 要開源啦同仆!這是百度經(jīng)驗(yàn)前端自研的交互類庫(kù)。
包含:單點(diǎn)裙品、雙擊俗批、長(zhǎng)摁俗或、拖拽、滑動(dòng)岁忘、旋轉(zhuǎn)等交互辛慰;
覆蓋:輪播圖、抽獎(jiǎng)轉(zhuǎn)盤干像、3D 旋轉(zhuǎn)帅腌、捏合縮放、上提(下拉)刷新等 demos麻汰;
采用: ES Next 語(yǔ)法以及面向?qū)ο笏枷腴_發(fā)速客,輔以大量數(shù)學(xué)計(jì)算;
最終:以極致用戶體驗(yàn)和高效性能為亮點(diǎn)什乙,橫空出世挽封!
Wap VS Native: 天空是否有邊際
前端 Wap 開發(fā),不同于我們認(rèn)知的 Native App臣镣。天生決定辅愿,我們開發(fā)的宿主是瀏覽器。這個(gè)絕好舞臺(tái)的另一面忆某,隱藏著我們帶鐐銬起舞的尷尬点待。沒錯(cuò),我有多愛瀏覽器弃舒,就有多恨瀏覽器癞埠。
尤其是移動(dòng)端,主流瀏覽器內(nèi)核夾雜國(guó)產(chǎn)各種山寨聋呢,同時(shí)安卓和蘋果兩大手機(jī)系統(tǒng)天然鴻溝苗踪,種種碎片化導(dǎo)致事件規(guī)范不一致,最終成為產(chǎn)品體驗(yàn)的絆腳石削锰。
尤其關(guān)于觸摸事件通铲,更是一部血淚史。為此器贩,我會(huì)另起技術(shù)文章分析颅夺,這里不在展開。說(shuō)回產(chǎn)品蛹稍,直面我們的痛楚:可愛的 PM 童鞋吧黄,在設(shè)計(jì)交互大開腦洞(褒義)的同時(shí),對(duì)齊標(biāo)準(zhǔn)完全是 Native App唆姐!想想在評(píng)審時(shí)拗慨,wuli 我 PM 總會(huì)說(shuō): “就是這樣,XX App 你用過(guò)的吧,你們像 XX App 一樣做就可以了赵抢!”
真的就可以嗎瘫想?每次都想以:“你了解 App 和 Wap 的技術(shù)實(shí)現(xiàn)差別嗎?”這種正當(dāng)?shù)募夹g(shù)理由懟回去昌讲,可是轉(zhuǎn)念就壓在心里,僅供五臟六腑之間交流减噪。同時(shí)理智占據(jù)上風(fēng)短绸,信念控制住馬上要抽起藏在抽屜中砍刀的麒麟臂,老老實(shí)實(shí)把胳膊肘放回到鍵盤上筹裕。
夜深人靜時(shí)醋闭,我也想:“Wap 端真的就不可以實(shí)現(xiàn) Native 那樣的觸控操作嗎?”為此朝卒,我遍訪了眾多 Wap 頁(yè)面证逻,無(wú)奈都是飲恨而歸。比如抗斤,我從來(lái)沒有看到過(guò): Wap 端手指捏和縮放圖片時(shí)囚企,是以手指中心為焦點(diǎn):圖片放大的同時(shí)圖片自身也進(jìn)行位移,保持預(yù)期中的放大焦點(diǎn)始終在雙指中心瑞眼,不脫離屏幕龙宏。如同在微信朋友圈中的圖片縮放效果那般自然∩烁恚可是在 Wap 頁(yè)上银酗,真的很少有實(shí)現(xiàn)!
我一直不甘心徒像,直到這次的百度經(jīng)驗(yàn)步驟頁(yè)改版黍特,讓我向不可能發(fā)起挑戰(zhàn)。來(lái)锯蛀,慢慢跟你說(shuō)灭衷。
新版步驟頁(yè):擁抱視頻化 + 奢華體驗(yàn)升華
你也許沒聽說(shuō)過(guò)百度經(jīng)驗(yàn),但很有可能無(wú)意中受益于他谬墙。打開搜索引擎今布,查找方法竅門,常識(shí)妙招:步驟化的閱讀拭抬,左右滑動(dòng)間部默,獲益匪淺。
百度經(jīng)驗(yàn)步驟頁(yè)是百度經(jīng)驗(yàn)最重要的頁(yè)面造虎。無(wú)論從 PV傅蹂、UV 還是變現(xiàn)能力來(lái)看,都處在毫無(wú)爭(zhēng)議的核心地位。這次百度經(jīng)驗(yàn)步驟頁(yè)改版份蝴,最重要的目的除了擁抱視頻化以外犁功,就是打造更加完美、流暢的使用體驗(yàn)婚夫。
前端開發(fā)浸卦,在視頻化方面也面臨嚴(yán)重的機(jī)遇和挑戰(zhàn),由于此文推銷主題原因案糙,暫且不表限嫌,同樣也會(huì)有技術(shù)文章稍后奉上。這里主要談?wù)勈謩?shì)上的交互體驗(yàn)时捌。
負(fù)責(zé)任地說(shuō)怒医,我從來(lái)沒見到過(guò)像百度經(jīng)驗(yàn)步驟頁(yè)一樣,極盡手勢(shì)掌控之能事奢讨,尤其是在天生畸形的瀏覽器上稚叹,我們看看它都實(shí)現(xiàn)了什么:
上圖中的文字僅僅涵蓋了圖片畫廊手勢(shì)交互一部分,各種自適應(yīng)以及各種物理惰性回彈拿诸、縮放摩擦系數(shù)扒袖、縮放閾值、緩沖區(qū)域亩码、回彈系數(shù)等等也就不一一列舉了僚稿。
同時(shí),圖片畫廊并不是一個(gè)新的頁(yè)面蟀伸,全部以原頁(yè)面加遮罩形式出現(xiàn)蚀同。你可以理解為 SPA(單頁(yè)面應(yīng)用),各種消息交互啊掏,手勢(shì)觸控矛盾處理耦合蠢络,繼續(xù)如圖:
單純的雙指縮放其實(shí)并不難,你可能也會(huì)想到就是二維坐標(biāo)軸的各種計(jì)算罷了迟蜜。
可是:單擊雙擊時(shí)間差如何區(qū)分刹孔;有角度的滑動(dòng)算左滑還是右滑;指定元素上 touch move 期間滑動(dòng)出了手機(jī)屏要不要觸發(fā) touch end 事件娜睛;一根手指和兩根手指和多根手指放在不同的元素上要怎么劃分髓霞?
諸如此類太多邏輯和細(xì)節(jié)交織,這酸爽足以醉人畦戒。再加上隔著瀏覽器兼容性的壁壘方库,這都構(gòu)成 Wap 頁(yè)面很少有大規(guī)模手勢(shì)操控實(shí)現(xiàn)的原因。不信你去找找障斋,Wap 上圖片畫廊支持切換圖片且支持手指中心圖片縮放的 case......額纵潦,找到有獎(jiǎng)徐鹤,找到源代碼?有大獎(jiǎng)邀层!
可是這次的步驟頁(yè)改版返敬,我們偏偏要把這些實(shí)現(xiàn)。
新版步驟頁(yè)和新新版步驟頁(yè)和新新新新新版步驟頁(yè)
經(jīng)過(guò)嘔心吐血的騷操作寥院,在去年步驟頁(yè)改版全量上線之后劲赠,不管是 PV、UV秸谢、還是廣告收益都有大幅度上漲经磅。可是改版常年有钮追,難道以后年年折騰一遍?
我選擇拒絕阿迈,之前的開發(fā)心得并沒有白積累元媚。我利用周末時(shí)間,基于 AlloyTouch 等良心作品苗沧,開發(fā)了 exp touch 這個(gè)百度經(jīng)驗(yàn)手勢(shì)庫(kù)刊棕。
它采用 ES Next 完全面向?qū)ο螅庋b了大量必要的計(jì)算過(guò)程待逞,同時(shí)對(duì)外暴露出各種貼心的回調(diào)甥角。我個(gè)人很厭惡功能大而全的 UI 庫(kù),限定死了太多內(nèi)容而無(wú)法拓展识樱。因此 exp touch 只進(jìn)行兼容性處理以及數(shù)學(xué)計(jì)算嗤无。同時(shí)為了增強(qiáng)可用性和學(xué)習(xí)成本,基于 exp touch 手勢(shì)庫(kù)怜庸,我實(shí)現(xiàn)了海量 demos当犯,第三方開發(fā)者完全可以復(fù)制粘貼,分分鐘解鎖各種姿勢(shì)割疾。
海量 demo 即插即用
那我們直接看看 Gif 圖好咯:
demo: 這是一個(gè)簡(jiǎn)單的滾動(dòng)嚎卫。但是不出現(xiàn)滾動(dòng)條,因?yàn)橥耆灰揽繛g覽器 scroll宏榕,而是根據(jù) touchmove 實(shí)時(shí)計(jì)算 transformY拓诸,同時(shí)包含了緩沖區(qū)域設(shè)置:
demo: 這是一個(gè)常見的移動(dòng)端輪播圖
demo: 這是一個(gè)常見的整屏幕翻動(dòng) H5:
demo: 這是一個(gè)信息流展現(xiàn),包含下拉刷新麻昼,和頭部動(dòng)畫:
demo: 這是一個(gè) 2D 抽獎(jiǎng)轉(zhuǎn)盤奠支,手勢(shì)轉(zhuǎn)動(dòng)開啟;
demo: 這是一個(gè)拖拽:
(這些 demos 靈感全部來(lái)自 AlloyTeam 團(tuán)隊(duì)抚芦,照著自己實(shí)現(xiàn)了一下胚宦,完全參考AlloyTouch 官網(wǎng),強(qiáng)烈安利 AlloyTouch!J嗳啊>)
最后幾句話
- 這個(gè)庫(kù)當(dāng)然還存在一些不完善的地方,大家后續(xù)盡可以提 PR您旁,或者當(dāng)面交流烙常;
- 極度支持采用 exp touch,玩出更多花樣鹤盒,做出的最終頁(yè)面歡迎反饋給我蚕脏;
- 它將會(huì)在新版步驟頁(yè)上線后正式開源。在此之前侦锯,任何有興趣的驼鞭,可以與我一起開發(fā)。雖然我已經(jīng)實(shí)現(xiàn)了 99%尺碰,剩下 1% 給你一個(gè) contributor挣棕;
- 多多關(guān)注百度經(jīng)驗(yàn),我們是一個(gè)小而美的團(tuán)隊(duì)亲桥;
- 寫這個(gè)其實(shí)挺沒意思的洛心,我更喜歡 React;
- 前些時(shí)間有幾家出版社找到我約書题篷,最終我選擇和電子工業(yè)出版社簽訂約稿合同词身,在寫一本關(guān)于 React 技術(shù)棧的書;
- 如果你對(duì) React 以及出書感興趣番枚,我已經(jīng)拉上了廠內(nèi)外兩個(gè)大佬法严,也強(qiáng)烈歡迎你來(lái)跟我一起寫,出謀劃策或者做做校審?fù)嫱妫?/li>
- 如果你單純對(duì) React 技術(shù)棧感興趣葫笼,可以關(guān)注我的知乎渐夸,最近半年不定期在發(fā)表一些技術(shù)心得(我是來(lái)騙粉的)。
- 同 4渔欢;
- 同上墓塌。