• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >axure > Axure8.0小案例:电动机原型

Axure8.0小案例:电动机原型

作者: 字体:[增加 减小] 来源:互联网 时间:2017-06-14

本文主要包含axure8.0原型图,原型设计工具axure8.0,axure8.0原型,axure8.0案例,axure8.0案例教程等相关知识,希望在学习及工作中可以帮助到您

diandongjiyuanxing

话说Axure RP 8.0beta版发布相当一段时间了,由于自己好久没动手画过原型了,新版本发布之时木有及时围观。今天鬼使神差地去装了Axure RP 8.0简单了解了一下它的新功能。

打开8.0注意到的第一个改变就是用户界面的变化。这样的变化让新手更容易去掌握,提升了操作效率,界面变得更简单易用。

例如:8.0整合了7.0中三个独立功能面板——“元件的交互与说明”,“元件的属性与样式”和“页面属性”。将页面属性从底部(原本很难找到)移动到编辑区的右侧,为编辑区增加了更多操作空间。

再如,工具栏内的“页面”和“母版”被删除。最常用的按钮,如“添加页”和“搜索”,已被移到窗格的标题。其余的选项仍然可以下拉菜单、快捷键以及拖放进行使用。

又如,用户在制作原型过程中,很容易忽略掉为元件、动态面板、图片等元素命名,从而很容易引起很多不必要的麻烦。而8.0很突出元素命名窗口。将操作频率很高的预览功能单独放出一个按钮来,解决了用户必须通过键盘F5预览的痛点。这些很小的改变,作用却是巨大的。

除了界面的改版,Axure RP 8.0还在元件、图片处理、事件、做了不少改进和完善。已忍不住想在画布上撸上一把!捣腾一番后,制作了一个小的案例【电动机原理】,正好涉及到8.0的许多新功能,先展示一下效果:

md

对于熟悉Axure的同学来说,这个原型有两个值得一提的“难点”,一是电动机“转子”形状的设计,它并非一张图片,而是利用元件中的矩形来实现的。另一个是如何触发“转子”旋转起来。我们一个个来拆解!

一、转子

chaikai

我们可以把“转子”拆解成三个组成部分A:饼图 B:随机线 C:双色环。只要把ABC的制作过程描述清楚,就很容易拼出“转子”的形状了。

  • A:饼图,Axure8.0开始在矩形的形状增加了一些新的形状(如左下图,所示一目了然,无需解释)
  • B:随机线,由钢笔工具绘制而成。钢笔工具非常强大,可以画出任意你喜欢的形状,不用PS也不用求设计湿帮忙。(如右下图所示,一个拽拽的表情,虽然看上去像个胖纸,依然那么自信。哈哈)

gangbi

接下来我们重点讲讲双色环,这将引入Axure8.0元件形状一个革命性功能“改变形状”,它一共拥有“水平翻转”“垂直翻转”“合并”“去除”“相交”“排除”六大功能。利用下图对这几个功能简单的解释一下:

gaibian

有了上述知识,要做那个双色环,就是轻而易举的事情了。见下图操作方法:

huan

至此,那个旋转的家伙就画完了。值得一提的是,在应用上述六大功能的时候,两个元素选中的先后顺序会影响最终的结果,只有自己动手实验一把才能明白其中道理。

二、旋转事件

正如您所猜,旋转的事件在Axure RP 8.0的自带的事件,它可以对形状、图片、动态面板等元件实现旋转。这如果放在Axure RP 7.0要实现旋转事件,需要使用各种三角函数去实现sin/cos/tan/cot哈哈,为难学渣君了!只要在按钮里写入以下事件,轻松搞定。直接贴图:

shijian

当然,转动的圈数,速度,效果都可以设置。

总结

通过上述简单的例子我们了解到Axure RP 8.0新增的一些亮点。

  1. 丰富了元件自定义的形状。
  2. 新增了钢笔工具。
  3. 新增了“改变形状”功能。
  4. 新增“旋转”事件。

除此以外,Axure8.0还新增改版尺寸的事件。新增标注功能等等等等。感兴趣的同学可以继续玩,直到把它玩坏。。。哈哈呼呼

您可能想查找下面的文章:

  • Axure8.0原型案例:制作手机拨号界面
  • Axure8.0小案例:电动机原型

相关文章

  • 2017-06-14用Axure 实现“打飞机”,骚年,来一发(上)
  • 2017-06-14Axure7.0教程(五)鼠标Cursor函数的使用(动态面板跟随)
  • 2017-06-13Axure教程:中继器如何切换标记状态?
  • 2017-06-13Axure实例:顶栏和侧边栏的固定和窗口自适应
  • 2017-06-13Axure原型设计之轮播图
  • 2017-06-14Axure RP设计伸缩导航、遮罩弹窗、返回顶部的方法
  • 2017-06-14Axure教程 | 图片放大器
  • 2017-06-13Axure中继器:制作可交互的“APP音乐播放列表页”
  • 2017-06-13Axure教程:原型设计之微信朋友圈效果(中继器、动态面板、变量高级用法)
  • 2017-06-14Axure7.0教程(九)7.0重现进度条(动态面板新特性_定义面板大小)

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • Axure教程:可使用的计算器demo制作(下)
    • Axure7.0教程(二)中继器的使用(2)
    • Axure实战:滑动拼图解锁教程
    • Axure基础教程—文本框用法
    • Axure 7高保真还原Web首页布局和交互教程
    • Axure教程:如何画出曲线图?
    • Axure7.0教程(一)中继器的使用(1)
    • Axure原型设计之轮播图
    • Axure实例:制作一个通用的移动端内容滚动区
    • Axure教程:可使用的计算器demo制作(上)

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有