Axure 原型 | 体验Axure 8新特性-画个高保真的手表

起点学院产品经理365成长计划,2天线下闭门集训+1年在线学习,全面掌握BAT产品经理体系。了解详情

gaobaozhenshoubiao

一直非常喜欢有爱的设计,最近看了几个手表的设计稿,尝试使用axure的新特性模仿。

这个作品所有元素都可以使用现成的axure部件实现!先睹为快:点击预览

实现的功能有:

  1. 手表根据系统时间获取
  2. 天气依据时间,自动切换
  3. 模拟手表走时
  4. 天气的开关
  5. 星期的显示

未命名

下面介绍axure两个新特性:

特性1:支持旋转:(设置一个小的例子,去试试不同的组合会产生什么效果,立刻就能了解功能特性,网上教程也很多,我就不再赘述了)

2016-01-06_01-46-50

特性2:合并两个部件(请尝试使用,还有自定义变形工具)

月亮、云朵、天气整体形状、指针等,均可画出!

2016-01-06_02-00-16

未命名2

下面开始具体的教程:

1、画手表雏形 (矩形+圆形)

2016-05-12_22-58-31

2、绘制表盘[需要旋转的指针使用两个部件组合]

屏幕快照 2016-05-12 下午11.09.01

3、绘制天气[利用形状组合]

屏幕快照 2016-05-12 下午11.59.53

4、获取系统时间让指针动起来[使用新的旋转特性\利用显示和隐藏循环处理旋转]

屏幕快照 2016-05-13 上午12.05.53

5、根据时间判断天气应该是白天还是夜间

屏幕快照 2016-05-13 上午12.35.23

6、绘制控制天气的界面[主要做一个开关,用于显示和隐藏天气]

屏幕快照 2016-05-13 上午12.39.08

7、绘制一个半圆刻度[做一个手指触摸表盘边缘设置倒计时的效果]

屏幕快照 2016-05-13 上午12.51.39

按步骤做下来就可以实现初步的效果, 一些光晕和透明度,在控件的属性设置里都能调节!

这个大约是5个月前做的,使用的是测试版本的axure8,之前由于没有空编辑这个教程所以拖了半年才发布,也是懒到家了。

原型下载地址:

作者地址下载:http://pan.baidu.com/s/1mijI9jM。密码:v7ae

官方下载:http://pan.baidu.com/s/1geVFLyb

在线预览:点击预览

 

作者:陈张良,微信号:chenzhangliang,6年的软件质量管理及测试岗位,2015年10月转型做产品,现就职于一家互联网金融机构任职产品经理!

本文由 @陈张良 原创发布于人人都是产品经理 ,未经许可,禁止转载。

您的赞赏,是对我创作的最大鼓励。

评论( 4

登录后参与评论
  1. 做的太棒啦!膜拜一下! :roll:

    回复
  2. :razz:

    回复
  3. 很受启发!旋转也可以这么玩!

    回复
    1. 回复

      我也是看了别人的旋转教程画的

加载中