「Axure9交互」贴脸教你写账号密码登录

6 评论 7987 浏览 28 收藏 8 分钟

编辑导读:如何用Axure实现账号密码登录高保真原型?本文作者从自身工作需求出发,结合实际操作,对用Axure9实现账号密码登录的高保真效果进行了梳理分析,与大家分享。

最近在写账号密码登录的高保真原型交互时遇到了一些问题,在网上搜索了一些资料,一直没找到符合要求的案例,所以,只能自己肝了。这篇文章将为大家分享一个实现思路,方法并不唯一,受众比较适合产品新人或Axure初学者。

演示传送门:https://vipezy.axshare.com/#id=rzlm6e&p=page_1

01 实现效果

1. 单击账号输入框

  1. 默认态得到焦点时(焦点即光标):内容清空,全局变量counter1由空(blank)变为0。
  2. 文本改变时:counter1开始计数。
  3. 文本变化态失去焦点时:如果文本无内容,则恢复默认态;如果文本内容不为空,则保存文本状态。

2. 单击密码输入框

  1. 默认态得到焦点时:内容清空,全局变量counter2由空(blank)变为0。
  2. 文本改变时:counter1开始计数,动态面板开启循环态。
  3. 文本变化态失去焦点时:如果文本无内容,则恢复默认态;如果文本内容不为空,则保存文本状态。

3. 动态面板

面板状态改变时,如果账号和密码同时满足大于5个字符的条件,则动态面板设置登录按钮为可用状态。否则,不执行任何指令。

4. 登录按钮

按钮默认状态为灰色(模拟禁用状态),当账号和密码同时满足字符条件时,变为蓝色(模拟可用状态)。

02 具体操作

1. 如图摆好元件

案例由两个Label、两个单文本框、一个动态面板、一个按钮组成。

2. 创建两个全局变量

这里的全局变量主要用来表示字符长度,所以我起名为计数器。

3. 账号框交互如下

得到焦点时:

需设置用例文字等于初始文本时才清空内容。

文本改变时:

设置当文本不等于初始内容时,才给全局变量counter1赋值

当文本等于初始内容时,设置counter1为空。

失去焦点时:

这里需要注意,当counter1等于0或为空(blank)才恢复账号框为初始内容,否则不采取任何动作,即保存文本内容。

4.密码框交互

密码的交互大部分与账号一样。

不一样的是,当文本改变时,全局变量要设置counter2,同开启动态面板开始循环,使其不断地处于状态改变时。

动态面板循环停止的条件可以是“或”,也可以是“与”,这里无伤大雅,只为形成一个逻辑闭环,不影响登录按钮的交互。

5. 动态面板交互

到这里应该就很容易看懂了。

两个全局变量都大于5时,登录按钮才能选中。

有任意一个全局变量不满足条件时,登录按钮都会处于未选中状态。

6. 登录按钮交互

登录按钮默认为灰色,表示禁用状态。当登录按钮被选中时则变为图中蓝色,表示可用状态。

我这里没有用禁用和不禁用来写这段,同样的效果方法有很多,小伙伴们可以自行尝试。

7. 泳道图

交互到这里就讲完了,另附上一份泳道图,给还没理解的小伙伴梳理思路。我用泳道图来画,意在突出各个元件的功能和状态,看起来内容很多,其实分为三部分。

首先,分析左侧账号和counter1的流程;分析清楚左侧后,再分析中间密码和counter2的流程,账号弄懂了密码就简单很多了;最后,分析动态面板和登录按钮的流程。按照这个顺序分模块梳理就很容易明白了,思路也会更加清晰。

结语

本文给大家讲解时用的是正向思维,但我在写的时候,是事先构思好一个设计思路的,比如用动态面板循环态来过渡两个变量值,这是事先想好的,但动作执行的前提条件是需要在预览中点开Console反复调试的。

本文只为产品新人提供一种设计思路,方法并不唯一,感兴趣的小伙伴评论区可以留下你的方法。

 

作者:Edison,热爱互联网并对数字化世界有浓厚兴趣的产品人。

本文由 @Edison 原创发布于人人都是产品经理,未经作者许可,禁止转载。

题图来自Unsplash,基于CC0协议。

更多精彩内容,请关注人人都是产品经理微信公众号或下载App
评论
评论请登录
  1. 教就教,贴脸免了。不过…….帅的话也不是不可以

    来自北京 回复
  2. 不错不错,挺详细的,如果能有图层就更全面了

    回复
  3. 回复
  4. 讲这么多不如讲个多平台账户体系搭建的逻辑来的实在【抠鼻】

    来自四川 回复
  5. 专门从百度过来的,就这个破登录设计,要搞那么复杂,不是在误导别人吗?产品设计要的是高效准确,你个登录就搞那么多表面功夫,做别的功能还要花多长时间?把产品当设计师玩儿呢?

    来自四川 回复
    1. 额……看下标题

      回复