页面导航搭建

  • 文档创建者:Naya
  • 历史版本:1
  • 最近更新:Naya 于 2024-12-02
  • 1. 概述

    在制作企业分析报告时,清晰的页面导航结构对于信息的有效传达和用户的阅读体验至关重要。用户需要一种便捷的方式来快速定位到报告中感兴趣的部分,以提高阅读效率和体验。

    本文将以下图为例,介绍页面导航的搭建方法,供用户参考。

    1.gif

    2. 首页制作

    1)新建一张分页,设置好页面背景,本文示例选择自定义上传一张图片作为背景。如下图所示:

    Group 5.png

    2)在仪表板中添加「标题」控件,并设置好字体样式。若想要实现倒影效果,可在右侧组件样式中开启。如下图所示:

    Group 4.png

    3)再添加一个「标题」组件,可对标题设置「分页跳转」事件,点击即可跳转到另一个正文内容页面。如下图所示:

    Group 6.png

    3. 左侧导航栏制作

    后续分页的布局类似,我们先制作好一张分页的导航目录,然后复制、粘贴,在原有基础上继续修改,可以提高编辑效率。

    1)添加「图片+图片+标题」组件,制作一个小目录。如下图所示:

    Group 7.png

    2)将组件组合起来,方便后续编辑和移动。如下图所示:

    Group 8.png

    3)复制多个组合,再原有基础上进行修改图片和文字。如下图所示:

    Group 9.png

    4)新建多个分页,与目录对应起来。如下图所示:

    Group 10.png

    5)给「首页」目录设置「分页跳转」,点击即可跳转到首页。以此类推,给所有目录都设置分页跳转,点击即可跳转到对应的页面。

    Group 11.png

    4. 其他分页制作

    其他分页的布局类似,只需把制作好的目录导航复制到其他页,再修改一下目录背景即可。

    例如「利润情况」页中,要把对应的目录突出显示。如下图所示:

    Group 12.png

    5. 页间组件动效设置

    本文示例在点击导航目录切换时,可以实现一些组合的退出/进入动效。

    1)将右侧内容作为一个组合,对该组合设置「页间组合动效」。如下图所示:

    Group 14.png

    2)可以根据自己的需求,设置页面动效。如下图所示:

    Group 15.png

    附件列表


    主题: 仪表板2.0
    • 有帮助
    • 没帮助
    • 只是浏览

    鼠标选中内容,快速反馈问题

    鼠标选中存在疑惑的内容,即可快速反馈问题,我们将会跟进处理。

    不再提示

    8s后关闭



    AI

    联系我们
    在线支持
    获取专业技术支持,快速帮助您解决问题
    工作日9:00-12:00,13:30-17:30在线
    页面反馈
    针对当前网页的建议、问题反馈
    售前咨询
    采购需求/获取报价/预约演示
    或拨打: 400-811-8890 转1
    qr
    热线电话
    咨询/故障救援热线:400-811-8890转2
    总裁办24H投诉:17312781526
    提交页面反馈
    仅适用于当前网页的意见收集,帆软产品问题请在 问答板块提问前往服务平台 获取技术支持

    反馈已提交

    网络繁忙