我們從PC時代，走到了Web時代，跑到了移動互聯(lián)網(wǎng)時代，飛到了人工智能時代。
——本文作者 語

移動先行

在上一個時代，即移動互聯(lián)網(wǎng)時代，對界面交互的設(shè)計遵循著移動先行的原則。
什么是移動先行 ?

我們以移動端產(chǎn)品設(shè)計為起點，抓住產(chǎn)品的重點，以內(nèi)容為核心，做出一個精簡的，主次分明的產(chǎn)品。
當(dāng)平臺擴大至桌面或其他相對高級的終端時，設(shè)計者可以借助這些增強的優(yōu)勢，一步步有節(jié)奏地進行擴展和填充，得出一個能給人們帶來更好的用戶體驗的高級版本。

移動先行

從而推動了響應(yīng)式界面設(shè)計。

響應(yīng)式設(shè)計

此時界面設(shè)計仍然以視覺交互為主。
界面引導(dǎo)用戶的視覺焦點進行增刪查改操作。
用戶是被動的。

招聘查詢

報表

對話先行

得益于自然語言理解技術(shù)進步，系統(tǒng)能通過對話來獲取用戶的意圖。
它能將一句話或多輪對話，轉(zhuǎn)化成一個帶參數(shù)的函數(shù)調(diào)用。
而對話，是一種很自然的交互方式。

舊時代，我們第一步是找功能導(dǎo)航和分類，進入對應(yīng)系統(tǒng)。

第二步，系統(tǒng)自解釋

查詢信息平臺事業(yè)部的員工  
查詢信息平臺事業(yè)部且在職的員工  

第三步，進行具體的業(yè)務(wù)操作

這里的表單和表格，是我們常見的組件。
我們無需硬編碼，可以通過約定的schema配置生成。
參考schema如下：

{
     "table": {
      name: "table", // 表格名稱
      jsxcolumns: [ // 列的名稱
        {
          dataKey: "workNo", // 必填；列的標(biāo)識，對應(yīng)表格數(shù)據(jù)的key
          title: "工號",  // 必填；列標(biāo)題；
          type: "string",  // 非必填；默認(rèn)為"string",包含 'money', 'card', 'cnmobile', 'checkboxSelector', 'action', 'radio', 'text', 'select' 和 'custom' ; 渲染的類型
          width: 100, // 非必填；默認(rèn)為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: "在職狀態(tài)",
          title: "status",
        },
        {
          dataKey: "level",
          title: "層級",
        },
      ],
      beforeFetch: function (data, from, Formatter) {
        data.listCond = JSON.stringify({ workNo: data.workNo });
        return data;
      }
    },
    filter: [
      {
        id: "workNo", // 必填; 唯一標(biāo)識
        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: "http://xxx.com/queryEmpData.json",
        }
      },
      {
        id: "ButtonGroupFormField1",
        component: "ButtonGroupFormField",
      },
    ],
}

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

組件schema配置器業(yè)內(nèi)已有非常成熟的應(yīng)用，就不放出地址。