我們從PC時代才睹，走到了Web時代，跑到了移動互聯(lián)網(wǎng)時代甘邀，飛到了人工智能時代琅攘。
——本文作者 語
移動先行
在上一個時代，即移動互聯(lián)網(wǎng)時代松邪，對界面交互的設(shè)計遵循著移動先行的原則坞琴。
什么是移動先行 ?
我們以移動端產(chǎn)品設(shè)計為起點(diǎn)，抓住產(chǎn)品的重點(diǎn)逗抑，以內(nèi)容為核心剧辐，做出一個精簡的，主次分明的產(chǎn)品锋八。
當(dāng)平臺擴(kuò)大至桌面或其他相對高級的終端時浙于，設(shè)計者可以借助這些增強(qiáng)的優(yōu)勢，一步步有節(jié)奏地進(jìn)行擴(kuò)展和填充挟纱，得出一個能給人們帶來更好的用戶體驗(yàn)的高級版本。
移動先行
從而推動了響應(yīng)式界面設(shè)計腐宋。
響應(yīng)式設(shè)計
此時界面設(shè)計仍然以視覺交互為主紊服。
界面引導(dǎo)用戶的視覺焦點(diǎn)進(jìn)行增刪查改操作檀轨。
用戶是被動的。
招聘查詢
報表
對話先行
得益于自然語言理解技術(shù)進(jìn)步欺嗤，系統(tǒng)能通過對話來獲取用戶的意圖参萄。
它能將一句話或多輪對話，轉(zhuǎn)化成一個帶參數(shù)的函數(shù)調(diào)用煎饼。
而對話讹挎，是一種很自然的交互方式。
舊時代吆玖，我們第一步是找功能導(dǎo)航和分類筒溃，進(jìn)入對應(yīng)系統(tǒng)。
新時代沾乘，我們第一步是主動說出自己的意圖怜奖。
第二步，系統(tǒng)自解釋
歡迎來到
員工薪酬檔案查詢頁面翅阵。在該頁面歪玲，你可以查詢員工的薪酬檔案信息。
你可以通過表單輸入查詢掷匠，或者通過對話輸入滥崩。
對話格式參考如下：
查詢信息平臺事業(yè)部的員工
查詢信息平臺事業(yè)部且在職的員工
第三步，進(jìn)行具體的業(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: "工作地點(diǎn)",
},
{
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)用，就不放出地址进每。
