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 -