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

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

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

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

相关文章
|
网络安全 数据库
【保姆级教程】基于阿里云搭建网站,看这篇就够了!
本文演示了三种网站的搭建,分别是:博客、论坛、个人作品。从域名选择,到阿里云服务器的购买,到最后的网站搭建。
【保姆级教程】基于阿里云搭建网站,看这篇就够了!
|
人工智能 移动开发 前端开发
WeaveFox:蚂蚁集团推出 AI 前端智能研发平台,能够根据设计图直接生成源代码,支持多种客户端和技术栈
蚂蚁团队推出的AI前端研发平台WeaveFox,能够根据设计图直接生成前端源代码,支持多种应用类型和技术栈,提升开发效率和质量。本文将详细介绍WeaveFox的功能、技术原理及应用场景。
6680 68
WeaveFox:蚂蚁集团推出 AI 前端智能研发平台,能够根据设计图直接生成源代码,支持多种客户端和技术栈
|
SQL JSON 前端开发
若依RuoYi脚手架二次开发教程(二次开发必学技能)
本次我们将通过一个菜品管理模块开发的案例,来演示拿到若依框架后,如何在若依管理系统上进行二次开发,升级改造为自己的管理系统。适合以若依作为项目脚手架的公司开发人员、毕业设计的学生及开源项目学习者。
8218 1
若依RuoYi脚手架二次开发教程(二次开发必学技能)
|
XML 前端开发 Java
Spring,SpringBoot和SpringMVC的关系以及区别 —— 超准确,可当面试题!!!也可供零基础学习
本文阐述了Spring、Spring Boot和Spring MVC的关系与区别,指出Spring是一个轻量级、一站式、模块化的应用程序开发框架,Spring MVC是Spring的一个子框架,专注于Web应用和网络接口开发,而Spring Boot则是对Spring的封装,用于简化Spring应用的开发。
3970 0
Spring,SpringBoot和SpringMVC的关系以及区别 —— 超准确,可当面试题!!!也可供零基础学习
|
Java Maven Spring
如何在idea中创建Springboot项目? 手把手带你创建Springboot项目,稳!
文章详细介绍了在IDEA中创建Spring Boot项目的过程,包括选择Spring Initializr、配置项目属性、选择Spring Boot版本、导入依赖、等待依赖下载以及项目结构简介。
18351 1
|
网络协议 Windows
【IntelliJ IDEA】idea plugins搜索不出来,如何找到插件的解决方案
【IntelliJ IDEA】idea plugins搜索不出来,如何找到插件的解决方案
13693 0
|
设计模式 缓存 Devops
微服务架构最强讲解,那叫一个通俗易懂!
微服务架构(Microservice Architecture)是一种架构概念,旨在通过将功能分解到各个离散的服务中以实现对解决方案的解耦。你可以将其看作是在架构层次而非获取服务的
33486 3
微服务架构最强讲解,那叫一个通俗易懂!
|
前端开发 UED
HTML和CSS动画:为鼠标经过效果注入灵魂!附源码!
HTML和CSS动画:为鼠标经过效果注入灵魂!附源码!
|
存储 缓存 JSON
详解HTTP四种请求:POST、GET、DELETE、PUT
【4月更文挑战第3天】
73562 5
详解HTTP四种请求:POST、GET、DELETE、PUT