Axure教程:登录·高保真设计(上) 获赏10金币 案例教程 基础教程

Donny 普通用户 3月前 1058

登录界面结构

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


需要准备哪些东西

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


学完将学会什么

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

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


步骤一、画出所有元素

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

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


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

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


步骤二、设置交互样式

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

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


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

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


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

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


步骤三、场景设置


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

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

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


步骤四、进阶


如果已经做完以上的步骤,可以还尝试做以下还有可以优化的地方。如手机号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()]]·

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

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


完成,以下源文件可看效果。

axure商城
上传的附件:
快速回复
打赏排行 用户名 打赏金额
第1名 沈十三 10金币
最新回复 (37)
  • wangtengfei 普通用户 8天前
    0 引用 38
    666
  • wt12315 普通用户 14天前
    0 引用 37
    感谢分享
  • 单单 普通用户 14天前
    0 引用 36
    谢谢
  • 琳星点点 普通用户 17天前
    0 引用 35
    666
  • wangln114 普通用户 22天前
    0 引用 34
    谢谢分享
  • 程维维 普通用户 23天前
    0 引用 33
    感谢分享
  • 真以航(熊岳南京) 普通用户 24天前
    0 引用 32
    感谢分享
  • sensen0710 普通用户 1月前
    0 引用 31
    感谢分享
  • 普通用户 1月前
    0 引用 30
    感谢分享
  • meison 普通用户 1月前
    0 引用 29
    666
  • AlgerZH 普通用户 1月前
    0 引用 28
    谢谢分享
  • seanouyang 普通用户 1月前
    0 引用 27
    感谢分享
  • Evelyn_1581596864 普通用户 1月前
    0 引用 26
    为什么你的可以一直是“if”,我这里只有一个“if”,后面都是“否则 如果“???
  • Evelyn_1581596864 普通用户 1月前
    0 引用 25
    谢谢
  • 海涛_1581307997 普通用户 1月前
    0 引用 24
    谢谢
  • LR6.6 普通用户 1月前
    0 引用 23
    谢谢谢谢
  • zpc0108 普通用户 1月前
    0 引用 22
    66666
  • shaoqiqi 普通用户 1月前
    0 引用 21
    666666
  • szuzsq 普通用户 1月前
    0 引用 20
    ok,真的很好.
  • tianbinge 普通用户 2月前
    0 引用 19
    感谢分享
  • 千寻_1579416321 普通用户 2月前
    0 引用 18
    万分感谢
  • wmy0316 普通用户 2月前
    0 引用 17
    感谢分享
  • ссс. 普通用户 2月前
    0 引用 16
    谢谢
  • 。。。_1578378131 普通用户 2月前
    0 引用 15
    赞!谢谢分享!
  • moqui 普通用户 2月前
    0 引用 14
    1
  • 黑白灰 普通用户 2月前
    0 引用 13
    感谢分享
  • 爱晒钛阳滴鱼 普通用户 2月前
    0 引用 12
    666
  • 明天_1579242803 普通用户 2月前
    0 引用 11
    感谢分享。
  • panpan_1579250337 普通用户 2月前
    0 引用 10
    感谢分享
  • Lilsui 普通用户 2月前
    0 引用 9
    6666666666666
  • zsj123 普通用户 2月前
    0 引用 8
    感谢分享
  • 晨曦2020 普通用户 3月前
    0 引用 7
    6666
  • earsch 普通用户 3月前
    0 引用 6
    6666
  • Fly_1576550209 普通用户 3月前
    0 引用 5
    666
  • 千之陌 普通用户 3月前
    0 引用 4
    感谢分享
  • kevin1981 普通用户 3月前
    0 引用 3
    感谢分享
  • 沈十三 管理员 3月前
    0 引用 2
    感谢分享,已获得10金币奖励!
返回
axure商城