手机屏幕是怎么判断你想点哪儿的？[触屏系列Vol.1]
最后更新于
最后更新于
这是与触屏交互相关的第一篇文章，我们从最简单的"点击"开始说
某个美好的时刻，你看到了这篇推送，迫不及待地点开它，然后上下滑动来阅读——但是，聪明的，你告诉我，手机的屏幕是如何定位你点击，来完成这一系列操作的呢？
屏幕首先通过电容的原理来推断大致的点击位置，再根据人们点击的行为习惯调教出精确的坐标。
触摸屏是怎么工作的
你看到的位置 并不是 你想点的位置
你点到的位置 也不是 你想点的位置
硬核时刻：几何中心=点击坐标
至少现在绝大部分手机的触屏功能，都是由一块叫做“电容屏”的玩意儿支持的。讲“电容屏”的原理需要设计到非常高深的（高中）物理知识，这里我就使用传统功夫，点到为止，粗略讲讲，保证看懂！
电容是什么？你可以理解为电容就是两块导电的板子，中间是不导电的材料。当这两块板子通过电池连接起来的时候，它们就会被电池充电。板子之间的距离不同，它们被充的电量多少也不同。
手机的屏幕也是一块电容屏：底层是一块导电的板子，上面是不导电的玻璃。当我们手指靠近直到按在屏幕上的时候，与这块板子形成了一个电容（因为人也是导电的，所以我们的手是另一块板子）。这样屏幕板子的电量就会发生变化，手机再根据电量变化的位置来推测点击的位置。
目前的触屏会有很多电容构成一个阵列，来增加检测点击的精确度。虽说如此，电容屏给手机的图像依然不够高清，比如这种：
所以你点一下屏幕，以为只是传给了手机一个点，其实是一整幅图像！手机再通过算法来推测你究竟点到了哪里——推测过程请看硬核时刻。不过，就算推测出了正确的点，那个点也不一定是你想点的位置。
我们使用手机的时候，头一般不会正对屏幕。于是屏幕的画面传到眼睛的时候，都是有一定角度而非垂直的。在点击屏幕的时候，大家会觉得手指挡住目标就算是点到了。不过如果看手机的角度比较离谱，会造成 “看起来点到了但是并没有” 的惨剧：
这种情况在你早上睡醒点闹钟的时候比较常见，或者趴在桌子上玩手机的时候。研究人员也意识到了这个问题，他们通过对点击位置增加一个偏移量（也就是把你点的位置往某个方向挪挪）来消除这种视觉错位 [2]。早期的 iPhone 也在屏幕上用到了这种解决方式，比如这张图展示的是你在按键盘的时候，手机会如何偏移你的点击（密集恐惧症者也要看哈哈哈）：
不过这种固定偏移的方式带来一个问题：你只能正着用手机打字了。因为这些偏移量都是根据大家正常使用的角度算好的，如果你把手机反过来倒着打字的话，很容易打错字（不知道最新的iPhone还是不是这样）。
OK，看的问题讲清楚了，你自信地说：“我只要每次直视屏幕就可以指哪儿点哪儿了！” 对不起，生活会再次欺骗你：就算手指真的盖住了目标，你也不一定能点上。
不要悲伤，不要哭泣——让我们看看为什么。这个问题比较微妙，因为大多数情况下，目标不会小到就算手指盖住也没被点到的程度。但是当你想点击垃圾邮件的“退订”，应用广告的X，或者小黄片的进度条的时候——问题就来了，点中它们基本上是一门玄学。
幸好有人专门研究过这个问题，来告诉我们为什么就算手指盖住目标也不一定能点到它们：关键在于你怎么点的 [4]。有个研究让一批人用不同的手指角度去点屏幕，比如用指尖，指肚，指头侧面去点同一个点，然后分析各种的角度会有怎么样的误差：
结果发现，点的姿势和角度不同，误差是不一样的！所以下次那个X一直点不到的时候，试着转转你的手指，你会发现还是点不到。
这里是硬核一点的知识，面向想要进一步了解的同学们：）
手指按下去之后，电容屏图像比较粗糙，还不足以告诉我们精确的坐标。那么手机怎么根据图像来计算点击的坐标，也就是 (x, y) 呢？答案是计算电容图像的（加权）几何中心。
不解释了，直接上例子。如图，这是一个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)，果然在两个浅绿格子间。
如此一来，你也许对最常见的动作——点击——有了更多认识。许多看似平常的交互背后都累积了无数科研打工人的心血。今天的文章就写到这里，麻烦大家退场前用手指垂直地点个赞，加深一下对知识点的理解哈（狗头。
本文引用： [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 [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/ [4] Christian Holz and Patrick Baudish: Understanding Touch, 2011
