W240第二天第三天

Axure的简单使用:

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

导航栏设计:



添加通用母版header



导航栏设计注意:

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

方法一:使用动态面板



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







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

方法二:使用两个热区



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





登录面板设计

在设计登录注册时注意:

  • 使用动态面板

  • 实现输入手机号、密码时的动态效果(获取焦点时)



    则考虑针对文本框,获取焦点时显示隐藏对应外面的矩形框,框一默认边框,框二蓝色边框。

卡片设计

在动态改变颜色时





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

动态移动图层设计

移动图时添加动态面板:



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



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

轮播图设计

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





设置轮播小点:



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







点击圆点实现轮播切换:



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

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





设置手动控制轮播 注:

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

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

  • 则将箭头放置于动态面板中,移入面板显示箭头,移出隐藏。



    在这个动态面板的基础上再加轮播和小点的二级动态面板。

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

文章置顶按钮设计:



注:

  • 全局在窗口滚动时设置变量top为[[Window.scrollY]]即窗口滚动的距离。



  • 设置top<=200时隐藏置顶按钮,>=200时显示置顶按钮。
  • 注意显示隐藏时为窗口滚动的两个case,都要设置top值。
  • 顶部设置一个锚点,隐藏,点击置顶按钮则,滚动到锚链接。



    整体展示:

Axure实现vcg官网首页原型图的更多相关文章

  1. 一款仿PBA官网首页jQuery焦点图的切换特效

    一款仿PBA官网首页jQuery焦点图的切换特效,非常的简单大方, 在对浏览器兼容性的方面做了不少的功夫.IE6也勉强能过去. 还是一款全屏的焦点图切换特效.大气而清新.很适合简介大方的网站. 下图还 ...

  2. 针对石家庄铁道大学官网首页的UI分析

    身为一名光荣的铁大铮铮学子,我对铁大的网站首页非常的情有独钟,下面我就石家庄铁道大学的官网首页进行UI分析: 1.在首页最醒目的地方赫然写着石家庄铁道大学七个大字,让人一眼就豁然开朗. 2.网站有EN ...

  3. React官网首页demo(单文件实现版)

    本博客实现React官网首页上展示的demo, 为了方便直接采用单文件的形式, 如果想完整集成 在自己的项目中, 可以参考React官网的安装指南, 安装Create React App. hello ...

  4. 高仿阴阳师官网轮播图效果的jQuery插件

    代码地址如下:http://www.demodashi.com/demo/12302.html 插件介绍 这是一个根据阴阳师官网的轮播效果所扒下来的轮播插件,主要应用于定制个性化场景,目前源码完全公开 ...

  5. 官网类原型模板分享——Apple

    苹果公司是美国一家高科技公司,引领全球数码产品设计潮流,是世界最具价值的品牌. 此原型正是取自苹果公司官网,网站主要以展示产品为主,排版方式采用大图配简练的文字,清爽简洁的同时突出产品优势,增大产品的 ...

  6. 利用HTML和CSS设计一个静态的“小米商城官网首页”

    一.小项目说明 这是个例行的小项目练习,主要利用html和css的基础知识,复刻一个缩减版的小米商城网页.包括[导航栏].[头部logo区,快捷键.搜索框].[网页主体].[网页尾部]几个部分.目前只 ...

  7. Threejs实现滴滴官网首页地球动画

    .katex { display: block; text-align: center; white-space: nowrap; } .katex-display > .katex > ...

  8. three.js的wave特效(ivew官网首页波浪特效实现)

    查看效果请访问:https://521lbx.github.io/Web3D/index.html公司的好几个vue项目都是用ivew作为UI框架,所以ivew官网时不时就得逛一圈.每一次进首页都会被 ...

  9. Netty官网首页(翻译)

    官网:https://netty.io/ Netty是一个异步事件驱动的网络应用程序框架,用于快速开发可维护的高性能协议服务器和客户端. Netty是一个NIO客户端服务器框架,可以快速轻松地开发协议 ...

随机推荐

  1. Diophantus of Alexandria(唯一分解定理)

    Diophantus of Alexandria was an Egypt mathematician living in Alexandria. He was one of the first ma ...

  2. Currency Exchange(SPFA判负环)

    Several currency exchange points are working in our city. Let us suppose that each point specializes ...

  3. Agumater 爬虫进度带上了百分比,消除了.0

  4. leetcode题目,个人见解1

    给定一个由整数组成的非空数组所表示的非负整数,在该数的基础上加一. 最高位数字存放在数组的首位, 数组中每个元素只存储单个数字. 你可以假设除了整数 0 之外,这个整数不会以零开头. 示例 1: 输入 ...

  5. selenium+python3+pycharm

    当使用selenium实现元素定位时,运行: 元素定位,常用8大方法.具体百度 在此以id定位进行解释 #from selenium import webdriver # driver=webdriv ...

  6. flask提交表单验证不通过,以及CSRF攻击原理

    学习表单的问题1. 提交表单时怎么都无法验证通过 记录一下,自己的学习bug,主要是因为在模板中书写渲染的语句时,把CSRF的字段名写错了. 因为在模板中书写一些语句是没有提示的,自己手动敲代码容易出 ...

  7. 吴恩达《深度学习》-课后测验-第三门课 结构化机器学习项目(Structuring Machine Learning Projects)-Week1 Bird recognition in the city of Peacetopia (case study)( 和平之城中的鸟类识别(案例研究))

    Week1 Bird recognition in the city of Peacetopia (case study)( 和平之城中的鸟类识别(案例研究)) 1.Problem Statement ...

  8. [Binder深入学习一]Binder驱动——基础数据结构

    具体代码路径: kernel/drivers/staging/android/binder.c kernel/drivers/staging/android/binder.h /* * binder_ ...

  9. 学习 | jQuery移动端页面组件化开发(一)

    最近在学习移动端组件化开发web页面,其中有好多小细节,值的去思考. 主要介绍JS的思路,具体的代码就不贴了,主要是想表达出一种思路 总体来说 1.入口文件,在入口文件中导入插件,插件样式,jquer ...

  10. JVM垃圾回收行为的并行与并发

    程序的并行和并发 程序的并发(Concurrent) 在操作系统中,是指一个时间段中有几个程序都处于己启动运行到运行完毕之间,且这几个程序都是在同一个处理器_上运行. 并发不是真正意义上的“同时进行” ...