多輸入現場消息傳遞應用程序概念 (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?!)

*使用表情符號時原型崩潰。 **輸入超快速時多行輸入字段光標的行為異常(無論如何我還是在共享)。*如果您在機器人開始鍵入的確切時間發送消息，則在消息源中可能會出現空的機器人消息。*其他錯誤修復和性能改進。 (什么？！)