网站的着陆页承载了太多的东西。当用户打开着陆页的时候,你得让他们感知到你的品牌调性,通过行为召唤元素促使用户执行特定的操作,通过视觉化的手法,给用户留下深刻的印象等等。想要做好,真的很难。今天的文章将会和你分享10个提升着陆页设计效果的小技巧。


 

正如同你所知道的,着陆页的设计并不简单。单纯的将你的LOGO替换到着陆页模板上,并不能够带来足够优秀的设计效果,导航是否好使,可读性是否优秀,整体的设计是否一致,都会影响着着陆页的效果,而这些都需要你进行贴切而细致的设计,才能做好。而这也使得这些提升页面效果的技巧非常有用。

1.为页面设置一个明确的目标


 

着陆页通常不是大而全的,它需要有足够的针对性:你希望用户在进入着陆页之后执行什么操作?达成什么目标?

• 点击一个特定的链接

• 查看视频

• 玩一个小游戏

• 填写表单

• 购买产品

• 分享内容到社交媒体

• 阅读,或者和内容进行互动

你在着落页上所放置的内容,都应该尽量让用户尽可能接近实际的目标。BarkBox的着陆页上,设计师的目标是让用户购买狗玩具,或者提交邮箱订阅信息。上面是他们的情人节促销页面,主题贴切,目标明确。(注意页面的核心是CTA按钮“GetStart”)

2.为访客而设计


 

着陆页的设计,一定是要考虑到网站的访客,你的用户。这听起来挺理所当然,但是实际上很少有网站能够真正做到。整个页面中,所运用到的图片和元素应该和用户相关,文本和文案也应该以贴合用户甚至让用户喜爱和欣赏的方式来呈现。

你可以深入分析你的关键性的受众。

• 他们是男人还是女人?

• 他们年轻还是年长?

• 他们是否分布在特定的区域?

创建吸引用户的设计,能够提升参与度和用户转化率。

3.使用风格强烈视觉有力的图片


 

风格强烈,视觉上有力,又或者是足够有趣的图片,往往会给用户留下深刻的第一印象,并且能够让用户参与进来。

CouleeCreative的页面采用了一种有趣的设计策略。页面的整体设计确实没有改变,但是标题文案和图片中的男人表情会逐步变化。

这样的设计很有趣,很走心,也很让人期待。

4.设计层次清晰的文本


 

绝大多数的网站中都会包含不同层级的文本内容,而每个层级的文本内容的重要性、功能都会有差异,有的需要抓人眼球,有的则需要用户专注地仔细阅读。所以,你的设计需要围绕着文本的功能来设计。

• 标题:使用精炼而吸引人的文本让用户注意到。

• 正文:主要的信息,简洁,直接,清晰。

• 行为召唤文本:通常以按钮和链接的形式存在,告诉用户要做什么,下一步执行什么,如何抵达目标等等。提供明确的、可操作的指引。

• 页脚:提供相关的链接和信息,诸如品牌、联系方式和社交媒体链接等,建立信任,提供周边信息。

5.导航和关键词的结合


 

着陆页上的导航元素有助于告诉用户网站的内容,将导航元素视为整个网站的关键词系统的一个组成部分是非常有意义的。

Baublebar在PuppyBowl的着陆页上就做的很好,网站主要销售女性珠宝,设计师在网站的导航栏上标识出关键词“Baubles”,也让用户明白这个页面是针对宠物的。

6.清晰的行为召唤


 

每个用户都应该知道他们所打开的网站是做什么的,清晰的行为召唤指引是至关重要的。不要以为用户是你肚子中的蛔虫,你往往需要通过指引来引导他们做你希望他们做的事情。

比较常见的行为召唤方式是按钮,填写表单,引导说明(比如“滚动以查看更多”),甚至动画。

JonathanPatterson的着陆页中,每个明亮的色块都会在光标悬停的时候变暗,并且予以说明,引导用户去点击获取更多信息。

7.尽可能定制内容


 

着陆页本身就是为了特定功能而存在的,而且这个目标和功能通常是比较单一的,而这样的页面自然也需要足够的自定义设计来尽量达成目标。

Trulia这个网站的首页/着陆页就是尽量引导用户并且让用户提供他们的地理位置信息。通过自定义设计,用户才有可能深度地参与到交互当中来。

8.清晰而高关联性的品牌设计


 

着陆页最常见的问题就是容易让人感到厌倦,或者和主站的信息、设计上有所割裂。

在品牌设计上,着陆页和首页以及品牌本身应该有清晰的关联,确保用户不会有跳出感,让他们能够自然的参与到内容当中来。

Nike的运动鞋定制页面就做的非常好。它和整个网站的品牌化设计保持着高度的一致,从LOGO到图标,从字体到图片风格,用户知道这个页面的特殊性,同时也能够轻松明白它和整个网站之间的关系。用户永远不会怀疑这一点。

9.符合用户预期


 

当用户在其他的网站上点击链接跳转到这个着陆页上来的时候,他们会对这个页面或者网站有所期待,换句话来说,着陆页的设计应该具备特定的功能,迎合特定的需求,并且要贴合跳转的来源用户的预期。

Bills.com这个网站的着陆页采用了相对简单的设计,它可以帮助用户管理财务。从网站的名称到功能,用户能够形成一个相对明晰的概念和预期,而完成整个流程之前,用户不会看到其他的无关内容。

这样的设计和网站的跳转来源(比如社交网络)有着紧密的关联,用户知道接下来会发生什么。

10.构建层次结构和流程


 

设计良好的着陆页有着良好的可用性,这也意味着它有着清晰的层次结构。用户应该先看什么再看什么?他们将会在页面上执行什么任务,实现什么目标?合理的层次结构和贴合用户模式的流程很大程度上能够让用户和页面进行正确的互动,帮助用户达成目标。

在上面的LSProductions网站中,设计师让网站在视觉上呈现出清晰的行动流程,超大的视频背景,分别置于顶端两边的LOGO和菜单,以及向下滚动的CTA引导说明「Scrollformore」。用户可以在几秒钟内快速获取这些信息,并且开始操作。

结语

着陆页和首页其实是两个东西,两者在功能上有差异。有的网站可能是两者合而为一的,但是很多网站不是。着陆页是用户最常访问的页面,但并不一定是首页。

顶级的着陆页设计通常是需要营销人员参与进来,并且尽可能充分利用着陆页的流量。汕头网站设计建议,了解用户,有针对性的设计,是着陆页设计的关键。

10个提升着陆页设计效果的小技巧相关推荐

  1. 全新企业建站体验 视频着陆页设计

    2017年已经接近尾声,回头看各种资讯.社交.工具类视频App纷纷涌现,但无疑最热的就属短视频,视频资本投资也有进一步涨幅.的确,随着生活节奏的不断加快和人们阅读习惯的逐步改变 ,视频在人们的生活中开 ...

  2. php培训落地页,经典设计:17个最有效的学习着陆页设计的例子_html/css_WEB-ITnose...

    这篇文章中,我们为大家编译一些有趣和创意的着陆页面设计例子,帮助你快速掌握着陆页设计技巧.着陆页面(Landing Pages)需要特殊的设计,抓住目标受众的整注意力,和数以百万计的网站竞争. 着陆页 ...

  3. 提升界面的八种排版小技巧

    对于用户界面(UI)设计,排版是要考虑的最重要方面之一.正确的字体不仅有助于传达品牌;它在确保可读性,确保您的网站或应用程序易于使用且易于访问方面也起着至关重要的作用.如果您面临选择正确的版式的选择, ...

  4. 学习UI设计的一些小技巧你会了吗

    最近有很多小伙伴都在学习UI设计技术,对于如今的互联网行业,UI设计这个岗位的需求量确实非常大,发展空间比较好,下面小编就为大家整理一些学习UI设计的一些小技巧,希望能够帮助到正在学习UI设计的同学. ...

  5. 生成数据库设计文档小技巧

    目录 生成数据库设计文档小技巧 利用数据库自身功能生成excel和word文档 使用的软件环境说明 查询所有表名 查询所有列名 设置excel 生成数据库设计文档小技巧 利用数据库自身功能生成exce ...

  6. 社群运营,快速提升社群活跃度的六个小技巧

    社群运营的过程中不知道你是否也遇到过这样的情形:做活动好不容易拉起来的几十个群,可是没过多久就全沉寂了!聊天,没人理:发福利,没人理:甚至直接扔红包,群里都不见有几个人出来抢的. 其实每一个社群创立之 ...

  7. 10个实用的UX设计作品推销小窍门

    以下内容由Mockplus(摹客)团队翻译整理,仅供学习交流,Mockplus是更快更简单的原型设计工具. 众所周知,产品用户体验很重要,即使是Google也知道这一点.但是,当真正涉及到UX 设计销 ...

  8. 干货 | 提升演讲能力的7个小技巧

    课堂小组展示.论文/项目答辩,上台演讲发言--日常生活中有许多需要演讲的场景. 市场上关于如何演讲的书籍也多得很,网络上随手一搜就有诸多资料.但关键是有没有真的应用到自己的演讲实战当中. 有一本算是比 ...

  9. 提升 JavaScript 技能的5个小技巧,新手小白值得学习!

    在使用 JavaScript 时,我们常常要写不少的条件语句.这里有五个小技巧,可以让你写出更干净.漂亮的条件语句. 1. 使用 Array.includes 来处理多重条件 举个栗子 : // 条件 ...

最新文章

  1. Angular的ChangeDetectorRef.detectChanges()实现angularJS的$apply()方法,强制刷新数据渲染
  2. 捆绑调整Bundle Adjustment(最速下降法、牛顿法、Levenberg-Marquartdt法)
  3. linux中DNS的介绍及DNS的高速缓存
  4. Keras + Ubuntu环境搭建
  5. px、em、pt之间的区别与互相转换
  6. 包含contains
  7. 核心动画03-图标抖动.mp4
  8. Java 代码精简之道 | 长文
  9. C++ 11 深度学习(十)原始字面量
  10. arm放弃服务器芯片,ARM溃败:Applied Micro拆分ARM架构服务器芯片业务
  11. poj2778DNA Sequence (AC自动机+矩阵快速幂)
  12. java并发初探ConcurrentHashMap
  13. 为ESXi 4.x / 5.x / 6.x / 7.x创建持久暂存位置(1033696)
  14. mysql查询语句块_mysql查询语句
  15. goroutine 相关知识8
  16. linux基本命令之stat
  17. CUDA实践指南(十三)
  18. 微软Bing翻译API的使用
  19. 若依前后端分离项目图片上传后访问404问题
  20. 居家第二十五天的青菜

热门文章

  1. python中浪漫的代码_python浪漫表白源码
  2. 【解决问题】AttributeError: module ‘pandas‘ has no attribute ‘ewma‘报错解决方法
  3. php中抓取https页面,php抓取https url网页内容方法
  4. 专访变设龙:重新定义设计 颠覆传统企业图片管理方式
  5. 【Python】Python读写Excel表格
  6. 每日一个小技巧:想知道音频转文字怎么操作?1分钟帮你解决
  7. 负载均衡集群、高可用集群详解,DR、NAT超详细搭建步骤
  8. php json schema,JSON Schema Validation介绍
  9. 【图像分割】基于 C-V模型水平集图像分割Matlab代码
  10. 测试设计应该怎么写?