【Axure学习ing】Axure8.0登录注册原型

一只level1的产品汪,找一个地方,有日记本,有输入键盘,有思想。开始记录自己的学习过程,加深对内容的理解,更期待通过分享交流,自己学会更多方位地思考。

                                                           分割线                                                                   

登录注册作为app最基础的一步,所以Axure8.0的学习从这里开始,打开Axure8.0:

Step1:新建一个文件,在站点地图里分别添加各个页面的名称。因为我是事先做好了各个页面的大致设计,所以我在sitemap里依次添加并命名好各个页面。

Step2:双击“登录页”,进入该页面的编辑模式。从右侧的元件库中拖入两个个文本框元件,一个标签文本;

文本框元件1:作为手机号码输入框,将其命名为phone_login, 然后调整样式至去除边框,填充色吸取背景底色;调整输入框属性:类型为手机号码,输入暗文“请输入手机号码”,设置当获取焦点时暗文消失。

文本框元件2:作为密码输入框,调整样式同上,命名为psd_login;

标签文本1:作为错误提示的文本显示区域,在样式里设置文本左对齐显示,字体大小调整为12,颜色为红色,并将其设置为隐(Hidden);

Step3:从元件库拖出热区元件,调整大小正好覆盖在下一步按钮上,将其命名为btn_login; 同样的方式将“快速注册”和“忘记密码”转化为热区操作,分别命名为btn_register,btn_forgetpsd;

Step4:接下来就依次添加登录页面一些常见的交互操作:

test case:手机号码:18811112222;密码:12345678

(1)当正确输入手机号码和密码时,点击下一步,跳转至app首页;点击热区“btn_login”,选择右侧交互面板中的“鼠标单击时”,会出现如下图的用例编辑对话框。此时可以开始编辑用例。

点击“添加条件”,如下图,该操作表示添加的条件为:

用户名==“18811112222” 同时密码==“12345678”(符合test case的条件)

点击左侧“添加动作”中的“打开链接”,在右侧的“配置动作”中选择“app首页”,如下图,点击“确定”后成功登录的case就完成了。

(2)当输入的手机号码不正确时,提示“请输入正确的手机号码!” 简单把正确的手机号码格式应该是介于13000000000和20000000000间的数列并不能为空。当鼠标焦点移至密码输入框时,判断手机号码输入是否正确。

点击密码输入框“psd_login”,选择右侧交互面板中的”获取焦点“时,

点击”添加条件”如下图,该操作表示的添加条件为,输入的手机号码的文本序列小于等于13000000000,或大于等于20000000000,或为空时,满足以下任一条件即可, 选择满足“Any”即表示满足以下任一条件,


点击“添加动作”中的“显示/隐藏”,“配置动作”勾选“wrong_tip”, 再在“添加动作”中选择“设置文本”,“配置动作”中选择“wrong_tip”,设置其值为“请输入正确的手机号码!”

(3)当焦点回到手机号码输入框时,上述提示消失。

点击密码输入框“psd_login”,选择右侧交互面板中的”获取焦点“时,点击“添加动作”中的“显示/隐藏”,“配置动作”勾选“wrong_tip”, 隐藏提示即可。

(4)当密码输入为空时或密码输入不正确时,点击“下一步”,提示“请输入正确的密码!”,同时焦点回到密码输入框里。添加条件步骤同上,添加的具体条件如图(下图为密码为空的状态):


(5)当输入的手机号码和密码都为空时点击“下一步”提示“手机号和密码输入不能为空!”。并设置焦点回到手机号码输入框,case如下图:

Step5:接下来是注册页面的一些相关交互,输入手机号码和验证码的交互及输入判断提示和登录的处理方法类似,在此页面不再重复。主要列举一下注册常见的发送验证码,验证码倒计时及重新发送的3个交互。

首先在验证码的对应区域添加一个“发送验证码”的按钮,然后将其装换为动态面板,然后在该动态面板上添加“倒计时”“重新发送”两个状态。


双击进入各个状态进行编辑,在面板区域添加按钮重新发送;“倒计时”状态需做特别的处理,在按钮上加入一个文本框元件,将其命名为“time” ,并处理其样式和按钮一致。PS: time元件主要用于处理倒计时数秒的处理(以10s倒计时为例)。

(1)点击”发送验证码“按钮,选择”单击“时,进入用例编辑对话框。选择”添加条件“下的设置面板状态,将发送验证码的状态切换至倒计时,并将倒计时妞按钮里的”time”值设置,等待1000ms, 设置time的值为29(设置为29可以触发倒计时交互)。

(2)倒计时交互设置:进入到“倒计时”面板中,选中“time”文本框,双击“当文本改变时”,进入用例编辑对话框,添加条件,如果time的值大于等于1时,等待1000ms,添加条件,设置“time>=1”的文本值。

然后添加每过1秒,数字减1。在这里需要用到局部变量的概念,点击fx, 添加局部变量LVAR1, 设置函数[[LVAR1-1]],点击确认。


添加条件,当“time”部件文字等于0时,动态面板切换至”重新发送“状态。

(3)设置重新发送的触发交互,选择“重新发送”按钮,设置“点击”时,设置time的值为10时,设置面板状态切换至倒计时。

倒计时效果参考:http://www.woshipm.com/rp/220599.html

我的原型下载地址: http://pan.baidu.com/s/1slw3FZ3 密码: p3xm

欢迎大家的吐槽和指导,小女子拜谢了!

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 194,491评论 5 459
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 81,856评论 2 371
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 141,745评论 0 319
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,196评论 1 263
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,073评论 4 355
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,112评论 1 272
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,531评论 3 381
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,215评论 0 253
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,485评论 1 290
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,578评论 2 309
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,356评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,215评论 3 312
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,583评论 3 299
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,898评论 0 17
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,174评论 1 250
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,497评论 2 341
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,697评论 2 335

推荐阅读更多精彩内容