{"id":108,"type":"Article","title":"横幅通知","slug":"banner-notifications","content":"横幅通知通常用于网站/官网/系统内的首页，常驻在页面顶部或底部的通屏横条，告知用户某些市场/营销/运营侧的信息。\r\n\r\n常见的场景包括：**新功能上线通知、系统升级运维通知、白皮书下载通知、周年庆产品促销、网站注册引导、产品发布会通知**等等。\r\n\r\n![](https://help-assets.jinshuju.net/assets/file/1574/%E6%A8%AA%E5%B9%85%E9%80%9A%E7%9F%A5.png)\r\n\r\n# **1. 通知编辑**\r\n![](https://help-assets.jinshuju.net/assets/file/1575/%E7%BC%96%E8%BE%91.png)\r\n\r\n## **通知标题**\r\n\r\n标题支持**「富文本」**编辑，比如对字体进行颜色、加粗、斜体、下划线、超链接等。\r\n\r\n**建议控制字数、突出信息重点、添加更多的 emoji 图标，让通知看起来更吸引人一些。**\r\n\r\n## **点击引导**\r\n\r\n你可以给横幅通知设定整行的点击链接，推荐添加一个 **CTA (Call To Action)** 的点击按钮，最好设置相同的链接跳转，用户点击时将会在新标签页打开。\r\n\r\n\r\n# **2. 样式预览**\r\n![](https://help-assets.jinshuju.net/assets/file/1578/preview.png)\r\n\r\n## **展现位置**\r\n\r\n一般类型的通知会放置在页面顶部，**对用户的视野侵占并不是很大**，是介于「侧边按钮」和「弹框」之间的侵扰度。\r\n\r\n但有些场景下，比如吸引用户下载白皮书，或者引导用户注册，可以放置在页面底部，点击率和展示效果会更好。\r\n\r\n## **横幅背景色**\r\n\r\n纯色的背景略微有些单调，也不够吸引人，所以内置了很多色彩丰富的**「渐变色」背景**，你应该可以挑选出几款匹配产品风格的背景色。\r\n\r\n如果你想自定义「横幅背景色」，我们提供的方式有一些的 hack，你可以询问前端来获得一个渐变色的 CSS 代码，比如\u003ccode\u003e linear-gradient(to right, #40e0d0, #ff8c00, #ff0080); \u003c/code\u003e，这个是指对\u003ccode\u003e #40e0d0 \u003c/code\u003e、 \u003ccode\u003e#ff8c00\u003c/code\u003e、\u003ccode\u003e#ff0080\u003c/code\u003e 三个颜色，从左到右进行渐变。\r\n\r\n![](https://help-assets.jinshuju.net/assets/file/1581/background.png)\r\n\r\n你也可以访问 [https://uigradients.com/](https://uigradients.com/) copy 出对应的 CSS Code 即可，灵活自由度更高。\r\n\r\n![](https://help-assets.jinshuju.net/assets/file/1585/css-code.png)\r\n\r\n如果只想要纯色的背景色，只需要将颜色的 code 写进来即可。\r\n\r\n![](https://help-assets.jinshuju.net/assets/file/1591/pure.png)\r\n\r\n## **按钮颜色 \u0026 按钮文字颜色**\r\n\r\n不需要设置的过于花哨，一般建议按钮颜色为白色，文字颜色换一个比较稳重的颜色即可，比如 #1D55C4\r\n\r\n# **3. 投放设置**\r\n\r\n![](https://help-assets.jinshuju.net/assets/file/1605/%E6%A8%AA%E5%B9%85%E9%80%9A%E7%9F%A5%E6%8A%95%E6%94%BE.png)\r\n\r\n投放设置相较于评价/问卷，会简化一些，面向哪些用户，在什么页面展示横幅，免打扰策略是怎么样的。\r\n\r\n## **投放用户**\r\n\r\n可以面向全部用户，或者进行了身份信息传递 identify 的部分用户展示横幅，比如免费/付费用户，比如刚刚注册的用户。详情可查看 https://howxm.com/help/articles/distribution-users 投放用户。\r\n\r\n## **显示页面**\r\n\r\n可以设定该横幅出现在哪些页面上，一般情况下，推荐出现在网站首页或者系统内的首页，而不是各种页面都呈现，所以建议一定要对页面位置进行设定。页面规则的配置，详情可查看：https://howxm.com/help/articles/distribution-page-setting \r\n\r\n横幅通知支持对于移动端或PC端的设定，很多时候，横幅类通知是仅出现 PC 端的，而移动端更多的适用于弹框式的通知，您可以根据业务来进行配置。\r\n\r\n![](https://help-assets.jinshuju.net/assets/file/1607/%E6%98%BE%E7%A4%BA%E9%A1%B5%E9%9D%A2.png)\r\n\r\n## **关闭策略**\r\n\r\n不同于弹框式的评价/问卷/通知，横幅一般是在某个时间窗口期发布，加上对用户干扰度较弱。故**横幅的关闭策略（免打扰）会更加的宽松，并未做以用户 uid 为身份的严格后端校验**。\r\n\r\n当用户关闭横幅后，在当前用户的浏览过程（当前浏览器 session ）中不会展示横幅，**若新开浏览器窗口或者更换浏览器或设备，则会再次展示，仅做前端校验**。经过跟一些内测用户的确认，这种机制是当前业务侧所需要的，且常规型的做法。\r\n\r\n我们提供了三种关闭策略机制：\r\n\r\n**1. 始终展示横幅，没有关闭按钮。**\r\n\r\n**2. 用户点击关闭后，关闭横幅。**\r\n\r\n**3. 用户点击关闭或点击跳转后，关闭横幅**\r\n\r\n\r\n# **4. 数据及报表**\r\n\r\n横幅通知并没有展示量的统计，大多数情况下呈现量是等同于该页面的访问量，主要关注在用户的点击数量统计，而这也是业务侧最关心的效果数据。\r\n\r\n![](https://help-assets.jinshuju.net/assets/file/1604/%E6%A8%AA%E5%B9%85%E9%80%9A%E7%9F%A5%E6%95%B0%E6%8D%AE%E9%A1%B5%E9%9D%A2.png)\r\n\r\n横幅通知的数据列表和详情页，跟评价/问卷类似，包含了点击时间、点击页面、地区、浏览器行为等，也可以设置相关的推送与集成，此处不再赘诉。\r\n\r\n# **5. 常见问题**\r\n\r\n## *  **「横幅通知」盖住了系统原有的顶部元素**\r\n\r\n「横幅通知」是在页面\u003ccode\u003ebody\u003c/code\u003e元素的最顶部添加了\u003ccode\u003ediv\u003c/code\u003e代码，若您的页面顶部元素使用的CSS 样式是\u003ccode\u003eposition: fixed\u003c/code\u003e，那可能会被「横幅通知」所遮住。建议您的页面顶部元素可采用 \u003ccode\u003eposition: sticky\u003c/code\u003e 的方式，可告知您的前端研发做确认和测试。\r\n\r\n若实在没有办法调整，可以调整「横幅通知」出现在页面的底部，也可以获得同样的效果。","featured":false,"category_id":19,"created_at":"2023-12-12T11:30:25.916Z","updated_at":"2024-03-05T09:20:20.778Z"}