美文网首页
Axure学习笔记:萤石云预览界面1

Axure学习笔记:萤石云预览界面1

作者: 篱落LY | 来源:发表于2018-01-31 12:08 被阅读129次

    设备预览界面,对于首次进入设备预览界面的手机,需要输入设备的验证码解锁完成后预览界面才展示监控画面。

    预览画面底部的 功能栏,会适配设备显示不同的功能。

    界面底部展示其他的服务信息。


    步骤:

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

    2. 绘制预览画面

    3. 绘制预览画面底部功能栏(适配设备,显示不同的功能按钮)

    4. 绘制常用的功能栏(适配设备,显示不同的功能按钮)


    绘制底部增值服务

    5. 用PS绘制图标后导入Axure中,与打钩图标居中对齐

    6. 导入图标,绘制背景矩形为渐变颜色

    7. 复制TabBar中萤石的Icon,修改填充颜色为#c9d5e5

    8. 添加文字

    9. 添加标题栏

    10. 绘制增值服务的内容

    11. 底部服务的整体效果~~然后发现没有绘制“立即开通”按钮

    12. 绘制172*47,渐变填充圆角矩形(渐变色#fd9768,#fe7537,渐变效果为上浅下深)

    13. 添加按钮文字,字体大小26px,字体颜色#ffffff

    14. 添加矩形边框、阴影效果

    15. 放置按钮位置后的效果图

    16. 完成~~


    素材:

    分享icon 设置icon 锁icon 播放icon 音量icon 全屏icon 对讲icon 截图icon 录像icon 云icon

    相关文章

      网友评论

          本文标题:Axure学习笔记:萤石云预览界面1

          本文链接:https://www.haomeiwen.com/subject/mhukzxtx.html