MindMarket

MindMarket 由 Sina Salah 和 Kais B.H. Salah 创办，在迪拜和伦敦设有办公室。公司做的是定性研究，也就是通过访谈、焦点小组和实地观察，了解人们为什么这样想、这样做。公司的 About 页写道，创办它是因为受够了全球调研的老做法，层级太多，混乱太多，意义太少。所以它主打的卖点是一个项目负责人管到底，公司自己报的数字是覆盖 60 多个国家，做过 400 多个项目。

这样的服务很难展示，因为它没有产品可以拍。KOKI-KIKO 在 Awwwards 的案例文章里说，多数研究公司的网站都在讲数据的语言，而 MindMarket 选择讲人的语言，所以这次的难题是让访客感受到定性研究，而不是解释它。团队找到的主意是一条线。这条线代表 MindMarket 的角色，它连接企业和消费者，连接不同的文化，也连接原始的谈话和可以使用的结论。团队说这条线从一开始就同时管着品牌表达、页面结构和技术做法。这家公司的标志同样是一根绕成圈的线。

这个站同时要做生意。Domaine Public 的 Deven Caron 在个人网站上写道，团队做了一个定制平台，用来收集询价线索，并把询价集中管理起来。所以这个站有两层任务，首页负责让人记住这家公司，子页面负责把方法、行业和地区讲清楚，并把访客带到询价表单。

访客打开首页时，先看到绿色的标志在米色的幕布上画出来，幕布拉开后是绿色的第一屏，上面写着 Real human insights，一群角色从屏幕底部挤上来，领头的人指向前方。

米色的面板从下方盖上来，介绍这家公司，随后绿色线带开始生长。线带依次经过四站，每一站是一张白色卡片，写着一句针对客户痛点的话，分别是 No more chaos.、One brief. One team.、Speak their language. 和 Global, for real.。这四站正好对应导航里的服务、方法、行业和网络四个部分，所以线带也是一张目录，访客滚动完这一段，就知道这家公司卖什么。

首页的节奏是先给感受，再给证据。线带走完大约八屏之后落到一片花丛里，角色们骑着独轮车跑过去，接着绿色面板写着 Ready when you are!，这一屏把询价按钮放到了页面正中。之后的内容换成了照片和数字，依次是 60 多个国家、400 多个项目、50 多家客户，再到文章和品牌标志墙，最后是黄色的结尾 Let's Connect。访客先被画面吸引，再读到可以说服采购的材料。

四站的按钮通向四个彩色的子页面，这些页面的第一屏继续使用线带上的角色。这样访客离开首页后，还留在同一本绘本里。子页面往下是正常的内容排版，全站约有 77 个网址，包括十二种研究方法、十二个行业和一批文章，这些长内容主要写给搜索和认真比较的客户。

这份报告测的是 2026 年 11 月的线上版本。2025 年 12 月 15 日的网页抓取记录显示，当时首页的线带、13 段角色动画和各个部件都和现在相同。定价页和 Customer-Led Strategy 栏目不在当时的导航里，是获奖之后加上的。

这个站的视觉规矩是把颜色全部交给插画，把文字和界面压得很安静。角色和道具都是平涂的大色块，只用细黑线勾出褶皱和表情，没有立体感，也没有写实的光影。这些插画都是手绘的，团队说没有使用图库素材或者 AI 生成的画面。文字则只用深炭色，界面部件基本是白色小卡片。两边分工明确，所以页面颜色很多，访客仍然能一眼找到要读的字。

线带的粗细是这套设计里最特别的决定。它在 1920 像素宽的屏幕上约有 500 像素宽，比任何一个角色的身体都粗，所以它不像一条线，更像一条路或者一片草地。卡片、文件夹和角色都可以压在它上面，它也不需要边框或者说明就能把页面分成几块。这样做让一个抽象的概念变成了画面的主体，也让首页变得很长，访客要滚动大约八屏才能走完线带。

线带穿过自己的地方是画面里的高潮。绿色线带在这里绕成一个圈，后半段压在前半段上，交叠处有一片深绿色的渐变阴影。全页都是平涂，所以这一片渐变特别显眼，访客一下子就看出这条带子有前后关系。这条带子也出现在别的页面上，About 页用一条蓝色的带子串起工作流程，404 页的蓝色带子上写满了 404。

配色由七种颜色组成。品牌绿 #8ED462 是线带和第一屏的颜色，米色 #F5F1E4 是页面底色，深炭色 #2C2E2A 是文字颜色。红 #FF705D、黄 #F5E211、蓝 #2BA0FF 和粉 #EBC1FF 各管一个业务部分。这四种颜色同时出现在角色的衣服上和卡片的按钮上，比如 Services 按钮是红色，它打开的服务页也是红色。访客点击之前，已经被颜色告知了将要去哪里。

字体只有一款 Inter，只用 400 和 500 两种字重。第一屏的标题是屏幕宽度的 9.7%，在 1920 像素宽时约 186 像素，行距压到 0.95，字距收紧到 -0.06em。正文只有 17 到 19 像素，字距为 -0.04em。字号用一条公式随屏幕宽度连续变化。这款字本身很中性，紧排的大字给了它一点海报感，而大标题和小正文将近十倍的差距，让页面不用靠字体种类制造层次。

界面部件用很少的造型反复组合。顶部导航是一条浮在页面上的白色卡片，右边单独放一张 Get a quote 卡片，所以询价入口滚动到哪里都在。卡片和按钮的圆角是 10 像素，装内容的大面板是 50 像素，这种大圆角让面板互相盖住时看起来很软。标题里的重点词下面有一条缓缓流动的波浪线，它是线带的缩小版，在文章页还变成了章节之间的分隔线。卡片里的按钮平时是彩色底加白色箭头圆点，光标移上去时圆点换到文字左边，文字向右让位。

照片是这套设计的第二种语言。插画讲性格，照片讲真实的人，所以从 Ready when you are! 往下，首页改用暖色调的人物照片，子页面的正文里也都是这种照片。两种语言在首页的一张照片上接到一起，一条黄色的带子绕过一个大人和一个孩子，上面写着 Connecting you to your audience，带子一部分从人物身后穿过，一部分从人物身前绕过，线带的主意就这样进入了真实世界。

到了手机上，线带换成了一条专门重新画过的窄路线，角色和卡片也重新排过，并不是把桌面版缩小。卡片铺满屏幕宽度，角色放在卡片之间，一屏只讲一件事。顶部导航只留下标志和一个绿色圆形按钮，打开后是一张可以展开的菜单，询价入口放在菜单底部，同样带着那张小脸。

开场动作让访客第一眼就看到这条线。在电脑上，绿色标志用 1 秒画完，几段阴影在第 0.4 和 0.6 秒前后依次淡入，标志上的小圆点带着弹性跳出来。标志画到 1.25 秒时，米色幕布用 1 秒从下往上收起，幕布下缘带着大圆角。第一屏的角色群随后放大弹入，顶部导航从上方滑下。触屏设备和窄屏会跳过这段开场。

第一屏的退场跟着滚动走。访客往下滚动时，标题和副标题缩小到原来的 80%，背景同时被一层深色慢慢压暗。米色面板从下方滑上来，把第一屏盖住。这是一个连续的动作，访客往回滚动时画面会倒放。

线带是全站的招牌动作，它完全跟着滚动位置走。滚轮停下时线带停住，访客往回滚动时线带也会收回去，所以访客感觉自己在用手把这条线拉出来。线带的前半段走的是一条特别的曲线，它开始时很慢，到中段突然加速。线头在第一个大弯里从屏幕下方升到中上部，到了折回来的大圈时短暂跑到屏幕下方，再绕回交叉处。后半段则匀速生长，线头一直留在屏幕中部。阴影在后半段开始压上前半段之后才淡入，所以访客看到的是带子先盖上去，然后才出现深度。

四站的卡片和角色在进入屏幕时自己播完一段动作，这和线带的跟手形成了对比。卡片分层弹出，先是一块这一站颜色的底板从 0 放大，冲过头到 1.09 倍再落回，0.2 秒后白色底板用同样的回弹盖住它，所以卡片出现的瞬间会闪过一道颜色。标题、正文和按钮接着分别在第 0.3、0.35 和 0.45 秒开始淡入，整组约 0.9 秒到位。角色从 75% 的大小和偏下 100 像素的位置弹上来，弹性动作持续 1.75 秒，像一个被按下又放开的玩具。

角色弹出来之后一直循环表演，比如吹小号、踢球和骑独轮车，这些动作由 Rive 播放。Rive 是一种矢量动画工具，动画师在里面做好循环，网页只负责播放，所以角色的动作和滚动无关。纸张、音符和纸飞机这些小道具则跟着滚动移动，它们以不同的速度相对页面滑动，产生前后层次。

子页面之间的切换同样靠前后两层完成。访客点击链接后，当前页面缩到 90%，下沉一点，并淡到一半透明。新页面从屏幕下方升上来盖住它。两个动作同时进行，用时 0.75 秒，开始稍慢，中段很快，末尾缓缓落定。旧页面从访客当前的视线位置开始缩小，所以访客即使已经滚动到页面深处，也不会看到画面先跳回顶部。

数字部分用卡片叠放来做节奏。左边的标题固定不动，右边三张大卡片依次滚上来，每一张开始时歪着 10 度，左右交替，到位时摆正，并压在前一张上方，只露出前一张的顶边。这个动作跟着滚动走，访客读到第三张时，三个数字已经叠成一摞。

页面下方的品牌标志墙是三条横向滚动的标志带，它们和滚动的关系更松。访客不动时，带子缓缓漂动，第三条的速度约每秒 40 像素。访客一滚动，带子就提速到每秒 200 多像素，并且跟着滚动方向转向。

小部件的回应都有一点弹性，它们共用一条轻微过冲的曲线，时长多为 0.4 秒。这个站最好玩的小动作都藏在询价入口上。Get a quote 按钮里有一张蓝色的小脸，它的五官会朝光标的方向偏过去。光标移到按钮上时，按钮变成黄色，小脸张大嘴笑起来。在 Ready when you are! 这一屏，光标移到按钮上时，一个角色会用 0.3 秒从屏幕左下角探出身来，光标离开后再缩回去。这两个动作都只在询价按钮上出现，等于用一点惊喜奖励访客走到了最后一步。

这些动作同时运行时画面很稳。首页连续滚动两遍都是每秒 60 帧，没有一段掉帧。

这个站用 Astro 生成静态页面，再用 Swup 把多页网站变成不刷新的体验。每个互动部件都是一个很小的自定义元素，比如 c-rive、c-rail 和 c-homepage-timeline，页面用到才加载对应的脚本。内容放在 DatoCMS 里，样式用 Tailwind 4，部署在 Netlify。这种结构让内容页保持普通网页的结构，体验层只加在需要的地方，所以这个站既能承担七十多个网址的内容，又能做出整页动画。

线带是三条 stroke-width 为 500 的 SVG 路径，画在一个宽高比固定的容器里。main-path 是前半段，secondary-path 是后半段，夹在中间的 shadow-path 只覆盖交叉区域，描边用线性渐变填充。团队说后半段单独成一条路径，唯一的目的是让它能压在阴影上面，这是用绘制顺序做出前后关系的简单办法。

GSAP 的 DrawSVG 插件把三段动作排进一条暂停的时间线，前半段长 0.9，后半段接着长 1，阴影从 0.95 开始用 0.15 淡入。Locomotive Scroll 在这个容器上监听滚动，把 0 到 1 的进度通过 pathProgress 事件发出来，组件收到后直接调用时间线的 progress()。容器的进入偏移是 -27%，所以线带在容器顶边还在屏幕下方时就开始生长。在 1920×945 的窗口里，这段进度从页面滚动 532 像素开始，到 7057 像素结束。

前半段的自定义缓动是这个效果的关键，它弥补了路径和滚动之间的不匹配。路径长度和页面高度不成比例，弯道里一段很长的路径只占很少的垂直高度。如果线性绘制，线头就会和访客看到的位置错开。团队用 CustomEase 写了 M0,0 C0.952,0.017 0.744,0.69 1,1，前半段几乎不动，后半段急速补完。

滚动到 2120 像素时，路径只画了约 900 单位，线头在屏幕 386 像素高的位置。之后的 1500 像素滚动里，路径画完了其余的 4800 单位，只有折回来的大圈让线头短暂跑到屏幕下方。后半段一路向下，没有折返，所以线性缓动就够了，它的线头一直在屏幕 316 到 657 像素之间。团队把这条调好的缓动列为效果成立的原因之一。

沿线的元素都放在同一个容器里，用百分比定位。团队说首页有 85 个动画和静态元素，它们是一个一个在各个断点手工摆放的。百分比定位的好处是这些元素和路径共用一个坐标系，屏幕变宽时一起缩放，不会脱离线带。窗口宽度在 1000 像素以下时，组件切换到另一组描边 250 的路径和另一条时间线，元素换一组百分比，并用 max-md:transform-none! 关掉道具的视差。About 页的蓝色带子复用了同一个 pathProgress 事件，只是把路径分进上下两层 SVG，让带子先从内容后面穿过，再压到内容上面。

角色动画的组织方式很省。首页 13 段动画各是一个独立的 .riv 文件，大小在 12 到 44 KB 之间，加起来约 300 KB，由 Rive 的 canvas-lite 运行时画到各自的 2D 画布上。每个文件只有一条循环时间线，状态机里没有输入，所以页面和动画之间没有复杂的通信。c-rive 元素用 Intersection Observer 控制，画布进入视口才调用 startRendering()，离开就 stopRendering()，所以滚动时屏幕上通常只有一到四段动画在运行。出场的弹性动作不在 Rive 文件里，是 GSAP 给画布外层加的，这样所有角色的出场手感都能在一处调整。

Firefox 是这套做法的例外。把浏览器标识换成 Firefox 后，线带上的 11 个角色不再播放，只停在一帧。这些元素都带着 data-disable-firefox-renderer，推测团队是为了避开 Firefox 上的渲染问题。

询价按钮的小脸是首页上真正和页面通信的 Rive 文件。它的状态机有 isIdle 和 isSmiling 两个输入，还用视图模型暴露了 posx 和 posy 两个数字。组件监听整个窗口的 mousemove，把光标相对画布的位置映射到 -90 到 20 的范围，写进这两个数字。光标离开窗口时，脚本用系数 0.1 的线性插值让小脸回到初始位置。

滚动层由 Locomotive Scroll 5 负责，它内部用 Lenis 做平滑滚动，配置保持默认值。很多动画没有写脚本，只在元素上写属性。data-scroll-speed 产生视差，data-scroll-css-progress 把进度写进 CSS 变量 --progress，然后用 calc() 算出位移、旋转和缩放。数字卡片的摆正和第一屏的缩小都是这样做的，每个元素的起止值写在样式里。这个做法把滚动动画变成了样式问题，设计调参时不用碰脚本。

那张照片用四层叠出了带子穿过人物的效果。最底下是完整的照片，上面是带子的后半部分，再上面是抠出来的人物 PNG，最上面是带子的前半部分。带子上的字是转成路径的矢量图形，所以能沿着弯曲的带子排列。两张照片用同样的视差速度，两段带子用另一个速度，滚动时带子会相对人物轻微滑动，进一步加强空间感。

页面切换用 Swup 配合 CSS 完成。离开时脚本记下当前滚动位置，写进 --scroll-y，并把缩放中心 --transform-origin 设在视口中央。旧页面被 clip-path 裁到只剩当前这一屏，新页面绝对定位在同样的高度，从 110svh 滑到 0。这样旧页面看起来是在原地缩小，不需要先滚回顶部。

Swup 在悬停时就预加载目标页面，所以点击后动画马上开始。新页面替换完成 850 毫秒后，脚本才重新初始化 Locomotive，避开了过渡中的位置计算。文章列表的筛选走 Swup 的片段更新，只替换列表部分。

这些内容的体积在首页控制得很好，在 About 页留下了一个明显的漏洞。首页站点自己的文件约 1.2 MB，最大的一项是 236 KB 的 Rive 运行时，它从 unpkg 加载。一个满是动画的首页能做到这个体积，靠的是矢量动画和字体只有两个字重。About 页则达到约 6 MB，其中 traditional.riv 一个文件就有 3.5 MB，而它在页面上只是对比表格里一个小圆头像。表格另一边同样大小的 new_approach.riv 只有 5 KB，所以这个文件大概率是导出时留下的问题，它比首页全部动画加起来还大十倍。

访客的等待时间主要来自开场动画。测到的三个页面首次绘制都在 0.24 到 0.34 秒之间，但首页要等标志画完，第一屏的完整画面大约在 2 秒后才露出来，这段等待是开场动画本身的时长，不是下载造成的。触屏设备没有这段开场，文字直接出现。

键盘访客可以走完这个站，但要先走过很长的导航。焦点样式保留了浏览器默认的外框，下拉菜单在获得焦点时自动打开，Esc 也能关闭它。不过站点没有跳过导航的链接，下拉菜单里的链接都在焦点顺序里，按 Tab 超过 45 次才能走到第一屏之后。站点只在视频和估价工具上读取减少动态效果的设置，首页的线带、角色和页面切换都不受这个设置影响，对动画敏感的访客来说，这是这个站最大的问题。

MindMarket 的 Design 最高，这和手绘插画与线带的完成度相符。Creativity 也接近 8 分，一家研究公司的官网能做成绘本并不常见。Usability 最低，首页很长，正文字号相对大标题很小，这些都可能影响这一项。开发评委给 Animations 最高的 8 分，Accessibility 最低，只有 6.8，这和站点不读减少动态效果设置相符。Domaine Public 的网站还列出这个项目拿到了 Idéa 2026 金奖。

战绩是截至 2026 年 11 月 7 日的累计数。这是一个给客户做的项目，团队由几位蒙特利尔的 Awwwards 常客组成。从各人账号上的身份看，设计和策略一侧是 Louis Paquet、KOKI-KIKO 和 Kim Levan，开发由 Domaine Public 的 Deven Caron 和 Pier-Luc Cossette 负责。KOKI-KIKO、Kim Levan、Deven Caron 和 Pier-Luc Cossette 的账号上还都有 Cerebrium 这个项目，所以这是一组反复合作的搭档。