中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

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

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

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

一、材料準(zhǔn)備

1. 邊框

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

2. 開(kāi)關(guān)文字

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

3. 電視圖片

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

4. 開(kāi)關(guān)按鈕

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

5. 頻道和音量文本

頻道和音量為兩個(gè)文本標(biāo)簽，如果電視默認(rèn)狀態(tài)為開(kāi)的狀態(tài)就顯示，如果默認(rèn)狀態(tài)為關(guān)的話就默認(rèn)隱藏

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

6. 頻道選擇器

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

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

白色矩形設(shè)置圓角，僅左上和右上設(shè)置。

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

7. 音量控制器

音量控制器由一個(gè)黑色半透明矩形、白色矩形和滑動(dòng)控制組合組成。

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

白色矩形設(shè)置圓角，僅左上和右上設(shè)置。

滑動(dòng)控制組合由藍(lán)色滑條、灰色滑條和滑塊組成

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

滑塊由圓形組成，變色為藍(lán)色。將滑塊轉(zhuǎn)為動(dòng)態(tài)面板，這樣才可以用鼠標(biāo)拖動(dòng)。

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

二、交互制作

1. 開(kāi)關(guān)文字選中和取消選中的交互

開(kāi)關(guān)文字選中時(shí)：設(shè)置文字為on；開(kāi)關(guān)文字取消選中時(shí)，設(shè)置文字為off

2. 開(kāi)關(guān)按鈕組點(diǎn)擊時(shí)

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

灰色圓形選中時(shí)，即從關(guān)到開(kāi)的狀態(tài)：

• 設(shè)置開(kāi)關(guān)文字的狀態(tài)為真，因?yàn)榍懊嬲f(shuō)到開(kāi)關(guān)文字的交互，開(kāi)關(guān)文字為真時(shí)，自動(dòng)設(shè)置文本為on且變成藍(lán)色字體。
• 設(shè)置電視圖片的動(dòng)態(tài)面板為開(kāi)的狀態(tài)。
• 顯示頻道和音量的文本。

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

• 設(shè)置開(kāi)關(guān)文字的狀態(tài)為假，因?yàn)榍懊嬲f(shuō)到開(kāi)關(guān)文字的交互，開(kāi)關(guān)文字取消選中時(shí)，自動(dòng)設(shè)置文本為且變成默認(rèn)顏色的字體。
• 設(shè)置電視圖片的動(dòng)態(tài)面板為開(kāi)的狀態(tài)。
• 隱藏頻道和音量的文本。

3. 頻道文字鼠標(biāo)單擊時(shí)交互

當(dāng)用戶點(diǎn)擊頻道的文字時(shí)，顯示頻道選擇器組合，相當(dāng)于一個(gè)彈窗，這樣用戶就可以選擇對(duì)應(yīng)頻道。

4. 頻道選擇器的交互

鼠標(biāo)黑色半透明矩形的交互：

其實(shí)這個(gè)相當(dāng)于一個(gè)關(guān)閉返回的按鈕，所以鼠標(biāo)單擊黑色半透明矩形時(shí)，隱藏頻道選擇器組合即可，這樣相當(dāng)于一個(gè)燈箱效果。

中繼器內(nèi)部矩形鼠標(biāo)單擊時(shí)交互：

這里相當(dāng)于鼠標(biāo)單擊選擇頻道節(jié)目，最簡(jiǎn)單的方式就是設(shè)置該元件未選中狀態(tài)即可，因?yàn)榍懊嬖O(shè)置了這個(gè)矩形的選中樣式而且為單選組，所以就會(huì)有單擊選中變色的效果。

5. 音量文字鼠標(biāo)單擊時(shí)交互

當(dāng)用戶點(diǎn)擊音量的文字時(shí)，顯示音量控制器組合，相當(dāng)于一個(gè)彈窗，這樣用戶就可以選擇控制音量了。

6. 音量控制器的交互

鼠標(biāo)黑色半透明矩形的交互：

其實(shí)這個(gè)相當(dāng)于一個(gè)關(guān)閉返回的按鈕，所以鼠標(biāo)單擊黑色半透明矩形時(shí)，隱藏音量控制器組合即可，這樣相當(dāng)于一個(gè)燈箱效果。

圓形滑塊鼠標(biāo)拖動(dòng)時(shí)交互：

• 設(shè)置圓形滑塊的動(dòng)態(tài)面板跟隨鼠標(biāo)水平拖動(dòng)，這里需要注意要添加左右側(cè)的邊界，左側(cè)邊界為灰色滑條的x坐標(biāo)值-圓形滑塊一半的寬度，這里是因?yàn)橄肟刂浦行狞c(diǎn)，所以減去原型寬度的一半。同理右側(cè)的邊界為灰色滑條的x坐標(biāo)值+灰色滑條的寬+圓形滑塊一半的寬度
• 然后我們?cè)诟鶕?jù)原型滑塊的位置，設(shè)置藍(lán)色滑條的寬度，其實(shí)就是圓形滑塊的x坐標(biāo)值-藍(lán)色滑條的x坐標(biāo)值+圓形滑塊一半的寬度

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

那以上就是本期的全部?jī)?nèi)容了，感謝您的閱讀，我們下期見(jiàn)，88~~~

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

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