SEARCH

创建B2B网站设计的10个最佳实践

2019年04月09日

根据美国国税局(IRS)的数据,目前全球有520万家B2B企业,这是多么庞大的数额。然而,它确实体现出了一些相当令人担忧的问题,首先,市场上有这么多的公司,为什么我们只能说出这么少的名字?


对营销的最小关注仍然是如此多的B2B网站在灰色地带的发展。虽然一些促销策略可能会花很多钱,但是其他的策略相对便宜和直接。


对于B2B公司来说,网页设计是在数百个相似的网站中脱颖而出的好方法。问题是- B2B网站设计的概念甚至不应该是昂贵的,它必须是舒适的,所有的功能都是有意义的。这甚至是当地企业也能负担得起的。


成功B2B网站设计的10个技巧

1、了解用户流程

在B2B中,企业很少追求品牌知名度本身的目标,更重要的是将你的访问者转化为潜在客户和买家。不管你的目标是什么,联系、电话或销售,你都应该知道用户需要什么才能达到目标,并考虑帮助他们达到目标的最佳方式。


在市场营销中,将用户的行为从A映射到Z的过程称为“用户流”。简单的用户流程如下图所示:


网站设计


上面的清单并不复杂或完美,但是这里的目标并不复杂,它的简单目的是让用户订阅博客。


2、使用面包屑导航

有不同的工具和设计方法来安排用户浏览网站的方式,对于提供大量服务的B2B网站,面包屑导航是最好的解决方案。


网站设计


快速总结:

面包屑导航起源于童话故事Hansel和Gretel,就像在故事中一样,breadcrumb(在本例中是以前页面的列表)帮助用户跟踪网站上的所有移动,以便他们可以随时返回到任何页面。


上图中的导航系统是面包屑导航的一个典型例子,看看用户如何总能回到他们以前浏览过的任何页面?


一些设计师对面包屑导航运用有问题,因为它看起来不太时尚。然而,你总是可以用一种创意性的方式来接近“轨迹”。


3、遵循“黄金比例”

对于那些在设计或艺术理论方面没有太多经验的人,这里有一个“黄金比例”的简要介绍。科学家们在没有深入研究其背后的数学原理的情况下,一度计算出了一个具有美感的完美矩形的参数——它的长度必须等于其宽度的1.6倍,300×485像素矩形就可以被认为是完美的。


网站设计


如果从那个三角形中画出一个正方形,他们就会看到下面的图形:


网站设计


然后,您可以保持相同的速度,从每个较小的矩形中画一个正方形。


网站设计


这是“黄金比例”的一种视觉表现,一种创造美学吸引力比例的方式。有一件事可能还不清楚——你如何在设计网站时使用黄金分割?


网站设计


Mashable是这样做的:

主页使用比例矩形和正方形,以获得更好的视觉效果。


4、使用进度条指示页面的加载状态

现在一个众所周知的事实是,页面加载时间太长可能会让用户失去动力。然而,即使你的网站还没有达到火箭速度,也不应该意味着你必须失去访问者。


解决这种情况的可靠方法是通知用户加载页面的进度,你可以通过设置最简单的进度条来实现这一点,这些进度条不会让你的网站慢下来,也可以让用户放心,他们不会白白等待。


网站设计


5、保持核心数据在第一个滚动

尼尔森诺曼集团(Nielsen Norman Group)的研究显示,74%的用户注意力集中在网站的前两卷内容上。事实上,只有6-8%的人有足够的兴趣、时间或精力从头到尾阅读页面内容。


对于网页设计师来说,这里的教训在于内容的优先级。虽然你的页面应该从一个介绍开始,然后慢慢滑到一个CTA (call-to-action),这似乎是合乎逻辑的,但事实并非如此。确保在第一卷中展示所有商品——最好的功能,最方便的建议。一旦你用最吸引人的报价吸引了认真的买家,他们会进一步阅读你的其他信息,这样可以节省访问者的时间并获得更多的线索。


网站设计


6、在用户完成一个重要的操作之后使用谢谢页面


无论在现实生活中还是在网上,说“谢谢”似乎都是微不足道的细节。然而,在这两种情况下,赢得别人的信任和给人一个好的外表态度可能是至关重要的。当涉及到网站设计时,感谢页面会做一些重要的事情:


增加了一点个性化,用户并不仅仅是你的百度分析中的一个数字,或者是你底线的一个销售,一点点人类的感激会让每个人感到特别和被关心。


提高品牌知名度,你可以用一种创意性的、令人难忘的风格来设计你的“谢谢”页面。这将是一个惊喜,并给用户另一个机会记住你。


状态跟踪,如果用户下载了一本电子书或白皮书,订阅了一份时事通讯,或者留下了一条消息,那么让他们知道这个操作成功是很重要的。将访问者重定向到谢谢”页面是一种表示“一切正常”的方式。


网站设计


7、概述主要及次要的行动召唤(CTA)

作为面向转换的页面(将用户引向特定目标)的创建者,有一个“最期望的结果”的原则。要详细说明,页面上可以有几个动作调用,但是其中一个调用显然比其他调用更重要。


如果这是你的网站的情况,考虑清楚地区分最需要的CTA。这可以通过更改CTA本身的位置或指向下一步的按钮的大小来实现。


区分不同的CTAs允许您引导用户获得最期望的结果,而不会将他们的选择限制在一个选项上。


网站设计


8、更改已访问链接的颜色

任何让你的网站的访问者难以理解的行为都已经让网站本身变得不那么友好了,为了确保每一页都尽可能使用舒适,你必须注意细节。


被访问链接的颜色是那些小细节之一,这些小细节对轻松地传递重要信息大有帮助。一个最被低估的设计细节,知道他们已经看到了一个页面可以帮助用户避免恼人的«似曾相识»效果。


在为这篇博客文章做研究时,我们点击了尼尔森·诺曼(Nielsen Norman)团队一位作者的个人资料页面。当链接变成紫色时,我们很方便地看到我们已经访问了它(见上图)。


网站设计


9、充分利用404页面

当您的网站出现错误时,第一个冲动是进入技术细节,这样您就可以解释代码中出现了什么错误。然而,就像量子物理学一样,高级编码并不容易理解。因此,您不应该使用它来解释错误。


相反,用清晰的语言来沟通错误。即使您没有完全解释问题,用户至少也会理解发生了什么。有一些方法可以处理404页面:


是创意性的,如果网站上有错误,为什么不利用这个不幸的情况开几个玩笑呢?这将显示个性,并可能减轻用户对错误的挫败感。


网站设计


是建设性的,如果有些东西不工作,解释用户应该做什么,以及如何解决问题。


无论您选择哪一个,都不要隐藏在代码和模棱两可的短语后面,例如:“亲爱的用户,这里有一个错误#5505”。在上图中,TechCrunch是404s中健康、建设性对话的一个例子。


10、使用块和表来构造信息

将内容组织成块和表是确保用户阅读您的副本的好方法,通过这种方式可以完成很多事情——首先,页面不再那么长了(还记得我们从长页面中学到了什么吗?)此外,对于任何需要比较的内容,表格都是一个很好的表示。正因为如此,他们现在正乘势而上。


网站设计


最佳B2B网站设计的4个例子


为了更好地理解当前商业到商业网站的设计趋势,持续不断地寻找创意是至关重要的。最优秀的设计师经常浏览网页,看看在现代设计中使用了哪些实践。


我们想确定你不会没有灵感就留下来,这就是为什么我们收集了4个b2b电子商务网页设计的正确方法的例子-享受!


1、Quid

Quid首先吸引你眼球的是其主页的极简主义。没有过多的噱头,网站保证了较短的加载时间和良好的移动优化。Quid网站是您期望从B2B公司的企业页面中得到的东西——优雅、精确、全面。


网站设计


2、Blake Envelopes

Blake envelope可能看起来像是一个完全不同的网站,Quid的颜色是深的,Blake envelope的颜色是浅的;在b2b电子商务网站的设计中,留白占了很大比重。然而,这两家网站的发展趋势是一样的,精确、切中要害的极简主义。


Blake envelope值得拥有一个单独的“wow”,因为它的搜索机制,它有一个庞大的过滤系统,允许用户通过一个简单的设计找到他们一直在寻找的东西。


网站设计


3、D.FY

无论谁设计了这个网站,他都非常清楚自己的手艺。乍一看,D.FY看起来就像一个寻呼机,而且很神奇。这种最佳的b2b 网页设计巧妙地使用视频内容来展示他们正在做的事情,这并不是每个b2b公司都已经养成的习惯。


同时,注意有多少小细节是从头到尾考虑的。例如,在页面底部有许多滚动条,以便用户可以估计页面的长度。滑块上的文字保持了一种连贯的风格,不会在页面上留下混乱。


网站设计


4、Shipwise

甚至不需要测试公司的产品,你就可以从第一个卷轴看出他们有一个聪明的设计师。一个极简主义的主题与视觉,标题和标题给你所有的基本信息,船明智的果壳。


再往下滚动一点,你可能会惊讶于这家公司如何很好地使用字体和颜色来展示其风格和品牌。白色和蓝色的组合,加上偶尔的黑色的触摸,做了它的工作-网站看起来超级优雅。


关于设计者如何使字体与图片很好地配合,还有其他细节需要注意。例如,通过不同寻常地合并二者,通过文本重叠图像,网站感觉不到传统和模板化,这正是您在B2B公司的自定义网页设计中所寻找的。


网站设计


最后总结:

目前市场上有超过500万家B2B企业,为了让销售更容易,关键是你不能看起来完全像你的竞争对手。最简单的脱颖而出的方法之一是了解如何设计一个惊人的B2B网站。


最重要的是充分利用网站的导航,并确保用户在浏览网站时感到轻松。为此,您需要概述一个用户流程,试验导航模型,并指导访问者完成旅途中的每一步。


一些视觉上的小技巧也会被证明是有用的——例如,通过遵循“黄金分割率”,你会立刻对你的用户群更有吸引力。你甚至可以创意性地设计“404”页面,让人们记住。


联系地址

大同格兰云天E座4楼411

大同市融网信息科技有限公司

以企业网站建设开发为核心业务

公众号

微信公众号

小程序

小程序