AxureRP教程–简单表单设计

使用AxureRP来进行简单的表单设计,需要对AxureRP的使用有一个基本的了解(参见前面对AxureRP介绍的文章),对表单上的各种元素都比较熟悉,这两方面知识有了之后,做简单的表单设计就相对容易上手了。AxureRP提供了丰富的表单组件元素,如单行文本框,多行文本框,单选框,复选框等等,涵盖了常见的十几种表单元素,另外还提供了可供用户自己自定义的动态面板组件,以及菜单类型的元素,详细的介绍可参见《AxureRP介绍–Widget效果总览》和《AxureRP初级培训教程》的介绍,可以说对简单的表单设计,已经是绰绰有余了,本文使用AxureRP 6.0版本来演示两个简单的表单设计示例,注册信息页面和简单的工作流流程表单。

注册信息页面是网站中最常见的,所有有会员制功能的网站必定都会有这样的功能页面。该页面会包含一些用户注册所必须要填写的信息,如用户名,登录密码,电子邮箱等,简单的表单设计一般只需要考虑布局排版是否合理恰当即可,而不需要考虑做填写内容的校验。下面是一个简单的注册信息页面的示例:

从图上可以看出,该表单只是常规的罗列了用户名密码,邮箱等常用信息,布局比较简单,所有标签右对齐,所有输入框左对齐。所用到元素为标签,单行文本框,复选框和按钮,其中验证码的效果为用图片控件来实现,这个主要是用来达到形似的目的,毕竟原型本身是可以用来模拟最终效果的。这个注册信息页面很简单,基本上只要会排版就可以了,如果内容需要必填控制,可以加上一个红星号来标示。

工作流的流程表单页面主要是流程的展现界面,需要描述清楚流程所要实现的业务数据关系,因此在设计流程表单的时候,首先要理清楚业务流程所需要的数据有哪些,其次才是这些数据在表单上展现的排版布局,对于排版布局,一般来说相似的字段会放在一起,比如开始时间和结束时间,生效时间等,第二种就是相关的字段会放在一起,比如需要填写银行账户信息的时候,会需要开户行名称,银行账号,开户人姓名等信息,这些都是一些相关联的信息;第三种是层次分明的字段也会放在一起,比如会议发起人,会议主持人,会议参与人等,或者先说明测试环境的信息,接着说明测试环境的信息,反正不能为了排版而去排版,先要考虑业务数据的连贯性,其次才是布局的美观,以下举例说明一个简单的流程表单示例:

这个是一个简单的运维事项申请流程表单,对于公共部分,如表头的基本信息,下面的附件信息,关联流程信息,因这部分是公共的,可以直接截图然后用AxureRP里面的图片控件放进来,整个表单只有标签,下拉选择框,多行文本框等几个元素,这里的单行输入框与上面的不一样,上面的注册信息页面是直接调用AxureRP里面的单行文本框组件,这里是用横线来模拟单行输入框的,毕竟网页形式和流程表单的展现形式要求会不一样,下拉选择的值可以在下拉选择框的属性设置里添加。

简单的表单设计还是很基础的,基本上稍微学习了解过AxureRP的人都能够比较得心应手的制作简单的表单,只需要把需要的组件元素从AxureRP的组件库里面拖到设计页面上,最终生成演示原型就可以了,用到时候可以截图也可以直接给原型,对方都能一目了然。而且碰到需要小修改的时候,只需要修改原型文件,然后重新生成一下原型就可以了,不需要重新做,可以大大节省时间。

示例在AxureRP 6.0.0.2899下调试通过

 

点此查看演示

点此下载源文件



无觅相关文章插件,快速提升流量

评论已关闭!