Axure实现vcg官网首页原型图

W240第二天第三天

Axure的简单使用：

作业实现：vcg官网首页原型图

• 帮助文档基础篇：原型图基础之axure线框图设计

导航栏设计：

添加通用母版header



导航栏设计注意：

鼠标移动到下面这个面板时，能实现悬停并且颜色改变

方法一：使用动态面板



则在线框图设计时应用动态面板，鼠标移上去面板尺寸改变达到显示下面菜单项的功能同时移动图片这个板块的位置。

移动距离是使图片移动到下面菜单项的中间距离，展开设置为由顶部展开。

方法二：使用两个热区：



一个热区负责一个显示隐藏事件小的在大的上层且菜单项对自身添加移出隐藏：

登录面板设计

在设计登录注册时注意：

• 使用动态面板
  
  

• 实现输入手机号、密码时的动态效果（获取焦点时）
  
  
  
  则考虑针对文本框，获取焦点时显示隐藏对应外面的矩形框，框一默认边框，框二蓝色边框。
  
  

卡片设计

在动态改变颜色时





添加热区，直接将三项打包组合。

动态移动图层设计

移动图时添加动态面板：



在面板中设置两个状态，在两个状态中添加两个图片



在整个页面中设置窗口滚动时：

轮播图设计

同理实现自动轮播时切换next状态





设置轮播小点：



在轮播的底部添加动态面板，切换图片时同时切换状态。

点击圆点实现轮播切换：



创建3个热区，点击对应热区时，切换图片及圆点的状态。

轮播左右箭头设置为向前或向后：





设置手动控制轮播 注：

• 箭头显示隐藏设为效果有动画时，不用动态面板会出现卡顿闪烁等问题。

• 解析：如果把箭头放置在矩形框中，设置箭头为逐渐进入和退出的动画，因为箭头在矩形框的上层，鼠标移动到箭头上箭头消失到矩形框中又显示则会发生闪烁。而动态面板只是一个容器，不会在动画结束由触发箭头显示。

• 则将箭头放置于动态面板中，移入面板显示箭头，移出隐藏。
  
  
  
  在这个动态面板的基础上再加轮播和小点的二级动态面板。

• 判断没有点击箭头时，再改变轮播和小点的面板状态（恢复正常轮播）
  
  

文章置顶按钮设计：

注：

• 全局在窗口滚动时设置变量top为[[Window.scrollY]]即窗口滚动的距离。
  
  
  
  
• 设置top<=200时隐藏置顶按钮，>=200时显示置顶按钮。
• 注意显示隐藏时为窗口滚动的两个case，都要设置top值。
• 顶部设置一个锚点，隐藏，点击置顶按钮则，滚动到锚链接。
  
  
  
  整体展示：