惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

博客园 - 三生石上(FineUI控件)
S
SegmentFault 最新的问题
阮一峰的网络日志
阮一峰的网络日志
freeCodeCamp Programming Tutorials: Python, JavaScript, Git & More
钛媒体:引领未来商业与生活新知
钛媒体:引领未来商业与生活新知
雷峰网
雷峰网
Apple Machine Learning Research
Apple Machine Learning Research
WordPress大学
WordPress大学
博客园 - 司徒正美
奇客Solidot–传递最新科技情报
奇客Solidot–传递最新科技情报
宝玉的分享
宝玉的分享
爱范儿
爱范儿
月光博客
月光博客
The GitHub Blog
The GitHub Blog
M
MIT News - Artificial intelligence
H
Hackread – Cybersecurity News, Data Breaches, AI and More
B
Blog
T
Tailwind CSS Blog
美团技术团队
D
Docker
V
Visual Studio Blog
Martin Fowler
Martin Fowler
博客园 - 聂微东
The Cloudflare Blog

DEV Community

Authentication Security Deep Dive: From Brute Force to Salted Hashing (With Java Examples) Why AI Systems Don’t Fail — They Drift Spilling beans for how i learn for exam😁"Reinforcement Learning Cheat Sheet" I Replaced Chrome with Safari for AI Browser Automation. Here's What Broke (and What Finally Worked) How Python Borrows Other People's Work The $40 Architecture: Processing 1 Billion API Requests with 99.99% Uptime Vibe Coding: A Workflow Guide (From Zero to SaaS) Most webhook security guides protect the wrong side. The scary part is delivery. Headless CMS for TanStack Start: Build a Blog with Cosmic EU Age Verification App "Hacked in 2 Minutes" — What Actually Happened Comfy Cloud’s delete function does not actually remove files Running AI Models on GPU Cloud Servers: A Beginner Guide Event-driven media intelligence with AWS Step Functions and Bedrock I scored 500 AI prompts across 8 quality dimensions — here's what broke How to Call Google Gemini API from Next.js (Free Tier, No Backend Needed) The Portal Protocol: Reclaiming Human Connection in the Age of AI How to Fix Your Team's Scattered Knowledge Problem With a Self-Hosted Forum Intro to tc Cloud Functors: A Graph-First Mental Model for the Modern Cloud Designing Multi-Tenant Backends With Both Ownership and Team Access I Built a Neumorphic CSS Library with 77+ Components — Here's What I Learned PostgreSQL Performance Optimization: Why Connection Pooling Is Critical at Scale Cómo construí un SaaS multi-rubro para gestionar expensas en Argentina con FastAPI + Vue 3 🚀 I Built an Ethical Hacking Scanner Tool – Open Source Project I Replaced /usage and /context in Claude Code With a Single Statusline A Pythonic Way to Handle Emails (IMAP/SMTP) with Auto-Discovery and AI-Ready Design I Collected 8.9 Million Polymarket Price Points — Here's What I Found About How Markets Really Move EcoTrack AI — Carbon Footprint Tracker & Dashboard Everyone's Using AI. No One Agrees How. 5 self-hosted ebook managers worth trying in 2026 Building Your First AI Agent with LangChain: From Chatbot to Autonomous Assistant
為什麼那個會「注意你」的展品,反而讓你更想靠近
張旭豐 · 2026-06-28 · via DEV Community

張旭豐

為什麼那個會「注意你」的展品,反而讓你更想靠近

為什麼那個會「注意你」的展品,反而讓你更想靠近

博物館互動設計的隱形槓桿


東京。

teamLab 展覽入口。

地面是一整片黑色的水面,倒映著數位花朵。

你踏進去。

花朵在你腳步周圍散開,隨著你的移動一圈一圈地綻放和飄落。

你停下來,花也停下來。

你開始走,花就跟著你。

你以為是感應。但仔細看——延遲了大概 0.3 秒。

不是「立刻反應」,是「好像在觀察你,然後才決定」。

你站在那裡又多看了三秒。


你第一個「對」

讓我問你一個問題。

你去過那種「互動博物館」嗎?牆上寫著「請觸摸」,但你碰了之後什麼都沒發生——或者是那種「語音導覽機」,你對著它說話,它說「請靠近一點」。

然後你就失去興趣了。

現在讓我想另一個場景。

一個會動的恐龍骨骼。你站在它面前的時候,它頭轉過來看了你一眼。

你知道這是感應器。你知道工程師設計了「檢測到人」的時候讓它轉頭。

但你還是覺得——

「它在看我。」

兩種互動,哪一個讓你停留更久?


你第一個「咦」

這裡有一個秘密。

讓人停留更久的,通常不是「立刻反應」的互動。

是那種「好像在決定要不要理你」的互動。

為什麼?

因為「立刻反應」讓你確認了——「這是機器」。

但「好像在決定要不要理你」讓你的大腦進入了一個不確定的狀態——

「它真的知道我來了嗎?」
「它在決定什麼?」
「我想看看它決定什麼。」

這個「我想看看」就是互動設計裡最重要的瞬間——

參與者的好奇心,被啟動了。


玉樹真一郎在《任天堂的體驗設計》裡,分析了一個現象:

《超級馬里奧》裡,當玩家靠近一個問號磚塊,頂了它,沒有任何東西掉下來。

玩家不會覺得「這個遊戲壞了」。

玩家會想:「為什麼這次沒有?

然後再頂一次。

為什麼「沒有東西掉下來」沒有讓玩家放棄?

因為設計師在玩家心裡創造了一個「還沒發生的確定事件」。

玩家知道「遲早會有東西掉下來」。所以他們願意等待、願意再試一次。

博物館的互動設計也應該這樣。

不是立刻給答案。是讓你相信「答案快來了」,然後讓你一直站在那裡等。


你最後「我要改變做法」

讓我說一個失敗的設計。

一個科技博物館有一面「觸控牆」。牆上有很多按鈕,碰了就會播放影片、發出聲音、變色。

一開始很多小孩去碰。

但大概十五分鐘之後,那面牆就沒人碰了。

為什麼?

因為碰了 100 次,沒有任何一次比另一次更「值得等待」。

每一次都是立刻發生,每一次都是同樣的結果。

沒有任何一件事需要「決定」。


現在讓我說一個成功的設計。

同一個博物館的另一區,有一面「情緒牆」。

你站在牆前,系統會掃描你的臉——不是真的分析情緒,而是給你一個顏色。

每個人的顏色都不太一樣。

但顏色不是立刻出現的。

大概等了兩秒——然後它慢慢浮現出來。

在這兩秒裡,每個站在牆前的人都沒有動。

他們在等。

他們相信顏色一定會出現。但他們不確定會是什麼顏色。


三個馬上可以用的方向

第一:不要立刻給回饋。

加入一個 0.3 到 2 秒的「思考時間」。

讓互動看起來像「系統在決定」,而不只是「系統在檢測」。

壞掉的燈 vs 正在決定的燈——後者讓人更想站在那裡等。


自己試試看:30 行做出「延遲反應」的燈

// p5.js — 試試延遲回饋的感覺
let lights = [];
const DELAY = 12;  // 幀數延遲(約 0.2 秒)

function setup() {
  createCanvas(400, 400);
  for (let i = 0; i < 5; i++) {
    lights.push({ history: [], lit: false });
    for (let j = 0; j < Math.max(DELAY, 1); j++) lights[i].history.push(false);
  }
}

function draw() {
  background(30);
  let hovered = floor(mouseX / 80);

  for (let i = 0; i < lights.length; i++) {
    lights[i].history.push(hovered === i);
    if (DELAY > 0) lights[i].history.shift();
    lights[i].lit = DELAY > 0 ? lights[i].history[0] : (hovered === i);
  }

  // 畫燈泡
  noStroke();
  for (let i = 0; i < lights.length; i++) {
    fill(lights[i].lit ? color(255, 220, 100) : color(60));
    ellipse(80 + i * 80, 200, 50, 50);
  }

  fill(200);
  textSize(12);
  textAlign(CENTER);
  text('hover 燈泡,試試把 DELAY 改成 0 或 24', 200, 360);
  textSize(10);
  text('(當前延遲:' + DELAY + ' 幀)', 200, 378);
}

試著把 DELAY = 0 會怎樣?然後 DELAY = 24(約 0.4 秒)呢?

第二:每次互動要有「未知變量」。

不是「碰了燈就亮」。

是「碰了燈亮,但亮的方式每次都不完全一樣」。

顏色?強度?閃爍頻率?總有一個元素是不確定的。

不確定性等於「還沒看見的全貌」。人天生想補完故事。

第三:讓回饋分層。

第一層:立刻出現(讓你知道「系統收到了」)
第二層:三秒後升級(讓你驚訝「還有更多」)
第三層:整個空間連動(讓你回頭看見「我的行動影響了整個房間」)

分層的回饋,會讓人想要「重新走一遍」。


結尾

下次你設計一個互動環節,在「感應到」和「給出回饋」之間——停兩秒。

問自己:「這兩秒裡,我的用戶在心裡說什麼?」

如果他們說的是「壞了吧」——需要加一個讓他們願意等下去的理由。

如果他們說的是「它在決定什麼」——這個設計在起作用了。

人想要的從來不是操作一台機器。

人想要的是——在操作的過程中,感覺到「這個空間記得我」。

當設計師學會在「感應」和「回應」之間,加上那 0.3 秒的「思考時間」——

人就不會離開了。

因為他們想看看,這次會決定什麼。