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

作者: 林石列 分类: 互联网 发布时间: 2017-04-25 17:44
效果分析
  1. 通过点击右上角的图标切换扫码、账号登录方式;
  2. 在扫码登录页面,鼠标移入、移出二维码时,二维码平行移动,并且弹出图片的动态效果;
  3. 在账号登录页面,当文本框获取焦点后,输入框的边框为蓝色。失去焦点后,边框颜色为灰色。
    淘宝登录原型预览
元件组成介绍
  1. 扫码登录页面元件介绍。
    动态面板_扫码登录
  2. 账号登录页面元件介绍。
    动态面板_账户登录
实现步骤
  • 设计动态面板
    1. 打开 Axure ,新建文件,在画布中拖入动态面板,并且设置动态面版宽度和高度均为 350。
    2. 然后双击动态面板,打开面板状态管理窗口,为面板多增加一个状态(面板变为两个状态),并且将面板重命名,命名随意,方便个人理解即可。如下图显示,其中 scan_code 状态就是需要存放扫码登录界面的元件,user_name 状态就是存放用户名登录界面的元件;
      动态面板管理界面
  • 设计 scan_code 页面
    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页面的实际效果
  • 设计 user_name 状态
    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.
      设置用户名输入框底下的矩形框为选中
    7. 设置用户名框被选中时的交互样式。前面一步中,输入框获取焦点后,底下的矩形框(用户名框)就会被选中,所以需要继续设置用户名框被选中时边框颜色又灰色变为蓝色。(简单理解就是输入框获取焦点可以触发用户名框选中,用户名框选中就会变色。)
      设置用户名框被选中时的交互样式
    8. 设置密码输入框获取焦点后的交互效果。跟用户名输入框一样设置密码输入框,达到相同的效果。
    9. 完善页面其余的信息,完善后整个user_name状态下元件组成。
      user_name元件组成
    10. user_name状态页面已经完成,整体的效果如下:
      user_name整体效果
  • 设置点击右上角图标切换扫码登录和账号登录页面。
    原型制作到这一步,基本已经完成,但是还没有起到动态面板的作用,关键的时候到了,接下来就是设置通过点击右上角的图标实现不同登录界面的切换。

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

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

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

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

如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!

发表评论

电子邮件地址不会被公开。 必填项已用*标注

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d 博主赞过: