五. 登录页面|选择账号Tab制作

通过Tab切换同一Dynamic Panel中不同State的方式达到产品原型设计需要的效果。

1. 在Dynamic Panel Manager中选择需要编辑的State:

Tab选择面板制作|Axure,Axure RP,Axure教程,Axure案例,Axure例子,产品原型设计,Axure设计分享,产品经理

关于Dynamic Panel Manager,如果在Axure控制面板中找不到的话请到菜单View中勾选即可:

Tab选择面板制作|Axure,Axure RP,Axure教程,Axure案例,Axure例子,产品原型设计,Axure设计分享,产品经理

注:在Dynamic Panel Manager中可以找到当前项目中所有的Dynamic Panel,双击其中的State即可编辑。

2. 将步骤四中编辑好的Master:选择账号拖进来,调整并记住位置。

Tab选择面板制作|Axure,Axure RP,Axure教程,Axure案例,Axure例子,产品原型设计,Axure设计分享,产品经理

位置信息:

Tab选择面板制作|Axure,Axure RP,Axure教程,Axure案例,Axure例子,产品原型设计,Axure设计分享,产品经理

3. 因为用户打开页面后默认的账号类型为“阿里巴巴”,所以需要对“阿里巴巴”标签进行处理,即默认“阿里巴巴”标签应该是选中状态,并取消鼠标移过效果。

选中状态:偷个懒,直接把该标签的显示状态改成与选中状态一样就OK了

选中后状态时还需要对标签位置做个处理,以区别显示于其它的Tab,选中Tab,向下的方向键按一下,搞定:

Tab选择面板制作|Axure,Axure RP,Axure教程,Axure案例,Axure例子,产品原型设计,Axure设计分享,产品经理

可惜左上角有点圆角,将就一把吧。

注:确认Tab在选择账号面板的上一层才能挡住边框线,可选中Tab使用快捷键:Ctrl+] 提前对应组件

Tab选择面板制作|Axure,Axure RP,Axure教程,Axure案例,Axure例子,产品原型设计,Axure设计分享,产品经理 

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

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

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

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

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

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

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

相关文章:

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

2009年6月9日     Axure教程|使用Axure模拟阿里软件平台登录和跳转(二)

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

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