axure动态登录和html5,Axure8原型设计实战案例:如何实现登录功能?
登录功能是一个非常常见的功能,几乎所有的产品都有登录功能,登录功能可以很简单,也可以非常复杂。我们在用axure做产品原型设计的时候,都会涉及到登录功能,那么,登录功能是怎么设计出来的呢?
本文和大家分享一个常用的登录功能的原型设计,最终的实现效果如下所示:
需求分析
我们对登录功能的需求进行分析,得出功能要实现的需求如下:
账号、密码输入框要有初始的信息提示;在账号、密码为必输项,如果没有输入,要给出提示并且输入框边框变成红色提示;点击登录,判断账号、密码是否正确,如果错误就要给出提示并且边框变成红色;如果账号、密码正确,就登录到目标页面。
设计思路
针对上面的需求,我们实现的思路如下:
输入框的初始提示信息可以通过文本框元件实现,文本框元件可以设置提示文字,并且可以设置提示文字隐藏的触发动作;对于输入框变红的效果,因为文本框没法设置边框的颜色,我们只能通过一个变通的方法实现,即在文本框外面套一个矩形框,文本框的边框设置为隐藏,用矩形框的边框代替文本框的边框;对于错误提示,可以通过设置动态面板实现,因为错误提示有很多种,不同的错误,对应动态面板的不同状态。
原型设计
(1)账号输入框
拖入一个矩形框,设置该矩形框的名称为【用户名-背景】,并且设置该矩形框的获取焦点以后的颜色是红色;拖入一个文本框,设置该文本框的名称为【用户名】,并且设置该文本框的边框隐藏。
(2)密码输入框
拖入一个矩形框,设置该矩形框的名称为【密码-背景】,并且设置该矩形框的获取焦点以后的颜色是红色;拖入一个文本框,设置该文本框的名称为【密码】,设置该文本框的类型为【密码】,并且设置该文本框的边框隐藏。
(3)错误提示设置
在账号输入框下面拖入动态面板,设置动态面板的名称为【账号-提示语】,动态面板增加三个状态,stat1、state2、和stat5,分别对应不同的错误提示;在密码输入框下面拖入动态面板,设置动态面板的名称为【密码-提示语】,动态面板增加三个状态,stat1、state2、和stat4,分别对应不同的错误提示;(4)登录按钮
拖入矩形框,作为登录按钮;
(5)其他功能
做为登录功能,除了最基本的账号、密码和登录按钮意外,还有用第三方账号登录、记住密码、忘记密码、注册等功能,本次原型设计没有涉及这些功能,只是把相关的元件放上去,并没有相关交互设计。
交互设计
(1)账号输入框交互设计
编辑【用户名】元件的【失去焦点】事件,当【失去焦点】的时候,做如下判断:
判断【用户名】是否为空,如果为空,设置【账号-提示语】状态为stat1,即提示账号不为空;
判断【用户名】是否为admin,如果不是,设置【账号-提示语】状态为stat2,即提示账户名不存在,请重新输入。
(2)密码输入框交互设计
编辑【密码】元件的【失去焦点】事件,当【失去焦点】的时候,做如下判断:
判断【密码】是否为空,如果为空,设置【密码-提示语】状态为stat1,即提示请输入您的登录密码;判断【密码】是否为123qwe,如果不是,设置【密码-提示语】状态为stat2,即提示账户名与密码不匹配,请重新输入。
(3)登录框的交互设置
编辑登录框的【单击事件】,判断【用户名】 和【密码】输入框是否为空,是否为admin以及123qwe,如果不是,则给出提示 ,如果是,则打开登录页面。
总结
登录功能是最基本的功能,需要注意的细节很多,产品经理在用Axure设计原型的时候,一定要明确的标注在登录功能里面的各种场景。
本文由 @马白龙 原创发布于人人都是产品经理。未经许可,禁止转载
题图来自Unsplash,基于CC0协议
举报/反馈
axure动态登录和html5,Axure8原型设计实战案例:如何实现登录功能?相关推荐
- Axure8原型设计实战案例:如何实现登录功能和用户管理?8年专业产品经理设计分享
8年专业产品经理,使用axure8,分享最常用的登录功能和用户管理设计,怎么设计出来的呢? 登录功能设计,是每位产品设计师必经之路,很好的学习和参考资料,作者原创不易.如果感觉不错,就点赞,评论和收藏 ...
- Axure8原型设计实战案例:如何设计用户管理,手把手带你学习
使用Axure设计用户管理,也是最常用的产品设计功能之一,产品设计都会碰到,怎么设计?方便提需求的人和开发人员,能够快速理解需求呢,下面一一讲解. 一.用户管理设计效果 1.1用户管理的列表界面 1. ...
- 产品需求文档、需求结构图、数据字典、全局说明、用例描述、需求描述、逻辑流程、原型设计、页面交互、登录注册、词汇表、数据统计、用户表设计、接口需求、功能清单、业务流程图、Axure原型、prd、文档实例
产品需求文档.需求结构图.数据字典.全局说明.用例描述.逻辑流程.原型设计.页面交互.登录注册.词汇表.数据统计.用户表设计.接口需求.功能清单.业务流程图.Axure原型.prd.产品需求文档实例 ...
- Axure RP 9交互原型设计软件增加了哪些新功能
Axure RP 9是一款快速原型设计软件,主要用于WEB界面.APP界面.软件界面产品的交互原型设计.是互联网产品经理必备的软件之一,主流科技公司都在用.Axure RP 9是专为UX专业人员和业务 ...
- Axure RP 9 for mac(交互原型设计软件)支持m1
新版Axure RP 9拥有全面的UI,新的设计和文档特征,以及将引擎优化到前所未有的程度.我们完全彻底并重建了mac版本的体系结构,这是我们从第一版开始的第三次重新架构,目的是使其在现代硬件上显着提 ...
- Axure RP 9 for Mac(交互原型设计工具) 中文激活版
Axure RP 9 for Mac(交互原型设计工具) 中文激活版 为大家带来Axure RP 9 for Mac(交互原型设计工具) v9.0.0.3628Beta中文激活版,相信大家对Axur ...
- Axure RP 10 for Mac (交互原型设计神器) v10.0.0
Axure RP是美国Axure Software Solution公司旗舰产品,是一个专业的快速原型设计工具,让负责定义需求和规格.设计功能和界面的专家能够快速创建应用软件或Web网站的线框图.流程 ...
- html5网页前端设计 当当,HTML5网页前端设计实战
本书是一本从零开始学习的Web前端开发教材,无需额外的基础.本书以项目驱动为宗旨,详细介绍了HTML5.CSS3与JavaScript的基础知识与使用技巧.本书包含例题228个,均在浏览器中调试通过. ...
- 动效设计实战案例解析-百度UE讲堂-专题视频课程
动效设计实战案例解析-221人已学习 课程介绍 本课程通过众多百度实战案例,为你讲解了设计师常用的AE,FLAHSH,PS三个软件的动效实现方法,让你熟悉动效的实现原理和设计规范,在软 ...
最新文章
- 2018这一年或平淡或不凡,2019看更大的世界
- python写文件追加 按行追加_Python3 自学第14天:文件操作,文件句柄,上下文管理器...
- SpringBoot笔记:SpringBoot集成SpringbootAdmin监控
- 科目三电子考的通过率普遍偏低
- How to create and apply a patch with Git
- react-native Navigator 填坑
- 如何用matlab解决数学建模中的报童问题
- java中将汉字转拼音,解决pinyin4j多音节问题
- 企业微信消息推送脚本
- 神经网络机器翻译技术
- OpenCV 银行卡卡号识别
- 软件测试的度量方法包括,软件测试过程的度量
- Grafana密码重置
- C# Format详解
- HCIP之路重点LSA
- 《互联网时代》 第十集 眺望
- flash---星星闪
- ATAx=0与Ax=0同解
- Ubuntu18 卸载maridb+重装maridb10.4以上版本
- 如何在Windows下创建Ramdisk