Axure 学习案例：动态面板制作淘宝登录页面

<h6>效果分析</h6>

1. 通过点击右上角的图标切换扫码、账号登录方式；
2. 在扫码登录页面，鼠标移入、移出二维码时，二维码平行移动，并且弹出图片的动态效果；

3. 在账号登录页面，当文本框获取焦点后，输入框的边框为蓝色。失去焦点后，边框颜色为灰色。

   
   淘宝登录原型预览

<h6>元件组成介绍</h6>

1. 扫码登录页面元件介绍。

   
   动态面板_扫码登录.png

2. 账号登录页面元件介绍。

   
   动态面板_账户登录.png

<h6>实现步骤</h6>

• 设计动态面板

  1. 打开 Axure ，新建文件，在画布中拖入动态面板，并且设置动态面版宽度和高度均为 350。

  2. 然后双击动态面板，打开面板状态管理窗口，为面板多增加一个状态（面板变为两个状态），并且将面板重命名，命名随意，方便个人理解即可。如下图显示，其中 scan_code 状态就是需要存放扫码登录界面的元件，user_name 状态就是存放用户名登录界面的元件；

     
     动态面板管理界面

• <b>设计 scan_code 页面</b>

  1. 鼠标双击「scan_code」，打开scan_code页面；
  2. 将面板背景颜色调整为 #F0F8FA；
  3. 在页面中拖入一个矩形，选中矩形后右键，将矩形转换为自定义形状，调整图形形状为去掉右上角的五边形。去掉右上角是为了显示右上角的图标。
  4. 拖放一张电脑 icon 到右上角，图标可以在 iconfont 这个网站找到。
     scan_code添加五边形和电脑图标

  5. 插入二维码和手机图片，设置二维码图片大小为 140*140，将手机图片设置为隐藏。

     
     插入二维码图片和手机图片

  6. 设置鼠标移入时用例。第一个，设置鼠标移入二维码区域时，当前组件（二维码）移动，设置参数为：绝对位置、x=30，y=78，动画为线性、时间为500毫秒；第二个，设置等待时间300毫秒；第三个，显示弹窗图片，动画为逐渐，时间为200毫米。（思路是加上等待时间的300毫秒，二维码停止移动时图片完全显示出来）

     
     设置鼠标移入二维码时水平左移
     设置显示弹窗图片

  7. 设置鼠标移出二维码用例。选中二维码，新增鼠标移出用例，当前组件（二维码）移动，设置参数为：绝对位置、x=110，y=78，动画为线性、时间为500毫秒；第二个，设置等待时间200毫秒；第三个，显示弹窗图片，动画为逐渐，时间为300毫米。（思路是当二维码移动将要接触图片的时候，图片开始隐藏）

     
     设置鼠标移出二维码时水平右移
     设置隐藏弹窗图片

  8. 经过上面的步骤，scan_code 主要的交互效果已经完成，接下来就是将其他的文本元素补齐就好了，这些内容比较好理解，所以不过多讲述；补齐其他元件后，scan_code完整的元件目录如下；

     
     scan_code完整的元件
     

     完成上面的步骤之后，scan_code 页面的已经完成，看一下实际效果：

     
     scan_code页面的实际效果

• <b>设计 user_name 状态</b>

  1. 鼠标双击「user_name」，打开 user_name 页面；
  2. 同样的，将面板背景颜色调整为 #F0F8FA；

  3. 跟前面一样，添加任意图形和右上角图标；

     
     user_name 添加五边形和半个二维码图标
  4. 设置用户名输入框。首先，插入icon文本，使用FontAwesome字体，（关于FontAwesome字体请移步：如何在Axure RP 8 中规范使用 Font Awesome 图标库完成设计，大小为37*40。第二，插入文本框，260 * 40，设置文本框属性隐藏边框，提示文字：会员名/邮箱/手机号。第三，添加矩形框，大小为298*42，并且放置在icon和文本框底部。
     设置用户名输入框

  5. 设置密码输入框。跟设置用户名输入框一样的形式添加密码输入框。

     
     设置密码输入框
     

     6.设置文本框获取焦点后用例。选择用户名输入框，添加获取焦点时用例，用户名输入框底下的矩形框（用户名框）选中状态为Ture。在添加用例，当文本框失去焦点时，用户名框状态为False.

     
     设置用户名输入框底下的矩形框为选中

  6. 设置用户名框被选中时的交互样式。前面一步中，输入框获取焦点后，底下的矩形框（用户名框）就会被选中，所以需要继续设置用户名框被选中时边框颜色又灰色变为蓝色。（简单理解就是输入框获取焦点可以触发用户名框选中，用户名框选中就会变色。）

     
     设置用户名框被选中时的交互样式
  7. 设置密码输入框获取焦点后的交互效果。跟用户名输入框一样设置密码输入框，达到相同的效果。

  8. 完善页面其余的信息，完善后整个user_name状态下元件组成。

     
     user_name元件组成

user_name状态页面已经完成，整体的效果如下：

user_name整体效果

• <b>设置点击右上角图标切换扫码登录和账号登录页面。</b>
  原型制作到这一步，基本已经完成，但是还没有起到动态面板的作用，关键的时候到了，接下来就是设置通过点击右上角的图标实现不同登录界面的切换。

  1. 设置scan_code状态页点击右上角半个电脑转换为账号登录。选择右上角的电脑图标，添加一个单击用例，添加「设置面板状态」，配置动态中选中动态面板，选择状态为user_name。

     
     为右上角电脑图标添加单击用例

  2. 设置user_name状态页点击右上角半个二维码转换为扫码登录。跟上面同样的操作，选择右上角的半个二维码图标，添加一个单击用例，添加「设置面板状态」，配置动态中选中动态面板，选择状态为scan_code。

     
     为右上角二维码图标添加单击用例

最后，整个原型基本完成，可能还需要增加一些额外的细节需要继续优化，需要慢慢调整，但是基本符合淘宝登录界面，整体的预览效果如下。

淘宝登录原型预览

<h6>总结这个原型涉及到的知识点</h6>

1. 通过移入移出鼠标实现元件的移动、显示和隐藏之间的切换。
2. 通过获取焦点实现其他的元件选中，并且实现被选中的组织交互样式的改变。
3. 通过切换动态面板的不同状态实现不同页面的切换。

原型文件下载地址：
http://pan.baidu.com/s/1jIp4YmM