老葡京注册官网

Axure教程:登录·高保真设计

每个人都是产品经理,我想昨天分享

由于它已经很长时间没有更新,让我先谈谈登录界面的原型设计。您可以按照后续注册并重置密码。

image.php?url=0MqrtBFXWg

登录界面结构

image.php?url=0MqrtBTyGU

需要准备什么

矩形,文本,图片(用作产品图标,否),输入框,帐户/密码图标。

完成后你会学到什么?

了解登录界面和各种元素的布局,用户需要操作的反馈,如何做得更好,这些内容将首先向您展示基础,我相信您将制作更好的交互式原型。

让我们开始解剖过程.

如何制作

首先画一个带矩形的手机界面,大小为375 * 667; 创建界面的状态栏,顶栏,添加顶栏的文本元素(这些不能进入公共号码中的“移动组件库”)。

使用矩形绘制两个输入框的长度和宽度,设置圆角(尺寸为280 * 40,圆角2);然后放置一个文本框来设置文本提示副本;将电话号码输入框的文本长度设置为13(后面会解释),密码输入框的长度为20(控制密码的最长长度);最后,使用矩形和文本作为按钮放置:登录,注册和忘记密码(不清楚的视图)。

image.php?url=0MqrtBPymY

将交互式“选定”效果添加到两个输入框背景,然后设置输入框“获取焦点时”将背景设置为true(true),并将“当焦点丢失时”设置背景以取消选中(false )。

image.php?url=0MqrtBW5P9

Piece:当文本框文本长度≥1时,显示“Empty”图标,否则隐藏。同时,设置空按钮用例“当鼠标单击”时清除文本框的值。

image.php?url=0MqrtBJ6p6

image.php?url=0MqrtBDqCg

要为密码栏执行密码显示/隐藏功能,首先找到显示/隐藏的两个图标,然后将这两个图标置于动态面板的两种状态(默认为隐藏)。同时,密码的输入框也需要是动态面板,两个状态一个显示,一个隐藏(默认隐藏),当点击显示/隐藏时,切换密码输入框的显示状态。

image.php?url=0MqrtB97G6

image.php?url=0MqrtBvKY2

设置点击登录按钮时,会出现各种情况,例如:手机号码为空,密码为空,手机号码或密码不正确,登录成功。将四个toast放在动态面板中(默认隐藏),并使用用例“鼠标单击”每个有四个案例,不同的场景显示不同的toast提示。

完成上述步骤后,您基本上可以完成登录界面的高保真交互式原型。我们来看看高级部分.

image.php?url=0MqrtBF6W0

如果您已经完成了上述步骤,您还可以尝试执行以下操作,并且还有一些需要优化的区域。例如,手机号码的11位自动分段(格式为344)和帐户输入框的11位输入自动换行到输入密码字段.尝试这样做。

在手机号码输入框中,设置用例“当文本被更改”时,输入框的值为上述功能,学生可以直接复制:[[This.text.replace('',“)。substr (0,3).concat('')。concat(This.text.replace('',“)。substr(3,4))。concat('')。concat(This.text.replace('' ,“)。substr(7))。trim]]

组件文本长度已在前面设置,因此现在不要在此处设置。

image.php?url=0MqrtBbdhy

完成后,看一下效果案例链接:

Donny,_diary,每个人都是产品经理专栏作家。已经工作两年以上的产品交互设计师可能不会分享一些产品交互细节。

本文最初发布于每个人的产品经理。未经许可,禁止复制

该地图来自Unsplash,基于CC0协议

收集报告投诉