Axure软件实现登录界面交互小教程

先上效果图先首先在Axure里面布局好登录页面以及登录成功的页面(也就是红色的那个页面),在布局的过程中请输入账号以及请输入密码两个元件选择使用文本框元件。并编组好整个登录成功页。在布局好界面之后选中请输入账号的元件进行命,请输入密码的文本框也是一样的需要进行命名如图,将登陆成功页面进行编组命名,并且进行隐藏。然后选中账号输入框进行用例设置,选择获取焦点用例进行设置,选择用例动作中的设置文本如图步骤所示进行设置。同样的针对密码输入框进行...

先上效果图先

Axure软件实现登录界面交互小教程

首先在Axure里面布局好登录页面以及登录成功的页面(也就是红色的那个页面),在布局的过程中请输入账号以及请输入密码两个元件选择使用文本框元件。并编组好整个登录成功页。

Axure软件实现登录界面交互小教程

在布局好界面之后选中请输入账号的元件进行命,请输入密码的文本框也是一样的需要进行命名如图,

Axure软件实现登录界面交互小教程

Axure软件实现登录界面交互小教程

将登陆成功页面进行编组命名,并且进行隐藏。

Axure软件实现登录界面交互小教程

Axure软件实现登录界面交互小教程

然后选中账号输入框进行用例设置,选择获取焦点用例进行设置,选择用例动作中的设置文本如图步骤所示进行设置。

Axure软件实现登录界面交互小教程

Axure软件实现登录界面交互小教程

同样的针对密码输入框进行设置,如图所示

Axure软件实现登录界面交互小教程Axure软件实现登录界面交互小教程

设置好所有步骤之后进行浏览器预览,看设置的点击效果

Axure软件实现登录界面交互小教程

输入框焦点设置完成之后设置登录按钮的交互,选种鼠标点击时的用例,选择用例动作显示,按如图步骤进行设置。

Axure软件实现登录界面交互小教程Axure软件实现登录界面交互小教程

最终登录页面的点击交互效果就完成了。

Axure软件实现登录界面交互小教程

看没有用动手是关键!!1Axure软件实现登录界面交互小教程(看完动手尝试下)

想要学习更多UI设计的亲,长按添加 微信:13548668599。备注:学习UI

Axure软件实现登录界面交互小教程

原创文章,作者:交互精选,如若转载,请注明出处:https://www.iamue.com/36278/

(0)
交互精选交互精选
上一篇 2018-04-07
下一篇 2018-04-07

相关推荐

  • 行云流水般的交互体验:当智能头机邂逅百度音乐

    音乐,作为一直延续的人类共有的精神食粮。从爱迪生发明第一部留声机到后来的黑胶唱片、再到磁带、CD、MP3经历了整整140年,储存和传输音乐的介质从磁性变成了光学;储存歌曲的数量越来越多,体积也越来越小。但是笔者有一个长期被困扰的问题:作为运动爱好者和音乐发烧友,在跑步锻炼时常常需要将iPod或者Sony Walkman笨重的机身绑在胳膊上,然后再插上耳机、选歌、调节音量等等至少4、5步操作才能听到想听的歌;还常常因为线头缠绕,越解越乱。...

    2018-01-30
  • Magic Sketch——寓教于乐的哄娃神器

    棒妈说这是一款哄娃神器。坐飞机火车时,需要娃瞬间安静时,这款神器简直好用到飙泪。这是一款玩具,也是一款画画工具。寓教于乐,大概说的就是这款过年可以代替压岁钱的神器。(请于微店购买)面对市场上琳琅满目的玩具很多宝妈宝爸表示挑花了眼、剁断了手还是没有买到让宝宝满意的到底应该选择什么玩具,才符合宝宝的成长需求?小汽车呀,变形金刚、芭比娃娃,还是...现在还在买这些玩具?你OUT了!孩子开心固然重要,但也别错过宝宝早期智力开发的黄金阶段!寓教于...

    2018-04-12
  • 英国各大院校交互设计专业的侧重点!

    随着网络和新技术的发展,人们越来越重视交互的体验,许多公司、网站、APP都开始注意到交互设计在品牌的创建、客户回头率、客户满意度等方面的影响,交互设计师也越来越受到重视。因此,许多同学在选择留学时,都会考虑英国的交互设计专业。交互设计专业在英国已经有半个世纪的历史,教学模式是:用心理学发现问题,用数学证明问题,用计算机解决问题。英国交互设计专业分为两个方向:1.Human Computer Interaction(HCI,人机交互设计)...

    2018-04-27
  • CDS Sketch Practise ! 今天教你画卡车!

    很多学员在一开始接触汽车设计的时候掌握不准比例的确,汽车的比例非常特殊抓不准比例草图非常容易走形我们之前的推送搬运过H-Point的车型比例讲解链接在文章底部掌握比例需要大量的练习如果你急于做项目可以先从比例易于掌握的卡车入手卡车侧视图设计手绘教程卡车的座舱可以视为一个大的体量相比较于其他车型更容易表达而且设计一个单体量车型的过程可以锻炼自己塑形和表达形体的能力是很好的汽车设计入门练习视频解析确定座舱的外轮廓用较浅的线条勾勒出来初步想法...

    2018-04-08
  • B2B、SaaS等企业软件中的交互设计总结

    我刚开始在VWO工作的时候,一直想弄清楚一个问题:企业软件(B2B)真的和B2C应用不一样吗?对于设计师或者设计流程来说,两者又有什么不同?这篇文章是我在过去几年里的一些经验梳理,希望能够帮助那些想去或者已经在企业软件团队工作的设计师们。一、什么是企业软件?下面是维基百科中的定义:企业应用是一种计算机程序,主要用来满足企业的需求,而非独立的用户。一些大家可能用过或者见过的企业软件在现代企业中,大多数企业应用是复杂、可拓展、分布式、模块化...

    2018-04-17
  • 物联网用户体验设计:四个物联网产品分析

    编译:冬夜之前,我曾经写过《5个重要的物联网用户体验设计策略》,在设计物联网产品时你可能需要考虑这些策略,如果你认为这些有点空洞或理论化,那么可以看下面四个产品的用户体验分析,实际上,有三个产品满足了用户体验设计的策略要求,另一个姑且算是反面教材吧。一、智能灯:增强体验灯泡,你经常打开或者关闭,就目前来看,灯泡并不是什么颠覆性产品,但是你试试如果一周不使用灯泡会怎样?感谢爱迪生,让我们不必去体验这种情况。今天,你很难在商店货架上灯泡的海...

    2018-04-20
  • 信息港招聘3000多岗位......

    萧山之窗移动生活由此开始....关注2018萧山信息港小镇春季人才招聘200余家企业,3000多个信息经济岗位!3月31日信息港小镇将会举办一场盛大的春季人才招聘会。招聘会时间:2018年3月31日(周六)9:00—16:00招聘会地点:萧山经济技术开发区启迪路198号 信息港小镇B-C连廊除了微医集团、科大讯飞、华网信息、一知智科、网盛数新、华澜微、云集微店、湾区孵化器.....这些信息港小镇内的王牌企业,还有萧山经济技术开发区的部分...

    2018-03-26
  • Axure RP 8 入门手册 – 第3章

    第3章元件功能概述第1节鼠标的操作第2节元件的使用第1节鼠标的操作麦子:老师,老师!小楼:干吗,干吗?麦子:不......小楼:呃......麦子:我想做一个页面,但是那些元件都怎么用啊?小楼:点住了拖到画布里面用呀!麦子:我知道是拖进去,但是我想要一个向左倾斜的圆形。小楼:你是仇人派来玩儿我的吗?圆形怎么倾斜?麦子:对不起,老师!少打个“椭”字。小楼:艹。在Axure中,如果需要一个椭圆形,可以放入一个矩形元件到画布中,然后,点击矩形...

    2018-04-05
  • Axure RP - 专业的原型设计工具

    俗话说的好,不会画原型的设计师不是好的产品经理。产品经理的一大技能就是可以熟练使用原型工具,画出优秀的产品原型。Axure RP是一个专业的快速原型设计工具,是美国 Axure Software Solution 公司旗舰的产品。产品经理能够快速创建应用软件或Web网站的线框图、流程图、原型和规格说明文档。它比一般创建静态原型的工具如 Visio、Omnigraffle、Illustrator、Photoshop、Dreamweaver...

    2018-03-16
  • 同样是券商,为什么你家APP用户体验不好?原来还有这一招...

    券业新力量 | 服务所有券业人的梦想当前浏览器不支持播放音乐或语音,请在微信或其他浏览器中播放As Long As You Love MeBackstreet Boys - Backstreet's Back导言洞察用户喜好,吸引用户,留住用户,让用户满意,是所有服务业的本质。本文以行为数据切入,从三大方面、两个案例,全方位解析如何利用行为数据提升证券App用户体验。用户体验(User Experience)最早被广泛认知和提及,是在上...

    2018-03-30