Axure7.0练习——创建属于自我的个人主页。零基础学Axure之部件-动态面板(Dynamic Panel)

极早开始了解及成品经理、产品助理这样的岗位,其实确实是从Axure开始之。了解及及时是一个“画图软件”,感觉跟PPT差不多嘛。后来对成品之趣味越来越来深切,也慢慢自己挑一下她的效用,感觉是个坏好用的软件!在这边品尝用Axure做一个简易的个人主页,以此练习,并记录下了思路和细节。

目录

0.Axure软件分享
1.动态面板的简介
2.动态面板的创办
3.动态面板的状态管理
4.动态面板的体制
5.动态面板的性能
6.动态面板的采用——广告轮播(附.rp文件)

事先放上网址(Axure分享网站真的加载很缓慢):http://eu9nm1.axshare.com/\#c=2

0 Axure软件分享

吓吧,我认同你电脑里首先使有个Axure的软件。当然,如果你还不曾设置之语句也未曾提到,我都准备好了安包(Axure
RP 8.0
)给你:
Mac版:https://pan.baidu.com/s/1kVHbfnD
密码: tjqx
Win版:https://pan.baidu.com/s/1nuUTSzn
密码: ujrm

确定主题

既然如此是个人主页,所以我怀念既包含简历内容,再补充加一点简历无法体现得东西。所以开始将主页设置也

私联系方式(最根本嘛~)、教育更、工作经历、个人力量、练习作品、兴趣爱好(包括经常发表作品所用网址)

等几个板块。

1 动态面板简介

简言之地可用动态面板理解吧一个相册,动态面板的每一个State(状态)相当给相册里的一律页。相册里之影得以增加、减少,相呼应的,动态面板的State可以增加、减少、显示、隐藏。这么理解的话,再来看Axure中动态面板的图标,有没有发生发格外像。

确立风格

本来想做成网页同时为此手机操作风格,发现1280*720于是网页看之话语,一个屏幕挺可能装不下!所以折中之后,将界面改多少了。然后自己梦想

满页面通过左右滑动切换内容,并且可以通过极端底部的按钮,快捷进入目标页面。

如此这般以浏览让更便民。如图:

起风格下,我们即便得进去下一样步啦~!

连通下,进入每个分页面的情节设计。由于初衷就是是考虑简单练习,并且模拟手机界面,所以各一样页才留下最少之物。具体的想法也:

主页:留下姓名、联系方式等。

傅页:加个校徽好了。

私家练习:只放最近的创作。

村办爱好:图+文。

这么的规划之后便起了首的页面信息排布啦~!如下图:

(各主页图)

2 动态面板的创办

动态面板的缔造方式发出一定量种植:

  1. 直接创造:在部件库拖动“动态面板”到画布,即创造成功
  2. 以另外部件转换为动态面板:选择相应的预制构件,单击鼠标右键,选择“转换为动态面板”,即转换成

主页面动作规划

自己觉得Axure7.0的动态面板是一个很好用的部件。我几用动态面板做了三四叠的嵌套。对于一个掌握程序语言的人口吧,这样的嵌套并无算是难。难之是亟需因此啊表现形式才会拿切换体验做好,并且好看。自觉水平有限,所以努力!

横滑效果

自身拿六个页面还做成主页面的一个动态面板的6个state。并安装逻辑

当在某个页面时,向左切换到它们的先头一个页面,向右侧切换至它们的生一个页面。

换成C语言就是:

If(this=state2)

{

if(slip direction=left)

this=state3;

if(slip direction=right)

this=state1;

}

即使这么,虽然麻烦了碰,不过对6独页面,工作量也不到底十分。如果工作量非常,就要需求再度好的优化措施了。这里连没有还深究。如图:

脚按钮动作

自我是优先上网收集了系的图标,然后针对每个图标进行单独设置的。

骨子里也充分简单,只要在装单击图标的时,让动态面板切换到对应的页面就足以了。如图:

3 动态面板的状态管理

于画布上双击始建好的动态面板,即可弹出动态面板状态管理窗口:

  1. 新增一个空动态面板
  2. 复制并新增一个动态面板(内容吗联合复制)
  3. 上下箭头用来调动动态面板的依次
  4. 编辑选中的动态面板状态
  5. 编制所有的动态面板状态
  6. 去选中的动态面板状态
  7. 动态面板状态列表

页面内容设计

一些页面需要重开效果,用以容纳更多之音讯。所以,在每个页面有着更多之操作功能。

工作经验页面

是因为工作更之字数比较多,基本未可知以总体的书风格装上。所以自己着想举行了只抽屉式的情进行。

现实效果也:

每当例行情况下收受,当要翻开时,点击标题就能够进行,再次点击能关闭。

如图:

每当这里运用了藏匿/显示部件,同时带来/推动元件。将详细内容做成隐藏,然后以鼠标单击时,交互动作设置为展示,同时推进下方的构件

就是能够做出抽屉效果。

民用练习页面设计

个人练习中自我推广了一个竞品分析的ppt。

何以才会让浏览者看到有内容为?

自想到了类似相册的tab功能。最后之结果虽是内外带来可以切换ppt页数,但是别一些虽是Axure的享受网页打开特别慢,所以我独自放了3摆ppt,然后开了只外表链接,引导用户自行查看。如图:

斯力量落实呢是乘动态面板。

新建一个动态面板,将三摆ppt放在三独不等之state。然后和主页面切换一样装即可。不同的是反正拖动改成为前后拖动。

兴趣爱好页面统筹

每当这个页面我打算放上几张好之留影照片。最好会切换查看,同时还会大图查看。

为此自己的计划性思路也:

左右举行肯定的切换引导,并且单击图片可以推广图片查看。

如图:

这个效应一样因动态面板。

切换图片的动态面板命名为“摄影切换”,只要在首页再设置一个动态面板“摄影放大”,并且安装也躲。然后设置逻辑吗:只要单击“摄影切换”,则根据“摄影切换”当前的图转“摄影放大”的状态,同时改变状态为展示。

如图:

4 动态面板的样式

每当Axure右上角即可看出“检视:动态面板”,点击样式,如下图所示:

动态面板样式

背景图片样式和电脑桌面背景样式。

细节丰富

一体作品及此处实在和算完成了。不过,

为了引导用户使用产品,我期望做有细节来拓展提醒,最好不影响到用户之体会,同时还要实惠。符合帕累托改善最为好了。

主页切换提示

为引导刚打开页面的用户滑动主页切换,我于主页加载两秒后,做了一个指尖动作之指引,如图:

以页面载入的时候召开逻辑如下:

每当底部图标上,当鼠标移入时,会生阴影效果,我看这样见面出立体感,增大用户点击的或许。

除此以外,我寻找了颜色各异之同等图标,在有页面时,对应之图标用黑色代表。将眼前页面对应的图标黑色版本置顶,其他置于底部即可。如图:

一如既往的,在做事经历页面,鼠标移入标题之后,颜色变化,同样是以引导用户点击。相同之职能,还有兴趣爱好的简书、乐乎主页入口,鼠标移入后会见发生影子变化。

图表切换效果引导

当竞品分析ppt哪里,我直接在考虑怎么被浏览者了解,这个模块是得透过内外浏览切换的。

后来自己想到,可以做个堆叠的机能,让用户发生“这叠纸片可以查”的想法。

接下来便发出矣脚的力量。而且,当查看图片后,下面的条数会就变动。

是效果是当动态面板模块下,直接用简单长条矩形框填色后就。在切换动态面板内容之时段,设置隐藏矩形框和推拉,就足以直达这个作用。

此外,在必要之地方,我还用鼠标移入提示做了征,希望以这可以另行好引导用户浏览。

写于终极,至此,这个关系作品即交此结束。虽然小巧,不过要会以此熟练自己之技巧,增长见识。

5 动态面板的性

以Axure右上角即可看到“检视:动态面板”,点击属性,如下图所示:

动态面板的特性

从达成到下相继为:

  1. 自动调整为情节尺寸
  1. 滚动条
**注:为了正常显示滚动条,动态面板状态中的内容尺寸一定要比动态面板的固定尺寸大,且不能勾选[自动调整为内容尺寸]。**
  1. 固化到浏览器
    追忆一下QQ的弹窗新闻,你得能够坐无比抢的速理解啊是定位到浏览器。
QQ新闻弹窗(图片来自网络)
  1. 100%肥瘦(仅限浏览器被有效)
    夫选项会如动态面板的小幅==浏览器的宽窄。
    流动:将图像转化为动态面板是无力回天实现这个功能的。

  2. 容触发鼠标交互
    设若对动态面板不同状态中之部件设置了[鼠标悬停时]、[鼠标按下经常]等互相样式,勾选此起,当鼠标指针接触到动态面板的限量时,就会见触发发拖欠构件的相。

  3. 禁用

  4. 选中

6 动态面板的运——广告轮播

终极效果如下:

广告轮播

亟需实现之相包括:

  1. 图表每隔三秒自动切换,效果也淡入淡出
  2. 图形下方的稍圆点每隔三秒自动切换,无效益;切换的又显示是第几只状态,当前状态用不同颜色代表
  3. 点击第N独小圆点切换到第N摆设图
  4. 鼠标移动到动态面板的箭头上经常,两单箭头出现;并且鼠标指针下方的箭头颜色加深
  5. 单击右(左)箭头,图片以及小圆点同时切换至下(上)一态

实现步骤:

  • 预备干活:

    1. 打开Axure——新建文件
    2. 拖动部件“图片”到画布——双击“图片”——选择图片
    3. 鼠标右键图片——转化为动态面板——将动态面板命名吧“图片”
    4. 双击动态面板——点击“state1”——在“图片”动态面板中复制5独state1
    5. 点击“图片”动态面板中的各个状态,更换图片
    6. 平的手续新增多少圆点,将这动态面板命名为“小圆点”;设置改动态面板第N个状态的第N单小圆点的颜色也橘色
    7. 拖入“箭头”,命名吧“左箭头”,增加[鼠标悬停时]的竞相(更换为深色图片)
    8. 复制“左箭头”,旋转180度,命名也“右箭头”(注:交互联合复制)
  • 安“页面载入时”图片和小圆点滑动切换交互

    1. 单击“页面载入时”
    2. 一般来说图设置:
3.  预览效果





    \*\* 注:我们已经实现了要求的第1个和第2个交互。\*\*
  • 装粗圆点点击切换的交互

    1. 装“图片”和“小圆点”停止循环
2.  设置小圆点对应的图片



3.  设置等待三秒,避免刚切换到某张图片,就立刻滑动到下一张图片  

4.  设置“图片”和“小圆点”动态面板继续滑动切换



5.  复制交互到所有小圆点
6.  预览效果





    \*\* 注:我们已经实现了要求的第1个、2、3个交互。\*\*
  • 装两单箭头的相互

    1. 当选“左箭头”和“右箭头”,右键转化为动态面板,命名吧“箭头”
    2. 装“箭头”动态面板隐藏
    3. 点击“图片”,设置“鼠标移入时”交互
    设置鼠标移入时显示



    设置轮播停止

4.  设置“鼠标移出时”交互



    设置轮播继续

5.  设置“鼠标单击时”交互  
    点击“箭头”动态面板,进入state1,设置右箭头交互,左箭头同理:  

    设置点击切换下一张


    **重点:**  

    左箭头的鼠标单击交互需要增加一步,否则就会出现单击左箭头之后,轮播逆序播放的情况!


    PS:感谢[@AlexGZ](https://www.jianshu.com/u/7c41480a2899)同学的问题!
6.  预览效果  

    ✅✅✅


    OK,交互实现了,快去找点素材练练手吧。这个是Axure源文件:[https://pan.baidu.com/s/1i49xzRf](https://link.jianshu.com?t=https://pan.baidu.com/s/1i49xzRf)
    密码: hhys

参照《Axure RP 8 网站和APP原型制作于入门到精通》

- end -

相关文章

admin

网站地图xml地图