Axure教程:四步设计一个web端登录原型 获赏10金币 案例教程 基础教程

Donny 普通用户 2019-12-10 2858

下面看一下今天要讲的内容:




是不是看起来很简单,下面我们来开始制作原型…


准备元件


1.打开 Axure 新建文件,按如图的样式,拉入矩形、文本框、文本,如以下位置摆放,右上角为点击切换到微信扫码登录的入口 ;




图里大致尺寸大小:

  • 背景框:w:360 px ,h:395 px ;
  • 输入框、按钮:w:320 px ,h:40 px ;
  • 文本大小:12 px ,14 px ,18 px ;


2.继续制作 “ 微信扫码登录 ” ,该页面比较简单,右上角也是点击切换到账号密码登录的入口 ;




设置交互效果


1.拉入一个动态面板,将 “ 账号密码登录 ” / “ 微信扫码登录 ” 放入动态面板里面,“ 账号密码登录 ” 放在顶部,如图:




2.在 “ 账号密码登录 ” 的右上角按钮上设置效果,如图( “ 微信扫码登录 ” 的按钮也一样 ):




3.这样一个简单的登录窗口就完成了。

现在一个简单的界面就做好了,但要考虑到界面在载入时,同时获取到输入框的焦点,再样在体验上能够增加好感度,下面开始制作…


进阶


1.给 “ 账号密码登录 ” 里的 “ 请输入手机号码 ” 起一个名称(随意),然后在动态面板以外的空白处点击属性 – 页面载入时 – 设置焦点 –  “ 请输入手机号码 ” 输入框,如图:




2.在 “ 微信扫码登录 ” 页面,右上角的点击按钮效果里,也加入点击时 -设置焦点 – “ 请输入手机号码 ” 输入框,如图:




3.这样所有的效果就都做好了,可以看一下以下效果:




以上就是所有内容,希望大家喜欢,如果有什么好的建议或方法,欢迎下方留言。


axure商城
上传的附件:
快速回复
打赏排行 用户名 打赏金额
第1名 沈十三 10金币
最新回复 (76)
  • saerge 普通用户 4月前
    0 引用 77
    谢谢分享!
  • h_1602901675 普通用户 5月前
    0 引用 76
    xiexie
  • 迷路的风 普通用户 5月前
    0 引用 75
    学习了
  • 黎思绪 普通用户 5月前
    0 引用 74
    谢谢分享
  • penghb 普通用户 5月前
    0 引用 73
    学习学习
  • 19980217551 普通用户 5月前
    0 引用 72
    谢谢
  • 有味 普通用户 6月前
    0 引用 71
    感谢分享
  • 汪富贵儿 普通用户 6月前
    0 引用 70
    感谢分享
  • 芋圆 普通用户 6月前
    0 引用 69
    谢谢
  • 杰瑞哥哥 普通用户 7月前
    0 引用 68
    感谢大佬
  • 1034661056 普通用户 7月前
    0 引用 67
    谢谢
  • snseam 普通用户 9月前
    0 引用 66
    学习了学习了
  • zsq5567 普通用户 9月前
    0 引用 65
    感谢大佬
  • yyandwh 普通用户 9月前
    0 引用 64

    感谢分享

  • cc2568517779 普通用户 9月前
    0 引用 63
    感谢
  • musi 普通用户 9月前
    0 引用 62
    谢谢分享~
  • zxc_orz 普通用户 9月前
    0 引用 61
    感谢分享
  • meihao 普通用户 9月前
    0 引用 60
    感谢分享
  • yangfuhua 普通用户 9月前
    0 引用 59
    6666
  • Satyh- 普通用户 9月前
    0 引用 58
    感谢
  • 呵呵呵_1593440973 普通用户 9月前
    0 引用 57
    谢谢!
  • aimly 普通用户 9月前
    0 引用 56
    谢谢
  • 哆哆 普通用户 10月前
    0 引用 55
    感谢分享
  • huangni 普通用户 10月前
    0 引用 54
    感谢分享,获得10金币奖励!
  • Hellie* 普通用户 10月前
    0 引用 53
    谢谢分享!
  • hxc_1591770453 普通用户 10月前
    0 引用 52
    感谢分享!
  • 蔡蔡很菜 普通用户 10月前
    0 引用 51
    xiexie
  • awssss 普通用户 10月前
    0 引用 50
    谢谢分享
  • hcn912 普通用户 10月前
    0 引用 49
    感谢分享
  • herbert 普通用户 10月前
    0 引用 48
    感谢分享
  • haha1243 普通用户 10月前
    0 引用 47
    喜欢这种风格
  • 咻止符 普通用户 10月前
    0 引用 46
    感谢
  • a5991031 普通用户 10月前
    0 引用 45
    感谢分享
  • 张一 普通用户 10月前
    0 引用 44
    感谢!
  • 伊、 普通用户 10月前
    0 引用 43
    感谢分享
  • jyeandy 普通用户 10月前
    0 引用 42
    谢谢分享
  • 纳洛酮。 普通用户 11月前
    0 引用 41
    66
  • 文子_1584073517 普通用户 11月前
    0 引用 40
    感谢分享
  • smhmily 普通用户 11月前
    0 引用 39
    感谢分享
  • gxlqs2249 普通用户 11月前
    0 引用 38
    原来axure可以这么强大
  • 千山飞鸟 普通用户 11月前
    0 引用 37
    感谢楼主分享
  • 孙悟空_1587692538 普通用户 11月前
    0 引用 36
    666666
  • 爱看星星的周宇宙 普通用户 11月前
    0 引用 35
    感谢分享
  • xirongdong 普通用户 12月前
    0 引用 34
    666
  • ICEJOE 普通用户 12月前
    0 引用 33
    谢谢分享
  • 流金 普通用户 12月前
    0 引用 32
    666
  • 千寻_1579416321 普通用户 2020-4-2
    0 引用 31
    谢谢作者
  • 单单 普通用户 2020-3-20
    0 引用 30
    非常好,可以学习学习嘛
  • zyzy 普通用户 2020-3-19
    0 引用 29
    666
  • #^_^# 普通用户 2020-3-18
    0 引用 28
    感谢
  • 小小的小小L 普通用户 2020-3-18
    0 引用 27
    谢谢分享
  • lt3 普通用户 2020-3-16
    0 引用 26
    谢谢
  • Chen826 普通用户 2020-3-16
    0 引用 25
    666
  • YQ_1584342630 普通用户 2020-3-16
    0 引用 24
    感谢分享
  • HMCao 普通用户 2020-3-16
    0 引用 23
    感谢大佬
  • Jeffreyguo 普通用户 2020-3-12
    0 引用 22
    谢谢分享
  • 真以航(熊岳南京) 普通用户 2020-3-10
    0 引用 21
    感谢分享
  • juzipm 普通用户 2020-2-26
    0 引用 20
    感谢分享
  • szuzsq 普通用户 2020-2-4
    0 引用 19
    ok
  • ptxshen 普通用户 2020-2-3
    0 引用 18
    感谢分享
  • 清風 普通用户 2020-1-21
    0 引用 17
    6666666
  • 雪糕_1571283095 普通用户 2019-12-31
    0 引用 16
    谢谢
  • zhixiao9026 普通用户 2019-12-27
    0 引用 15
    mark
  • 闫涵 普通用户 2019-12-25
    0 引用 14
    666
  • tingyu 普通用户 2019-12-24
    0 引用 13
    感谢大佬
  • 或许。 普通用户 2019-12-23
    0 引用 12
    xiexei 
  • 堂·吉诃德 普通用户 2019-12-22
    0 引用 11
    不错
  • 小建清新 普通用户 2019-12-22
    0 引用 10
    mark
  • ax009 普通用户 2019-12-22
    0 引用 9
    mark
  • 飞天球 普通用户 2019-12-21
    0 引用 8
    6
  • V.YU 普通用户 2019-12-18
    0 引用 7
    mark
  • tony_bear 普通用户 2019-12-17
    0 引用 6
    感谢大佬
  • dali169 普通用户 2019-12-12
    0 引用 5
    感谢大佬
  • summer_1576048886 普通用户 2019-12-11
    0 引用 4
    111
  • 沈十三 管理员 2019-12-11
    0 引用 3
    感谢分享,获得10金币奖励!
  • rushcome 普通用户 2019-12-11
    0 引用 2
    简明
返回
axure商城