> For the complete documentation index, see [llms.txt](https://zhang-ming-rui.gitbook.io/when-rocket-launches/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://zhang-ming-rui.gitbook.io/when-rocket-launches/wei-xin-gong-hao-gui-dang-dai-bu-chong/ren-ji-jiao-hu-ke-pu-ji/shou-ji-ping-mu-shi-zen-me-pan-duan-ni-xiang-dian-na-er-de-chu-ping-xi-lie-vol.1.md).

# 手机屏幕是怎么判断你想点哪儿的？\[触屏系列Vol.1]

*这是与触屏交互相关的第一篇文章，我们从最简单的"点击"开始说*

某个美好的时刻，你看到了这篇推送，迫不及待地点开它，然后上下滑动来阅读——但是，聪明的，你告诉我，手机的屏幕是如何定位你点击，来完成这一系列操作的呢？

#### 一句话总结

屏幕首先通过电容的原理来推断大致的点击位置，再根据人们点击的行为习惯调教出精确的坐标。

#### 目录

* 触摸屏是怎么工作的
* 你看到的位置 并不是 你想点的位置
* 你点到的位置 也不是 你想点的位置
* 硬核时刻：几何中心=点击坐标

<br>

#### 触摸屏是怎么工作的

至少现在绝大部分手机的触屏功能，都是由一块叫做“电容屏”的玩意儿支持的。讲“电容屏”的原理需要设计到非常高深的（高中）物理知识，这里我就使用传统功夫，点到为止，粗略讲讲，保证看懂！

<br>

电容是什么？你可以理解为电容就是两块导电的板子，中间是不导电的材料。当这两块板子通过电池连接起来的时候，它们就会被电池充电。板子之间的距离不同，它们被充的电量多少也不同。

<br>

<figure><img src="https://pic1.zhimg.com/80/v2-d47f1882c332f191f7004e4a69d1cd5c_1440w.webp" alt=""><figcaption><p>俩美国队长的盾牌加上一块电池就是一个电容了，真简单</p></figcaption></figure>

手机的屏幕也是一块电容屏：​底层是一块导电的板子，上面是不导电的玻璃。​当我们手指靠近直到按在屏幕上的时候，与这块板子形成了一个电容（因为人也是导电的，所以我们的手是另一块板子）。这样屏幕板子的电量就会发生变化，手机再根据电量变化的位置来推测点击的位置。

<br>

<figure><img src="https://pic4.zhimg.com/80/v2-7ffaf1c168af2a6e01a51987972eefa7_1440w.webp" alt=""><figcaption><p>手和屏幕也组成了一个电容，手在靠近时电量会变化</p></figcaption></figure>

目前的触屏会有很多电容构成一个阵列，来增加检测点击的精确度。虽说如此，电容屏给手机的图像依然不够高清，比如这种：

<br>

<figure><img src="https://pic4.zhimg.com/80/v2-801a40624ae8e6413bbca7eca47a2fd7_1440w.webp" alt=""><figcaption><p>手指点击时电容屏显示的图像。因为每个格子太大，我们并不能直接看出到底点在了什么位置。手机处理这幅图像，然后推断出点击的坐标。 图来自 [1]</p></figcaption></figure>

所以你点一下屏幕，以为只是传给了手机一个点，其实是一整幅图像！手机再通过算法来推测你究竟点到了哪里——推测过程请看*硬核时刻*。不过，就算推测出了正确的点，那个点也不一定是你想点的位置。

<br>

<br>

#### 你看到的位置 并不是 你想点的位置

我们使用手机的时候，头一般不会正对屏幕。于是屏幕的画面传到眼睛的时候，都是有一定角度而非垂直的。在点击屏幕的时候，大家会觉得手指挡住目标就算是点到了。不过如果看手机的角度比较离谱，会造成 “看起来点到了但是并没有” 的惨剧：

<br>

<figure><img src="https://pic2.zhimg.com/80/v2-7463bcc08564ac64c77d52c538739f45_1440w.webp" alt=""><figcaption><p>由于眼睛和目标的角度较平，造成实际的手指落点比较靠下，但在眼睛看来手指确实是挡住了目标</p></figcaption></figure>

这种情况在你早上睡醒点闹钟的时候比较常见，或者趴在桌子上玩手机的时候。研究人员也意识到了这个问题，他们通过对点击位置增加一个偏移量（也就是把你点的位置往某个方向挪挪）来消除这种视觉错位 \[2]。早期的 iPhone 也在屏幕上用到了这种解决方式，比如这张图展示的是你在按键盘的时候，手机会如何偏移你的点击（密集恐惧症者也要看哈哈哈）：

<br>

<figure><img src="https://pic1.zhimg.com/80/v2-764d5c938827a8b2b2bee8559ad1634c_1440w.webp" alt="" height="103" width="496"><figcaption><p>iPhone 5 键盘第一行的点击偏移图像。绿色代表偏移很小，红色代表偏移很大。你会发现越靠中间的位置，就没什么偏移，也就是指哪儿点哪儿；但是两边的点会被朝两端偏移。因为你在看手机的时候一般眼睛对着中间，所以点两边的话手指实际落点可能偏向中间，所以需要偏移来纠正。图片来自[3]</p></figcaption></figure>

不过这种固定偏移的方式带来一个问题：你只能正着用手机打字了。因为这些偏移量都是根据大家正常使用的角度算好的，如果你把手机反过来倒着打字的话，很容易打错字（不知道最新的iPhone还是不是这样）。

<br>

<br>

#### 你点到的位置 也不是 你想点的位置

OK，看的问题讲清楚了，你自信地说：“我只要每次直视屏幕就可以指哪儿点哪儿了！” 对不起，生活会再次欺骗你：就算手指真的盖住了目标，你也不一定能点上。

不要悲伤，不要哭泣——让我们看看为什么。这个问题比较微妙，因为大多数情况下，目标不会小到就算手指盖住也没被点到的程度。但是当你想点击垃圾邮件的“退订”，应用广告的X，或者小黄片的进度条的时候——问题就来了，点中它们基本上是一门玄学。

幸好有人专门研究过这个问题，来告诉我们为什么就算手指盖住目标也不一定能点到它们：关键在于你怎么点的 \[4]。有个研究让一批人用不同的手指角度去点屏幕，比如用指尖，指肚，指头侧面去点同一个点，然后分析各种的角度会有怎么样的误差：

<br>

<figure><img src="https://pic1.zhimg.com/80/v2-2aa957edf272be790744e7d21c38df40_1440w.webp" alt=""><figcaption></figcaption></figure>

<figure><img src="https://pic2.zhimg.com/80/v2-efeb77273193117d527adbdacefd9595_1440w.webp" alt=""><figcaption><p>用各种角度的组合来点击屏幕上同一个目标。图源自[4]</p></figcaption></figure>

结果发现，点的姿势和角度不同，误差是不一样的！所以下次那个X一直点不到的时候，试着转转你的手指，你会发现还是点不到。

<br>

#### 硬核时刻：几何中心=点击坐标

这里是硬核一点的知识，面向想要进一步了解的同学们：）

手指按下去之后，电容屏图像比较粗糙，还不足以告诉我们精确的坐标。那么手机怎么根据图像来计算点击的坐标，也就是 (x, y) 呢？答案是计算电容图像的（加权）几何中心。

<br>

<figure><img src="https://pic2.zhimg.com/80/v2-632ad0e906fa25706d82d1b0c50b462d_1440w.webp" alt="" height="435" width="659"><figcaption></figcaption></figure>

不解释了，直接上例子。如图，这是一个3x3的电容图像，每个格子是一个电容返回的电量变化值，深蓝色代表没有变化，深绿色代表电量变化为1；浅绿表示电量变化了2。由于点击的时候越用力电量变化越大，可以推测点击的坐标应该在两个浅绿色格子之中。

计算点击坐标的方法，是先用每个格子电量变化的值分别和它们的 x,y 坐标相乘，求和，然后除以所有格子电量值变化的和，算出平均坐标。例如此图，假如x表示列，y表示行，那么四个角的格子(0,0),(0,2),(2,0),(2,2) 电量变化都是0，我们忽略；深绿色格子(0,1),(1,0),(1,2) 变化是1，浅绿格子(1,1),(2,1)变化是2，我们分别乘上它们的x 和 y 坐标，求和:

> x 的和 = 0∗1+1∗1+1∗1+1∗2+2∗2=8\
> y 的和 = 1∗1+0∗1+2∗1+1∗2+1∗2=7

所有格子电量值变化的和是 1+1+2+2+1=7

那么x的坐标就是 8/7=1.14，y坐标就是 7/7=1，点击坐标为 (1.14,1)，果然在两个浅绿格子间。

***

如此一来，你也许对最常见的动作——点击——有了更多认识。许多看似平常的交互背后都累积了无数科研打工人的心血。今天的文章就写到这里，麻烦大家退场前用手指垂直地点个赞，加深一下对知识点的理解哈（狗头。

<br>

> 本文引用：\
> \[1] Philip Quinn and Wenxin Feng: Sensing Force-Based Gestures on the Pixel 4, 2020 [https://ai.googleblog.com/2020/06/sensing-force-based-gestures-on-pixel-4.html](https://link.zhihu.com/?target=https%3A//ai.googleblog.com/2020/06/sensing-force-based-gestures-on-pixel-4.html)\
> \[2] Daniel Vogel and Patrick Baudisch: Shift: A Technique for Operating Pen-Based Interfaces Using Touch, 2007\
> \[3] Nick Arnott: iPhone Touchscreen Accuracy – A lesson in understanding test requirements and goals, 2013 [https://www.neglectedpotential.com/2013/10/iphone-touchscreen-accuracy/](https://link.zhihu.com/?target=https%3A//www.neglectedpotential.com/2013/10/iphone-touchscreen-accuracy/)\
> \[4] Christian Holz and Patrick Baudish: Understanding Touch, 2011


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://zhang-ming-rui.gitbook.io/when-rocket-launches/wei-xin-gong-hao-gui-dang-dai-bu-chong/ren-ji-jiao-hu-ke-pu-ji/shou-ji-ping-mu-shi-zen-me-pan-duan-ni-xiang-dian-na-er-de-chu-ping-xi-lie-vol.1.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.