多输入现场消息传递应用程序概念 (A multi-input field messaging app concept)

Some time ago I shared in a Medium article the idea for context aware messenger app. The idea challenged the design limitation behind all messenger apps allowing you to write only one message at a time.

前段时间，我在中型文章中分享了上下文感知的Messenger应用程序的想法。这个想法挑战了所有Messenger应用程序背后的设计局限性，使您一次只能编写一条消息。

What I always missed in these apps was a way to save the message I’m currently typing and type and send something else instead. Then a way to get back to previously composed message and continue. Just to stay on topic and keep some order in my conversations.

我在这些应用程序中一直想念的是一种保存我当前正在键入的消息并键入然后发送其他内容的方法。然后是一种返回到先前编写的消息并继续的方法。只是为了保持话题性，保持对话中的秩序。

The way I do it today involves the sequence of text field related gestures: Long press, Select All, Cut, Type in, Send, Long press, Paste, continue.

我今天的操作方式涉及文本字段相关手势的顺序： 长按，全选，剪切，键入，发送，长按，粘贴，继续。

My concept allowed to replace that sequence with a single tap, but it was up to the app to recognise the need for saving a message based on the context of the conversation. I built a Quartz Composer prototype to show the feature in action:

我的概念允许一次单击即可替换该序列，但应由应用程序来确定是否需要根据对话的上下文来保存消息。我构建了一个Quartz Composer原型来展示该功能的实际效果：

But I never shared the prototype, as it wasn’t functional, allowed for only one extra input field and was done solely for the purpose of recording that video. Also Origami prototypes for Quartz Composer didn’t work very well on the device (not mentioning the absence of native keyboard).

但是我从未共享过这个原型 ，因为它没有功能，只允许一个额外的输入字段，并且仅仅是为了录制视频而完成的。同样，用于Quartz Composer的Origami原型在该设备上也无法很好地工作(更不用说缺少本机键盘了)。

Release of Origami Studio allowed me to revisit the concept and build fully functional (sort of) prototype to share.

Origami Studio的发行使我能够重新审视概念并构建功能齐全的原型(以便共享)。

I ditched the context aware part and allowed for saving as many drafts as you need, whenever you feel like it.

我放弃了上下文相关的部分，并允许在需要时保存任意数量的草稿。

这是新原型的演示视频。 (Here’s a demo video of the new prototype.)

在折纸工作室制作。 (Building in Origami Studio.)

I could write a separate article/tutorial for each of the technical challenges I encountered while building the proto, but I’ll limit myself to just briefly list some of them here. Hopefully these short descriptions will be enough to spark some ideas whenever you encounter similar blocks. If not don’t hesitate to ping me directly.

我可以为构建原型时遇到的每种技术挑战写一篇单独的文章/教程，但我会限制自己仅在此处简要列出其中一些挑战。希望这些简短的描述足以在遇到类似的问题时引发一些想法。如果不是这样，请直接与我联系。

多行输入字段。 (Multi line input field.)

Text Field component in Origami Studio doesn’t allow for multi line inputs. When you double tap on it to reveal it’s content’s you’ll find the actual Text Input component that does. The problem is it doesn’t have a cursor/caret. So hacked in a cursor by measuring the position of the last letter in the text field.

Origami Studio中的“文本字段”组件不允许多行输入。当您双击它以显示其内容时，您会发现实际的文本输入组件。问题是它没有光标/插入符号。因此，通过测量文本字段中最后一个字母的位置来侵入光标。

Each time you type a letter I check if it’s a ‘space’ and if it is I append it’s index to an Array of spaces. Then I assume that whenever height of the input increases the text will break at the last recorded space. Then I measure the rest of the text to place a cursor in a correct position of the new line. When you don’t tap the space I just measure the size of the text that fit the line.

每次输入字母时，我都会检查它是否为“空格”，是否将其索引附加到空格数组中。然后，我假设只要输入的高度增加，文本就会在最后记录的空间中断。然后，我测量其余文本，以将光标放置在新行的正确位置。当您不点击空格时，我只是测量适合该行的文本的大小。

建立对话供稿。 (Building a conversation feed.)

The challenge here was dynamically creating chat bubbles while keeping the correct order in the feed. When bot starts typing you can see the last bubble on the feed with 3 jumping dots. But if you send the message before it finishes typing your bubble should land on the feed before the bot’s bubble. I managed to make it work by keeping two arrays of messages. Temporary one (bot typing) and final and switching between them whenever bot starts typing or sends the message.

这里的挑战是如何动态创建聊天气泡，同时又要保持Feed中正确的顺序。机器人开始输入内容时，您会看到Feed上的最后一个气泡，并带有3个跳跃点。但是，如果您在结束输入消息之前就发送了消息，则气泡应在机器人气泡之前落入供稿。我设法通过保留两个消息数组来使其工作。临时一个(机器人输入)和最终输入，并在机器人开始输入或发送消息时在它们之间切换。

I created a JSON config file with the bot messages that allow you to configure what and when the bot is sending and if it should wait for your message(s) to start typing.

我使用漫游器消息创建了一个JSON配置文件，该文件可让您配置漫游器发送的内容和时间以及是否应等待您的消息开始键入。

{"message":"Ok, I'm dumb. What do you want from me?!", "waitforuser":2,"delay":1}

waitforuser — describes how many user messages should the bot wait for before it starts typing. Zero means it won’t wait for user at all.delay — time in seconds before bot starts typing.

waitforuser —描述了机器人在开始键入之前应该等待多少用户消息。零表示完全不等待用户。 delay —机器人开始键入之前的时间(以秒为单位)。

创建/删除输入字段并管理其顺序。 (Creating/removing input fields and managing their order.)

Whenever you create input field I’m increasing the count on the Loop patch, but as soon as you don’t need the field anymore I tried to remove the field from the loop and keep the other input fields keep their order and content. It was impossible for me to figure out as loop patches don’t keep the reference to the actual instance of the element they’re replicating. I worked around by hiding and reusing unused fields instead of removing them from the loop.

每当您创建输入字段时，我都会增加Loop补丁的数量，但是一旦您不再需要该字段时，我就会尝试从循环中删除该字段并保留其他输入字段的顺序和内容。我不可能弄清楚，因为循环补丁并没有保留他们复制元素的实际实例的引用 。我通过隐藏和重用未使用的字段而不是将其从循环中删除来解决。

下载！ (Downloads!)

You can download Origami prototype, JSON file as well as multiline text field component from my Google Drive.

您可以从我的Google云端硬盘下载Origami原型，JSON文件以及多行文本字段组件。

用户手册： (User’s Manual:)

Long press on Send button to save the current text and create new input field. (Yes! It’s undiscoverable. I know.)Prototype is optimised for use on the device. (You can’t hide the keyboard)

长按“发送”按钮以保存当前文本并创建新的输入字段。 (是的！这是无法发现的。我知道。)原型针对设备使用进行了优化。 (您不能隐藏键盘)

最后一分钟发现了一些有趣的事实： (Last minute discovered fun facts:)

* The prototype crashes when using emojis. ?* Multi line input field cursor can behave erratically when typing super fast (I’m sharing anyway).* When you send a message in the exact time that bot starts typing, the empty bot message can appear on the feed.* Other bug fixes and performance improvements. (What?!)

*使用表情符号时原型崩溃。 **输入超快速时多行输入字段光标的行为异常(无论如何我还是在共享)。*如果您在机器人开始键入的确切时间发送消息，则在消息源中可能会出现空的机器人消息。*其他错误修复和性能改进。 (什么？！)