网页设计技巧:电商网站如何设计横幅更吸引眼球

设计横幅的技巧有哪些?用户去与留,大多是由网站设计而决定的,其关键因素在於网页中的图片设计,或近期很流行且能移动的「横幅」。横幅,又叫图片滚动、滑块、特色内容模块等等很多类似的叫法,其在网页上随处可见,尤其是电商网站的主页上,大多电商网站的PC端网站主页都会有横幅。

能够移动的横幅虽然能吸引用户眼球,但如果其设计和文字内容无关,就会显得多此一举。本文将通过介绍横幅的重要性、特点、设计指南等一一介绍,或许各位看官看完後,能理解横幅存在的目的,甚至改进自己网站的版面设计。

网页设计技巧:电商网站如何设计横幅更吸引眼球

网页设计技巧

◇ 什麽是横幅?

横幅是企业在网站主页上显示宣传内容的一种推广形式。通过横幅,用户无需自行滚动浏览,便可知道信息或活动的详情。横幅呈现的形式和大小非常多样,但大多横幅都有如下特徵:

特徵一:主要出现主页靠上位置,占据页面显眼位置绝大部分的区域;

特徵二:即使每次只能展示一条,通过滚动形式,在同一个位置能展示多条推广;

特徵三:同一位置的横幅中,每条推广都有自己的主题内容,且包含图像和少许文字。

网页设计技巧:电商网站如何设计横幅更吸引眼球

网页设计技巧

横幅的优点:

1. 可以在主页的同一块黄金区域显示多条推广内容;

2. 越靠近页面顶端的信息,越可能获取更多关注。

横幅的缺点:

① 用户经常忽略横幅以及横幅内的内容,即使横幅可以自动滚动;

② 用户基本不会在页面的顶端逗留太久,所以基本上他们不能消化掉横幅所有讯息;

③ 设计师和用户理解出现偏差,设计师视横幅为一系列图片的集合体,但大多数用户只会留意其中一张图;

④ 用户未必能通过横幅,可以了解相关服务或产品,甚至无法明白设计师想传达的讯息。

◇ 主页横幅对网站有用吗?

事实上,横幅是一种实证效果不好的模式(anti-pattern)。曾有相关数据显示,只有1%的网站用户会点击并浏览横幅相关内容,而在这1%的用户中有84%的用户仅仅是点击横幅的第一张滚动图片。

既然横幅点击率那麽低,为何还要使用横幅呢?

虽然横幅的效果并不好,但从很多案例分析,我们不难发现,只要坚守一些重要的操作细节,横幅不单可以获得很好的宣传效果,还对用户有很好的帮助。

◇ 横幅设计指南

——如何通过横幅吸引用户

一、 内容第一

网页设计技巧:电商网站如何设计横幅更吸引眼球

网页设计技巧

「内容为王」,很多时候即使横幅的设计多精美,交互多简单,如果内容不相关,这对用户来说都是「大灾难,因为他们无法理解横幅所传达的信息。想避免这种情况,在设计上就要注意以下一些重要规则:

1. 如果横幅内容不够吸引或对用户没有帮助,那就直接不要用横幅,避免分散用户的注意力;

2. 横幅是整个网站的一部分,而不是网页强加的广告,所以横幅内容不要太像广告,否则用户会选择直接忽视;

3. 选择合适的字体和图像,让横幅和页面其他内容相匹配;

4. 滚动图片的顺序要仔细斟酌,越靠前的图片,获得的曝光机会越多,因此第一张图片非常重要,它是决定用户停留时间长短的关键;

5. 不要把横幅当作了解网站特色和内容的唯一途径,建议将出现在横幅的重要信息放在页面的其他部分,方便用户浏览时能看到。如果你想让用户看到网站所有内容,建议不要使用横幅,因为大多数用户并不会每张横幅图片都浏览。

二、 限制滚动图片数量

网页设计技巧:电商网站如何设计横幅更吸引眼球

网页设计技巧

尽量控制横幅图片数量在五张以下,这样能帮助用户更好地了解网站内容,回过头後还能在横幅里找到相关内容。若横幅图片数量太多,用户可能会无那麽多耐性等待,继而放弃继续浏览。

三、 提供进度提醒

网页设计技巧:电商网站如何设计横幅更吸引眼球

网页设计技巧

让用户知道横幅总共有多少张滚动图片,同时让其知道当前的「进度」是第几张图片,让用户觉得一切都尽在掌握之中。

四、 确保滚动图片内容在手机清晰显示

网页设计技巧:电商网站如何设计横幅更吸引眼球

网页设计技巧

越来越多企业网站采用响应式网站设计,设计师在设计横幅时,不仅需要注意PC端的易读性;还要确保手机客户端中横幅文字和图片清晰,用户才有兴趣了解。

五、 设计恰当的导航按钮

网页设计技巧:电商网站如何设计横幅更吸引眼球

网页设计技巧

导航按钮能帮助用户识别各项选择,能使用户在核心滚动图片,看到相关内容时,能回想到这些选择。因此确保导航按钮存在并出现在横幅内,而不是其他区域,这样可以避免显示不当的问题。

六、 确保自动滚动运行流畅

网页设计技巧:电商网站如何设计横幅更吸引眼球

网页设计技巧

横幅使用自动滚动能帮助用户浏览相关信息,但想要自动滚动运行流畅,就需要注意以下几点细节:

1. 手机设备不要加载自动滚动功能,避免用户误触不想点开的图片;

2. 确保自动滚动切换速度不要过快或快慢;切换过快,用户无法读取信息;切换过慢,会让用户厌烦那些滚动图片;

3. 让用户保持可控状态,增加暂停、上一页、下一页以及页数选项,方便用户能切换到想要点击的滚动图片。

4. 滚动到最後一张图片後不要停止,而是继续循环播放所有图片。

七、除了横幅之外的最佳选择

网页设计技巧:电商网站如何设计横幅更吸引眼球

网页设计技巧

由於横幅缺乏背景铺垫,因此大多用户并不愿意去浏览或了解当中的内容,要解决这个问题,同时又想吸引用户眼球,除了横幅,也可以考虑主图。

相比横幅,主图有以下优点:

1. 静态主图能减少分散用户的注意力,让用户可以专注於一张图片;

2. 静态主图仅有一张,设计师能投放更多心思和情感,将相关服务或产品呈现给用户;

3. 有效确定内容的优先次序,并更好地号召用户参与。

如果用户无法与横幅设计产生互动,这并非全部是横幅模式问题,可能是你的横幅不够引人入胜,可能是你的内容与横幅不相关,也有可能是因为你的网站不适宜添加横幅。因此,在设计横幅时,应该考虑这个设计是否对用户的体验有帮助,能否更好地传达信息给用户,如果答案是肯定的话,那就大胆地用吧!

本文来自投稿,不代表重蔚自留地立场,如若转载,请注明出处https://www.cwhello.com/43149.html

如有侵犯您的合法权益请发邮件951076433@qq.com联系删除

(0)
Inspirr的头像Inspirr订阅用户
上一篇 2022年6月25日 23:41
下一篇 2022年6月25日 23:41

相关推荐

  • 网页设计三要素,让网页更高端!

    为了凸显出网页设计高端效果,呈现出与众不同的页面风格和内容,让布局设计更加合理,注意下面这些要素非常重要,因为这些内容不仅可以让网站呈现出美观性,还能让其功能性得到全面促进,下面就来为大家全面介绍一…

    2019年8月20日
    0284
  • html横线怎么打。

    在HTML中,我们可以使用<hr>标签来创建一行横线。<hr>是"horizontal rule"的缩写,意为水平线,这个标签在HTML文档中表示一个水平的分隔线,通常用于将内容分割成不同的部分或者创建一个简单…

    2024年6月25日
    00
  • 如何让网页设计富有故事性?

      游戏 让网页设计突出故事性并不难,讲述故事很简单,但是要呈现故事并不那麽容易。不如设置一个比较简单易玩得小游戏,不仅吸睛同时也吸引用户去与之进行交互。要注意的是保持简单的提示以及及时的激励机制…

    2022年6月25日
    0126
  • 成功的网页设计要素:导航

    一个成功的网页设计一定是内容,设计,兼容性这3点完美结合的结果。你必须考虑用户体验,配色方案,文字内容,当然还有网站是否在手机上运行良好。 在线下宣传力度有限的情况下,网络是你推广产品或服务的最好手段…

    2019年8月19日
    0268
  • 框架式页面设计须3步流程

    1、 视觉层次 需要先确定元素或者内容的优先级的高低,最好能够明确的标出级别,能够更好的寻找依据。 2、 内容划分 到了这个流程,就需要将所规划的内容进行划分到制定的区域当中,并且调整、优化等。 内容线框图…

    2022年6月11日
    0138
  • 网页设计的流行趋势你了解吗。

    网页设计的流行趋势你了解吗?许多刚刚参加ui培训学校毕业的学生在进入工作后,对于网页设计方面仍然是一知半解,不知道当下流行的网页设计的方向,今天优行者小编将给大家分享关于ui设计中网页设计的一些流行趋势…

    2022年7月4日
    0124
  • 分享如何理解网页设计的用户体验。

    各行各业都有自己的用户体验的体系,用户体验其实就是用户使用你的产品或者服务的体验,从产品角度上讲就是产品的设计的人性化,从服务角度讲就是服务人性化;产品人性化做的比较好比如电子产品中的苹果、小米等,服…

    2023年6月15日
    01
  • 严重影响网站搜索引擎优化的五项网页设计弊端。

    一、如果你没有移动网站,或者你的移动网站只是做了一个简单的代码转换和浏览器调整,那么你的移动搜索结果将非常糟糕。这在百度尤为突出。据说百度有一个在线工具可以测试移动网站的分数。如果你的网站是H5移动网…

    2023年2月20日
    02

联系我们

QQ:951076433

在线咨询:点击这里给我发消息邮件:951076433@qq.com工作时间:周一至周五,9:30-18:30,节假日休息