#交互# ? Axure

設(shè)備預(yù)覽界面，對于首次進(jìn)入設(shè)備預(yù)覽界面的手機(jī)，需要輸入設(shè)備的驗(yàn)證碼解鎖完成后預(yù)覽界面才展示監(jiān)控畫面。

預(yù)覽畫面底部的 功能欄，會適配設(shè)備顯示不同的功能。

界面底部展示其他的服務(wù)信息。

效果如下：

流程如下：

1. 繪制界面基本的框架、Navigation

2. 繪制預(yù)覽畫面

3. 繪制預(yù)覽畫面底部功能欄（適配設(shè)備，顯示不同的功能按鈕）

4. 繪制常用的功能欄（適配設(shè)備，顯示不同的功能按鈕）

繪制底部增值服務(wù)

5. 用PS繪制圖標(biāo)后導(dǎo)入Axure中，與打鉤圖標(biāo)居中對齊

6. 導(dǎo)入圖標(biāo)，繪制背景矩形為漸變顏色

7. 復(fù)制TabBar中螢石的Icon，修改填充顏色為#c9d5e5

8. 添加文字

9. 添加標(biāo)題欄

10. 繪制增值服務(wù)的內(nèi)容

11. 底部服務(wù)的整體效果~~然后發(fā)現(xiàn)沒有繪制“立即開通”按鈕

12. 繪制172*47，漸變填充圓角矩形（漸變色#fd9768，#fe7537，漸變效果為上淺下深）

13. 添加按鈕文字，字體大小26px，字體顏色#ffffff

14. 添加矩形邊框、陰影效果

15. 放置按鈕位置后的效果圖

16. 完成~~

素材：

分享icon

設(shè)置icon

鎖icon

播放icon

音量icon

全屏icon

對講icon

截圖icon

錄像icon

云icon