有一段时间没有做过原型图了，现在因为项目需要，得做一套完整的原型图，由于时间关系，考虑制作低保真的原型，虽然低保，还是得抓一把细节，嘻嘻，在这里记录下登录注册页面纯原生做法的全过程。

工具：Axure RP 8
原件库：无

0x01.准备动态面板

添加两个状态：登录和注册。

0x02.编辑登录状态

添加账号密码输入框：

记住我单选框，忘记密码？

登录按钮：

新加一个按钮组件，添加20的圆角。二级灰色填充。

其他登录方式：

添加水平线，添加两个图标占位符。

改变面板背景色：

低保真，简单填充一级灰色。

0x03.编辑注册状态

如登录状态，改背景色，增加文本框，按钮，验证码按钮。

0x04.创建登录注册的矩形

创建一个矩形，然后复制一层，改变圆角，初始二级灰色，成下图样式：

0x05.增加交互

登录按钮：

添加鼠标单击事件：
- 切换为状态1。
- 选中当前矩形。
- 取消选中注册矩形。

添加选中效果为一级灰色：

默认选中登录按钮：

注册按钮：

添加单击事件，修改选中状态为一级灰色。

0x06.效果

初始进入：
选中注册：

【原型制作】无素材-纯原生制作-登录注册页面原型图相关推荐

html css js制作登录注册页面,【7】使用css/js/html模板来实现一个注册、登录和管理的功能...
1 #!/usr/bin/env python 2 #-*- coding:utf-8 -*- 3 4 importtornado.web5 importlogging6 importdatetime ...
html登录页面用idea,利用IDEA怎么制作一个登录注册页面
利用IDEA怎么制作一个登录注册页面发布时间:2020-12-19 14:02:09 来源:亿速云阅读:186 作者:Leah 利用IDEA怎么制作一个登录注册页面?很多新手对此不是很清楚,为了帮 ...
HTML+CSS+JavaScript 实现登录注册页面(超炫酷)
1.临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从下手? 网页要求的总数量太多? 2.没有合适的模板?等等一系列问题.你想要解决的问题,在这篇博文中基本都能 ...
html制作登陆注册页面
html制作登陆注册页面源代码如下 <!DOCTYPE html> <html lang="en"> <head><meta chars ...
【HTML+CSS+JS】登录注册页面大合集
前言学JS也学了一段时间,正巧碰上了人工智能要调用人脸识别接口进行真人人脸识别,于是便萌生了用人脸来进行注册和登录的想法,这样的话就需要开发一个登录注册页面,然后用JS绑定注册事件调用人脸识别接口进 ...
UI设计灵感|App的登录注册页面案例参考
良好的交互细节是每一个优秀 App 的共同品质,而多数 App 被用户抛弃就是因为登录注册页面的问题,只有从用户场景和视角来思考产品,便能设计出打动人心的 App. 集设网www.ijishe.com ...
易课寄在线购课系统开发笔记（三十一）--登录注册页面实现
登录注册页面实现注册功能第一步:把静态页面添加到工程中. 第二步:展示页面. 请求的url: 登录:/page/login 注册:/page/register 参数:无返回结果:逻辑视图 Str ...
番茄闹钟三(登录注册页面)
一. axios 配置需求 axios 文档配置 axios 配置 appid 和 appsecret 配置 gwt 验证的 gwt token 二. 安装 axios yarn add axios ...
jsf登录注册页面_您将在下一个项目中使用JSF吗？
jsf登录注册页面上周有一篇很棒的stackoverflow博客文章,主题是" Javascript框架的残酷生命周期" . 这篇文章是关于Javascript UI框架(ang ...

【原型制作】无素材-纯原生制作-登录注册页面原型图

0x01.准备动态面板

0x02.编辑登录状态

添加账号密码输入框：

记住我单选框，忘记密码？

登录按钮：

其他登录方式：

改变面板背景色：

0x03.编辑注册状态

0x04.创建登录注册的矩形

0x05.增加交互

登录按钮：

注册按钮：

0x06.效果

【原型制作】无素材-纯原生制作-登录注册页面原型图相关推荐

最新文章

热门文章