金阳新区网站建设公司:设计有效常见问题页面的最佳实践-极简慕枫

金阳新区网站建设公司:设计有效常见问题页面的最佳实践

2019-01-15

金阳新区网站建设公司

但常见问题是另一种类型的内容。就像搜索和站点地图一样,它有它自己的特性和你可以做的事情来改善用户体验。

你必须记住,例如,用户不会访问常见的问题页面,你必须引导他们。

在这里,我们将看到一些关于它的想法,良好的实践,灵感和工具。

那么,让我们摇滚吧!

快速跳跃:

  1. 常见问题页面设计的检查点
  2. 实施小贴士
  3. 设计实例
  4. 如何创建一个更好的常见问题页面

常见问题页面设计的检查点

1. 关键字

好的,你首先要记住的是:用户不会在网上阅读。他们扫描页面,试图找出一些对他们来说可能很重要的关键词(就像你们中90%的人现在正在做的一样)。所以,使用好的标题和问题关键字,避免陈词滥调,并保持简短。

如果可以,可以概述主要关键字,如搜索的术语或主要主题。

2.FAQ还是Waq?

很长一段时间以来,常见问题被滥用,而不是真实的和相关的内容,公司提出了他们“希望”用户会问的问题(Waq,希望被问到问题)。

把用户的需求放在第一位是非常重要的,只需涵盖对他们来说非常重要的话题。否则,这将只是另一页,试图隐藏解决方案对他们。顺便说一句,这根本解决不了问题,会导致未来的问题,比如不必要的支持请求,或者失去销售。

3.人们不会去常见的问题页面

人们不会去寻找常见问题。这不是一个常见的工作流程,“嘿,我需要知道他们的退款政策。让我们来看看常见问题“。听起来很奇怪是吧?

因此,在用户可能需要帮助的地方,您必须明智地将其链接起来。比如和搜索页面一起使用它们。或者在和真正的服务员聊天之前把它们当作“墙”:问用户他们有什么问题,然后根据用户的关键词建议几个常见问题搜索项目。

4.有时你不需要带他们找到常见问题,只需使用工具提示就可以了。

FAQ很适合提供完整的答案,但是如果你只想告诉用户功能是如何工作的,或者他们应该把哪种类型的数据放在注册表格中,那么只需使用工具提示之类的东西就行了。

哦,别忘了让它变得简单和移动友好,或者换句话说,不要只使用简单的悬停元素或标题属性。您可以使用插件或将其添加为纯文本,就在您的字段或按钮之上。

5.你真的需要一个常见问题吗?

我知道我是说它很重要,但它在网站上有它的位置。这对于销售网站,服务,应用程序…来说是个好主意但是,如果你有一个简单的博客或简单的公司网站,只要创建一个“关于”页面,你就会没事的。

6. Search Engine Optimization 搜索引擎优化

你想过吗?如果你有一个好的关键字密度关于你的产品,并链接到网站内的几个地方的单一网页,它可以是一个真正好的登陆页面。

所以,仔细想想,它可能会引导很多用户到金阳新区网站建设公司你的网站。

7. keyed indexed sequential search 键控索引顺序搜索

再说一次,保持简单,愚蠢的朋友,你不需要澄清每一个可能出现的关于你的产品的问题。您可以对问题进行分类(如果您有大量的问题),在用户需要时显示内容。

只要记住登陆页面的想法,你就必须谈论最主要的话题,快速解决用户的问题,否则他们就会离开网站。

实施提示

电离氢区 / Javascript enhancements

金阳新区网站建设公司:设计有效常见问题页面的最佳实践

正如我前面所说的,默认情况下您可以隐藏内容,并在用户需要/需要时显示它。例如,您可以使用jQuey可折叠面板插件并创建动态可折叠面板。您还可以使用电离氢区手风琴插件。另一件好事,是添加一个“目录”与顺利滚动,这样用户可以很容易地达到他们想要的,并具有相当酷的效果。

像老板一样滚动

您可以使用平滑的滚动脚本或类似LocalScroll之类的东西,这样您将获得更好的组织和更容易使用FAQ页面。

读一篇关于它的教程怎么样?

那么,MatthewCorner写了一个教程,平滑滚动,目录和好看,你可以下载和编辑它,以更好地满足您的需要金阳新区网站建设公司。

执行正确的标记

虽然许多人使用简单的标题(h2,h3)来回答问题和段落,但我认为使用定义列表对它们使用语义上更正确。因此,您可以使用定义标题和定义描述对它们进行相应的包装。

另一个非常好的选项实际上是使用&HTML 5元素,它在默认情况下为您提供了好看的可折叠面板(当然,浏览器支持它)。

设计实例

搜索常见问题

PayPal使用一个非常好的系统,用户可以通过关键字来查看他们的FAQ或搜索。

金阳新区网站建设公司:设计有效常见问题页面的最佳实践

FAQ防止不必要的支持

让用户问你非常愚蠢的问题是很常见的。不要误解我的意思,但如果我们给他们一个机会,有时他们自己就能很容易地找到答案。

金阳新区网站建设公司:设计有效常见问题页面的最佳实践

做容易的事

你知道我们有一个开发常见问题的工具吗?挺酷的是吧?这叫FAQME,值得一试!

金阳新区网站建设公司:设计有效常见问题页面的最佳实践

常见问题,社交方式

如果你更像一家社交公司,为什么不使用一个整合问题和人的工具呢?嗯,我见过几家(年轻的)公司用FormSpring作为回答真正问题的简单方法,让其他客户很容易地访问它们。

现在,让我们在下面的教程中将其中的一些知识付诸行动。

如何创建一个更好的常见问题页面 For End Users

常见问题(常见问题)网页已经成为许多网站上常见的原因。最主要的是,它们提供了一种方法来提供支持,最常见的是,客户支持,而不必对常见问题重新迭代解决方案。

对于大公司来说,一个好的FAQ页面甚至会对需要招聘的支持人员的数量产生影响,但我不断地发现FAQ页面被忽略了,而且是导航的噩梦。类似地,谷歌搜索一些关于FAQ页面设计的文章,你会发现几乎没有任何有用的东西。


在Photoshop(一个软件销售主题)中设计一个最近的项目时,我决定支持领域是我想要得到的东西,重点落在FAQ页面上。我想了解一下我想让它怎样工作,所以我想,当他们到达的时候,终端用户想要的是什么。我想到了这些想法,

  • 易于阅读-文本的层次结构需要区分开来。
  • 组织-问题应分为类别
  • 导航-找到他们想要的信息的方法应该容易,而且快捷。

考虑到这三点,我想出了一个整洁的,重要的是干净的FAQ页面概念,它的演示可以在下面找到。我将告诉你它是如何制作的,并教你如何自己建造它。

点击这个链接来演示我们要做的FAQ页面。您也可以在这里下载源代码。

教程要求

本教程假设您对使用下列语言相当满意

  • Html
  • Css
  • 电离氢区

步骤1-构造HTML

我们的html分为两个主要部分。在包装器中,我们有一个主列和一个侧栏列。

主要内容列是我们将问题分成简单类别的地方。每个类别都有一个标题,一个带有链接的问题列表,然后使用一个定义列表将问题拆分。我们正在寻找的标记是这样的。(这显示了一个有两列的类别)

Lacus pulvinar
  • Lectus massa adipiscing, mattis. Turpis integer massa.
  • Integer enim montes mauris, arcu est.
  • ul>
    Lectus massa adipiscing, mattis. Turpis integer massa.
    Ultricies in mus, magna rhoncus augue, nec magnis facilisis integer ut pellentesque aliquam sit! Enim odio, porta augue, sed turpis dolor ultrices porttitor arcu massa cum elementum hac in vel, magna magnis, enim scelerisque? Amet aliquam, magna dis porta platea. Cras aliquet. Arcu mid eros aenean parturient cras ac egestas tempor? Lundium parturient dapibus, ridiculus ridiculus dapibus! Quis eros amet.
    Integer enim montes mauris, arcu est.
    Et ridiculus vut dis vel integer pid? Adipiscing nec tristique dictumst tristique duis rhoncus sed, scelerisque. Porta, diam augue vel augue porta enim. Et! Tristique montes. Auctor! Pid tristique purus montes. Quis? Sit, enim. Egestas! Tristique amet mattis adipiscing, proin elit adipiscing integer! Enim, odio. Etiam ac, nunc est purus turpis. Nunc! Pid cras scelerisque mid habitasse. Cum magnis.

重要的是,您匹配每一类问题的导航链接与他们的ID。注意,这个类别中的第一个问题的id为“1_1”,第一个问题的链接具有该id的href。这对于解决用户的导航问题很重要。同样,请注意类别标题有一个数字id,以表明这是第一个类别。这些id不需要是数字的,它们可以是任何你想要的,只要它们是唯一的类别/问题。

移金阳新区网站建设公司动到侧边栏,这就是导航更大的画面的地方。我们已经把类别问题联系起来了,但是如何让用户自己导航到类别呢?通过侧边栏是如何。

在侧栏中,我们将包括一个标题和另一个导航菜单链接到我们的类别。当然,您可以在此基础上将您想要的任何内容添加到您的侧边栏,可能是快速联系人表单,或者支持联系人详细信息。



步骤2-使用css创建布局和排版

首先,我们希望我们的FAQ页面在所有浏览器中看起来都是通用的,所以我们将一如既往地应用CSS重置。我们还希望FAQ页面易于阅读,看起来很漂亮,但很简单。为此,我使用了960.gs附带的text.css的修改版本,而使用MyriadPro和Helvetica作为字体。因为CSS的这一部分很大,而且非常基本,所以您可以从这里复制和粘贴它。

从我们的基本样式开始,我们将创建我们的布局列,并将我们的页面放在窗口的中间。

/** Center our page in the middle of the window **/
div#wrapper{
	width:960px;
	margin: 0 auto;
	position:relative; /** Important later on **/
}

/** Give our primary column a width and float it to the left width a right margin **/
div#primary{
	width:720px;
	margin: 20px 40px 0 0;
	float:left;
	display:inline;
}

/** Position our sidebar to the right of the primary content bar **/
#sidebar {
  	left:760px;
  	position: absolute;
}

您会注意到,我们已经完全定位了侧栏,而不是将其浮动到主内容列的左侧。这对于一些特别的事情来说是很重要的,我们稍后将用我们的侧边栏来做这件事。

现在是时候开始添加一些微妙的样式到我们的网页内容,使它达到标准,并使观看额外的眼睛愉快。我们将从h3和标签上的两种基本样式开始。

/** Give our category headers room to breath **/
h3{
  	padding-top:30px;
}

/** Color our links blue **/
a{
	color:#0986e3;
	text-decoration:none;
}

/** Add a hover effect to links **/
a:hover{
	text-decoration:underline;
}

在创建html时,您会注意到一些类名。这些内容包括节菜单和常见问题。他们习惯于我们的导航菜单(包括侧边栏)的样式,以及我们的问题本身。

/** Styling the navigational menus by adding a subtle background, and padding **/
ul.section_menu{
	background:#ededed;
	padding:20px 10px;
}

/** Style our faq questions **/
dl.faq{
	margin-bottom:30px;
}

/** Make the question itself stand out **/
dl.faq dt{
	font-weight:bold;
	color:#000000;
	padding:25px 0 5px 0;
	display:block;
}

/** Add a divisor below the question answer **/
dl.faq dd{
	padding-bottom:25px;
	border-bottom:1px solid #cccccc;
	display:block;
}

步骤4-使用jQuery创建静态侧栏

现在,我们将开始使用电离氢区来提高页面的可用性。目前,它看起来很不错,并且适合没有任何javascript的页面,但是我们可以让它变得更好!首先,将电离氢区包含在页面的HAD中。我们将直接从谷歌加载它。


第二,我们将稍微添加侧栏的html。添加另一个div包装您的侧边栏的所有内容。在我们的例子中,我将给它一个“侧栏内容”的id。



我们还需要一些额外的CSS,和CSS的侧边栏,当它变得固定。

/** Position our sidebar content at the top of our sidebar, and give it the width of the full sidebar **/
#sidebar_content {
  	position: absolute;
  	top: 0;
  	margin-top: 20px;
	width:200px;
}

/** When the sidebar becomes fixed, it'll fix to the top of the page **/
#sidebar_content.fixed {
  position: fixed;
  top: 0;
}

您可能还不了解这个固定的类,但是下面的电离氢区将帮助您解决这个问题。在文档的开头创建一个脚本标记,下面是我们从Google加载的电离氢区,并插入以下代码。

$(document).ready(function () {
	var sidebar = $('#sidebar_content');
	var top = sidebar.offset().top - parseFloat(sidebar.css('marginTop'));
	$(window).scroll(function (event) {
		var ypos = $(this).scrollTop();
		if (ypos >= top) {
		sidebar.addClass('fixed');
		}
		else {
			sidebar.removeClass('fixed');
		}
	});
});

如果您以前从未接触过电离氢区,这可能会令人望而生畏,但请不要担心,我们将逐行遍历它。我们从电离氢区Basic开始,当文档准备就绪时,运行以下金阳新区网站建设公司代码。创建两个变量。

	var sidebar = $('#sidebar_content');
	var top = sidebar.offset().top - parseFloat(sidebar.css('marginTop'));

我们的第一个变量“侧栏”指定变量侧栏,选择器指向我们的内部侧栏div。我们称它为“侧栏内部”,但您可能称它为不同的东西。

我们的第二个变量top计算侧边栏与页面顶部的距离,减去我们应用的任何上边距。

$(window).scroll(function (event) {
	var ypos = $(this).scrollTop();
	if (ypos >= top) {
	sidebar.addClass('fixed');
	}
	else {
		sidebar.removeClass('fixed');
	}
});

这个代码片段开始时说,如果窗口是滚动的,那么执行下面的代码。我再次通过计算页面顶部的距离来创建另一个变量,并将其赋值给变量“ypos”(y轴上的位置)。

然后我们输入一个if语句,上面写着:如果滚动到顶部的距离大于侧边栏从顶部到顶部的距离,则将其给予FIX类。如果没有,不要给它一个固定的类别。这就是我们早些时候创建的固定类发挥作用的地方。容易吗?=)

步骤5-使页面滚动效果平滑

因此,我们有一个可爱的固定边栏,因为我们滚动,没有传统的浮躁跳跃,过去是常见的固定边栏,但内部页面链接仍然直接跳转到目的地,虽然这是好的,它不是很好看,所以我们要添加一个动画页面滚动。由于要实现这一点的电离氢区太复杂,我们无法手动编写,因此我们将使用一个名为localScroll的插件,并在我们的动画中使用另一个名为ScrollTo的插件。从这里下载它们,并将它们再次包含在文档的标题中,这次是在我们的Google托管的电离氢区和我们的定制编写的电离氢区之间。



实现这一点是令人震惊的容易。只需将这一行代码添加到我们的定制电离氢区中即可。

$.localScroll();

注意:确保将这行代码放在电离氢区包装器中,

$(document).ready(function () {
	// Somewhere in here!
});

就在这里!一个非常有用的,简单漂亮的FAQ页面,这意味着用户可以轻松地在类别和问题之间导航,而不必花很多时间浏览搜索页面,然后逐页加载不同类别的页面,甚至单击打开单个问题。

联系电话 400-6065-301

微信咨询 寒总监