【JSON2WEB】02 JSON2WEB初步UI设计

JSON2WEB的UI初步设计,包括草图、登录、主页、导航树JSON2TREEE组件、表格JSON2GRID组件、表单JSON2FORM组件等。

1草图

【JSON2WEB】02 JSON2WEB初步UI设计_第1张图片

  • 表单作为抽屉从右边拉出。
  • LOGO行和导航树为固定区域,导航树可以折叠。
    【JSON2WEB】02 JSON2WEB初步UI设计_第2张图片

2 登录页

【JSON2WEB】02 JSON2WEB初步UI设计_第3张图片

  • 找回账号:可以给邮箱(找回时输入)发送账号和重置密码链接,也可以通过短信找回,需要账号和邮箱、手机号绑定。

3 主页

【JSON2WEB】02 JSON2WEB初步UI设计_第4张图片

  • 主操作区可以有滚动条,滚动到最下面出现页脚区,页脚区放置一个按钮可回到顶部。

4 导航树JSON2TREE组件

【JSON2WEB】02 JSON2WEB初步UI设计_第5张图片

  • 导航树分2级就够了,一级可以在主操作区链接导航卡和二级的详细说明。
  • 二级链接到具体的页面,在主操作区打开,一般是信息一个表格GRID。

5 表格JSON2GRID组件

【JSON2WEB】02 JSON2WEB初步UI设计_第6张图片

  • 创建和行内编辑可拉出表单抽屉
  • 查询框默认对所有显示列进行过滤或查询,可以选择所有显示列精确组合查询

6 表单JSON2FORM组件

【JSON2WEB】02 JSON2WEB初步UI设计_第7张图片

  • 表单抽屉里可以创建新记录,删除一行记录、修改当前记录。

就这些了,其它的再逐步完善吧。

你可能感兴趣的:(JSON2WEB,ui)