PC 网页的横幅设计

作者: ProductDaily | 来源:发表于2018-01-16 23:51 被阅读311次

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

    闲鱼:引导下载 App

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

    闲鱼


    SegmentFault:引导注册登录

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

    掘金:引导下载 Chrome 插件

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

    T社:引导填写手机号

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

    T社

    知乎:引导下载 App

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

    携程:引导下载 App

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

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

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

    总结起来,

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

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

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

    相关文章

      网友评论

        本文标题:PC 网页的横幅设计

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