「联系我们」页面设计指南(内附案例)

简介: 「联系我们」页面就是用户联系你的重要渠道,是网站寻求优秀合作伙伴的途径

01/
2018年,国外一家网站HubSpot Research做过一次信任调查,数据显示,有55%的消费者不信任他们曾消费过的品牌。

随着互联网的发展,什么值得买、小红书、知乎这种内容平台站上互联网舞台,导致信息越来越透明,消费者在作出购买决策时,会更加独立自主,商家与客户之间的信任关系建立更加困难。表现在数据上,就是地毯式品牌广告的效益下降明显。

那难道公司里的市场部、品牌部就能无所作为了吗?
NO!
我们正好可以借助内容营销的趋势,在用户主动想要了解和寻求帮助时,给他们提供一个更加清晰且便捷的沟通通道。

「联系我们」页面就是用户联系你的重要渠道,是网站寻求优秀合作伙伴的途径。通过他们自行选择的渠道,帮助客户和潜在客户更快地找到解决方案或了解业务背景。由此提高客户忠诚度、渠道建设、提高客户满意度。

但是,仅仅列出在工作时间内开放的客服电话是远远不够的,消费者很聪明,他们需要的更多。

02/
为了帮助你的网站与顾客建立更有意义的联系与信任,大梦特地从上百家企业网站中筛选出一些经典案例,帮助你更直观的了解如何设计「联系我们」页面。

添加地图:
一个公司的地理位置在商务交往中往往扮演着重要的角色。加入嵌入式地图则把企业地址可视化。谷歌地图有一个自定义的嵌入功能,允许开发者添加全功能的谷歌地图到联系页面。
很多国内企业像宏宝莱,小腾孵化器、伊姿美颜等都是采用这种方式。可以让访客一眼就对企业的地理位置有个明确的了解。
image.png
image.png
image.png
截图来自阿里云建站工具云·企业官网给宏宝莱搭建的网站。

添加社交账号链接:
在联系页面加上社交账号链接,能赋予企业可触摸的人格。这些链接可让用户浏览企业更多动态信息。最好是能在同一页上提供不同的社交账号链接,让用户决定选择哪一个。
像立体通这家网站就添加了微信、微博的链接,扫描二维码方便用户持续关注企业动态。
image.png
简化联系表格:
新爱尔兰旅游局官方网站的联系页面就非常干净简单,上半部分是联系电话和邮箱,下半部分的表格只有四个框和一个选项,让访客简单填写身份、联系方式和出行需求。简单的好处就是不会让游客对着繁杂的表格和信息望而却步。
image.png
image.png
简洁名片格式:
管阿姨采用干净利落的名片设计,将访客指向正确的方向:合作热线,企业邮箱和客服热线。其中企业邮箱下方包含三个方向:商务,求职和媒体。按需分类,页面排版简单好看,且非常容易浏览。

提供“试用装”:
朝恒美术学校的「联系我们」就增加了试听功能,访客可以留下孩子的基本信息,然后预约试听课程。
这种给予好处的方式会降低访客的戒备心,同时增加好感度,不仅可以搜集相关信息,还能拉近与访客的距离。

统一色彩与格式:
「联系我们」页面不单单是放上地图或者表格或者相关信息就好,也要注重审美,注意页面色彩与格式的统一。
image.png
此外,国外有些网站的「联系我们」页面也非常值得学习。

提供多种联系情景:
这个网站提供了两种不同的联系方式,语音和文字,访客可以选择任何一种对他们来说最有意义的方式进行联系。
这种方式不仅降低了推广的障碍,而且还可以给潜在客户提供他们满意的情境。
image.png
创建分屏联系:
阿姆斯特丹的这家设计工作室就是采用分屏式联系页面,访客可以在左侧找到基本的位置信息,以及与工作室的社交链接。
在右侧,可单击电子邮件地址,会在你自己的电子邮件客户端中接受一个打开的消息,从而实现无缝交易。
如果访客希望在了解更多背景信息,可以从品牌的三个突出个性选项中选择想要谈论的话题:你的优秀项目,喝咖啡或与鸟和蜜蜂见面。
image.png

03/
精心设计的页面就像是出门约会前精心梳妆打扮的姑娘,对方一定可以感受到你的用心。通过页面可以轻松的与访客互动,并与他们建立积极、持久的关系。

任何网页最重要的是可用性,无论我们身处什么行业,无论我们的顾客是什么样的,所有设计的出发点都是要迎合用户体验,这样才能设计出符合用户需求与审美的「联系我们」页面。

相关文章
|
前端开发 安全 JavaScript
【实训项目】“我来拿”APP设计
【实训项目】“我来拿”APP设计
137 0
|
1月前
|
前端开发
业余时间开发了个海报编辑器
为了满足撰写博客或录制教程视频时对高质量海报的需求,我利用业余时间开发了一款海报编辑器。第一版功能简单,支持固定尺寸、黑底白字的标题。后来经过优化,增加了背景图、模糊效果、文字样式调整等功能,使海报更具吸引力。目前该编辑器已上线,欢迎大家试用并反馈。[访问海报编辑器](https://tool.share888.top/#/poster)
77 6
业余时间开发了个海报编辑器
|
6月前
|
编译器 C++ 容器
【C++语言】模板(内附精美思维导图)
【C++语言】模板(内附精美思维导图)
|
7月前
|
图形学
【Unity 3D】3D游戏跑酷小子实战教学(附源码和步骤 超详细)
【Unity 3D】3D游戏跑酷小子实战教学(附源码和步骤 超详细)
316 0
|
编解码
是时候展示给大家这5款压箱底的软件了
是时候把自己压箱底的软件都发出来了,软件都是小巧耐用,不带广告的,赶紧下载起来吧!就算暂时用不到的,也可以收藏起来等需要的时候再来下载!
144 6
是时候展示给大家这5款压箱底的软件了
|
小程序 UED 开发者
小程序开发必备功能的吐血整理【个人中心界面样式大全】
小程序开发必备功能的吐血整理【个人中心界面样式大全】
748 1
小程序开发必备功能的吐血整理【个人中心界面样式大全】
|
前端开发 人机交互
【牛刀小试】——浅谈UI设计
【牛刀小试】——浅谈UI设计
142 0
【牛刀小试】——浅谈UI设计
|
SQL 开发框架 小程序
小程序开发-第二章第二节小程序电影卡片模板-全栈工程师之路-中级篇
小程序开发-第二章第二节小程序电影卡片模板-全栈工程师之路-中级篇
111 0
小程序开发-第二章第二节小程序电影卡片模板-全栈工程师之路-中级篇
|
SQL 开发框架 小程序
小程序开发-第二章第一节小程序的模板-评分星星模板-全栈工程师之路-中级篇
小程序开发-第二章第一节小程序的模板-评分星星模板-全栈工程师之路-中级篇
160 0
小程序开发-第二章第一节小程序的模板-评分星星模板-全栈工程师之路-中级篇
|
小程序 API Android开发
小程序开发-第三章第四节点击查看大图,保存壁纸-全栈工程师之路-中级篇
小程序开发-第三章第四节点击查看大图,保存壁纸-全栈工程师之路-中级篇
172 0
小程序开发-第三章第四节点击查看大图,保存壁纸-全栈工程师之路-中级篇