像素具有引力

面向 React 与 Next.js 的目的地预测

点击之前,就知道
目的地。

实现 1.37 的 fetch:click 比率。Intent-link 利用运动速度和距离产生的动能与势能来计算概率。

$ npm install intent-link
npmv1.0.13licenseMITreact≥18next≥13

01 / 应用

一个信号。多种用途。

// 分析

意图,而不只是点击

记录放弃的靠近与犹豫,而不只是动作。

// 揭示

渐进式揭示

用户一朝某处移动,就打开预览或提示框。

// 性能

预取链接

在用户点击前预取导航链接。

// 自适应 UI

辅助瞄准

在用户靠近目标时放大目标或将其移近。

01
01
测量
带噪声的轨迹
02
02
估计
可能的目的地
03
03
准备
在到达之前

02 / 在线演示

移向一张卡片——看它如何被预取。

shop.example/new-in

importance

cost

onIntent 数据流0 次触发
// 移向一张卡片以触发信号…
product shot
女装
product shot
男装
product shot
童装
product shot
鞋履
product shot
箱包
product shot
配饰
product shot
运动
product shot
牛仔
product shot
外套
product shot
美妆
product shot
家居
product shot
特卖
product shot
电子产品
product shot
手表
product shot
珠宝
product shot
家具
product shot
礼品
product shot
旅行
18 个分类

03 / 感受差异

同样的点击。无需等待。

一个页面等待网络请求,另一个则在用户移动轨迹期间被获取。

本次会话节省的时间

0 ms

不用 intent-link未加载
/product/quilted-jacket
使用 intent-link空闲
/product/quilted-jacket

04 / 与众不同

不是可见性,不是悬停,而是意图。

其他方法要么太晚,要么浪费资源。

1.37

Fetch:Click 比率

useIntentTarget

构建自定义组件

React · Next

适用于最流行的框架

MIT

开源,不收集数据

方案intent-linkForesightJSinstant.pageNext.js prefetchGuess.js
时机到达之前沿轨迹悬停时进入视口时预先计算
选择性目的地目的地一个所有可见项最佳猜测

交付感觉瞬时的导航。

$ npm install intent-link