前言

公司有一個(gè)項(xiàng)目在維護(hù)，大概有300左右，其中表單與表格的頁面占比大概百分之五六十，為了節(jié)省開發(fā)時(shí)間，避免多人協(xié)作時(shí)，出現(xiàn)多套冗余代碼，我們嘗試寫了一下表單和表格的生成工具，從梳理到規(guī)范學(xué)習(xí)再到總結(jié)，收獲很多，寫一下筆記與大家分享。

表單生成，使用Express mongoDB jquery編寫

1. 表格生成

2. 表格預(yù)覽

表格生成預(yù)覽

1. 選擇生成組件

2. 編輯組件數(shù)據(jù)

3. 表格編輯

4. 預(yù)覽頁面

下文僅對表格生成工具的規(guī)范梳理和工具開發(fā)做介紹。

現(xiàn)有頁面梳理

把所有頁面涉及到表格的頁面全部截圖110個(gè)，然后再查找規(guī)則，大致分為5種類型頁面。

• 常規(guī)操作：56個(gè)
• 批量操作：11個(gè)
• TAB樣式：4個(gè)
• 特殊樣式：30個(gè)

常規(guī)頁面

批量操作

TAB樣式

特殊樣式

根據(jù)樣式粗略的分類，查詢條件有一丁點(diǎn)規(guī)則，會(huì)根據(jù)字段內(nèi)容自己換行，并沒有發(fā)現(xiàn)可復(fù)用規(guī)則。

感覺遇到瓶頸，于是開始學(xué)習(xí)表格的設(shè)計(jì)規(guī)范。

表格設(shè)計(jì)規(guī)范學(xué)習(xí)

以下鏈接是表格設(shè)計(jì)規(guī)范的學(xué)習(xí)資料。

• 設(shè)計(jì)更好的數(shù)據(jù)表格設(shè)計(jì) (Data Table)
• 數(shù)據(jù)表格設(shè)計(jì)｜從功能、交互和 UI 進(jìn)行全方位分析
• Web 頁面中的表格設(shè)計(jì)，遠(yuǎn)沒那么簡單
• 數(shù)據(jù)表格設(shè)計(jì)指南
• 數(shù)據(jù)表的用戶界面最佳設(shè)計(jì)：設(shè)計(jì)結(jié)構(gòu)、交互模式、技術(shù)列表淺析

收獲知識點(diǎn)如下，學(xué)習(xí)完表格設(shè)計(jì)規(guī)范后，知道了如何根據(jù)自己的業(yè)務(wù)場景選擇UI框架和組件，也發(fā)現(xiàn)一些框架的瑕疵，比如數(shù)字類型有小數(shù)點(diǎn)，要保持小數(shù)點(diǎn)位數(shù)一致，右側(cè)對齊，在Element框架文檔中就存在這個(gè)問題，當(dāng)然，并不是雞蛋里挑骨頭，可能由于時(shí)間或者其他因素沒有完善。

• 表格對字體的要求
• 標(biāo)題與對齊規(guī)則
• 7±2定律
• 篩選與搜索
• 批量操作與記錄所選項(xiàng)
• 反饋
• 長內(nèi)容展示
• 空單元格處理
• 分割線的使用
• 實(shí)時(shí)篩選與交叉篩選
• 判斷是否使用固定列表
• 橫向?qū)Ρ扰c豎向?qū)Ρ?/li>
• 全選案例
• 篩選勾選
• 批量操作與單項(xiàng)操作
• 頂部批量操
• 懸停操作
• 行內(nèi)編輯
• 快速瀏覽

很多知識點(diǎn)在UI框架中有應(yīng)用，參見幾個(gè)框架的表格規(guī)范。

• Ant Design 表格
• Element UI 表格
• iView 表格

根據(jù)業(yè)務(wù)總結(jié)規(guī)范

對規(guī)范有了認(rèn)識，按照原子設(shè)計(jì)概念，劃分粒度較小的組件。

tomic Design原子設(shè)計(jì)理念：構(gòu)建科學(xué)規(guī)范的設(shè)計(jì)系統(tǒng)

• 標(biāo)題組件

• TAB組件

• 上傳下載組件

• 詳情展示組件

• 查詢條件組件

• 提示文字組件

• 表格組件

• 分頁組件

• 提交按鈕組件

按照思路整理以后，發(fā)現(xiàn)我們的UI設(shè)計(jì)也應(yīng)用了很多交互規(guī)范，比如根據(jù)場景區(qū)分復(fù)雜分頁與簡單分頁、批量操作與單項(xiàng)操作、行內(nèi)編輯與提交編輯等，當(dāng)然，也有很多不規(guī)范的地方，比如上傳下載不統(tǒng)一、TAB樣式多個(gè)、詳情展示樣式多個(gè)。

標(biāo)題樣式與TAB樣式，按鈕樣式

上傳下載樣式

起止日期與選項(xiàng)標(biāo)題

根據(jù)組件分類并整理出每個(gè)組件的不同狀態(tài)后，和需求設(shè)計(jì)組的老大一塊討論，是否可以根據(jù)現(xiàn)有場景做一些優(yōu)化和規(guī)則制定，結(jié)果很令人滿意，初步組件規(guī)則協(xié)定好，去掉不規(guī)范的交互效果，需求設(shè)計(jì)組聲明以后也會(huì)按照規(guī)則產(chǎn)出原型。

規(guī)則制定好后，犯懶的想法愈發(fā)嚴(yán)重，何不開發(fā)一個(gè)自動(dòng)生成工具，能保證代碼質(zhì)量和規(guī)范，效率也更高。

頁面生成工具開發(fā)

以前編寫的表單生成工具嘗到了一些甜頭，有一些積累和總結(jié)，基于上次的經(jīng)驗(yàn)，我們開始了本次的工作內(nèi)容劃分。

1. 技術(shù)選型 上次使用jquery開發(fā)，需要在DOM和數(shù)據(jù)間來回操作，很麻煩，這次準(zhǔn)備用vue開發(fā)，效率很高，2個(gè)人幾天就完成了，雖然僅僅是初版，另外使用表單生產(chǎn)工具之前，都要搭建node MongoDB的環(huán)境，很不方便，我們暫時(shí)不打算存儲(chǔ)頁面數(shù)據(jù)，去掉服務(wù)端和數(shù)據(jù)庫。

2. 數(shù)據(jù)結(jié)構(gòu)定義 要保證每個(gè)組件的數(shù)據(jù)和類型有地方存儲(chǔ)，以及未來擴(kuò)展和維護(hù)的成本。

export const TABLE_JSON = {"title": "保障層級變更", //標(biāo)題數(shù)據(jù)"tab": ['保單','會(huì)交單'], //tab數(shù)據(jù)"download":[ //上傳下載操作{label:'上傳清單人員模板',buttonText:'點(diǎn)擊下載'},{label:'批量修改模板',buttonText:'點(diǎn)擊下載'},{label:'導(dǎo)入修改信息',buttonText:'導(dǎo)入'},{label:'批量導(dǎo)入',buttonText:'導(dǎo)入'}],"search": [ //查詢條件{label:'團(tuán)體保單號',dataType:'input',isRequired:true,placeholder:'請輸入',value:''},{label:'證件類型',dataType:'select',isRequired:false,placeholder:'請選擇',value:['軍官證','身份證','居住證']},{label:'統(tǒng)計(jì)日期',dataType:'date',isRequired:false,placeholder:'請選擇',value:'2015-10-11'},{label:'起止日期',dataType:'StartToEnd',isRequired:false,placeholder:['選擇開始日期','選擇結(jié)束如期'],value:['2017-02-11','2017-10-11']},{dataType:'button',value:'查詢'},{dataType:'button',value:'重置'}],"info": [ //詳情展示{label:'投保單位名稱',val:'東風(fēng)汽車有限公司'},{label:'團(tuán)體保單號',val:'88681433942'},{label:'保險(xiǎn)期間',val:'自2014-07-29 零時(shí)起 至 2015-07-28 二十四時(shí) 止'},{label:'保單狀態(tài)',val:'承保'},{label:'總賠付金額',val:'1000元'},{label:'總賠付人數(shù)空',val:'10'}],"note": {val:'注：查詢案件狀態(tài)為回退修改時(shí)，請按照回退意見補(bǔ)充或修改申請材料后再提交，時(shí)效以最終同意受理日開始計(jì)算。',type:'normal'}, //提醒文字 類型：normal,warning,danger"table": [ //表格數(shù)據(jù)// {// "type": 1,// "thead": [],// "tbody": []// }{"type": 1,"thead": ['t1','t2','t3'],"tbody": [[{"type": 1,"icon": "","nodes": ['c1']},{"type": 2,"icon": "","nodes": ['c2']},{"type": 1,"icon": "","nodes": ['c3']}]]},{"type": 2,"thead": ['d1','d2','d3'],"tbody": [[{"type": 1,"icon": "","nodes": ['a1']},{"type": 2,"icon": "","nodes": ['a2']},{"type": 1,"icon": "","nodes": ['a3']}]]}],"pagination": {type:'simple'}, //分頁以及類型"button": [ //按鈕與類型{type:'dafult',buttonText:'上一步'},{type:'warning',buttonText:'確認(rèn)加入'},{type:'primary',buttonText:'返回'},{type:'info',buttonText:'上一步'}] }

3. 功能拆分 實(shí)現(xiàn)的思路是父組件存儲(chǔ)所有數(shù)據(jù)，展示元素引用子組件，每個(gè)組件除展示外，要配套一個(gè)彈框來修改數(shù)據(jù)，點(diǎn)擊確定后將數(shù)據(jù)提交給父組件，這樣團(tuán)隊(duì)也可以多人開發(fā)，父組件只是負(fù)責(zé)存儲(chǔ)和展示數(shù)據(jù)，靈活度高。

目錄結(jié)構(gòu)圖，pages內(nèi)放置要的主編輯頁面，base內(nèi)方放置子組件。

例：提示組件代碼與預(yù)覽

<template> <div v-show="getjson != ''"><h3>提示信息內(nèi)容編輯</h3><!-- 表格顯示部分 --><div style="font-family:'新宋體'; font-size:12px; margin:0px 29px; height:30px;line-height:30px;padding:10px 0px; color: #666; ">{{getjson.val}}</div><!-- 操作按鈕 --><div class="controlbox"><el-button type="primary" icon="el-icon-edit" circle @click="msgBoxShow = true"></el-button><el-button type="danger" icon="el-icon-delete" @click="deleteSelf" circle></el-button></div><!-- 彈窗 --><el-dialog title="提示信息內(nèi)容編輯" :visible.sync="msgBoxShow" center :show-close='false'><el-inputtype="textarea":autosize="{ minRows: 2, maxRows: 4}"placeholder="請輸入內(nèi)容"v-model="getjson.val"></el-input><el-select v-model="getjson.type" placeholder="請選擇"><el-optionv-for="item in noteType":key="item.type":label="item.name":value="item.type"></el-option></el-select><div slot="footer" class="dialog-footer"><el-button @click="msgBoxShow = false">取 消</el-button><el-button type="primary" @click="commit">確 定</el-button></div></el-dialog></div> </template> <script>export default {name:"msgBox",props:['noteData'],data() {return {getjson:this.noteData,msgBoxShow: false,noteType:[{type:'normal',name:'灰色：普通消息'},{type:'warning',name:'橙色：次重要消息'},{type:'danger',name:'紅色：重要消息'}],formLabelWidth: '120px',};},methods:{commit() {this.msgBoxShow = false;this.$emit('noteConfig', this.getjson)},deleteSelf(){this.getjson='';this.$emit('noteConfig', this.getjson)}}} </script>

4. 功能流程確定

選擇要展示組件

確定表格類型

編輯各個(gè)組件數(shù)據(jù)

預(yù)覽

導(dǎo)出html文件（暫未制作）

總結(jié)

在表單和表格的生成工具開發(fā)過程中，我們都是先實(shí)現(xiàn)功能，然后再反過來整理頁面的sass文件，像字段最長最短個(gè)數(shù)影響展示樣式這樣的問題都是等功能都實(shí)現(xiàn)了才發(fā)現(xiàn)有問題，導(dǎo)致返工和修改，后續(xù)開發(fā)順序最好如下：

視覺規(guī)范整理

組件狀態(tài)與字段規(guī)則整理

html scss組件、頁面測試 組件文檔編寫

開發(fā)頁面生成工具

啟發(fā)與后續(xù)

目前頁面很丑，功能上也有很多bug，但是思路是可行的，而且開發(fā)難度也不是很高，效率與質(zhì)量有保證，后續(xù)希望使用Node mongoDB Vue全棧開發(fā)出常用頁面類型生成工具，借鑒資料百度FEX的吳多益大神的PPT，不過百度的產(chǎn)品并沒有開源，商業(yè)化了，

Ant Design框架頁面是按照 功能=>模板=>組件 來劃分的，

具體實(shí)現(xiàn)思路還要整理清晰，以方便展開下步工作，如果你愿意和我們一起完成，或者有更好的思路，歡迎一起討論.

奔3了，時(shí)日不多，要加緊努力了。

才疏學(xué)淺，如有問題懇請斧正。

總結(jié)

以上是生活随笔為你收集整理的记表格设计规范整理与页面可视化生成工具开发的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。