適合所有人看的一篇推廣 — 來(lái)自百度經(jīng)驗(yàn)

一個(gè)頁(yè)面祥款,日均億人圍觀清笨,數(shù)以百計(jì)終端承載;

跳躍指尖刃跛,點(diǎn)按觸碰拖拽抠艾,絲般順滑,極致體驗(yàn)桨昙;

你還在為手勢(shì)交互開發(fā)困擾嗎检号,你還在為碎片化兼容性心塞嗎?

exp touch 看看:
豐富手勢(shì)交互封裝蛙酪,完美 demo 盡現(xiàn)齐苛。
讓我們共同見證,指尖滑起的瞬間桂塞。

Martin Garrix 在 TomorrowLand 2017

本文是一篇純軟文凹蜂,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è)是百度經(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ì)割疾。

解鎖各種姿勢(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è)置:

神奇的滾動(dòng)

demo: 這是一個(gè)常見的移動(dòng)端輪播圖

仿百度經(jīng)驗(yàn)輪首頁(yè)播圖

demo: 這是一個(gè)常見的整屏幕翻動(dòng) H5:


H5 Slides

demo: 這是一個(gè)信息流展現(xiàn),包含下拉刷新麻昼,和頭部動(dòng)畫:

綜合 demo

demo: 這是一個(gè) 2D 抽獎(jiǎng)轉(zhuǎn)盤奠支,手勢(shì)轉(zhuǎn)動(dòng)開啟;

轉(zhuǎn)盤 demo

demo: 這是一個(gè)拖拽:

拖拽 demo

(這些 demos 靈感全部來(lái)自 AlloyTeam 團(tuán)隊(duì)抚芦,照著自己實(shí)現(xiàn)了一下胚宦,完全參考AlloyTouch 官網(wǎng),強(qiáng)烈安利 AlloyTouch!J嗳啊>)

最后幾句話

  1. 這個(gè)庫(kù)當(dāng)然還存在一些不完善的地方,大家后續(xù)盡可以提 PR您旁,或者當(dāng)面交流烙常;
  2. 極度支持采用 exp touch,玩出更多花樣鹤盒,做出的最終頁(yè)面歡迎反饋給我蚕脏;
  3. 它將會(huì)在新版步驟頁(yè)上線后正式開源。在此之前侦锯,任何有興趣的驼鞭,可以與我一起開發(fā)。雖然我已經(jīng)實(shí)現(xiàn)了 99%尺碰,剩下 1% 給你一個(gè) contributor挣棕;
  4. 多多關(guān)注百度經(jīng)驗(yàn),我們是一個(gè)小而美的團(tuán)隊(duì)亲桥;
  5. 寫這個(gè)其實(shí)挺沒意思的洛心,我更喜歡 React;
  6. 前些時(shí)間有幾家出版社找到我約書题篷,最終我選擇和電子工業(yè)出版社簽訂約稿合同词身,在寫一本關(guān)于 React 技術(shù)棧的書;
  7. 如果你對(duì) React 以及出書感興趣番枚,我已經(jīng)拉上了廠內(nèi)外兩個(gè)大佬法严,也強(qiáng)烈歡迎你來(lái)跟我一起寫,出謀劃策或者做做校審?fù)嫱妫?/li>
  8. 如果你單純對(duì) React 技術(shù)棧感興趣葫笼,可以關(guān)注我的知乎渐夸,最近半年不定期在發(fā)表一些技術(shù)心得(我是來(lái)騙粉的)。
  9. 同 4渔欢;
  10. 同上墓塌。
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市奥额,隨后出現(xiàn)的幾起案子苫幢,更是在濱河造成了極大的恐慌,老刑警劉巖垫挨,帶你破解...
    沈念sama閱讀 216,470評(píng)論 6 501
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件韩肝,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡九榔,警方通過(guò)查閱死者的電腦和手機(jī)哀峻,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,393評(píng)論 3 392
  • 文/潘曉璐 我一進(jìn)店門涡相,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái),“玉大人剩蟀,你說(shuō)我怎么就攤上這事催蝗。” “怎么了育特?”我有些...
    開封第一講書人閱讀 162,577評(píng)論 0 353
  • 文/不壞的土叔 我叫張陵丙号,是天一觀的道長(zhǎng)。 經(jīng)常有香客問(wèn)我缰冤,道長(zhǎng)犬缨,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,176評(píng)論 1 292
  • 正文 為了忘掉前任棉浸,我火速辦了婚禮怀薛,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘迷郑。我一直安慰自己枝恋,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,189評(píng)論 6 388
  • 文/花漫 我一把揭開白布三热。 她就那樣靜靜地躺著,像睡著了一般三幻。 火紅的嫁衣襯著肌膚如雪就漾。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,155評(píng)論 1 299
  • 那天念搬,我揣著相機(jī)與錄音抑堡,去河邊找鬼。 笑死朗徊,一個(gè)胖子當(dāng)著我的面吹牛首妖,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播爷恳,決...
    沈念sama閱讀 40,041評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼有缆,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來(lái)了温亲?” 一聲冷哼從身側(cè)響起棚壁,我...
    開封第一講書人閱讀 38,903評(píng)論 0 274
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎栈虚,沒想到半個(gè)月后袖外,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,319評(píng)論 1 310
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡魂务,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,539評(píng)論 2 332
  • 正文 我和宋清朗相戀三年曼验,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了泌射。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 39,703評(píng)論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡鬓照,死狀恐怖熔酷,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情颖杏,我是刑警寧澤纯陨,帶...
    沈念sama閱讀 35,417評(píng)論 5 343
  • 正文 年R本政府宣布,位于F島的核電站留储,受9級(jí)特大地震影響翼抠,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜获讳,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,013評(píng)論 3 325
  • 文/蒙蒙 一阴颖、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧丐膝,春花似錦量愧、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,664評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)。三九已至浑此,卻和暖如春累颂,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背凛俱。 一陣腳步聲響...
    開封第一講書人閱讀 32,818評(píng)論 1 269
  • 我被黑心中介騙來(lái)泰國(guó)打工紊馏, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人蒲犬。 一個(gè)月前我還...
    沈念sama閱讀 47,711評(píng)論 2 368
  • 正文 我出身青樓朱监,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親原叮。 傳聞我的和親對(duì)象是個(gè)殘疾皇子赫编,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,601評(píng)論 2 353

推薦閱讀更多精彩內(nèi)容

  • 發(fā)現(xiàn) 關(guān)注 消息 iOS 第三方庫(kù)、插件奋隶、知名博客總結(jié) 作者大灰狼的小綿羊哥哥關(guān)注 2017.06.26 09:4...
    肇東周閱讀 12,093評(píng)論 4 62
  • 今天中國(guó)舞第二節(jié)課,從最初跟不上同學(xué)們舞蹈步伐黍聂,慢慢地融入了隊(duì)伍躺苦! 但不變的依然是那肢體的僵硬身腻,活生生的把中國(guó)舞詮...
    yyysmile閱讀 330評(píng)論 0 2
  • 01 愛情說(shuō):“其實(shí)我從一開始就擁有這兩樣?xùn)|西——理解和包容嘀趟,而且人們?cè)谧铋_始的時(shí)候也都知道并很好地用這兩樣...
    小鹿大大王閱讀 744評(píng)論 1 2
  • 你在我心里植根 文/小哲 抖落多年的塵埃 寫詩(shī)成了我今生迷醉的誘惑 用詞句穿針引線 用標(biāo)點(diǎn)在無(wú)盡的詩(shī)行里圈圈點(diǎn)點(diǎn) ...
    小哲小詩(shī)閱讀 210評(píng)論 0 0
  • 2017年249期3D鑫鑫預(yù)測(cè) 和值:09.17.18.19 六碼組六,組三:134789 五碼組六愈诚,組三:137...
    eb50d8ec7ef0閱讀 1,684評(píng)論 0 0