澳门配码一个月赚多少_澳门偏门赚钱_澳门洗码和配码
您当前位置: 首页 >  ASO优化

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

因太久没有更◎新,本先讲讲登录界面的原型设计。可关注后续的注册、*重置密码篇。

登录界面结构

需要准备哪些东西

矩形、文本、图片(作为ψ产品╢图标使用,没有也可以)、输入框、账号/密码i▂▃▅▆█con。

学完将学会什么

了解登录界面的布局以及各种元素,Ⅷ用户在操作时需要有哪些反馈,怎么Ш做体验较好,本次内容先按基础的做法为你展示,学完相信你会做出更好的交互原型卍。

下面开始剖解制作步骤……

制作方式

步骤一、画出所有元★素

先用矩形画一♥个手机界面,尺寸为375*667;制作界面的状态栏、顶部栏,把顶部γ栏的文本元素补上去(这些没有可以在公众号输入“移动端元件◑↔↕▪库”)。

用矩形画◣出两个输入框的长、宽度,设置圆角(图中尺寸为280*40、圆角2);再放置一个文本框,设置文本提示文案;设置手机号输入框文本长度为13(后面做讲解*),密码输入框长度为20(控制密码最长的长度);最※后·再用矩形、文本作为按钮,分≦别放置:登录、注册√、忘记密码(不清楚的看图)。

▕▦▩

步骤二、设置交互样式

给两⊿个输入框背景添加交互样式“选中的”效果,然后设置输入框“获取焦点时”设置背景为选中(true),“失去焦点时”设置背景为取消选中(false)。

在添加手机号输入框中添加一个“清空”icon,设置用例“文本改变时”条件:文本框文本长度≥1时,显示“ρ清空”icon,否则隐藏。同时设置清空按钮用例“鼠标单击时”,清空文本框的值。

为密码栏做一个密ы码显示/隐藏功能,首先找到显示/隐藏的两个icon,然后↔两个яicon分别放在一个动态面板的两个状态里(‖∠默认隐藏)。同时密码的输入框也需要做一个动态面面板,两个状态一个显示、一个隐藏(默认隐藏),点击显示/隐藏时,切换密码输入框的显示状态。

步骤三、场景设置

设置点击登录按钮时会有各◥种场景如:↓手机号为空々、密码为空、手机号◇或密码错误、登录成功。把四个toastⓥ放在一个动态面板内(默认隐藏),使用用例“鼠标单击时”分别有四个case,不同场景显示不同的toast提示。

做完以上的步骤基≈本上已经可以完成一个登陆界面的高保真交互原型了,下面再来了解一下进阶部分……

步骤四、进阶

如果已经做完以上的步骤,可以还尝试做以下还有可以优化的地〖方。如手机号∕11位数的自动分段(344的格式),还有账号输╜入框输入完11位数后,自动换行到输入密码栏……尝试做一下。

在手机号输入框设置用例“文本改变时”⊿,该输入框∣的值为以上函数,同学可以直接复制↙:[[This.text.replace(‘ ‘,”).substr(0",3).concat(‘ ‘).concat(This.text.replac≤e(‘ ‘▬;,”).substr(3,4)).concat(‘ ‘).concat(This.text.replace(̵─━6; ‘,”).substr(7)).tri◈m()]]

前面已经设置好元件文字长度,现在此处就≈不要再设置了。

完成,来看一下效果案例链接: https://fm3meu.ξaxshare.com

#专栏作家#

Doζnny,微信公众号:UE_diary,人↖人都是产品经理专栏作家。工作两年多的产品交互设计师,不定分享一些产品ㄨ交互细节。

本文原∨创发布于人人都是产品经理。未经许可,禁止转载

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

上一篇: 微软的未来之路 下一篇: 沉寂2年,90后辣妈如何华丽蜕变产品经理

澳门配码一个月赚多少_澳门偏门赚钱_澳门洗码和配码 2019-2022版权所有