2020-12-10

最新推荐文章于 2024-06-26 21:49:41 发布

weixin_49983358

最新推荐文章于 2024-06-26 21:49:41 发布

阅读量125

点赞数

文章标签：产品设计

本文链接：https://blog.csdn.net/weixin_49983358/article/details/110995849

版权

Axure RP 练习知乎登录

开发工具与关键技术： Axure RP  原形设计
作者：欧志健
撰写时间：2020/12/2

首先我们导入图片充当背景
![在这里插入图片描述](https://img-blog.csdnimg.cn/20201210210941245.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80OTk4MzM1OA==,size_16,color_FFFFFF,t_70#pic_center)


完成背景后就开始做登录框
我们先拉一个矩形来充当容器，再导入二维码图片拉入两个三级标题完善基础页面
![在这里插入图片描述](https://img-blog.csdnimg.cn/20201210211406214.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80OTk4MzM1OA==,size_16,color_FFFFFF,t_70#pic_center)



然后就是输入框，我们使用元件输入框、矩形、水平线、垂直线配合注释完成一个输入框：

![在这里插入图片描述](https://img-blog.csdnimg.cn/20201210211421489.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80OTk4MzM1OA==,size_16,color_FFFFFF,t_70#pic_center)


第二个输入框使用三级标题、输入框、水平线配合注释完成：

![在这里插入图片描述](https://img-blog.csdnimg.cn/20201210211122419.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80OTk4MzM1OA==,size_16,color_FFFFFF,t_70#pic_center)


最后使用按钮号和三级标题完成免密码登录页面：

![在这里插入图片描述](https://img-blog.csdnimg.cn/20201210211144154.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80OTk4MzM1OA==,size_16,color_FFFFFF,t_70#pic_center)


完成免密码登录后我们把整个登录框传化成动态面板，之后就可以开始设计第二个状态密码登录了，密码登录只需要在免密码登录的基础下改动一下就完成。



最后我们需要设置鼠标点击进行切换

![在这里插入图片描述](https://img-blog.csdnimg.cn/20201210211204621.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80OTk4MzM1OA==,size_16,color_FFFFFF,t_70#pic_center)