#交互# ? 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
