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

移動(dòng)先行

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

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

移動(dòng)先行

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

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

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

招聘查詢

報(bào)表

對(duì)話先行

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

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

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

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

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

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

{
     "table": {
      name: "table", // 表格名稱
      jsxcolumns: [ // 列的名稱
        {
          dataKey: "workNo", // 必填；列的標(biāo)識(shí)，對(duì)應(yīng)表格數(shù)據(jù)的key
          title: "工號(hào)",  // 必填；列標(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: "任職序號(hào)",  
          type: "string", 
        },
        {
          dataKey: "type",
          title: "員工類型",
        },
        {
          dataKey: "type",
          title: "員工類型",
        },
        {
          dataKey: "dept",
          title: "BU/部門",
        },
        {
          dataKey: "location",
          title: "工作地點(diǎn)",
        },
        {
          dataKey: "在職狀態(tài)",
          title: "status",
        },
        {
          dataKey: "level",
          title: "層級(jí)",
        },
      ],
      beforeFetch: function (data, from, Formatter) {
        data.listCond = JSON.stringify({ workNo: data.workNo });
        return data;
      }
    },
    filter: [
      {
        id: "workNo", // 必填; 唯一標(biāo)識(shí)
        component: "InputFormField",  // 必填; 組件類型
        props: {
          jsxname: "workNo",
          jsxlabel: "工號(hào)",
        }
      },
      {
        id: "date",
        component: "DateFormField",
        props: {
          jsxname: "date",
          jsxlabel: "時(shí)間",
        },
        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",
      },
    ],
}

文中提及的庫(kù)請(qǐng)回答1988的可行性demo地址：https://github.com/wushanchao/pleaseAnswer

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