PC 网页的横幅设计

最近在做这方面的设计，收集和分析了一些案例，顺便写下来。（当然，分析都是主观的，我不清楚他们的数据）。

闲鱼：引导下载 App

最近闲鱼疯狂为 App 引流，这个横幅也是其中之一。内容非常多，采用了黑底半透明，显眼的同时也很「牛皮藓」。关闭后会缩小到角落、可以重新打开。

闲鱼

SegmentFault：引导注册登录

设计精良，内容主次分明。没有采用 fixed 布局，而是在页面中上方，几乎等同于一个常驻元素（可以点击关闭，但下次打开依然会出现），容易被习惯性地忽略。

掘金：引导下载 Chrome 插件

本来信息不多，但是加了很多元素，让主次不分明，本来最应该突出的按钮却不是很突出。（比如，右边的 mockup 视觉重量占得太多，分散注意力。）

T社：引导填写手机号

主次分明，设计精良，「快速获取报价」也是 T 社客户的核心需求。个人认为本场最佳。

T社

知乎：引导下载 App

用「热榜」功能来吸引下载，罗列出几个热门的知乎问题和参与度，但是字太多、信息密度稍高。

携程：引导下载 App

突出打折推广的活动/拉新手段，一个插画一个二维码结束战斗，打法简单又奏效。首页本身有挺多图片元素，所以横幅不得不用了深色底，以获得足够多的注意力。

Medium：显示试读进度、引导购买会员

符合 Medium 的一贯风格，没有多余的元素，克制又不失设计感。但场景也比较局限，用于引导下载或许就不灵。

总结起来，

1. 设计上，突出核心内容和按钮，精简信息，不需要过多的装饰元素，不然反而会分散注意力；

2. Fixed 布局不会被忽略，但也更容易反感，尽量做得精致；有关闭功能，让不想看横幅的用户可以关闭横幅，不至于马上离开。

3. 吸引力要足够强，突出优势，结合核心业务，操作流程方便。