具透｜「胡萝卜手指」选字难：Flyme 的 Aicy 识屏是怎么做的？

前言

虽然已经不是魅族的员工，但作为魅友，我依然持续关注着魅族的动态。前些天在小红书又刷到了关于「识屏」产品的讨论，又有魅友提到了 Flyme 的 Aicy 识屏，然后我去酷安看了一下，Aicy 识屏的评分依然很高，魅友们的认可让我感觉之前做的事很有价值。

在魅族做设计和其他公司不同，我们做设计不仅是做给魅友们，同时也是做给我们自己，因为很多人既是工程师/设计师/产品/运营……又是魅友，能够感同身受。所以与其说这是我们做的，不如说是我们与魅友们共同完成的作品。功能做得不好，魅友们会直接指出问题¹，但只要做得好，他们也会毫不吝啬地给出认可和鼓励。

简单来说，压力大但也更有成就感。

所以今天想以前魅族员工&魅友的身份跟大家分享一下，当初我们在探索 Aicy 识屏改版的过程中，所遇到的一些挑战以及背后的一些思考。

为什么要改「大爆炸」？

在改版之前，Aicy 识屏的评分其实并不算低，但是为什么要改呢？

我们反复思考用户为什么要选择文字或图片，发现其实选择并不是用户的终点，用户真正的需求是把内容分享到微信、用高德导航、在淘宝搜索……选择只是通往结果的手段。

我们希望未来的产品能把这些后续操作直接呈现给用户，让大家可以自由选择、对比和切换，而不是停留在「选中」这一步。

而原有的「大爆炸」方案已经无法满足这种更高效、更自由的体验需求，这也是我们决定重新设计 Aicy 识屏的初衷。

新版 Aicy 识屏的调整很多，比如实体标记、实体推荐、文本直选、分词、触发动画等，但最能代表我们追求的、挑战最大战、但同时也扭转了用户口碑的，是「文本直选」。这个功能的体验对标「文本大爆炸」，但在原有可见可识的基础上，加入了划选、点击选择/取消、跨选等能力。

听起来很简单，实际做起来却遇到了不少挑战，其中最显而易见的就是如何使用胡萝卜般的手指在界面上做文字操作。

用「胡萝卜一样的手指」操作

用户在首次选择的时候，因为落点都是未选择的文本块，所以在落点基本上都能够命中用户想选择的那行，真正的困难其实在复选（选中之后，差的那么 1-2 个字怎么补/删）。手机屏幕内文本的大小除了标题外，文本基本是 14-16px 大小，这个大小也基本等于可触摸的热区大小²。

在如此小的热区上，手指基本已经完全遮挡住热区了，用户基本看不到自己的落点。

如此选词在起步上就会出现错误，最开始我想着能否解决掉落点错误的问题，比如能否扩大热区，实践下来因为界面的不可控，扩大热区反而会产生热区重叠的问题；那是否可以智能预判用户的落点，选择性地扩大热区呢？这个方法也不可行，因为根本没有依据进行预测³。

既然无法提升第一个落点的准确性，那么能不能去做修复呢？

也就是当明确了用户的行为之后，通过预测用户的意图，从而调整选词规则。

具体来说：

• 当用户落点为未选择的文本块时，那么用户大概率是要选择当前以及附近的文本块。
• 当用户落点为已选择的文本块时，那么用户大概率是要取消选择当前以及附近的文本块。

从上面我们已经知道，只使用一个文本块我们无法准确判断用户的落点，也就会判断错用户的意图。于是我从落点的左右两个文本块结合起来判断。也就是落点 + 左/落点 + 右，不将落点作为唯一的预测依据，结合落点和用户的行为方向判断。

转换成「当 XXXX 且 XXXX，则 XXXX」，这样的判断规则，结合用户的行为，从而做出改变，提升选择的成功率。

具体的规则就是这样：

• 用户触摸区域为已选中的词
  • 当用户落点区域为已选择的文本块时，且滑动方向为未选中的词，那么滑动时选中
  • 当用户落点区域为已选择的文本块时，且滑动方向若为选中的词，那么滑动时取消选中
• 用户触摸区域为未选中的词：当用户落点区域为为选择的文本块时，滑动方向无论词是否选中，都响应选中

💡聪明的朋友在这里应该也发现漏洞了，在这个规则当中，多数规则都偏向了选择而不是取消，为什么呢？

第一，来源于业务倾向：我们需要保证选择的效率，努力打造一次选择就达成用户的目的，选择相较于取消选择是更高频的操作。

第二，来源于用户观察：在第一版的 demo 出来后，我们将 demo 拿给内部人员进行试用，观察大家的行为以及收集反馈，发现选择的行为是要远远大于取消选择的。

后续我们将规则进行微调再拿给大家试用，大家的反馈都是符合预期的，所以最后的规则便是如此。

最后推出市场，也没有用户反馈取消选择困难，而改成直选文本之后，也没有用户吐槽选择困难了，好评也变多了起来。

P.S. 口碑调转还有另外一个原因：我们将文本直选和大爆炸都保留了下来。这并不是拍脑袋的决策，而是我们针对不同内容选取方式的思考，在这个版本上，分词也从混乱的结构调整为跟界面一致的分段结构。

设计细节：振感与放大

振动：像触摸键盘一样熟悉

除了规则上的调整外，我们还增加了振感，每滑动一个文字就有一次短振。

振动并不是为了加而加，振动加入的好处是，当手指完全挡住文字的时候，振动可以传达给用户滑选中了几个字的确定感。就像你闭上眼睛摸你的键盘一样，每一格子代表着一个按键，如此选中几个字用户心里大概也有一个数。

选词振动并不是我们的首创，但确实在我们之后，「文本直选」识屏产品上多数都增加了振感（如华为、荣耀、OPPO），这证明我们的方向是对的。

放大选小字：不愿放弃的小场景

我在逛社区的时候发现有一些用户不理解为什么还可以放大。

这其实是我们在观察技术与用户体验后的考量：我们能够识别出小字，那为什么不能提供给用户，为什么要阉割这个能力？

我们希望，当用户想去抓取屏幕上的一些小字的时候，能够像用截图一样，自然地「放大 - 划动 - 选择」，而不是我们觉得你不会去选这个字，所以我们屏蔽掉、不给你选。这很不魅族。

所以我们不仅要做，还要做好。

一旦我们决定做这个事情，我们将面临新的问题：

• 误触 1：放大与缩小所造成的触摸事件，有可能会造成用户误选或者误取消。
• 误触 2：放大的情况下，移动屏幕有可能会造成用户误选或者误取消。

放大与缩小看似只需要判断开单指滑动和双指滑动就可以了，实际上在程序逻辑上，无法判断这个时候是单指还是双指，因为人的手不可能将两个手指同时落下。同样的，也无法判断两个手指同时抬起。所以触发事件判断为双指的话其实是在单指的规则基础上加上一些条件从而判断为双指的事件。

言归正传，我们需要更精确的判断两个手势的差异以保证用户的良好体验。所以如何去判断呢？我们先拆解一下双指的手势流程

手指落下 - 手指划动 - 手指抬起
整个流程中容易出现判断失误的地方在于手指落下和抬起的时候，这两个手势是单指变双指和双指变单指的瞬间。这个瞬间就会触发别的交互事件，我们的目标就是如何在这个时候防止误触。

而我们最终的做法是：

双指落下：单指划动距离未达到两个文本块且发现有两个触摸点时判断为双指事件

双指抬起：双指抬起后设置 200ms 真空时间，该时间内不响应任何触摸事件

以此，我们可以将双指事件与其他事件区分开，避免出现误触的情况。另外就是放大后划动的问题，放大后热区也会跟随放大。我们调整了行与行之间的热区，因此在放大的时候，行与行之间的热区也会自然放大，空白区域移动的时候就很自然不刻意。

取舍与落地：文本选择手柄的取舍

在传统的文本选择交互中，手柄能够提升选区调整的精度。我们重点考察了两个问题：一是规则优化后手柄是否还有必要保留；二是在跨选等复杂场景下，手柄会不会带来新的困扰。

• 手柄存在的必要性：经过我们的实际测试，被试都觉得图钉存在的必要性不大。
• 手柄的效果以及副作用：跨选使用图钉的效果与系统现有使用方式有巨大改变，而存在图钉会产生一系列的误导作用，图钉的精确操作的作用也已经失效。

所以在 Aicy 识屏中，我们就取消了选字手柄。

来看看落地效果

把复杂留给我们，把简单直观留给用户

这个设计在视觉与交互表面上看似简单直观，实则背后隐藏着大量规则与细节打磨。通过这些规则，让用户能够「无感」地完成操作。

魅族内部一直都有一个理念，「我们多做一些，那么用户就可以少做一些」，把简单直观留给用户，把复杂留给我们。

为什么魅族能够吸引我们，我想正是因为这样的追求和精神。虽然现在魅族风光不在，不过在魅族内部仍然有坚守着魅族和魅族精神的人存在，这些人影响着我们，也影响着不断加入魅族的新鲜血液，虽然市场的焦点早已不在手机，但仍有那么一群的人在坚持着心中热爱。

> 关注 少数派小红书，感受精彩数字生活 🍃

> 实用、好用的 正版软件，少数派为你呈现 🚀