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

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

• 工具：Axure RP 8
• 原件库：无

0x01.准备动态面板

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

0x02.编辑登录状态

添加账号密码输入框：

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

登录按钮：

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

其他登录方式：

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

改变面板背景色：

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

0x03.编辑注册状态

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

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

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

0x05.增加交互

登录按钮：

• 添加鼠标单击事件：

  • 切换为状态1。
  • 选中当前矩形。
  • 取消选中注册矩形。

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

• 默认选中登录按钮：

注册按钮：

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

0x06.效果

• 初始进入：
  
• 选中注册：