编辑导读:智能家居是以住宅为平台,利用综合技术管理家居设施与家庭日程事务,从而提高提升家居生活的便利性。本文作者以智能电视为模板,做了智能家居的原型,一起来看看吧。 我们今天来学习,在Axure里面做一个智能家居的原型,本案例以智能电视为模板,制作完成后效果如下图所示: 原型地址:https://r5fhmp.axshare.com/#g=1 一、材料准备1. 边框我们用黑色矩形和白色矩形制作边框即可,矩形设置一定的圆角度数,然后白色矩形位于黑色矩形上方,这样就可以制作出边框的效果 2. 开关文字开关文字用文本标签制作,选中样式为浅蓝色字体。默认状态如果是开的就填写on,且勾选选中;如果默认状态为关的,就填写off,且不勾选选中。 3. 电视图片这里我们需要准备两张电视图片,一张为开状态,即有画面的图片;一张是关状态,即没有图片的画面。分别将两张图片放置到同一个动态面板的两个状态中,状态名分别改为开和关,方面我们后续制作交互。默认状态如果为开的话,就将开状态面板放在上面,如果默认状态为关的话,就把关状态面板放在上面。 4. 开关按钮开关按钮,案例中的案例由两个圆形和一个图标组成,外圈圆形填充颜色为渐变银色,里面圆形填充颜色为灰色,选中样式为蓝色。将这三个组合在一起。如果电视默认状态为关的话,就不用勾选灰色圆形为选中,如果默认状态为开的话,就需要勾选,这样就可以默认变蓝。 5. 频道和音量文本频道和音量为两个文本标签,如果电视默认状态为开的状态就显示,如果默认状态为关的话就默认隐藏 我们将1至5的元件如下图摆放 6. 频道选择器频道选择器由一个黑色半透明矩形、白色矩形和选择器组成。 黑色半透明矩形的大小和上面白色矩形一致,选择黑色,透明度为50%即可。 白色矩形设置圆角,仅左上和右上设置。 选择器用中继器制作,在中继器内的表格填写频道节目信息,然后设置单选组,选中效果为填充颜色为蓝色,文字颜色为白色加粗。如果频道信息太多的话可以转为动态面板,增加滑动条的效果,或者通过移动事件实现上下拖动查看。具体你们可以根据需要设置。 7. 音量控制器音量控制器由一个黑色半透明矩形、白色矩形和滑动控制组合组成。 黑色半透明矩形的大小和上面白色矩形一致,选择黑色,透明度为50%即可。 白色矩形设置圆角,仅左上和右上设置。 滑动控制组合由蓝色滑条、灰色滑条和滑块组成 蓝色滑条和灰色滑条由矩形制作,增加圆角角度为最大值 滑块由圆形组成,变色为蓝色。将滑块转为动态面板,这样才可以用鼠标拖动。 另外补充一句,如果需要做变色效果,例如音量低于多少时为红色,高于多少时为绿色,这种效果需要增加多两种颜色的滑条,并且转为动态面板。由于这里需要涉及函数计算,所以本章以单色滑条为案例讲解。 二、交互制作1. 开关文字选中和取消选中的交互开关文字选中时:设置文字为on;开关文字取消选中时,设置文字为off 2. 开关按钮组点击时开关按钮组点击时,我们切换里面灰色圆形的选中状态。然后根据灰色圆形的状态设置一下事件。 灰色圆形选中时,即从关到开的状态:
灰色圆形取消选中时,即从开到关的状态:
3. 频道文字鼠标单击时交互当用户点击频道的文字时,显示频道选择器组合,相当于一个弹窗,这样用户就可以选择对应频道。 4. 频道选择器的交互鼠标黑色半透明矩形的交互: 其实这个相当于一个关闭返回的按钮,所以鼠标单击黑色半透明矩形时,隐藏频道选择器组合即可,这样相当于一个灯箱效果。 中继器内部矩形鼠标单击时交互: 这里相当于鼠标单击选择频道节目,最简单的方式就是设置该元件未选中状态即可,因为前面设置了这个矩形的选中样式而且为单选组,所以就会有单击选中变色的效果。 5. 音量文字鼠标单击时交互当用户点击音量的文字时,显示音量控制器组合,相当于一个弹窗,这样用户就可以选择控制音量了。 6. 音量控制器的交互鼠标黑色半透明矩形的交互: 其实这个相当于一个关闭返回的按钮,所以鼠标单击黑色半透明矩形时,隐藏音量控制器组合即可,这样相当于一个灯箱效果。 圆形滑块鼠标拖动时交互:
这样,我们就完成了智能电视控制台的原型模板了,其他家居电器的话也可以用类似的方法制作。也可以直接复制粘贴模板,然后替换里面的图片和文本即可,那这样智能家居的控制面板的原型基本就完成了。 那以上就是本期的全部内容了,感谢您的阅读,我们下期见,88~~~
本文由 @做产品但不是经理 原创发布于人人都是产品经理,未经作者许可,禁止转载 题图来自Unsplash,基于CC0协议 |