Axure 教程：四步设计一个PC登录窗口

2018-07-0409:31:34原型设计Comments2,610 views字数 777阅读模式

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4046.html

是不是看起来很简单，下面我们来开始制作原型…文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4046.html

一、准备元件

1.打开 Axure 新建文件，按如图的样式，拉入矩形、文本框、文本，如以下位置摆放，右上角为点击切换到微信扫码登录的入口；文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4046.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4046.html

图里大致尺寸大小：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4046.html

背景框：w：360 px ，h：395 px ；
输入框、按钮：w：320 px ，h：40 px ；
文本大小：12 px ，14 px ，18 px ；

2.继续制作 “ 微信扫码登录 ” ，该页面比较简单，右上角也是点击切换到账号密码登录的入口；文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4046.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4046.html

二、设置交互

1.文本框内的文字设置在右侧：属性 – 提示文字 – 输入 “ 请输入密码 ” / “ 请输入密码 ” ；文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4046.html

2.两个文本外框右键点击 – 交互样式设置 – 选中 – 线段色值 #333333 ；文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4046.html

3.点击 “ 请输入手机号码 ” 文本框时，设置获取焦点和失去焦点时的效果（以下加图）；文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4046.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4046.html

4.登录按钮右键点击 – 交互样式 – 鼠标按下时 – 填充色值 #000000 （以下 “ 立即注册 ” 按钮类似）；文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4046.html

5.“ 忘记密码 ”右键点击 – 交互样式 – 鼠标悬停时 – 字体色值 #333333 ；文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4046.html

6.微信扫码登录的界面没有任何效果，不用做任何设计。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4046.html

三、设置交互效果

1.拉入一个动态面板，将 “ 账号密码登录 ” / “ 微信扫码登录 ” 放入动态面板里面，“ 账号密码登录 ” 放在顶部，如图：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4046.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4046.html

2.在 “ 账号密码登录 ” 的右上角按钮上设置效果，如图（ “ 微信扫码登录 ” 的按钮也一样）：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4046.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4046.html

3.这样一个简单的登录窗口就完成了。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4046.html

现在一个简单的界面就做好了，但要考虑到界面在载入时，同时获取到输入框的焦点，再样在体验上能够增加好感度，下面开始制作…文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4046.html

四、进阶

1.给 “ 账号密码登录 ” 里的 “ 请输入手机号码 ” 起一个名称（随意），然后在动态面板以外的空白处点击属性 – 页面载入时 – 设置焦点 – “ 请输入手机号码 ” 输入框，如图：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4046.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4046.html