【Axure教程】智能家居原型

我们今天来学习,在Axure里面做一个智能家居的原型,本案例以智能电视为模板,制作完成后效果如下图所示:

产品经理,产品经理网站

原型地址:https://r5fhmp.axshare.com/#g=1

一、材料准备

1. 边框

我们用黑色矩形和白色矩形制作边框即可,矩形设置一定的圆角度数,然后白色矩形位于黑色矩形上方,这样就可以制作出边框的效果

2. 开关文字

开关文字用文本标签制作,选中样式为浅蓝色字体。默认状态如果是开的就填写on,且勾选选中;如果默认状态为关的,就填写off,且不勾选选中。

3. 电视图片

这里我们需要准备两张电视图片,一张为开状态,即有画面的图片;一张是关状态,即没有图片的画面。分别将两张图片放置到同一个动态面板的两个状态中,状态名分别改为开和关,方面我们后续制作交互。默认状态如果为开的话,就将开状态面板放在上面,如果默认状态为关的话,就把关状态面板放在上面。

4. 开关按钮

开关按钮,案例中的案例由两个圆形和一个图标组成,外圈圆形填充颜色为渐变银色,里面圆形填充颜色为灰色,选中样式为蓝色。将这三个组合在一起。如果电视默认状态为关的话,就不用勾选灰色圆形为选中,如果默认状态为开的话,就需要勾选,这样就可以默认变蓝。

5. 频道和音量文本

频道和音量为两个文本标签,如果电视默认状态为开的状态就显示,如果默认状态为关的话就默认隐藏

我们将1至5的元件如下图摆放

产品经理,产品经理网站

6. 频道选择器

频道选择器由一个黑色半透明矩形、白色矩形和选择器组成。

黑色半透明矩形的大小和上面白色矩形一致,选择黑色,透明度为50%即可。

白色矩形设置圆角,仅左上和右上设置。

选择器用中继器制作,在中继器内的表格填写频道节目信息,然后设置单选组,选中效果为填充颜色为蓝色,文字颜色为白色加粗。如果频道信息太多的话可以转为动态面板,增加滑动条的效果,或者通过移动事件实现上下拖动查看。具体你们可以根据需要设置。

产品经理,产品经理网站

7. 音量控制器

音量控制器由一个黑色半透明矩形、白色矩形和滑动控制组合组成。

黑色半透明矩形的大小和上面白色矩形一致,选择黑色,透明度为50%即可。

白色矩形设置圆角,仅左上和右上设置。

滑动控制组合由蓝色滑条、灰色滑条和滑块组成

蓝色滑条和灰色滑条由矩形制作,增加圆角角度为最大值

滑块由圆形组成,变色为蓝色。将滑块转为动态面板,这样才可以用鼠标拖动。

产品经理,产品经理网站

另外补充一句,如果需要做变色效果,例如音量低于多少时为红色,高于多少时为绿色,这种效果需要增加多两种颜色的滑条,并且转为动态面板。由于这里需要涉及函数计算,所以本章以单色滑条为案例讲解。

二、交互制作

1. 开关文字选中和取消选中的交互

开关文字选中时:设置文字为on;开关文字取消选中时,设置文字为off

产品经理,产品经理网站

2. 开关按钮组点击时

开关按钮组点击时,我们切换里面灰色圆形的选中状态。然后根据灰色圆形的状态设置一下事件。

灰色圆形选中时,即从关到开的状态:

  • 设置开关文字的状态为真,因为前面说到开关文字的交互,开关文字为真时,自动设置文本为on且变成蓝色字体。
  • 设置电视图片的动态面板为开的状态。
  • 显示频道和音量的文本。

产品经理,产品经理网站

灰色圆形取消选中时,即从开到关的状态:

  • 设置开关文字的状态为假,因为前面说到开关文字的交互,开关文字取消选中时,自动设置文本为且变成默认颜色的字体。
  • 设置电视图片的动态面板为开的状态。
  • 隐藏频道和音量的文本。

产品经理,产品经理网站

3. 频道文字鼠标单击时交互

当用户点击频道的文字时,显示频道选择器组合,相当于一个弹窗,这样用户就可以选择对应频道。

产品经理,产品经理网站

4. 频道选择器的交互

鼠标黑色半透明矩形的交互:

其实这个相当于一个关闭返回的按钮,所以鼠标单击黑色半透明矩形时,隐藏频道选择器组合即可,这样相当于一个灯箱效果。

中继器内部矩形鼠标单击时交互:

这里相当于鼠标单击选择频道节目,最简单的方式就是设置该元件未选中状态即可,因为前面设置了这个矩形的选中样式而且为单选组,所以就会有单击选中变色的效果。

5. 音量文字鼠标单击时交互

当用户点击音量的文字时,显示音量控制器组合,相当于一个弹窗,这样用户就可以选择控制音量了。

产品经理,产品经理网站

6. 音量控制器的交互

鼠标黑色半透明矩形的交互:

其实这个相当于一个关闭返回的按钮,所以鼠标单击黑色半透明矩形时,隐藏音量控制器组合即可,这样相当于一个灯箱效果。

圆形滑块鼠标拖动时交互:

  • 设置圆形滑块的动态面板跟随鼠标水平拖动,这里需要注意要添加左右侧的边界,左侧边界为灰色滑条的x坐标值-圆形滑块一半的宽度,这里是因为想控制中心点,所以减去原型宽度的一半。同理右侧的边界为灰色滑条的x坐标值+灰色滑条的宽+圆形滑块一半的宽度
  • 然后我们在根据原型滑块的位置,设置蓝色滑条的宽度,其实就是圆形滑块的x坐标值-蓝色滑条的x坐标值+圆形滑块一半的宽度

产品经理,产品经理网站

这样,我们就完成了智能电视控制台的原型模板了,其他家居电器的话也可以用类似的方法制作。也可以直接复制粘贴模板,然后替换里面的图片和文本即可,那这样智能家居的控制面板的原型基本就完成了。

那以上就是本期的全部内容了,感谢您的阅读,我们下期见,88~~~

 

本文作者 @做产品但不是经理

版权声明

本文来自互联网用户投稿,文章观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符,请点击 举报 进行投诉反馈!

相关文章

立即
投稿

微信公众账号

微信扫一扫加关注

返回
顶部