# C-2.11 移动端展开菜单提示

【场景】

大和客户反馈打开移动端加载完首页后，不知道点击菜单按钮可以打开。

希望可以自动打开菜单，让客户知道下一步干什么。

【需求】

1.  移动端主动打开菜单是个很奇怪的交互，替换为通过微动效展示点击菜单按钮的提示。
    
2.  用户打开手机，加载完首页后，
    
    1.  顶部菜单按钮显示微动效（例如呼吸放大缩小2s）
        
    2.  按钮左侧弹出气泡提示，显示文案“点击这里打开菜单”
        
    3.  气泡常驻显示，点击菜单按钮后，气泡自动消失，不需要设关闭按钮
        
3.  文案国际化key： HOMEVISTA\_C\_MOBILE.menu.tip
    
    1.  文字靠右对齐，保持一行不折行
        
4.  微动效每次打开首页时都展示，呼吸动效播放2次后停止，1秒呼吸一次
    
5.  气泡提示在点击导航按钮打开菜单后消失，并且不再显示
    
    1.  如果不点导航，每次访问都存在
        
    2.  仅在访问首页时打开，如果入站时访问内页，不弹气泡提示
        
6.  移动端首页：呼吸动效+气泡提示
    
    1.  呼吸动效：设计提供JSON文件
        
    2.  气泡提示：从图标左侧弹出，限宽如图，文案很长时自动向下换行（如果有国际化）
        
7.  动效开始时间：首页图片加载完，并且PNG透明图加载完且动效播放完后启动
    
8.  下滑打开导航，与点击按钮打开导航，都消失气泡，并且气泡不再出现。
    
9.  方案2-图标呼吸：
    
    1.  图标自身做呼吸动效
        
    2.  ![图标呼吸.gif](https://alidocs.oss-cn-zhangjiakou.aliyuncs.com/res/mPdnpEb9NGJ3bqw9/img/b566bb32-683c-4b56-a76f-7ca5072256f0.gif)  ![图标呼吸.gif](https://alidocs.oss-cn-zhangjiakou.aliyuncs.com/res/mPdnpEb9NGJ3bqw9/img/b566bb32-683c-4b56-a76f-7ca5072256f0.gif?x-oss-process=image/crop,x_274,y_80,w_42,h_41/ignore-error,1)
        

11.  蓝湖：[https://lanhuapp.com/link/#/invite?sid=X0GefKN](https://lanhuapp.com/link/#/invite?sid=X0GefKN)
    
12.  动效文件：                                   
    

[请至钉钉文档查看附件《图标呼吸.zip》。](https://alidocs.dingtalk.com/i/nodes/Gl6Pm2Db8D667A5vT9Dgr1RAVxLq0Ee4?iframeQuery=anchorId%3DX02mojlqujnnv919kemo1)