編輯導讀：智能家居是以住宅為平臺，利用綜合技術管理家居設施與家庭日程事務，從而提高提升家居生活的便利性。本文作者以智能電視為模板，做了智能家居的原型，一起來看看吧。

我們今天來學習，在Axure里面做一個智能家居的原型，本案例以智能電視為模板，制作完成后效果如下圖所示：

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

一、材料準備

1. 邊框

我們用黑色矩形和白色矩形制作邊框即可，矩形設置一定的圓角度數(shù)，然后白色矩形位于黑色矩形上方，這樣就可以制作出邊框的效果

2. 開關文字

開關文字用文本標簽制作，選中樣式為淺藍色字體。默認狀態(tài)如果是開的就填寫on，且勾選選中；如果默認狀態(tài)為關的，就填寫off，且不勾選選中。

3. 電視圖片

這里我們需要準備兩張電視圖片，一張為開狀態(tài)，即有畫面的圖片；一張是關狀態(tài)，即沒有圖片的畫面。分別將兩張圖片放置到同一個動態(tài)面板的兩個狀態(tài)中，狀態(tài)名分別改為開和關，方面我們后續(xù)制作交互。默認狀態(tài)如果為開的話，就將開狀態(tài)面板放在上面，如果默認狀態(tài)為關的話，就把關狀態(tài)面板放在上面。

4. 開關按鈕

開關按鈕，案例中的案例由兩個圓形和一個圖標組成，外圈圓形填充顏色為漸變銀色，里面圓形填充顏色為灰色，選中樣式為藍色。將這三個組合在一起。如果電視默認狀態(tài)為關的話，就不用勾選灰色圓形為選中，如果默認狀態(tài)為開的話，就需要勾選，這樣就可以默認變藍。

5. 頻道和音量文本

頻道和音量為兩個文本標簽，如果電視默認狀態(tài)為開的狀態(tài)就顯示，如果默認狀態(tài)為關的話就默認隱藏

我們將1至5的元件如下圖擺放

6. 頻道選擇器

頻道選擇器由一個黑色半透明矩形、白色矩形和選擇器組成。

黑色半透明矩形的大小和上面白色矩形一致，選擇黑色，透明度為50%即可。

白色矩形設置圓角，僅左上和右上設置。

選擇器用中繼器制作，在中繼器內的表格填寫頻道節(jié)目信息，然后設置單選組，選中效果為填充顏色為藍色，文字顏色為白色加粗。如果頻道信息太多的話可以轉為動態(tài)面板，增加滑動條的效果，或者通過移動事件實現(xiàn)上下拖動查看。具體你們可以根據(jù)需要設置。

7. 音量控制器

音量控制器由一個黑色半透明矩形、白色矩形和滑動控制組合組成。

黑色半透明矩形的大小和上面白色矩形一致，選擇黑色，透明度為50%即可。

白色矩形設置圓角，僅左上和右上設置。

滑動控制組合由藍色滑條、灰色滑條和滑塊組成

藍色滑條和灰色滑條由矩形制作，增加圓角角度為最大值

滑塊由圓形組成，變色為藍色。將滑塊轉為動態(tài)面板，這樣才可以用鼠標拖動。

另外補充一句，如果需要做變色效果，例如音量低于多少時為紅色，高于多少時為綠色，這種效果需要增加多兩種顏色的滑條，并且轉為動態(tài)面板。由于這里需要涉及函數(shù)計算，所以本章以單色滑條為案例講解。

二、交互制作

1. 開關文字選中和取消選中的交互

開關文字選中時：設置文字為on；開關文字取消選中時，設置文字為off

2. 開關按鈕組點擊時

開關按鈕組點擊時，我們切換里面灰色圓形的選中狀態(tài)。然后根據(jù)灰色圓形的狀態(tài)設置一下事件。

灰色圓形選中時，即從關到開的狀態(tài)：

• 設置開關文字的狀態(tài)為真，因為前面說到開關文字的交互，開關文字為真時，自動設置文本為on且變成藍色字體。
• 設置電視圖片的動態(tài)面板為開的狀態(tài)。
• 顯示頻道和音量的文本。

灰色圓形取消選中時，即從開到關的狀態(tài)：

• 設置開關文字的狀態(tài)為假，因為前面說到開關文字的交互，開關文字取消選中時，自動設置文本為且變成默認顏色的字體。
• 設置電視圖片的動態(tài)面板為開的狀態(tài)。
• 隱藏頻道和音量的文本。

3. 頻道文字鼠標單擊時交互

當用戶點擊頻道的文字時，顯示頻道選擇器組合，相當于一個彈窗，這樣用戶就可以選擇對應頻道。

4. 頻道選擇器的交互

鼠標黑色半透明矩形的交互：

其實這個相當于一個關閉返回的按鈕，所以鼠標單擊黑色半透明矩形時，隱藏頻道選擇器組合即可，這樣相當于一個燈箱效果。

中繼器內部矩形鼠標單擊時交互：

這里相當于鼠標單擊選擇頻道節(jié)目，最簡單的方式就是設置該元件未選中狀態(tài)即可，因為前面設置了這個矩形的選中樣式而且為單選組，所以就會有單擊選中變色的效果。

5. 音量文字鼠標單擊時交互

當用戶點擊音量的文字時，顯示音量控制器組合，相當于一個彈窗，這樣用戶就可以選擇控制音量了。

6. 音量控制器的交互

鼠標黑色半透明矩形的交互：

其實這個相當于一個關閉返回的按鈕，所以鼠標單擊黑色半透明矩形時，隱藏音量控制器組合即可，這樣相當于一個燈箱效果。

圓形滑塊鼠標拖動時交互：

• 設置圓形滑塊的動態(tài)面板跟隨鼠標水平拖動，這里需要注意要添加左右側的邊界，左側邊界為灰色滑條的x坐標值-圓形滑塊一半的寬度，這里是因為想控制中心點，所以減去原型寬度的一半。同理右側的邊界為灰色滑條的x坐標值+灰色滑條的寬+圓形滑塊一半的寬度
• 然后我們在根據(jù)原型滑塊的位置，設置藍色滑條的寬度，其實就是圓形滑塊的x坐標值-藍色滑條的x坐標值+圓形滑塊一半的寬度

這樣，我們就完成了智能電視控制臺的原型模板了，其他家居電器的話也可以用類似的方法制作。也可以直接復制粘貼模板，然后替換里面的圖片和文本即可，那這樣智能家居的控制面板的原型基本就完成了。

那以上就是本期的全部內容了，感謝您的閱讀，我們下期見，88~~~

本文由 @做產品但不是經理 原創(chuàng)發(fā)布于人人都是產品經理，未經作者許可，禁止轉載

題圖來自Unsplash，基于CC0協(xié)議