1954 · 保罗·菲茨
菲茨定律
目标越小、越远，指向它就越慢。移动时间与「距离 ÷ 目标宽度」的对数成正比：
MT = a + b · log₂(2D / W + 1)
把指针在下方区域内移动，D 与 W 将被实时测量（a、b 为示意常数，取 150ms 与 120ms）。
远而小D— · W— · MT—
近而大D— · W— · MT—
一部人机对话的档案 · 自一九六三年起
界面志
一部关于「人如何与机器对话」的档案——
收录经核验的定律、原则、编年与经典模式，且本页本身就是一件可玩的交互作品。
定律
五条真实存在的人机定律，均收录于设计师 Jon Yablonski 整理的「UX 定律」合集（lawsofux.com）。它们不依靠感觉，而依靠测量——以下演示均为实时计算。
1952 · 希克与海曼
希克定律
选项越多，决策越慢——反应时间随选项数目的对数增长。选一个难度，在目标亮起后尽快点击它，测测你的反应时。
N=2：—
N=4：—
N=8：—
1956 · 乔治·米勒
米勒定律
人的短时记忆大约只能容纳 7±2 个「组块」。分组不会减少信息，却能减少组块——这就是手机号写成 3-4-3 的原因。
分组后：3 个组块（3-4-3）。未分组：12 个孤立数字。
用户的大部分时间，都花在别的网站上。—— 雅各布定律：所以你的网站，最好像他们已经熟悉的那些一样运作。
1982 · 多赫蒂与塔达尼（IBM）
多赫蒂阈值
当系统响应低于 400 毫秒，人与机器才像一个连续的对话。亲手感受两种延迟的差别。
尚未测试。
原则
两份真实的清单：一份关于「界面如何对待人」，一份关于「设计如何对待自己」。
十大可用性启发法
Jakob Nielsen 与 Rolf Molich 于 1990 年提出，Nielsen 于 1994 年精炼。点击展开。
让用户随时知道正在发生什么——本页顶部的阅读进度条即是。
说用户的语言：用了几十年的「书签」「回收站」，都来自真实世界。
误操作需要出口：可撤销、可返回，比防呆提示更让人安心。
遵循平台惯例——雅各布定律的工程化表达。
好的界面在错误发生之前就拦住它，而不是事后道歉。
让选项可见，别强迫用户记住上一屏的内容。
新手有向导，熟手有捷径：快捷键、手势与自定义。
每一处多余的信息，都会稀释真正重要的信息。
错误信息要说人话：出了什么问题、为什么、下一步怎么办。
好的系统极少需要文档；需要时，它应当就在答案附近。
好设计十原则
Dieter Rams 于二十世纪七八十年代为 Braun 提出并系统阐述。
- 01好设计是创新的
- 02好设计让产品有用
- 03好设计是美的
- 04好设计让产品易懂
- 05好设计是克制的
- 06好设计是诚实的
- 07好设计是经久的
- 08好设计注重每个细节
- 09好设计是环保的
- 10好设计是尽可能少的设计
——第 10 条是 Rams 的底色，也是本页的设计约束：能删掉的装饰，都删掉了。
编年
九个真实的时间节点：从一支光笔到一次触控，人机对话的距离被一步步缩短。
-
1963
Sketchpad
Ivan Sutherland 在麻省理工学院完成《Sketchpad》：用光笔直接在屏幕上绘图，被视为第一个交互式图形系统。
phoenix.goucher.edu -
1964
第一只鼠标
Douglas Engelbart 发明第一只计算机鼠标（1967 年制成原型，1970 年获得专利）。手掌大小，从此改变指向的方式。
scribd.com · slideshare.net -
1968
所有演示之母
Engelbart 在旧金山进行长达 90 分钟的现场演示——鼠标、超文本、屏幕共享同台亮相，史称「The Mother of All Demos」。
studies.helsinki.fi -
1973
Xerox Alto
施乐帕克（Xerox PARC）研制 Alto：首台配备鼠标与位图显示的个人工作站，图形界面的雏形在此成形。
scribd.com -
1981
Xerox Star 与汉堡图标
设计师 Norm Cox 为 Xerox Star 绘制了三条线的「汉堡菜单」图标——它在四十年后成为全球最通用的界面符号之一。
brisray.com -
1984
Apple Macintosh
键盘、鼠标与 9 英寸小屏的组合进入寻常桌面。它用的并非全新发明，却把既有想法做得足够好。
studies.helsinki.fi · timetoast.com -
2007
多点触控到来
1 月 9 日 Macworld 发布会，Steve Jobs 发布初代 iPhone：捏合缩放、滑动翻页，物理键盘让位于一块玻璃。
devthrottle.com · viejo.esmic.edu.co -
2009
下拉刷新
Loren Brichter 为 Twitter 客户端 Tweetie 发明下拉刷新手势，随后被 Facebook、Path、Pinterest 等广泛效仿，成为移动时代的通用语言。
figma.com · en.wikipedia.org · macstories.net -
2014
Material Design
Google I/O 发布设计语言 Material Design：卡片、层级与「海拔」体系，统一了Android 的软件与硬件体验。
9to5google.com · github.com
模式
每一种熟悉的操作，都有一个真实的来历。以下演示皆可上手。
模式 A
下拉刷新
Loren Brichter · Tweetie · 2009
↓ 下拉刷新
- 1963Sketchpad
- 1968所有演示之母
- 1981Xerox Star 汉堡图标
- 2007iPhone 多点触控
- 2014Material Design
按住列表向下拖动，越过虚线后松手。它原本只是 Brichter 为解决布局问题想出的小技巧，如今是最常被效仿的移动手势之一。
模式 B
无限滚动
Aza Raskin · 约 2006
滚动左侧信息流，体会「永远刷不到底」。发明者 Aza Raskin 后来公开表示后悔，称其消耗了数亿小时的人类注意力。
模式 C
汉堡菜单
Norm Cox · Xerox Star · 1981
点按右上角图标
一个被画了三条线的「菜单」。Cox 本意是低调的功能入口，它却成为最具辨识度的界面符号之一。
模式 D
微交互的解剖
Dan Saffer · O'Reilly · 2013
- 与上方按钮互动，这里会记录它的结构。
触发器悬停与点击
规则按下再松手
反馈波纹与计数
循环记住每一次
萨弗提出：一个微交互由触发器、规则、反馈与循环构成。试着悬停与点击上方按钮。
实验室
本页关于交互的最终主张，是让你亲手试。十六件组件，全部真实可玩——每件都标注了它的类别与玩法。
磁性按钮
指针靠近时按钮被「吸」向指针，离开后弹回。Fitts 定律的温柔版本。
弹簧开关
overshoot 缓动让拇指感到「过一点点再回来」的物理质感。
长按进度
用持续时间代替确认弹窗：环形进度读满即完成，松手即取消。
刻度滑块
把连续值量化为离散档位，滑到档位时轻微顿挫——像相机的档位感。
倾斜我
3D 倾斜卡
指针位置被映射为 rotateX / rotateY，卡片作出「有厚度」的回应。
涟漪按钮
Material Design 的经典反馈：从按压点扩散的圆，告诉用户「指令已收到」。
墨迹画板
写一个字试试：运笔越快墨迹越细，笔迹之下还有一层慢慢洇开的淡墨。
橡皮筋
拖走那个点，皮筋会被拉细；松手后它带着惯性荡回原位，像真的橡皮筋。
滑动扔卡
把卡片向右滑「存入」、向左滑「略过」——越用力飞得越远，飞完自动补上。
长按呼出
按住圆钮半秒，环形菜单在拇指周围绽开——不必把手挪到屏幕角落。
01菲茨定律
02希克定律
03米勒定律
04多赫蒂阈值
拖拽排序
按住任意一条拖动，其余的自动让位——最经典的直接操纵。
等待的三段式
骨架屏占位 → 旋转进行 → 完成打勾。好的等待，是被设计过的等待。
表单微动效
浮动标签、实时字数、错误抖动与成功着色——最日常的微交互，也最见功力。
键盘暮光
敲你的物理键盘，屏幕上的键帽随之点亮；手机上也可以直接点按。
弹珠物理
在盒子里点一下落一颗弹珠：重力、弹壁与互相碰撞，全部实时计算。
玻璃体
玻璃体
一枚可拖拽的三维玻璃多面体：拖动让它旋转，松手后带着惯性继续转，内部折射着背景的极光。
尾注
本页所有史实与原则均经真实资料核验，未使用任何虚构素材。以下为主要来源（检索日期 2026-10-06）。
来源索引
- lawsofux.com · jonyablonski.comUX 定律合集的收录与介绍
- fastcompany.com雅各布定律 / 希克定律的表述（2018）
- scapps.org · perso.telecom-paristech.frFitts (1954) 原始研究的学术讨论
- web-archive.southampton.ac.ukMiller (1956)《神奇的数字 7±2》
- link.springer.com · scribd.comHick (1952) 与 Hyman (1953) 反应时实验
- linkedin.com · shopify.com · uxmagic.aiDoherty & Thadani (1982) 400ms 阈值研究
- equinetacademy.com · vocal.mediaNielsen 启发法的 1990/1994 沿革与条目
- designmuseum.org · designmanifestos.orgRams 十项好设计原则全文
- phoenix.goucher.edu · studies.helsinki.fiSketchpad / 演示之母 / Macintosh 史实
- scribd.com · slideshare.net鼠标发明（1964/1967/1970）与 Xerox Alto（1973）
- brisray.comNorm Cox 与汉堡菜单图标（1981）
- devthrottle.com · viejo.esmic.edu.co2007-01-09 iPhone 多点触控发布
- figma.com · en.wikipedia.org · macstories.net下拉刷新：Loren Brichter / Tweetie（2009）
- letters.byburk.net · podcasts.apple.com无限滚动发明者 Aza Raskin 的反思
- oreilly.com · dl.acm.orgDan Saffer《Microinteractions》（2013）结构框架
- 9to5google.com · github.com · aitimeline.inMaterial Design 发布于 Google I/O 2014
制作说明
- 纯 HTML / CSS / JavaScript；三维部分所用 three.js 已本地打包（约 600KB），全程零网络请求，可离线渲染。
- 仅使用系统字体栈：衬线作标题，黑体作正文，等宽作编号——让排版自己负责气质。
- 定律演示中的 D、W、反应时、延迟等数值均为真实测量；仅 Fitts 公式中的 a、b 常数取示意值并已标注。
- 本次会话图片检索服务不可用，故不采用任何照片，改以排版与真实可交互组件承载视觉——宁缺毋假。
- 支持明暗双主题（右上角切换）、深浅色下的对比度均经过考量；尊重系统的减弱动态偏好。
读到此处，请落一方印。