研发背景

软件系统的用户群体大致可分为ABC三类:

  • A类用户指不会编程只使用软件的最终用户,如使用财务软件的财务经理。
  • C类用户指具备编程能力的开发者,如使用eclipse开发Java 程序的程序员。
  • B类用户指项目经理、需求经理等。B类用户的编程技能在A类用户与C类用户之间,有的有编程经历,现在已经脱离具体编码工作,使用Word、PowerPoint与Visio编写业务需求等。

一般情况下,最终用户(A类用户)与项目经理(B类用户)通过草图与程序员(C类用户)进行沟通Web页面设计,后者在想象的基础上完成页面开发。看到真实页面,最终用户往往才会更进一步地表达自己的想法,甚至激发出新的需求,程序员再加以实现,如此迭代往复,需求没有边界,工期延展绵长。如果最终用户与项目经理能够自己把脑海中的需求做出原型,程序员按图开发,项目可控度必然大幅提高。但Web编程需要储备多种技能(如JavaScript、DHTML、XML、Java、SQL等),不是最终用户与项目经理短期所能掌握的。
DemoMaker就是为解决上述矛盾而研发的,通过一系列的封装,将JavaScript、DHTML、XML、Java、SQL等等技能要求降为0,使最终用户(A类用户)与项目经理(B类用户)轻松表达自己的Web页面设计意图。


产品介绍

产品简介

DemoMaker是一款供最终用户与项目经理使用的Web应用系统页面原型设计工具,由BSTEK研发。
DemoMaker以所见即所得的方式,在Web上通过鼠标Drag & Drop直接进行页面设计,零代码编写获得形象逼真且具动态操作效果的Web原型系统。
DemoMaker包括工程管理、页面管理、页面设计、公共资源管理等功能模块,提供列宽可调的全编辑表格、节点可以拖动的树等开箱即用的丰富的页面组件,在此基础上轻松快捷地制作自定义组件,通过属性配置实现按钮事件、数据翻页、菜单选择、页面跳转等 Web应用典型操作效果,表格、树等大量数据与页面初始设计可以通过Excel导入。

(图:DemoMaker页面设计视图)

(图:实际页面效果)


产品套路

类似于武术套路,DemeMaker也有自己的产品套路。

  1. 新建工程。如果使用工程模版可以默认生成一个主页面与若干个子页面,子页面嵌在主页面的工作区内,点击主页面中的菜单可以控制工作区内子页面的跳转与刷新。
  2. 编辑子页面。
  3. 通过Excel将初始的页面整体布局导入。当然也可以将组件一个一个通过鼠标拖放到页面中。
  4. 添加表格、树、文本编辑框、按钮等基础组件,调整组件位置与组件大小,设置组件属性。
  5. 添加自定义组件。自定义组件可以是单个组件,也可以是一组组件。
  6. 通过Excel快速批量导入表格、树、菜单等所包含的数据。也可以在组件的属性设置对话框中修改数据。
  7. 设置按钮、菜单等的事件,如单击某个按钮,页面跳转等。
  8. 保存子页面之后,浏览该页面的效果。
  9. 通过主页面的菜单事件将主页面与子页面关联起来。
  10. 保存主页面之后,浏览Demo系统的整体效果。

特色功能

鼠标Drag & Drop与快捷键

通过鼠标Drag & Drop摆放组件位置,调整组件大小。Ctrl+C与Ctrl+V实现组件的快速复制。

整体导入初始设计

在Excel中设计页面的初始布局,导入DemoMaker后再进行局部微调。

(图:Excel中的设计草图)

(图:导入DemoMaker后直接生成页面设计)

DemoMaker对Excel设计稿中的组件是尺寸敏感的。Excel中合并单元格后形成的[table:#table1]多大,DemoMaker中的表格就有多大。
DemoMaker对Excel设计稿中的组件同时是数据敏感的。[editor:ANLIN]表示文本编辑框组件,其中包含的数据为"ANLIN"。[table:#table1]表示表格组件,包含的数据在名为"table1"的Sheet中(注意table1之前有"#"符号)。

(图:Excel中的表格数据批量导入)

批量导入数据

表格、树、菜单等一般都包含大量数据,如果手工一个个添加是费时费力的重复劳动,通过Excel批量导入数据,可以节约大量时间。
(图:Excel中树的数据)
(图:导入后效果图)

事件配置

通过配置方式,给按钮等组件添加事件,使整个Demo具有Live效果。
(图:配置按钮的单击事件)
(图:执行效果图)

自定义组件

一个组件或者整个页面都可以做为一个自定义组件放进组件库之中,随着积累的自定义组件越来越多,制作一个Demo也变得越来越容易。

数据联动

将不同组件绑定到同一数据源上,可以实现联动效果,如数据翻页,表格当前记录与表单联动等。



平台特色

  • 逼真(Vivid)

使用DemoMaker制作的原型即是Web系统,比文字描述与示意图片更加直观形象。

  • 简单(Simple)

不需要掌握编程技能,就能使用DemoMaker,以所见即所得的方式进行设计,操作简单,即学即会。

  • 动态(Live)

按钮点击、数据翻页、菜单选择、页面跳转,是可以实现操作体现的Web系统。


wiki知识库

DemoMaker wiki知识库

Back to top