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

相关推荐

  • 用户体验与产品价值

    关注一下,更多精彩等着你户体验不等于用户可用性当你局限地将用户体验等同于用户接触UI时的可用性的时候,或者是局限地理解用户体验只是发生在用户使用产品过程中的时候,你就会说:有比它更重要的事情,比如用户价值、产品价值。是的,没错。如果产品没有用,即对用户没有价值,UI的可用性绝对不是最重要且,但是我们仍然得时刻提醒自己,可用性不等同于用户体验,可用性只是用户体验(使用中)的一部分而已。用户体验设计超越产品设计。用户体验设计包括组织开展用户...

    2018-03-03
  • 【干货知识】最全面的交互设计原则和理论汇总(下)

    【点击上方蓝字↑↑↑关注「艺恋优梦」获得每晚推送】防错原则:防错原则认为大部分的意外都是由设计的疏忽,而不是人为操作疏忽。通过改变设计可以把过失降到最低。该原则最初是用于工业管理的,但在交互设计也十分适用。如在硬件设计上的 USB 插槽;而在界面交互设计中也是可以经常看到,如当使用条件没有满足时,常常通过使功能失效来表示(一般按钮会变为灰色无法点击),以避免勿按。如上图所示极客公园的评论功能快,在留言框没有内容或邮箱格式不正确的时候是无...

    2018-04-11
  • AxureUX后台业务管理系统原型模板发布

    这是一套基于电商产品的后台业务管理系统原型模板,包含了商品、订单、库存、用户、促销、运营、内容、统计、财务、设置、权限等十多个电商后台系统管理模块。模板中提供了多套登录界面和布局框架方案,同时整理出了后台系统中各类常用的交互元素及组件,可以方便快速的复用到任何中大型系统项目原型方案中。模板框架采用了自适应布局处理,可以在各种屏幕分辨率下达到最佳的兼容性和浏览效果,同时所有功能模块二级界面都是单独设计并使用内联框架嵌入,可极大的提升输出效...

    2018-03-06
  • 2019工业设计/交互设计考研课程全国招生

    2019考研大军将会是一支更庞大的队伍,唯有先见意识和过人的战术才能庸中佼佼。初次踏上考研队列的童鞋们难免会遇到一些问题。专业问题、复习计划、院校选择、分数线和招生指标可私信客服。[ 长按加客服好友 ]工业设计x交互设计- - - - -相信大部分同学考研担心最多的是专业科目,500分中占了300分,在工业设计考研中,快题手绘和设计理论就是你的专业考试内容,快题考察你的设计表现能力,所以,手绘很重要。说到手绘,ICAMP创意坊有着教学多...

    2018-04-10
  • 用户体验让生活更美好

    我们赤裸裸的来到这个世界,最后赤裸裸的离开,来人世走一遭就是来体验来了。图片来源:亚朵官网-Life is Atour周四晚上拉着应用体验部的穆老师在产品交互问题上聊了一个多小时,深受启发,再结合上周末去天津游玩,入住了梁宁老师在得到里推荐的非常注重用户体验的亚朵酒店,所以我觉得今天有必要在这里和大家聊聊用户体验的话题。图片来源: Scorch先声明用户体验设计不是视觉设计或UI设计,后者只能算是前者的组成部分。“用户体验”一词是Don...

    2018-04-02
  • 《王者荣耀》的操作交互设计研究

    《王者荣耀》是国内最成功的手机版MOBA类型游戏。MOBA从PC的辉煌延续到了手游,当时很多人唱衰手机上的MOBA,主要还是操作上的问题,手机上无法实现鼠标的快速精确定位。为了优化手机版MOBA,大家进行了各种尝试,有触摸点击型(虚荣),有双摇杆型、单摇杆型,最终单摇杆+技能副摇杆结合的《王者荣耀》一统江湖,现在很少有人说王者手感不好的,它的很多设定都成了现在MOBA游戏的标杆。这里,我们就一步步地分解看看,王者的操作手感是如何设计的。...

    2018-02-26
  • UED专访 | 魏娜:设计由情感而生

    📌 编辑 | Belinda.L《漂亮的房子》播至第三阶段,福鼎站的房子即将展现在观众面前,UED采访了“小溪家”的建筑师魏娜,探寻项目背后的情感设计。魏  娜WEI 建筑设计创始合伙人、主创建筑师魏娜于2013年发布过一条微博,感谢UED杂志的建筑师赠刊上精心的小细节。而她与UED的缘分其实从更早之前就已开始了。UED杂志特别赠刊烫印有建筑师姓名 ©魏娜“从2009年我们事务所刚刚成立的时候,UED就开始给予我们很大的支持,在这近9年...

    2018-02-02
  • 美国交互设计“综合类amp;艺术类”院校申请差异对比?

    回复【交互】,获得专业老师一对一专业指导随着现今数字智能等高科技的发展,交互设计成为近些年众多艺术留学生的热门首选专业。但热门并不代表很多同学都对交互设计有所了解,比如,根据向汉艺咨询的学生情况分析,90% 的同学都分不清什么是到底什么是交互,只是很表面的认为交互就是各种“APP”、“UI设计”或者VR/AR。实际上,即使国外最顶级的院校,你也找不到一所专门设立“APP”的专业,“UI设计”严格上来说只能算是“平面设计”,而设立VR/A...

    2018-05-04
  • 交互设计 | UX设计想法表达太难?——试试故事版StoryBoard

    UX设计中一些针对用户调研的方法Workshop、Observation、Interview调研结束后需要将调研结果整合反馈单纯以文字去呈现无法将设计信息最大化故事板、线框图等视觉化的信息传达方式直观准确的解决设计问题下面小编将为同学们详细介绍故事板在交互设计作品集创作中的应用及优点,帮助大家在设计过程中能更高效的完成设计想法的交流和沟通。故事板的应用故事板可看作代表镜头的插画,同学们在设计时需要把图像排列在一起,使自己的设计能够故事化...

    2018-03-17
  • 【线下沙龙】产品经理交互设计大会

    2018年产品经理交互设计交流分享大会活动背景一个优秀的产品经理不仅能引导产品的发展,而且还能引导公司的发展。同时,他还是一名优秀的执行者、项目管理和团队管理者,具备敏锐的洞察力,能在用户心理和产品细节间灵活游走,打磨出令人惊叹的产品。所以,在成为CEO之前,先成为一名出色的产品经理吧。然而当我们投入到实际工作中时,总是一次又_次遇到阻碍:和运营、枝术部门沟通不畅,项目推进难。公司要求不高,任务很轻松就能完成,想要挑战大公司,却深知自己...

    2018-04-22