移动端输入体验

聊到编辑(或者说输入),总有人会把「排版」带入到这个场景中。

可能从小就被学校的老师教育说,「写作文的时候,想清楚再动笔,不要把版面画得乱七八糟了,老师都没有耐心看了」。由此给我们留下了一个根深蒂固的印象,那就是输入= 写作 + 排版

在以纸笔为主要输入和呈现方式的学生时代,我认为这种做法是没有问题的,因为我们在试卷上只有一次书写的机会,错了很难去修改,于是会尽量兼顾版面和内容。

但在工作以后,我们的输入和呈现方式由纸笔变成了键盘和屏幕。书写环境的变化了,但是输入的习惯却没有变化。大家依然还是会将「输入」和「排版」这两件事情并行起来。让整个输入体验变得异常糟糕,他们的大致工作流程是:

  • 打一段话,调整格式;
  • 打一段话,调整格式;
  • …….

如此往复,行文的思路早在这频繁的格式调整中被打乱,很难写出什么像样的文章了,当然,也就不用再谈「输入体验」这个词了。

我也算是个一个小作者吧(写自己博客,运营自己的公众号),从大学时代开始,我便不再会像上述的写作者一样。我会将「输入」和「排版」分开来。

Word

我的很多同事,提到写东西,不管写什么,第一想到的就是 Word 这样的工具。Word 这款工具于我而言,功能太重、面板上的功能键太多,总是会让我想着,这句话我是不是该居中?我这段话没有缩进……..说白了,它最大的问题就是在视觉层面给使用者带来太多的心理压力,导致写作的注意力从「输入」变成了「排版」,最后的结果可想而知。

直到后来发现了 Markdown ,才真正体验到手不用离开键盘的输入快感。

Markdown 学习成本不高,最多半小时就能学会,它最大的一个好处是:「能够让我在写作的过程中就完成排版」。

移动端的输入体验

移动端的工具类应用受制于屏幕大小,所以它在交互方式上与桌面端的产品有较大的差异。在桌面端的输入方式是通过键盘,移动端是液晶屏幕上的虚拟键(暂不考虑语音输入),但这两种方式都是围绕着一个词在培养用户习惯,那就是「肌肉记忆」。

在我看来,移动端的输入体验一定要满足以下几个要求,才算得上是可用:

  1. 不要用中断输入连贯性的交互;
  2. 不要使用位置不确定的工具栏(例如滑动式工具栏);
  3. 不要功能堆砌;
  4. 移动端不是桌面端的延续(这一点后面单独讲)

就目前来说,我认为移动端的笔记类 app 都或多或少存在影响输入体验的行为,以 Bear 为例(没有 iPad Pro 不清楚它在 iPad 的体验,这里仅以 iPhone 为参考),列举一下上述观点中的例子:

插入标题会出现弹窗,收起键盘,打断输入过程,关闭弹窗后键盘不会再弹起;
Bearapp

采用了滑动式工具栏,用户的焦点容易丢失,无法形成肌肉记忆;(对平板用户的影响可能比较小)
Bearapp

工具栏功能太多(总共 30 个),不看数据也知道,后面的功能几乎不会有人有用;

这里想引用一下我在几个月以前吐槽 Bear 时候的一句话:

Bear 现在已经具备了成为一个优秀的收集工具潜质,如果能有更多的收集场景的话可能更好(当然,官方可能还是想把它做成一个编辑器),但在输入体验上和 Ulysses 的差距还是差了不少。有一点不得不说,Bear 的设计比 Ulysses 好看,如果以「颜值即正义」作为评判标准的话,它确实是一个好工具。

其实在聊这些功能面板布局的时候,我觉得在生活中的一个物品很值得大家去关注一下,那就是计算器。
计算器

计算器的布局一般是在左下角有 11 个主要的输入键,在它们的右侧和上方分别布置着运算符号和一些其它的功能键(以放射状排列)。

熟练的会计在使用计算器的时候,基本上是不需要看键位就能去计算想要的数据。原因是这些按键他都能够烂熟于心,形成肌肉记忆的好处是,不管怎样,我手碰到计算器,我就知道这几个键在哪里。

这个道理其实和使用键盘一个道理。打字慢的原因是什么?我觉得就是键盘不熟。

移动端工具产品的面板布局,也可以参考这样的方式,以放射状的形式去排列,将使用频率高的功能键放在离大拇指近的区域,使用屏幕低的键放在离大拇指远的区域。

移动端不应该是桌面端的附庸

上面提到不应该在移动端堆砌功能。

众所周知,Word 这样的工具一打开,除了编辑区,其它地方几乎全是功能键,虽然这些年在界面上花了点功夫,但依然非常臃肿。这里,想让大家想一想,你们平时在使用这样工具的移动端时更多的用来做什么?

我猜大多数的场景是「看」,其次才是「修改」。更多时候,「看」这个动作可能是在微信里面有完成了,真正需要去编辑的地方实际上很少。所以,这里又有一个问题了,对于这些产品的移动端来说,真的需要百分百复刻吗?显然并并不需要。

如果让我用移动端的 Word 去排版,那我很可能会砸手机+爆粗口。

我是一个做思维导图工具的产品经理,其实我也一直在探索移动端产品的输入体验。屏幕尺寸这一个物理因素真的在交互设计上起到了非常重要的作用。

拿 XMind 举例,思维导图的输入方式是文字+图中元素(布局结构)组成的特殊的存在。桌面端的输入就能够在图上进行,由于屏幕够大,保证图中元素不变的情况下,变换输入焦点就可以很顺畅的输入了,但是对于移动端来说,不仅是需要不停拖动(图中元素移动了),输入焦点也在变化,这对于整个输入体验就产生了一些影响。
XMind思维导图
与此同时,由于目前思维导图的布局和结构方式还是以左右或者顺逆时针为主,所以这样的结构在移动端也会间接增加焦点和元素移动的可能性。从而提高了编辑的难度。

在移动端不管是写点什么,我们其实更加适应在一块屏幕下进行,也就是文本状态下进行输入。后来我发现,Markdown 实际上可以与思维导图相结合,将 Markdown 的标记语言与思维导图的对应元素一一匹配以后,通过解析能让内容在两种状态下进行互相转换。(iOS 版 XMind 已经可以实现转换)

当然,Markdown 是我的一个切入点,也是一个开始,后面可能还会考虑为不会 Markdown 的用户提供例如简单缩进、有序无序列表等这样的简单功能来实现快速录入。

你看,思维导图,也不一定全是图嘛!它也是有文字的呀。

这样就能够一定程度上解决输入体验差的问题了,并且也回到了我的主题,「输入」和「排版」不是一回事