一个可以把web表单变成会话形式的开源框架

我们需要一种方式将web表单转换为会话,但是找不到任何合适的解决方案。所以我们决定建立一个我们自己的开源框架。Conversational Form可以将web表单转换为会话,使开发人员和设计人员能够以更具吸引力和更像会话的方式与用户互动。

去Github上查看演示

在过去几个月里,我们一直将会话接口视为下一个重大革命,不断询问自己“设计是如何被我们看不到的东西所转变的”,并研究不同国家如何处理消息传递。现在,我们想要通过一些实验来采取进一步行动。

我们首先问自己:今天的哪些接口可能会被明天的会话接口替代?

Web表单

我们每天都与接口交互 —— 从ATM的现金提取到电梯里的楼层按钮。然而,与接口最常见的交互之一就发生在你浏览互联网并填写web表单时。

一个web表单(webform, web form 或者HTML form)可以将用户输入的数据发送到服务器进行处理。因为互联网用户使用复选框、单选按钮或文本字段填写表格,所以web表单的形式类似文件或数据库。例如,表单可以用于输入航运或信用卡资料以订购产品,或者可以用于从搜索引擎中检索数据。—— 维基百科

无聊的web表单

基本上,web表单是一种与web服务器交换信息的方式。无论你是搜索内容还是登录到电子邮件帐户或Facebook页面,都在使用简单的web表单进行交互。这些都是从互联网诞生以来就有的。毫无疑问,你每天都在网络上与至少一个表单打过交道。

在我们看来,是时候该有人来改进一下它们了。  

介绍

我们相信我们可以做得比我们今天在网上见到的形式更好。因此,我们决定构建一个开源框架,将web表单转换为会话,从而使开发和设计人员能够以更具吸引力和更像会话的方式与用户互动。

开始

开始很简单。先把这段代码放到脚本里:

 

然后将它自动初始化:

或者手动初始化:

new cf.ConversationalForm({
  formEl: 
});

Or via jQuery…

或者通过jQuery初始化:

$("form").conversationalForm();

当当当——你的表单现在变成会话了。

个性化

我们增加了几种将会话设置得更个性化的方式。最简单的一种方式就是给机器人或者人设置自定义图片:

new cf.ConversationalForm({
  formEl: ,
  userImage: "http://example.com/user.png"
});

人类之所以为人的一个特征就是多样性,所以我们提供了一种简单的方法来给会话增加变化(变体)。只需使用cf-questions标签,并用管道符号("|")分隔每个变体,比如这个:  

最后一个选项是使用前面的答案进行回答:

让我们知道你是怎么想的!

Conversational Form是从一个叫做你说的是人话吗?(Do you speak human?)的试验开始的,这是SPACE10实验室对会话界面和人工智能的未来的一个探索。

给我们发邮件:daniel@space10.io 或者来Twitter上找我们。我们等不及要跟你聊聊了!  

Conversational Form是由SPACE10提出的概念。它由Felix Nielsen,RWATGG带入现实生活,由Charlie Isslander设计。

感谢Daniel Friis。

原文发布时间为:2017-5-09

时间: 2024-11-08 21:03:43

一个可以把web表单变成会话形式的开源框架的相关文章

一个非常强大完整的web表单验证程序

web|表单验证|程序 表单的验证一直是网页设计者头痛的问题,表单验证类 Validator就是为解决这个问题而写的,旨在使设计者从纷繁复杂的表单验证中解放出来,把精力集中于网页的设计和功能上的改进上. Validator是基于javascript技术的伪静态类和对象的自定义属性,可以对网页中的表单项输入进行相应的验证,允许同一页面中同时验证多个表单,熟悉接口之后也可以对特定的表单项甚至仅仅是某个字符串进行验证.因为是伪静态类,所以在调用时不需要实例化,直接以"类名+.语法+属性或方法名&quo

WEB表单设计

设计师不再只是为互联网创造漂亮美观的图形那么简单了,作为一个WEB设计师,我们还需要考虑一些其他的问题,比如用户体验,算法,代码等等.如今用户体验设计越来越重要,对于WEB表单的设计尤其如此. WEB表单设计的目标是设计出一套让用户能够从填表到点击提交按钮的最简单的流程.这个过程中不需要太多的炫目效果,虽然jQuery的表单插件一直都很受欢迎.在这片文章中我们只关注于表单的用户体验和交互过程.这里的概念也能够有效的帮助你减少用户在填表过程中的挫折感. 保持醒目和简洁 我听过不计其数的用户抱怨注册

聊聊打造优质WEB表单的9个方法

  这篇文章算是笔者交的一份读书笔记,与 CRM 系统打交道了这么久,表单天天见.如果表单有感情的话,我猜它应该都不想再看见我了.也是有缘,老板推荐了一本表单设计的书--<Web Form Design – Filling the blanks>by Luke Wroblewski,得此书如获至宝.该书对表单描述详尽,案例充分,解决了许多笔者多年未解决的问题.接下来进入正题,我们来聊一聊如何打造优质 Web 表单.黑喂狗! 1. 标签推荐使用右对齐方式 (图示1:淘宝网注册页面) 马泰奥·彭佐

Web表单设计:表单结构

你是否曾为表单设计感到过沮丧或不知所措呢?接下来三篇文章,希望能彻底改变你的看法,真正爱上Web表单设计.首先感谢Luke Wroblewski的帮助,让我有机会细心品味设计表单的乐趣.总体来说,Web表单主宰着结算.注册和数据输入.每天eBay.Taobao上的大量物品主要通过出售物品(Sell Your Item)表单售出:MySpace.Facebook等超过几亿的用户都是通过Web表单加入网站社区的:YouTube.Youku通过上传视频(Upload Your Video)表单收集了大

创造更好的WEB表单:良好的用户体验设计原则和范例

文章描述:现在的WEB设计出现了许多新的设计趋势.最新的CSS3正在越来越多的被设计师们所采用,表单设计也不例外的需要设计师们投入更多的关注和思考. 设计师不再只是为互联网创造漂亮美观的图形那么简单了,作为一个WEB设计师,我们还需要考虑一些其他的问题,比如用户体验,算法,代码等等.如今用户体验设计越来越重要,对于WEB表单的设计尤其如此. WEB表单设计的目标是设计出一套让用户能够从填表到点击提交按钮的最简单的流程.这个过程中不需要太多的炫目效果,虽然jQuery的表单插件一直都很受欢迎.在这

学习网页制作之浅议 Web 表单设计

web|设计|网页 "输入框( Input )应当符合逻辑地划分为小组,这样大脑就可以很好的处理大堆区域间的关系."– <HTML权威指南> Web 应用程序总是利用表单来处理数据录入和配置,但并不是所有的表单都保持一致.输入区域的对齐方式,各自的标签(label),操作方式,以及周围的视觉元素都会或多或少影响用户的行为. 表单布局 考虑到用户完成表单填写的时间应当尽可能的短,并且收集的数据都是用户所熟悉的(比如姓名.地址.付费信息等),垂直对齐的标签和输入框可以说是最佳的

以用户为中心的WEB表单

随着网络的发展,人们通过各种方式使用它.今天,网络购物,跟朋友或者不认识的人聊天,管理银行账户,以及一些日常应用,共享照片或视频,等等.事实上,只要能在线使用的应用基本上都已经有了. 虽然这些多样化的应用丰富了互联网,但这些任务的完成还需要一些步骤.不管是在线交易验证.评论新文章,还是管理某个应用,WEB表单总会出现在人们的视线中. 为什么是WEB表单? 在网页上,WEB表单把用户.信息.WEB产品或者服务连接了起来.它们能促进销售.捕捉用户行为.建立沟通与交流,以及更多.这些重要的交互不仅仅是

7个方法帮你全面提升WEB表单填写体验

  如果网站是一座小院儿,注册登录页就是那扇大门,用户是走是留很大程度就取决于那道门槛的设计,今天腾讯的同学总结了7个实用的方法,能有效帮助用户提升表单填写的整体体验,宾客临门还是门可罗雀?就看这篇了. 我们几乎每天都会接触形形色色的表单,登录账号.填写信息以获取服务.发布内容等.然而填写表单的过程往往不是特别愉悦的,我们需要消耗时间输入信息,点击提交,可能还需要等待审核;尤其是碰到较为复杂.流程长的表单,如果用户体验较差,很容易让人产生挫败感,在中途选择放弃. 那么,如何提高用户填写表单的效率

Python的Flask框架中web表单的教程

  下面为你介绍了Python的Flask框架中web表单的教程,表单是学习各个web框架中的基础知识,需要的朋友可以参考下 概要 在前面章节我们为主页定义了一个简单的模板,部分尚未实现的模块如用户或帖子等使用模拟的对象作为临时占位. 本章我们将看到如何利用web表单填补这些空白. web表单是web应用中最基本的构建要素,我们将通过表单来实现用户发帖和应用登录功能. 完成本章内容你需要基于前面章节完成的微博应用代码,请确认这些代码已安装并能正常运行. 配置 Flask-WTF是WTForms项