Axure RP 6.5学习记录(2)设计登录表单

  先看一下博客园的登录表单,然后用Axure RP一步一步把这个表单原型做出来。

                                        

  运行Axure RP软件,马上开始动手:

  1、添加一个页面,把页面命名为"博客园",然后在"博客园"这个页面下添加一个子页面叫"登录页面"。

  1)添加一个页面

                                       

  2)在这个页面上点击右键,选择"Rename"菜单,将页面重命名为"博客园"

                

  3)给"博客园"页面添加一个子页面。选中"博客园"页面,然后点击添加图片,添加一个子页面。或者在"博客园"页面上点击鼠标右键,选择菜单ADD--->Child Page。最后将这这个子页面重命名为"登录页面"。

                

  我们这样做的目的是以清晰的树结构组织所有的页面,方便管理。相应的操作都可以点击相应的功能图标或者点击鼠标右键选择相应的菜单来完成。另外重命名可以选中页面后,摁一下F2键,就可以快速的进入编辑状态。

  2、双击"登录页面",使这个页面在设计区域处于编辑状态。

            

  3、从控件面板中把矩形控件拖到设计区域中的登录页面。然后将矩形控件调整到合适的大小。

            

  4、设计登录表单顶部的"登录到博客园"标签文字和"立即注册"链接。这需要用到控件面板中的 Text Panel控件。

  1)从控件面板拖动两个Text Panel到设计区域的登录页面中

            

  2)接下来对这两个Text Panel显示的文字、字体、大小、颜色进行设置

            

  5、设计登录表单的用户名和密码输入框。需要用到控件面板中的Text Panel控件和Text Field控件。

  1)先拖入一个Text Panel用于显示"用户名",接着拖入一个Text Field用于用户名的输入框,接着拖入一个Text Panel用于显示"找回用户名"链接;接着再拖入一个Text Panel用于显示"密码",接着再拖入一个Text Field用于密码输入框,接着再拖入一个Text Panel用于显示"找回密码"链接。

            

  2)设置这些控件的文本显示、字体、颜色、大小、下划线等

            

  6、就剩下登录表单底部的是否保存密码选择框、登录按钮和一些超链接了。这里要用到控件面板中的Button控件和Checkbox控件。

  1)拖入相关控件到设计区域的登录页面中

            

  2)设置控件文本相关的属性

            

  7、这个登录表单原型就设计完成了,然后需要输出网页原型。Axure RP生产的网页原型是可以直接在浏览器上观看的。所以观看网站原型的人仅需要一般浏览器,不需要安装Axure RP软件。

  1)点击Axure RP顶部菜单区域的Generate菜单,选择Prototype选项,或者按F5就可以打开生成原型对话框。一般我们只需选择好保存的文件夹即可,其他选项使用默认就可以了。

            

  2)看看最后生成的网页效果 

                                                        8、生成规格文档,输出到Office Word中。

  1)想要输出规格文件或设定(Configure Specification)输出格式的话,请按下Axure RP软件上方主功能选单「Generate」菜单,选择「Specification(F6)」,就可以打开生成规格文档对话框,可以对文档的格式进行设定等等,不多说了。


  一些提示:

  1)处于设计区域的页面中的控件,选中后,直接用Ctrl+C复制、Ctrl+V粘贴,就可以生成同样的控件,就无需再从控件面板拖进来了。

  2)处于设计区域的页面中的控件,选中后,可以使用键盘上的四个方向键进行控件摆放位置的微调。

  3)超链接的显示效果可以使用下划线+蓝色字体显示出来。当然,在后面的学交互性习中,还会加上事件,使超链接真正具有实际的功能。

  4)当您设计网站原型的技巧越纯熟,网站项目会越来越大,导致输出网站原型的时间会随着项目而变大。万一您只是调整其中的某一页,却得等待整个网站重新全部输出,那就太浪费时间了。想要重新产生某一页网页,只要在Axure RP打开该页Wireframe,接着按下Axure RP主功能选单「Generate」菜单,选择「Regenerate Current Page to Prototype(CTRL+F5)」。当您选择这个动作,或者直接按下热键CTRL+F5,Axure RP不会产生任何对话窗口,您只会感觉到鼠标指针闪了一下,此时,再回到网站原型(HTML Prototype)上去reload这一页,或click这一页网页名称,就会看到已经更新的页面了。(网上摘录的一段话,挺有用)

  

原文地址:https://www.cnblogs.com/luxh/p/2566430.html