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

Donny 普通用户 2019-12-16 3213

登录界面结构

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金币
最新回复 (110)
  • Bean77 普通用户 2天前
    0 引用 111

    感谢分享

  • Bean77 普通用户 2天前
    0 引用 110
    感谢分享
  • majinming 普通用户 4天前
    0 引用 109
    11111
  • dango 普通用户 11天前
    0 引用 108
    感谢分享
  • shiyu_29 普通用户 11天前
    0 引用 107
    666
  • RunTu 普通用户 15天前
    0 引用 106
    谢谢分享
  • Elapse 普通用户 5月前
    0 引用 105
    66666
  • nan_1603167921 普通用户 6月前
    0 引用 104
    感谢
  • 米古 普通用户 6月前
    0 引用 103
    感谢
  • 泡泡教主 普通用户 7月前
    0 引用 102
    感谢分享
  • cuian 普通用户 7月前
    0 引用 101
    123
  • jane16 普通用户 8月前
    0 引用 100
    感谢分享
  • line_1598513709 普通用户 8月前
    0 引用 99
    感谢分享
  • raulcheng 普通用户 8月前
    0 引用 98
    感谢分享
  • 悟空_1589853708 普通用户 8月前
    0 引用 97
    感谢分享
  • lover* 普通用户 8月前
    0 引用 96
    感谢分享
  • Eric_1598164004 普通用户 8月前
    0 引用 95
    感谢分享
  • g18 普通用户 9月前
    0 引用 94
    感谢
  • 愚妄 普通用户 9月前
    0 引用 93
    感谢分享
  • 破壁者 普通用户 9月前
    0 引用 92
    希望多出些教程
  • guanzi 普通用户 9月前
    0 引用 91
    学习
  • 18830355741 普通用户 9月前
    0 引用 90
    感谢
  • 暖暖_1594784296 普通用户 10月前
    0 引用 89
    感谢分享!
  • 暖暖_1594784296 普通用户 10月前
    0 引用 88
    感谢分享
  • star@son 普通用户 10月前
    0 引用 87
    感谢分享
  • 君莫悲 普通用户 10月前
    0 引用 86
    感谢分享!
  • 左撇子匠 普通用户 10月前
    0 引用 85
    感谢分享 感谢
  • 宁根根_1577936858 普通用户 11月前
    0 引用 84
    感谢分享,下载使用
  • CJ_1589883130 普通用户 11月前
    0 引用 83
    感谢分享
  • 紫云 普通用户 11月前
    0 引用 82
    感谢分享,学习了
  • 沾花不笑 普通用户 11月前
    0 引用 81
    感谢分享
  • Victor Guo 普通用户 11月前
    0 引用 80

    学习了 感谢

  • 黑又浓 普通用户 11月前
    0 引用 79
    谢谢
  • 1009510824 普通用户 11月前
    0 引用 78
    感谢分享
  • sddan 普通用户 11月前
    0 引用 77
    感谢分享
  • ice_1589503551 普通用户 11月前
    0 引用 76
    学习了,多谢
  • 7日多云 普通用户 11月前
    0 引用 75
    谢谢
  • 长歌陌路 普通用户 11月前
    0 引用 74
    感谢分享
  • 嗨赢 普通用户 11月前
    0 引用 73
    666666
  • wzq 普通用户 11月前
    0 引用 72
    666
  • zyzy5211 普通用户 11月前
    0 引用 71
    谢谢
  • 纳洛酮。 普通用户 11月前
    0 引用 70
    66
  • Ys l_1586321932 普通用户 11月前
    0 引用 69
    感谢分享。
  • 张一 普通用户 12月前
    0 引用 68
    感谢
  • meihao 普通用户 12月前
    0 引用 67
    666
  • tzx_qx 普通用户 12月前
    0 引用 66
    多谢分享
  • 刀刀狗 普通用户 12月前
    0 引用 65
    感谢
  • A4 普通用户 12月前
    0 引用 64
    666
  • 潘杰 普通用户 2020-5-11
    0 引用 63
    感谢分享!
  • beAst_1588987723 普通用户 2020-5-11
    0 引用 62
    感谢楼主
  • 雁过无痕 普通用户 2020-5-7
    0 引用 61
    感谢
  • HUALOONG 普通用户 2020-5-7
    0 引用 60
    感谢分享
  • Lemin.focus 普通用户 2020-5-6
    0 引用 59
    所以我平时的话就直接复用这个功能行不行
  • cuijing0925 普通用户 2020-5-4
    0 引用 58
    感谢分享
  • 3Sea 普通用户 2020-4-30
    0 引用 57
    点个赞
  • babybear619 普通用户 2020-4-29
    0 引用 56
    感谢分享
  • Peace 普通用户 2020-4-28
    0 引用 55
    感谢分享
  • 哈迪斯00 普通用户 2020-4-28
    0 引用 54
    3q
  • Knicks 普通用户 2020-4-28
    0 引用 53
    666
  • lovely HL 普通用户 2020-4-28
    0 引用 52
    学习
  • wukun 普通用户 2020-4-28
    0 引用 51
    感谢分享
  • 爱看星星的周宇宙 普通用户 2020-4-23
    0 引用 50
    感谢分享
  • laoxu 普通用户 2020-4-13
    0 引用 49
    感谢分享
  • Demon_1586777772 普通用户 2020-4-13
    0 引用 48
    66
  • Demon_1586777772 普通用户 2020-4-13
    0 引用 47
    666
  • 豆子:-) 普通用户 2020-4-10
    0 引用 46
    感谢分享
  • 那个姓郭的、 普通用户 2020-4-10
    0 引用 45
    感谢分享
  • 123456min 普通用户 2020-4-10
    0 引用 44
    666
  • 好好好好好好666666 普通用户 2020-4-10
    0 引用 43
    谢谢
  • 屈大象 普通用户 2020-4-10
    0 引用 42
    感谢分享!
  • agstarpm 普通用户 2020-4-10
    0 引用 41
    6666
  • 谢嘉 普通用户 2020-4-9
    0 引用 40
    好人一生平安
  • 别小龙 普通用户 2020-4-9
    0 引用 39
    66666
  • wangtengfei 普通用户 2020-3-26
    0 引用 38
    666
  • wt12315 普通用户 2020-3-20
    0 引用 37
    感谢分享
  • 单单 普通用户 2020-3-20
    0 引用 36
    谢谢
  • 琳星点点 普通用户 2020-3-17
    0 引用 35
    666
  • wangln114 普通用户 2020-3-12
    0 引用 34
    谢谢分享
  • 程维维 普通用户 2020-3-11
    0 引用 33
    感谢分享
  • 真以航(熊岳南京) 普通用户 2020-3-10
    0 引用 32
    感谢分享
  • sensen0710 普通用户 2020-2-24
    0 引用 31
    感谢分享
  • 普通用户 2020-2-21
    0 引用 30
    感谢分享
  • meison 普通用户 2020-2-20
    0 引用 29
    666
  • AlgerZH 普通用户 2020-2-19
    0 引用 28
    谢谢分享
  • seanouyang 普通用户 2020-2-19
    0 引用 27
    感谢分享
  • Evelyn_1581596864 普通用户 2020-2-14
    0 引用 26
    为什么你的可以一直是“if”,我这里只有一个“if”,后面都是“否则 如果“???
  • Evelyn_1581596864 普通用户 2020-2-13
    0 引用 25
    谢谢
  • 海涛_1581307997 普通用户 2020-2-10
    0 引用 24
    谢谢
  • LR6.6 普通用户 2020-2-6
    0 引用 23
    谢谢谢谢
  • zpc0108 普通用户 2020-2-6
    0 引用 22
    66666
  • shaoqiqi 普通用户 2020-2-5
    0 引用 21
    666666
  • szuzsq 普通用户 2020-2-4
    0 引用 20
    ok,真的很好.
  • tianbinge 普通用户 2020-1-30
    0 引用 19
    感谢分享
  • 千寻_1579416321 普通用户 2020-1-21
    0 引用 18
    万分感谢
  • wmy0316 普通用户 2020-1-21
    0 引用 17
    感谢分享
  • ссс. 普通用户 2020-1-19
    0 引用 16
    谢谢
  • 。。。_1578378131 普通用户 2020-1-19
    0 引用 15
    赞!谢谢分享!
  • moqui 普通用户 2020-1-19
    0 引用 14
    1
  • 黑白灰 普通用户 2020-1-19
    0 引用 13
    感谢分享
  • 爱晒钛阳滴鱼 普通用户 2020-1-18
    0 引用 12
    666
返回
axure商城