对话先行——EHR系统的体验提升和交互实现提效

我们从PC时代，走到了Web时代，跑到了移动互联网时代，飞到了人工智能时代。
——本文作者 语

移动先行

在上一个时代，即移动互联网时代，对界面交互的设计遵循着移动先行的原则。
什么是移动先行 ?

我们以移动端产品设计为起点，抓住产品的重点，以内容为核心，做出一个精简的，主次分明的产品。
当平台扩大至桌面或其他相对高级的终端时，设计者可以借助这些增强的优势，一步步有节奏地进行扩展和填充，得出一个能给人们带来更好的用户体验的高级版本。

移动先行

从而推动了响应式界面设计。

响应式设计

此时界面设计仍然以视觉交互为主。
界面引导用户的视觉焦点进行增删查改操作。
用户是被动的。

招聘查询

报表

对话先行

得益于自然语言理解技术进步，系统能通过对话来获取用户的意图。
它能将一句话或多轮对话，转化成一个带参数的函数调用。
而对话，是一种很自然的交互方式。

旧时代，我们第一步是找功能导航和分类，进入对应系统。

新时代，我们第一步是主动说出自己的意图。

第二步，系统自解释

欢迎来到员工薪酬档案查询页面。
在该页面，你可以查询员工的薪酬档案信息。
你可以通过表单输入查询，或者通过对话输入。
对话格式参考如下：

查询信息平台事业部的员工  
查询信息平台事业部且在职的员工  

第三步，进行具体的业务操作

这里的表单和表格，是我们常见的组件。
我们无需硬编码，可以通过约定的schema配置生成。
参考schema如下：

{
     "table": {
      name: "table", // 表格名称
      jsxcolumns: [ // 列的名称
        {
          dataKey: "workNo", // 必填；列的标识，对应表格数据的key
          title: "工号",  // 必填；列标题；
          type: "string",  // 非必填；默认为"string",包含 'money', 'card', 'cnmobile', 'checkboxSelector', 'action', 'radio', 'text', 'select' 和 'custom' ; 渲染的类型
          width: 100, // 非必填；默认为100px；
        },
        {
          dataKey: "name",
          title: "姓名",
          width: 140,
        },
        {
          dataKey: "orderNum", 
          title: "任职序号",  
          type: "string", 
        },
        {
          dataKey: "type",
          title: "员工类型",
        },
        {
          dataKey: "type",
          title: "员工类型",
        },
        {
          dataKey: "dept",
          title: "BU/部门",
        },
        {
          dataKey: "location",
          title: "工作地点",
        },
        {
          dataKey: "在职状态",
          title: "status",
        },
        {
          dataKey: "level",
          title: "层级",
        },
      ],
      beforeFetch: function (data, from, Formatter) {
        data.listCond = JSON.stringify({ workNo: data.workNo });
        return data;
      }
    },
    filter: [
      {
        id: "workNo", // 必填; 唯一标识
        component: "InputFormField",  // 必填; 组件类型
        props: {
          jsxname: "workNo",
          jsxlabel: "工号",
        }
      },
      {
        id: "date",
        component: "DateFormField",
        props: {
          jsxname: "date",
          jsxlabel: "时间",
        },
        formatter: function (value, Formatter) {
          return Formatter.date(value, 'YYYY-MM-DD');
        }
      },
      ...
      {
        id: "search",
        component: "Button",
        props: {
          text: '搜索',
        },
        event: {
          type: 'onClick',
          function: 'search',
          url: "//xxx.com/queryEmpData.json",
        }
      },
      {
        id: "ButtonGroupFormField1",
        component: "ButtonGroupFormField",
      },
    ],
}

文中提及的库请回答1988的可行性demo地址：https://github.com/wushanchao/pleaseAnswer

组件schema配置器业内已有非常成熟的应用，就不放出地址。