关于本文:

看了一些Axure的教程,发现写注册和登录的挺多,但是总感觉对入门的用户来说,不是那么清晰明了。另外,如果能结合/模拟产品设计、项目实例过程来写,而不只是为了做个教程,那是不是更容易理解呢?

一、需求整理

项目或功能开工之前,首先需要明确本次的目标是什么,具体有哪些内容。

模拟阿里软件用户注册和登录这个项目,需求方的需求如下:

1. 满足阿里巴巴集团旗下阿里巴巴(阿里巴巴中文站注册用户)、淘宝(淘宝旺旺注册用户)、旺号(阿里软件注册用户)、阿里妈妈(阿里妈妈注册用户)、雅虎(中国雅虎注册用户)、口碑(口碑网注册用户)、阿里巴巴国际站用户的平台登录需求;

2. 提供密码找回入口;

3. 提供安全加密登录模式;

4. 登录失败返回失败原因;

5. 登录成功后跳转到指定页面,并显示欢迎词;

二、用户角色及业务场景概括

Axure教程|使用Axure模拟阿里软件平台登录|Axure案例|产品经理|Axurer.com

Axure教程|使用Axure模拟阿里软件平台登录|Axure案例|产品经理|Axurer.com

注:本处也可直接使用Axure的Flow来画,具体根据个人习惯而言。

三、Demo准备

理清楚整个过程中会涉及多少页面和交互事件,哪些可以使用Master完成的最好先提炼出来。

1. 涉及页面

登录页面

登录成功后跳转页面

密码找回页面

本次Axure模拟教程重点不在密码找回,所以只需要两个页面就OK了,Sitemap框架如下:

Axure教程|使用Axure模拟阿里软件平台登录|Axure案例|产品经理|Axurer.com

2. 涉及事件

用户选择账号类型:涉及七种账号类型,所以选择账号动态面板(Dynamic Panel)需要六个State切换;

Axure教程|使用Axure模拟阿里软件平台登录|Axure案例|产品经理|Axurer.com

注:默认账号类型为“阿里巴巴”,所以“阿里巴巴”State位置放在动态面板第一个位置

用户选择安全登录:登录按钮动态面板需要两个State切换

Axure教程|使用Axure模拟阿里软件平台登录|Axure案例|产品经理|Axurer.com

判断账号类型是否符合规则:账号类型提示动态面板需要一个State,仅显示和隐藏就可满足;

密码验证失败提示:可以合并到判断账号类型提示动态面板中,即增加一个State即可满足;

Axure教程|使用Axure模拟阿里软件平台登录|Axure案例|产品经理|Axurer.com

登录验证通过页面跳转:只需要在页面上通过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 from Hangzhou, Zhejiang, China.