用户进入落地页之后,这个“销售员”就会开始给客户介绍产品的特色、卖点等。当用户看到自己关心的点,被吸引,进一步被说服……就会觉得“这就是我想要的” ,然后下单、付款。
然而大部分时候,广告主都会对这个销售员过度包装,总是试图把想说的一股脑的展示给潜在客户,导致页面中卖点堆砌太多,令用户有压迫感,反而把用户赶跑了。
同样是那么多卖点,通过优质的排版,可以让内容展示的更有节奏感,促成广告朝更有效的方向发展。今天,我们将通过留白、图版率及图片的挑选三个方面,跟大家讲一下:怎么排(包)版(装)才算是恰到好处。
在我看到的所有落地页设计中,“挤”是个通病。挤带来的最直接的问题就是对用户视觉造成压迫感,使得用户被迫离开落地页。
和文字、图片的设计一样,留白本身也是设计能力的一种体现。正确的留白可以让页面更规范,且放置在留白中间的元素,比起放置在元素中的元素,更吸引目光。比如这个页面:
不少广告落地页的热区图显示,大部分用户的注意力仅停留在首屏,往下阅读的很少,这就给了优化师或者设计师一个误导,认为,既然用户只关注首屏,那么我们就在首屏多放点广告信息。
然而正是这种无节制的添加,令页面中包含了太多的内容,以致给用户一种页面狭窄的感觉、压迫感强烈,甚至连首屏的内容是啥还没来得及看就闪退了。
所以我们不能单纯的认为,元素太多是好事,反而适当的留白能使页面的空间感更强,视线更开阔,通过留白来减轻页面的压迫感,可以使用户更容易吸收我们试图传递的信息。
大面积的天空,其实就是留白。设计者没有填满整个画面,只是在中间位置放置了主要内容,分别是白板上的品牌“华为天际通”、白板上的“¥9.9”,而两个白板,实际上是一条线,中间被断开,用最吸引用户的slogan填补,用户的注意力自然会停留这个位置中的“出境上网每天仅需”,然后自然的顺着读下去“¥9.9”。
无印良品(MUJI)艺术总监原研①他的著作《白》中说到,“设计包含着对差异的控制。不断重复相同的工作使我懂得,重要的是要限制那些差异,只保留那些最关键的。”
换句话说,留白,是通过减少页面的元素以及杂乱的色彩,让用户可以快速聚焦到产品本身的有效法则。
这种方法在电商类的移动端页面上被大量的使用。实际上,信息流广告的落地页里也可以用这种方式来凸显重点,而不是被习惯性的元素堆积框住。
这是一张左右占满的火锅素材图,上面填满了调味料,中间是大量文案,已经很挤了,空白的地方还被两朵祥云素材填满。几乎是个完全没有空档的页面,任何人进入这个页面,都无法在第一时间了解到这个页面的主题是什么。
例如正常内容行距是1.5倍,而段落、标题之间行距就应该是2;2.5;甚至更宽,用留白制造隔断和连接,可以让页面逻辑、组别更清晰。
再比如表单项与表单项之间、按钮与按钮之间、段落与段落之间这种有联系但又需要区分的元素,用留白的方式可以轻易造成一种视觉上的识别,同时也能给用户一种干净整洁的感觉。
留白可以赋予页面轻重缓急的变化,也可以营造出不同的视觉氛围,通过不同方式的留白来改变版式,可以产生出各种各样我们需要的效果。
说完留白,我们不得不提到另一个落地页设计的误区,也是一个行业内似乎约定俗成的定例:落地页第一屏一定要是一张图片。
事实上大部分落地页以“图”开场确实是有原因的,毕竟图片比文字更容易抓住用户注意力,而且图片放在顶部,内容放在下面,整个页面设计更容易均衡,避免了新手由于把控力弱而造成的头部过轻,也符合信息流落地页的设计习惯。
落地页作为一个信息流落地投放的页面,大多数情况下,我们希望可以感染用户,所以会需要高图版率,这也就形成了开头我们说的,落地页大部分都以图片开场的惯例,也形成了明明没有好图片,设计师凑图也要上的习惯。
事实上,这样硬凑的方式,图片素材不能很好的辅助文案,反而会跟我们想要用户关注的文案争夺用户有限的注意力,显然是有害无利的。
那么没有合适的图片素材该怎么办呢?这种情况下,我们可以利用色块、元素、字体、特效的变化来伪造高图版率的效果。
例如可以采用模拟现实效果,像桌面、手、电影票、书本纸张、优惠券、便签等的效果,使界面更友好,也降低空洞的感觉。
上某个地板广告的落地页首屏,通常来讲,地板商做广告常用的素材为地板装修效果图,但这显然和地板商要做的促销活动的“抢”的情形不太匹配,这个时候怎么办?
这位设计师利用了实木特效(切合了地板这个广告主题)和字体变化,将文案做成了“图”,并且利用手这种素材库中很常见的素材营造出“抢”的效果——这种利用真实元素拼凑创造出的真实场景就能很好的弥补没有“一张合适的素材图”的问题。
其实刚刚木地板的页面中,我们已经看到字体变化带来的伪高图版率效果了。同样的,我们也可以利用几何形状、色块的变化来完成这一效果。
这个页面的图版率并不高,但是通过色彩、阴影、圆角的合理搭配,使得整个画面看起来一点儿也不单调。实现了跟有图片的状态下一样的效果,即对用户的视觉起到刺激作用。
OPPO的这个页面首屏,通过利利用了化、色彩变化,辅以线并框、底色等,在完全没有用图片素材的情况下,让页面依然丰满生动。
落地页主体部分也会涉及到图片和文字的排版,很多时候我们会采取相关的图片文字并排的形式,通常大家纠结的是,图片该排在文字的左侧呢?还是右侧呢?
答案是根据视觉重心,即左>右,也就是说,当涉及到左右排版时,重要的内容需要放在左侧。具体如下图:
①原研哉:(Kenya Hara),1958年06月11日出生于日本,日本中生代国际级平面设计大师、日本设计中心的代表、武藏野美术大学教授,无印良品(MUJI)艺术总监。
网站在前期的时候都是很难上排名的吗,那么是因为你的网站基础优化都没做好,怎么可能会有排名呢,首页说到了基础的优化那就要从根本的地方说起。前期就是先把网站的设计和网...
随着情人节的结束,2月份的设计圈干货大合集悄然更新。新的工具新的资源,依然是以往的分量,依然是相同的味道。和过去的合集相似,免费的素材、工具、服务占据了列表中9成的...
每个网站都是由不同功能不同类型的页面构成的,当用户打开错误链接的时候,网站的404页面就派上用场了。一个可靠的404页面在告知用户他们走错地方的同时,还应当引导用户继续浏...
今天来给大家讲讲如何用Axure实现上下滚动效果。 如何实现上下滚动效果: 让内容在显示区域滚动; 内容面板没有接触到顶部时,让内容面板移动至顶部; 内容面板接触到顶部,没有接...
你还在加班为每一个小功能的实现自己“码码码”吗?今天想早点下班的你,快来看看我最新发现的工具包吧!有了他们,这些功能你只需要直接用,或者用一点时间把他们优化的比作者创造时更...
本文将表述我对这个问题的回答作为体验或界面设计师,如何得知什么时候、什么地方用动效来提升可用性? 过去的5年中,我通过自己的工作坊和课程,在四十多个国家,为几百个顶...
漂亮的字体排版总能为网站设计加分不少。别具一格的设计虽然精彩,但是更多的时候,沿着前人探索出来的设计规则来设计,会更加得心应手。 怎样利用成熟的规则来创造令人惊艳的...
留白不只是空白的画布,它是一个功能强大的设计工具。留白是很难掌握的,留白的应用是包含艺术与科学。真正了解多少空白位置才足够创造一个良好的布局需要多实践。你设计得越...
几乎每个参与网站建设的人,都希望自己的网站能够在激烈的竞争中脱颖而出。设计师希望它效果拔群,成为自己作品集中令自己骄傲的存在;客户希望它广受欢迎,在用户和潜在用户...
本文主要对京东、淘宝、阿里巴巴三大电商的物流版块做了简单的分析,希望能够帮助大家更好的了解这一业务。 首先插播一段碎碎念的非题外话,可以让我们更好的了解这块业务的来...