关注移动产品设计 By Cola
Axure教程|使用Axure模拟阿里软件平台登录和跳转(四)
六. 登录判断|账号登录验证和跳转实现
1. 因为登录时用到的会员名和密码框是相同的，也就是所有的登录都共用一个会员名和密码输入框，在选择账号面板层上放置“会员名”和“密码”输入框，后期涉及变量调用，请命名（Label）；
将“会员名”和“密码”输入框分别命名为：“ID”和“PW”：
2. 在按下账号类型的时候，需要做两件事情，一是确认当前的账户类型，二是切换到对应的登陆面板
选择登录标签后，设置事件：
事件一：赋值
进入对应登录面板层State，选中Tab：“阿里巴巴”，双击右侧的“OnClick”，在弹出的选项中选择“Set Variable and Widget value(s) equal to Value(s)”：
点击左下方的：“Set Variable and Widget value equal to Value”并设置对应的变量值：
注：此处新建了三个变量：“ID”、“PW”和“IDType”，分别表示“账号”、“密码”和“账号类型”
赋值的直译：将控件文本框“ID”的文本内容设置为变量“ID”的值，即：如果在ID框里填写了“张三”，那么变量ID就等于“张三”。
关于赋值部分，在后续的教程中再进一步展开，敬请关注。
事件二：设置不同的层State之间的切换
选择：“Set Panel state(s) to State(s)”，并选择“Set 选择账号面板”：
点击“阿里巴巴”后可选择其它的State，本处选择“阿里巴巴”：
事件说明：当“Tab-Alibaba”点击后，显示“阿里巴账号”登录面板
至此，完成了两件事情，点击Tab后确定当前账号类型和切换到对应的选择账号层，如：
3. 开始偷懒吧。我们知道这七个账号选择Tab点击后的事件是类似的，而且切换的页面除了提示不同外，其它也都差不多。所以我决定不用Master而改用Ctrl+C，Ctrl+V！
首先要复制按钮动作，右键“Tab事件”，选择“Copy Case”
选中其它Tab后，对准“On Click”，“Paste Case”
然后再调整一下Case，就是对应切换的层、ID及变量值，如图：
然后，将调整好的登录页面Ctrl+A，逐一复制到其它State中，复制完成后再将对应的Tab做调整。
直接复制过去还有一个好处就是不用再去调整控件的位置，防止交互时控件位置不重合而“破相”。
在前面的教程中，偏向于单个Master及账号选择页面的讲述，并没有将更多共有的组件提取出来放到登录页面中，如果要精益求精的话，也可以做调整，把共有的“会员名”、“密码”、“验证码”等都放到登录页面中。
可惜啊，调整Tab的过程比较痛苦，对选中Tab的状态调整只能先调整好一个Tab，调整下一个层Tab的时候，挨个点击加粗、字体颜色、填充色和边框颜色。因为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模拟阿里软件平台登录和跳转（五）
Posted from Hangzhou, Zhejiang, China.
| 打印文章 | 这篇文章由Cola于2009年06月16日 19:54发表在Axure实例, Axure教程。你可以订阅RSS 2.0 也可以发表评论或引用到你的网站。 |
没有评论
没有引用
转载：来自Richard推荐的两个国外Axure RP案例
大约10月前 - 2个评论
首先感谢Richard的推荐，好东西给大家分享一下： 手绘风格的library http://consulting.ascentium.com/blog/ux-seo/Post222.aspx 注：风格上主要使用了手绘风格字体，可惜只有英文的，哪位同学有中文的手绘字体给我分享一下 ：） Axure in Action 集合多种交互设计在一个案例中 http://userxper.com/blog/archives/448 注：这个案例里包纳了Axure能有的交互，能山寨出同样一个原型的话，恭喜你，毕业咯！ 可惜的是，这些案例都是全英文的，大家辛苦一下把26个字母好好组合吧。
密码长度、有效性及安全性校验|Axure案例
大约11月前 - 2个评论
以蓉儿的Axure分享为基础，制作本案例。 本案例说明及实现效果：点此打开演示页面 1. 模拟用户注册输入密码界面： 2. 输入密码时提示密码长度文案： 3. 即时校验密码强度： 4. 密码一致性校验： 5. 所有校验通过后效果： 注：本Axure案例仅供练习和赏析，以熟练运用变量为目的，真实产品原型制作中不推荐。 Axure RP 实例源文件下载：密码长度、有效性及安全性校验Posted from Hangzhou, Zhejiang, China.
使用变量控制Tab标签或按钮的方法|Axure实例
大约12月前 - 8个评论
所有Axure RP教程中，最经典的应该是利用Axure RP制作Tab标签了吧，这部分内容涉及了页面、层及基本的交互。 以前我制作Tab的时候，为了表现Tab/按钮的选中状态，干脆将一排Tab/按钮都放到层里； 这样做的实质是点击Tab/按钮后切换到新的层，通过这种方法来达到Tab/按钮切换状态的效果。 涉及两层Tab/按钮嵌套时，可以用页面切换+层切换，如果有三层呢？ 往下看之前请先留意以下注意事项： 1. 不建议大家都么做，因为这样已经有点追求最佳显示效果的味道了； 2. 不要把大把的时间放到交互动作或者变量应用上，除非你很清楚你在干什么； 3. 如果你想做到完美，请从小处做起：记得不能让每个控件的标签（Label）空着； —点此下载本实例Axure RP源文件 注：考虑项目敏感信息，具体页面内容做了处理但是不影响本案例理解，视觉方面敬请谅解 本实例要素：点击Tab/按钮时，为特定变量赋值并刷新页面，通过变量来控制层的切换的同时，使刚才点击的Tab/按钮显示为选中状态。 1. 点击Tab/按钮时赋值并重新加载当前页面： 使变量“Tab”的值为“1”（点击的是第一个按钮，如果是第二个，则变量值为“2”） 重新加载本页面（配合OnPageLoad来实现变量生效） 2. 在当前页面的OnPageLoad增加交互使变量生效： 如果变量“Tab”值等于“1”，则切换到对应的层（第一个层）并使刚才的按钮处于选中状态； 如果变量“Tab”值等于“2”，则切换到对应的层（第二个层）并使刚才的按钮处于选中状态； …….. PS：如果你觉得Tab/按钮很多，这样编写OnPageLoad交互事件挺累的话，建议你看一下页面上的Tab/按钮是否多了些？太多的Tab/按钮是否会影响到用户体验或产品功能传递呢？Posted from Hangzhou, Zhejiang, China.
Axure教程|使用Axure模拟阿里软件平台登录和跳转（五）
大约1年前 - 6个评论
七. 登录效果实现。 1. 增加安全登录选项 使用Dynamic Panel实现两种模式切换效果： 增加安全登录层，含“普通登录”和“安全登录” 制作“普通登录”效果： 2. 判断逻辑准备 当用户点击“普通登录”时，需要判断当前用户输入的用户名，密码是否正确（对验证码的校验效果相同），所以需要对登录按钮增加Interactions： 判断：当按下登录按钮时，判断Text控件的文本内容是否满足“ID=Cola”，“PW=Cola”？ 如果用户名/密码正确，跳转到“登录成功页面”； 如果用户名/密码不正确，出现文案：“用户名名密码错” 注：此处用户名和密码可自定义，达到演示效果即可。 另外，在“会员名”输入框后放置“用户名密码错提示”文案提示，待调用，如图： 3. 逻辑实现 选择“普通登录”按钮，点击“Add Case”，养成良好的习惯，建议编辑每个Case名称，再点击“Add Condition”，如图： 当变量“ID”和“PW”同时满足条件时，如图： 当前页面打开“登录成功页面” ******************************************************************************** * 更多详细内容参见源文件：Axure案例使用Axure模拟阿里软件平台登录.rp * * 也可打开已经输出的页面： “Axure案例使用Axure模拟阿里软件平台登录”演示页面 * ******************************************************************************** 注：由于本期教程制作时间跨度过大，加上我记性不太好，导致教程内容和输出文件有不符之处，请大家谅解。最终内容以源文件及输入页面为准。 在后期的教程中，我会缩短教程篇幅，避免此类问题发生的同时使教程更具可读性。 另外在察看输出页面的时候如有疑问或拍砖讨论，请点击右上方的“e网打进”对话框，一般我都会在线 相关文章： 2009年6月8日 Axure教程|使用Axure模拟阿里软件平台登录和跳转（一） 2009年6月9日 Axure教程|使用Axure模拟阿里软件平台登录和跳转（二） 2009年6月12日 Axure教程|使用Axure模拟阿里软件平台登录和跳转（三） 2009年6月12日 Axure教程|使用Axure模拟阿里软件平台登录和跳转（四） Posted from Hangzhou, Zhejiang, China.
转载：axure分享
大约1年前 - 3个评论
原文地址：http://lovelyrosa.blogbus.com/logs/43212280.html —————————— 摘要： 1. 秘籍一：超快速移动画面 设计页面很大时，是否因为反复拖动滚动条而烦恼？ 在Axure控件编辑区直接按住空格键，和PS里的空格应用相仿，出现“小手”时，移动画布吧。 2. 秘籍二：穿透物件 是否因为多个控件重叠时，很难选取下一层/上一层的控件而烦恼。（PS:看蓉儿文章前我是用Tab键死切的 –_-|||） 适用于多层选取，鼠标左键长按，松开时自动选取下一层控件； 反之也亦然–当前控件已经是最下层时，可以从下往上依次选择。 3. 群组radio button；logic case选择 Rodio Button的应用实例，选择不同Button后显示对应的选项。 4. Enable button 页面选项满足条件时使另一控件处理可用状态。 5. 控制跳转image map region 点击指定控件（也可引申到指定区域）后，页面滚动/定位到指定区域（可引申为指定控件） 6. 移上高亮显示 鼠标移过/滑过指定控件（或区域）时，对应控件（或区域）显示状态发生改变。 7. Togle.点击后出现,再点击隐藏 点击指定控件后，显示/收起页面隐藏内容（实例应用中可以为高级选项或菜单） 8. 登录 登录逻辑实现。 9. 密码强度动态显示 推荐实例，通过监控指定控件的文本长度来控制层的切换，最终实现状态栏更新的实例。 10. 根据变量动态显示 用户提交表单或填写内容生效后即时显示在当前页面中。 更多内容，详见蓉儿的分享Posted from Hangzhou, Zhejiang, China.
Axure教程|使用Axure模拟阿里软件平台登录和跳转（三）
大约1年前 - 没有评论
五. 登录页面|选择账号Tab制作 通过Tab切换同一Dynamic Panel中不同State的方式达到产品原型设计需要的效果。 1. 在Dynamic Panel Manager中选择需要编辑的State： 关于Dynamic Panel Manager，如果在Axure控制面板中找不到的话请到菜单View中勾选即可： 注：在Dynamic Panel Manager中可以找到当前项目中所有的Dynamic Panel，双击其中的State即可编辑。 2. 将步骤四中编辑好的Master：选择账号拖进来，调整并记住位置。 位置信息： 3. 因为用户打开页面后默认的账号类型为“阿里巴巴”，所以需要对“阿里巴巴”标签进行处理，即默认“阿里巴巴”标签应该是选中状态，并取消鼠标移过效果。 选中状态：偷个懒，直接把该标签的显示状态改成与选中状态一样就OK了 选中后状态时还需要对标签位置做个处理，以区别显示于其它的Tab，选中Tab，向下的方向键按一下，搞定： 可惜左上角有点圆角，将就一把吧。 注：确认Tab在选择账号面板的上一层才能挡住边框线，可选中Tab使用快捷键：Ctrl+] 提前对应组件 ******************************************************************************** * 更多详细内容参见源文件：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模拟阿里软件平台登录和跳转（五）
Axure教程|使用Axure模拟阿里软件平台登录和跳转（二）
大约1年前 - 1个评论
四、 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模拟阿里软件平台登录和跳转（一）
大约1年前 - 7个评论
关于本文： 看了一些Axure的教程，发现写注册和登录的挺多，但是总感觉对入门的用户来说，不是那么清晰明了。另外，如果能结合/模拟产品设计、项目实例过程来写，而不只是为了做个教程，那是不是更容易理解呢？ 一、需求整理 项目或功能开工之前，首先需要明确本次的目标是什么，具体有哪些内容。 模拟阿里软件用户注册和登录这个项目，需求方的需求如下： 1. 满足阿里巴巴集团旗下阿里巴巴（阿里巴巴中文站注册用户）、淘宝（淘宝旺旺注册用户）、旺号（阿里软件注册用户）、阿里妈妈（阿里妈妈注册用户）、雅虎（中国雅虎注册用户）、口碑（口碑网注册用户）、阿里巴巴国际站用户的平台登录需求； 2. 提供密码找回入口； 3. 提供安全加密登录模式； 4. 登录失败返回失败原因； 5. 登录成功后跳转到指定页面，并显示欢迎词； 二、用户角色及业务场景概括 注：本处也可直接使用Axure的Flow来画，具体根据个人习惯而言。 三、Demo准备 理清楚整个过程中会涉及多少页面和交互事件，哪些可以使用Master完成的最好先提炼出来。 1. 涉及页面 登录页面 登录成功后跳转页面 密码找回页面 本次Axure模拟教程重点不在密码找回，所以只需要两个页面就OK了，Sitemap框架如下： 2. 涉及事件 用户选择账号类型:涉及七种账号类型，所以选择账号动态面板（Dynamic Panel）需要六个State切换； 注：默认账号类型为“阿里巴巴”，所以“阿里巴巴”State位置放在动态面板第一个位置 用户选择安全登录：登录按钮动态面板需要两个State切换 判断账号类型是否符合规则：账号类型提示动态面板需要一个State，仅显示和隐藏就可满足； 密码验证失败提示：可以合并到判断账号类型提示动态面板中，即增加一个State即可满足； 登录验证通过页面跳转：只需要在页面上通过TXT展示即可，通过调用变量实现显示效果； ******************************************************************************** * 更多详细内容参见源文件：Axure案例使用Axure模拟阿里软件平台登录.rp * * 也可打开已经输出的页面： “Axure案例使用Axure模拟阿里软件平台登录”演示页面 * ******************************************************************************** 注：由于本期教程制作时间跨度过大，加上我记性不太好，导致教程内容和输出文件有不符之处，请大家谅解。最终内容以源文件及输入页面为准。 在后期的教程中，我会缩短教程篇幅，避免此类问题发生的同时使教程更具可读性。 另外在察看输出页面的时候如有疑问或拍砖讨论，请点击右上方的“e网打进”对话框，一般我都会在线 相关文章： 2009年6月9日 Axure教程|使用Axure模拟阿里软件平台登录和跳转（二） 2009年6月12日 Axure教程|使用Axure模拟阿里软件平台登录和跳转（三） 2009年6月12日 Axure教程|使用Axure模拟阿里软件平台登录和跳转（四） 2009年8月11日 Axure教程|使用Axure模拟阿里软件平台登录和跳转（五）Posted
Axure教程|Axure中图片处理技巧分享
大约1年前 - 2个评论
关于本文： 本人在日常使用Axure的过程中会大量得使用图片，而这些图片基本都来自于现有产品界面，即以截图方式插入Axure，由于Axure没有自带图片处理的功能，所以在如何整出一个比较满意的界面上，花了不少心思； 但是，一来本人PS技艺不精，二来觉得这样倒来倒去麻烦，所以在不使用专业截图及图片处理软件的情况下摸索出了一些事半功倍的方法，分享给大家，希望对大家有帮助。 另外本文涉及的图片处理只涉及以下程序或工具： 1. 画图版（mspaint） 2. SnapShot：从QQ中剥离出的截图工具 点此下载 注：具体使用方法与QQ截图相同 3. Office2007-PowerPoint 注：用PPT可以很快得得到一些常用的图片效果，得到效果后直接Ctrl+C，到Axure中Ctrl+V搞定。 4. Maxthon2.0及以后版本 Axure中图片处理的小技巧： 一、Axure中使用截图-使用SnapShot： a. 在工具栏的快速启动中放个SnapShot的快捷方式 b. 要用到的时候点击快捷方式 c. 选中要截图的区域 d. 双击取图 e. 在需要用到截图的地方Ctrl+V 二、Axure中使用截图-使用Maxthon： 如果是对页面的截图，那推荐使用Maxthon了，原因有下： 1. 截图方便：默认设置，在Maxthon激活的情况下，Ctrl+F1就是打开区域截图功能； 2. 保存方便：直接指定图片格式并另存到指定文件夹 a. 打开Maxthon的网页工具（快捷键Ctrl+B） b. 依次选择“屏幕截图”-“截图选项” c. 设置图片格式和保存文件夹 小提示：如果对单一图片需要截取不同部分时，可以使用Maxthon打开图片，然后再按需截取。 三、Axure中图片处理-使用PPT（2007版本） 在Axure中无法编辑图片，这点很痛苦；有时候只要对图片做个大小/镜相效果/圆角效果处理，需要打开PS等大软件，麻烦！用PPT吧： 1. 将需要处理的图片或截图拉到PPT中； 2. 双击图片，工具栏上就有一栏效果供选择咯； 3. 调整得到最终所要的效果后，选中图片Ctrl+C 4. 到Axure里Ctrl+V，搞定！ 小提示：有时候做镜相处理的进候，图片下半部分会很大，但是多余部分又不需要的时候，使用SnapShot在PPT里直接截想要的部分，再复制到Axure中 四、Axure中图片处理-使用剪贴版 有时候需要的截图是菜单下拉，或者只有当被激活时才显示的选项，无法使用截图工具直接截取（尝试过使用其它专业截图工具，但是我还是觉得麻烦，特别是我开双显，很多截图工具会出错）。 1. 打开或激活待截取的菜单；
如何使用Axure制作IM的在线状态Demo?
大约1年前 - 4个评论
本文说明： 在产品设计过程中，如何使用一个好的Demo向开发传达功能需求很重要； 目前工作中涉及的产品有在线客服的功能，而接待功能由阿里旺旺实现； 最近的项目中有一个需求是在用户登录产品后，显示用户当前接待账号对应的旺旺是否已经登录的功能， 由此折腾出了如何使用Axure制作IM在线状态（亮灯）的Demo； 核心组件： 使用Axure Widgets中的Inline Frame组件 实现过程： 1. 拖出一个Inline Frame组件; 使用“Toggle Border”和“Never Show Scrollbars”功能使其无边框化，如图： 2. 双击Inline Frame，在“Link to an external url or file”中填入对应IM的在线状态代码; 点击“OK”保存，如图： 阿里旺旺在线状态代码：http://amos.im.alisoft.com/online.aw?uid=[ID]&site=cnalichn&s=4 将[ID]更换为演示所用的旺旺（本处指贸易通）登录账号； 调整末尾的数字可以获得更多不同的效果； 更多效果请查看：http://club.china.alibaba.com/club/block/alitalk/alitalkfire.html QQ/TM在线状态代码：http://wpa.qq.com/pa?p=1:[ID]:9 将[ID]更换为演示所用的QQ账号； 调整末尾的数字可以获得更多不同的效果； 更多效果请查看：http://imis.qq.com/webpresence/code.shtml PS:至于其它的在线状态，获取对应代码后也如法炮制即可，但是至今我搞不定MSN的在线状态， 哪位仁兄搞定了请现身说法。 3. F5-输出查看效果，接下来就是人肉调整Inline Frame边框大小的事情了; 调整后“Ctrl+F5”重新输出，再到页面中F5刷新查看效果； 这一步关键点是要一点点的人肉调整;; 在Axure工作区中，两个Inline Frame都是白皮，只能根据输出后的效果进行微调； 面板中的状态： 输出后的效果： 通过框框线条修饰后的简单样式，对应账号下线后再刷新Demo页面后可以见到状态切换的效果： 4. 再剩下的就是制作“在线”和“离线”状态不同的文案或功能点的Demo了; 可以使用Dynamic Panel实现两个状态的切换–使用“Set Panel state(s) to State(s)”功能实现；
