携程网页版注册页面高保真模型

携程网页版注册页面模型链接:https://b3xcbk.axshare.com

参考网页为:携程旅行网-会员注册

该模型共有三个页面——注册页面、设置密码页面和注册成功页面,实现了网页的注册和表单的交互。模型采用了向导性表单,明确地告诉用户只需验证手机和设置密码即可完成注册,同时用户也可以看到现在处于注册的哪个步骤。

在注册页面,我们实现了对表单的校验,将输入框转换动态面板,当校验发生问题的时候改变输入框动态面板改变状态,并且实现了隐藏动态面板的显示与拉动。例如,当我们没有输入手机号或者手机号不是11位的时候点击发送验证码,手机号矩形会转换为黄底红框,并且会出现下拉矩形,显示“请输入正确的手机号”。除此之外,实现了发送验证码之后开始计时,计时结束又可以重新发送验证码的交互,再次点击发送验证码重新开始计时。在验证完手机号格式与短信验证码格式后,点击“下一步”进入设置密码页面。

在设置密码页面,同样可以对密码和确认密码进行校验,同时可以在输入的同时判断密码强度,点击“完成”进入注册成功页面。

收获

  1. 熟悉了交互用例的基本使用,熟悉条件的用法
  2. 熟悉了动态面板的基本使用
  3. 学会了使用全局变量

存在的问题

  1. 注册页面的按钮转换为动态面板后添加超链接无法正常链接,但是注册成功页面的按钮转换为动态面板后可以,所以在注册页面就没有实现移入的交互效果。
  2. 滑块验证码不是本次练习的重点,有空再填坑。
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 1.为什么要设计登录注册修改密码模块 2.登录注册修改密码模块分类 3.如何设计登录注册修改密码模块 4.登录注册...
    HHKKPP阅读 3,854评论 0 1
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 15,855评论 4 61
  • 如李白, 似女羞, 簇簇团团绿叶囚。 恬淡即为花雅客, 何需香溢盼春留?
    玉黍蜀_zml阅读 397评论 0 0
  • 【五言绝句】胡图感记 文/洛尘 谧寂听星语,禾残卧晚秋。 空旻林朗净,流霭不知忧。 2018年11月13日
    南洛阅读 334评论 1 6
  • 93:挖沙子2015-4-13 11:13 如果不看建筑物的背景,青枫公园的沙滩与海边沙滩好像没啥区别。有阳光、有...
    Jason0868阅读 228评论 0 0

友情链接更多精彩内容