魅族智能 - Aicy 识屏(Flyme 10)

魅族智能 - Aicy 识屏(Flyme 10)

魅族智能 - Aicy 识屏(Flyme 10)

公司

魅族 Flyme 10

项目时长

5 周

项目类型

移动端、智能化设计

公司

魅族 Flyme 10

项目时长

5 周

项目类型

移动端、智能化设计

公司

魅族 Flyme 10

项目时长

5 周

项目类型

移动端、智能化设计

公司

魅族 Flyme 10

项目时长

5 周

项目类型

移动端、智能化设计

目前市面上仅有魅族一家用了如此的交互方式。我们做到了文本直选,达到了文本大爆炸 80%的选取效果又保留了原文本直观的显示,整体文本选取体验要比传统大爆炸更好。 另外我们并没有放弃掉小字,通过更细致的规则规避放大缩小时产生的误触,从而保证用户在进行选取的一系列动作时,更自然流畅,符合预期。 那么我们在文本直选有什么问题,以及我们如何解决的呢?今天给大家分享一下。

做文本直选会带来什么问题?

文本直选这个功能对标的是传统的文本大爆炸,也就是在现有可见可识的效果下,加入大爆炸的划选、点击选择、点击取消、跨选的功能。

说起来简单,那么加入这些功能之后我们会遇到什么问题呢?
  1. 在如此小的地方如何解决胡萝卜般的手指选择呢?

  2. 太小的字要放弃掉吗?

  3. 是否要保留图钉?

接下里我会给讲述我们的思考和解决方案。

  1. 在如此小的地方如何解决胡萝卜般的手指选择呢?

文本选择在首次选择的时候,因为落点都是未选择的文本块,所以在落点基本上都能够选择用户想选择的那行,而真正的困难其实是在复选。 手机屏幕内文本的大小除了标题外,文本基本就是 14-16px 大小,这个大小就基本确定了手指触摸的热区大小。

在如此小的热区上,人的手指基本已经完全遮挡住热区了,带来的问题就是用户找不到自己的落点在哪,如下图

如果说蓝色是用户理想的落点,而红色很有可能是用户的实际落点。如此选词在起步上就会已经错误,后来我想着能否解决掉落点错误的问题,是否能够扩大热区呢?现在热区已经是最大了,不然就会产生热区重叠的问题。

那么是否可以智能预判用户的落地,选择性的扩大热区呢?这个方法也不可能,这个根本没有依据进行预测。

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

也就是当我明确了用户的行为之后,我通过预测用户的意图到底是选择还是取消,从而调整选择的词。 具体来说就是当用户落点为未选择的文本块时,那么用户必然是要选择当前以及附近的文本块。 如果用户落点为已选择的文本块时,那么用户必然是要取消选择当前以及附近的文本块的,用户的意图非常好判断。

但是从上面我们已经知道,只使用一个文本块我们无法准确判断用户的落点,也就会判断错用户的意图。

于是我从落点的左右两个文本块结合起来判断。也就是落点+左/落点+右,不将落点作为唯一的预测依据,结合落点和用户的行为方向进行判断。

  • 如果用户落点是未选择的文本块,而划选方向也是未选择的文本块,那么可以预测用户意图是要进行选择文本,那么将这次用户的划选行为判断为选择。

  • 如果用户落点是未选择的文本块,而划选的方向是已选择的文本块,那么预测用户意图是选择文本,那么会将本次行为判断为选择。

  • 如果用户落点是选择的文本块,而划选的方向不是选择的文本块,预测用户的意图是选择文本,本次行为判断为选择。

  • 如果用户落点是选择的文本块,而划选的方向也是选择的文本块,那么预测用户的意图是取消选择,本次行为判断为取消选择。



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

具体的规则就是这样

  • 当用户落点区域为已选择的文本块时,且滑动方向为未选中的词,那么滑动时选中

  • 当用户落点区域为已选择的文本块时,且滑动方向若为选中的词,那么滑动时取消选中

  • 当用户落点区域为为选择的文本块时,滑动方向无论词是否选中,都响应选中

💡聪明的朋友就发现漏洞了,在这个规则当中,多数规则都偏向了选择而不是取消,为什么呢? 我们需要保证选择的效率,努力打造一次选择就符合用户预测的目标,选择相较于取消选择是更高频的操作。

当然这些也不完全能够帮助我们立得住这个脚,所以在开发出 demo 版本后,我们将 demo 拿给内部人员进行试用,观察大家的行为以及收集反馈,发现选择的行为是要远远大于取消选择的. 后续我们将规则进行微调再拿给大家试用,大家的反馈都是符合预期的,所以最后的规则便是如此。

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


  1. 太小的字要不要放弃?

正常的字体已经非常小了,那么小的字我们是否要舍弃呢? 如果不舍弃那么小的字根本不可能正常的选取,而且我们一度认为小字就应该放弃,或者让用户去使用大爆炸。但是这不魅族!如果在这种状态下可以放大选取的话,那么体验会更上一个层次。所以一旦我们决定做这个事情,我们将面临新的问题。

  • 问题一:放大与缩小所造成的触摸事件,有可能会造成用户误选或者误取消。

  • 问题二:放大的情况下,移动屏幕有可能会造成用户误选或者误取消。

其实也是解决误触的问题。

放大与缩小:用户在执行这两个操作的时候,一定不会想选择或者取消选择。

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

言归正传,我们需要更精确的判断两个手势的差异以保证用户的良好体验。所以如何去判断呢?

我们先拆解一下双指的手势流程【手指落下-手指划动-手指抬起

手指划动是没有问题的,一旦进入双指的手势事件当中就很好判断了,容易出现判断失误的地方在于手指落下和抬起的时候,这两个手势是单指变双指和双指变单指的瞬间。这个瞬间就会触发别的交互事件,我们的目标就是如何在这个时候防止误触。

我们的做法是

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

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

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



  1. 要不要保留图钉

图钉的好处是可以让用户更精确的操作选择的文本。 首先我们考虑在经过进一步选取规则的调整之后,图钉的存在是否有必要,其次是考虑跨选使用图钉的效果以及副作用。

图钉存在的必要性:经过我们的实际测试,被试都觉得图钉存在的必要性不大。

图钉的效果以及副作用:跨选使用图钉的效果与系统现有使用方式有巨大改变,而存在图钉会产生一系列的误导作用,图钉的精确操作的作用也已经失效。

所以在 Aicy 识屏中,我们就没有采用图钉。

© 与有意思的人,做有意义的事儿.

Design by

LIGO

© 与有意思的人,做有意义的事儿.

Design by

LIGO

© 与有意思的人,做有意义的事儿.

Design by

LIGO