1. 元件准备 用户名、密码的输入框由矩形、icon、文本框三个元件组成。 为方便区分,将用户名输入框元件中,矩形命名为“矩形1”,文本框命名为“用户名”,文本框元件属性设置为:text、隐藏边框,增加提示文件“用户名、邮箱、手机号”,三个元件排列好组合,命名为“用户名输入框”。 将密码输入框元件中,矩形命名为“矩形2”,文本框命名为“密码”,文本框元件属性设置为:密码、隐藏边框,增加提示文件“登录密码”,三个元件排列好组合,命名为“密码输入框”。 参考网页登录样式,将各元件在界面中排列好。(可参考下图,本次教程只实现登录验证,不做注册和网络应用登录的交互) 2. 登录交互登录的交互包括以下几个方面:
这里的交互逻辑为:鼠标选中输入文本框时,输入框边框和icon颜色高亮显示,取消选中时,恢复原来样式。(以用户名输入框为例)具体设置为: 第一步:设置用户名输入框中的矩形和icon的选中状态; 以同样的方式设置icon的选中状态。 选中用户名文本款,设置获取焦点和失去焦点时,矩形和icon选中状态的值。 以同样的方式设置密码输入框的交互效果即可,设置成功后,预览效果如下: 2.2 登录时校验交互登录验证主要包括以下几个部分:
首先添加一个动态面板,命名为提示,设置为隐藏;添加四个状态:
每个面板增加各个状态对应的提示内容,如下图: 然后,开始设置登录按钮的校验交互,添加鼠标点击时用例,通过的输入值判断显示提示面板的状态。提示面板显示时,增加下推元件效果。 预览效果: ok,今天就这样啦~ Axure只是工具,产品设计最重要的是逻辑与表达。 本文由 @斑鸠 原创发布于人人都是产品经理。 题图来自Unsplash,基于CC0协议 |
|