Axure教程|使用Axure模拟阿里软件平台登录和跳转（二）

四、 Master及Tab选择框制作

本次Axure教程中涉及到的Master为“选择账号”，使用Tab为方式提供选择不同类型账号的功能

1. 新建“选择账号”Master

2. 使用Rectangle制作边框，选择圆角并选择线条颜色：

3. 使用Button Shape制作Tab，选择顶部圆角：

注：Axure当涉及变量调用时，请事前为需要用到的控件，否则在后期会很乱，这里将第一个Tab命名为：“Tab-Alibaba”

4. 编辑未选中时Tab文字、边框、填充及字体颜色，并调整位置：

5. 设置Rollover Style（鼠标移过）效果：

Rollover Style（鼠标移过）时只需要字体变化颜色即可：

6. 设置Selected Style（选中效果）：

Selected Style（选中效果），字体加粗和颜色改变：

注：字体加粗请勾选Bold后再点击“B”

如果想查看Rollover Style（鼠标移过）效果，请鼠标移上左上角；

如果想查看Selected Style（选中）效果，请左键点击左上角；

7. 到这步Tab切换的效果都完成了，然后选中Tab并Ctrl+D，这时候就会原样复制一个出来；

唯一问题是在Axure中Ctrl+D后的新控件会完全重叠在原控件上，但是还好，默认选中的是新控件；

如果使用鼠标拖动Tab建议同时按住Shift键，以保证拖动时不会上下偏移。

当然，如果不考虑输入法的话，也可以按住Shift+Ctrl再拖Tab。

拖完后请根据需要重新编辑显示名称和控件名称，效果如下：

8. 使用Text Field制作用户名、密码框及验证码框

密码框可用Mask Text Password功能实现用户在密码框输入后的内容显示为：“●”

注：请确保会员名输入框及密码框的名称都已经定义，防止后续操作中找不到对应的控件

因会员名和密码框不需要根据账号类型切换发生变化，另外考虑后续的变量调用，可以不放在Master中

最后完成的Master如图：

9. 因为后期需要调整Tab效果，所以需要将该Master设置为Custom Widget

注：Normal–该Master在使用时只可调整位置，不可以调整Master中的控件

Place in Background–该Master在使用时无法调整位置及控件

Custom Widget–该Master可以任意调整位置和控件

********************************************************************************

* 更多详细内容参见源文件：Axure案例使用Axure模拟阿里软件平台登录.rp *

* 也可打开已经输出的页面： “Axure案例使用Axure模拟阿里软件平台登录”演示页面 *

********************************************************************************

注：由于本期教程制作时间跨度过大，加上我记性不太好，导致教程内容和输出文件有不符之处，请大家谅解。最终内容以源文件及输入页面为准。

在后期的教程中，我会缩短教程篇幅，避免此类问题发生的同时使教程更具可读性。

另外在察看输出页面的时候如有疑问或拍砖讨论，请点击右上方的“e网打进”对话框，一般我都会在线

相关文章：

2009年6月8日    Axure教程|使用Axure模拟阿里软件平台登录和跳转（一）

2009年6月12日   Axure教程|使用Axure模拟阿里软件平台登录和跳转（三）

2009年6月12日   Axure教程|使用Axure模拟阿里软件平台登录和跳转（四）

2009年8月11日   Axure教程|使用Axure模拟阿里软件平台登录和跳转（五）

Posted from Hangzhou, Zhejiang, China.