Axure6.5 登录页面制作问题

主要用于设置不同的样式来来进行不同状态的区分。目前软件提供了六种属性进行设置。同时六种样式部分对应

了交互事件。

鼠标悬停在元件上，所触发的元件样式。

鼠标按下在元件上，所触发的元件样式。

当前元件设置选中时，所触发的元件样式。

当前元件设置禁用时，所触发的元件样式。

当前元件获取到焦点时，所触发的元件样式。

当前元件设置禁用时，所触发的元件样式。

在样式效果中包含了元件的常规样式属性，可以进行针对性的元件样式调整，常用的有元件文字大小、填充颜色、描边颜色、文字颜色等等。

元件除了可以设置初始是否隐藏显示的状态，同时可以设置禁用、选中、错误等状态。

设置对应的状态后，会在初始状态下加载对应状态的样式效果。

形状属性主要用于部分微动效的设置。同时借助不同的展现样式，区分所处不同的状态。

矩形、文本、（作为产品图标使用，没有也可以）、输入框、账号/密码icon。

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

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

先用矩形画一个手机界面，尺寸为375667；·制作界面的状态栏、顶部栏，把顶部栏的文本元素补上去（这些没有可以在公众号输入“移动端元件库”）。

用矩形画出两个输入框的长、宽度，设置圆角（图中尺寸为28040、圆角2）；再放置一个文本框，设置文本提示文案；设置手机号输入框文本长度为13（后面做讲解），密码输入框长度为20（控制密码最长的长度）；·最后再用矩形、文本作为按钮，分别放置：登录、注册、忘记密码（不清楚的看图）。

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

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

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

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

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

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

在手机号输入框设置用例“文本改变时”，该输入框的值为以上函数，同学可以直接复制：[[Thistextreplace(‘ ‘,”)substr(0,3)concat(‘ ‘)concat(Thistextreplace(‘ ‘,”)substr(3,4))concat(‘ ‘)concat(Thistextreplace(‘ ‘,”)substr(7))trim()]]·

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

完成，来看一下效果案例链接： >

以上就是关于Axure6.5 登录页面制作问题全部的内容，包括:Axure6.5 登录页面制作问题、Axure 9.0基础教程：史上最详细的元件说明，建议你认真看完（一）、Axure RP 9基础教程（八）-交互按钮 （Interactive Button）设置等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！