14剩下敏

谈到设计或重新设计网站时,很容易挂断美学。

那种蓝色看起来不太对劲。

在屏幕右侧有徽标不会很酷吗?

我们在页面中间放一个巨大的GIF动画怎么样?

但是,如果您真正尝试使用您的在线业务(例如,品牌意识,优势等),您需要专注于您的网站如何看待。

在一个人们超过10亿个网站他们可能会降落,您需要确保您的设计可用性,您的网站如何使用,以及用户体验(UX),如何愉快它是与您的网站互动。

现在,你可以花数年时间研究可用性和用户体验的来路。但是为了给你一个起点,我们已经收集了一些基本的指导方针,你可以应用到你的下一个网站重新设计网站推出.然后,我们将回顾10个你需要在你的网站上把这些建议付诸实践的特性。就让我们一探究竟吧。

免费工作簿:如何规划成功的网站重新设计

1.简单

虽然您的网站的外观肯定是重要的,但大多数人不会来到您的网站来评估设计的光滑。他们想完成一些动作,或找到一些特定的信息。

因此,不必要的设计元素(即那些没有功能目的的元素)只会让访问者难以完成他们想要完成的事情。

从可用性和用户体验的角度来看,简单是你最好的朋友。如果您拥有所有必需的页面元素,则很难获得简单的。您可以以各种不同的形式雇用此原则,例如:

  • 颜色:基本上,不要用太多。的人机交互手册建议在您的设计中最多使用五种(±两种)不同的颜色。
  • 字体:您选择的字体应该是高度清晰的,所以没有任何内容和非常最小的脚本字体,如果有的话。对于文本颜色,再次保持最小,并始终确保它与背景颜色形成对比。一个共同的建议是最多使用最多三种不同的字体,最多三种不同的大小。
  • 图形:只有使用图形,如果它们帮助用户完成任务或执行特定功能(不只是添加图形Willy-Nilly)。

这里有一个很好的简单但有效的主页设计的例子海洛琳公司

在网站上审视网站上的英雄公司

图片来源

2.视觉层次结构

与简单性的原则紧密相关,视觉等级意味着安排和组织网站元素,使游客自然地倾向于首先倾向于最重要的元素。

请记住,当谈到优化可用性和UX时,目标是引导访客完成所需的行动,但以一种感觉自然和愉快的方式。通过调整某些元素的位置,颜色或大小,您可以以先将观众绘制的方式构建您的网站。

在下面的例子中Spotify,你可以看到主标题“Listening is everything”在其大小和页面位置的视觉层次结构的顶部。这会让你首先注意到他们的使命。紧随其后的是“让Spotify免费”(Get Spotify Free) CTA,它会促使人们采取行动。用户可以单击此CTA,或扫描上面的菜单项以获得更多操作。

一个网站设计的例子

图片来源

3.适航性

规划直观的导航在你的网站上,帮助访问者找到他们想要的东西是至关重要的。理想情况下,访问者应该登陆你的网站,而不必考虑下一步点击哪里。从A点移动到B点应该尽可能无摩擦。

以下是优化您网站导航的一些提示:

  • 保持主导航的结构简单(靠近页面顶部)。
  • 在站点的页脚中包含导航。
  • 考虑使用面包屑在每个页面(除了你的主页),让用户记住他们的导航路径。
  • 在你的网站的顶部包含一个搜索栏,这样访问者可以通过关键词进行搜索。
  • 每页不提供太多导航选项。再次,简单!
  • 在页面副本中包含链接,并明确这些链接的去向。
  • 不要让用户挖掘得太深。试着做一个基本的线框地图所有像金字塔一样排列的网站页面:你的主页在顶部,每一个来自前一层的链接页面形成下一层。在大多数情况下,最好将地图保持在不超过三层的深度。以HubSpot的网站地图为例。
HubSpot.com网站地图

图片来源

一个指针:一旦您解决了网站的主要(顶部)导航,将保持一致。导航标签和位置应在每个页面上保持相同。

这就引出了我们的下一个原则……

4.一致性

除了保持导航的一致性之外,站点的所有页面的整体外观和感觉应该是相似的。背景,配色方案,字体,甚至你写作的基调都是一致性对可用性和用户体验有积极影响的领域。

这并不是说每个页面都应该遵循相同的布局。相反,要为特定类型的页面(例如,登录页面,信息页面等)创建不同的布局。通过始终如一地使用这些布局,您将使访问者更容易理解他们可能在给定页面上找到的信息类型。

在下面的例子中,您可以看到这一点Airbnb使用相同的布局为所有“帮助”页面,常见的做法。想象一下,如果每个“帮助”页面有自己,独特的布局,那么从访客的角度来看,这将是什么样的。可能会耸耸肩会有很多肩膀。

airbnb.com上的帮助页面

图片来源

5.反应性

根据Statista在美国,48%的全球页面浏览量来自智能手机和平板电脑等移动设备。和根据我们的研究在美国,93%的人离开过某个网站,因为该网站在他们的设备上不能正常显示。

此处的外带:提供真正的用户体验,您的网站必须与访问者正在使用的许多不同设备兼容。在科技界,这被称为响应设计

响应式设计意味着投资一个高度灵活的网站结构。在响应式网站上,内容会自动调整大小和重新排列,以适应访问者使用的任何设备的尺寸。这可以通过移动友好的HTML模板来实现,或者通过创建特殊的移动站点来实现。

最终,在不同设备上提供出色的体验比在这些设备上呈现相同的外观更重要。

一个响应网页的例证在不同的设备的

图片来源

除了移动友好性,还值得您测试网站的交叉浏览器兼容性。在所有可能性中,您只在一个Web浏览器上查看了您的网站,请将您的网站浏览到谷歌Chrome,Safari,Firefox或其他内容。

现在是在这些浏览器上打开页面并评估元素的显示方式的时候了。理想情况下,在展示上不会有太大的不同,但你不能确定,直到你自己看到。

6.可访问性

网页可访问性的目标是做一个任何人都可以使用的网站,包括残疾人或影响他们浏览体验的限制。作为一个网站设计师,你的工作就是在你的用户体验计划中考虑这些用户。

与响应性一样,可访问性适用于您的整个站点:结构,页面格式,视觉效果和写入和视觉内容。的网页内容可访问性指引(WCAG)由Web Accessibility计划和万维网联盟开发,为Web Accessibility设置了指导性。在广泛的意义上,这些指导方针说明了网站必须是:

  • 可感知的:访问者了解您网站上的内容。
  • 可操作:网站的功能应该以不同的方式实现。
  • 可以理解的:所有内容和警报都很容易理解。
  • 健壮的:你的网站可以在不同的辅助技术、设备和浏览器上使用。

有关此主题的更深入了解,请参见我们的无障碍网页的终极指南

7. Quativentalial.

在网页设计中一个很大的挑战是平衡原创性和你的期望。我们大多数人都是互联网专家,随着时间的推移,我们已经习惯了一些特定的习惯。这些规范包括:

  • 将主导航放在页面的顶部(或左侧)。
  • 在页面的左上角(或中间)放置一个标志。
  • 使标识可点击,这样它总是把访问者带回主页。
  • 有链接和按钮当你悬停在它们上面时,它们会改变颜色/外观。
  • 在电子商务网站上使用购物车图标。该图标还有一个数字徽章,在推车中表示项目数。
  • 确保图片滑动条有按钮用户可以单击以手动旋转幻灯片。

虽然有些人可能会为了独特性而选择将其抛诸一边,但这是错误的。在传统网络的限制下,仍然有很多创造性的空间。

让我们简要考虑另一个设计领域,架构。建筑规范取而代的解,使人们可以轻松居住地居住。建筑师并不抱怨这些代码或违反它们,因为除了法律反应之外,他们可以确保客人的安全和舒适。这与建筑看起来有多么令人眼花 - 如果你在楼梯上绊倒或者你不能在火灾中逃脱,你可能更愿意留在外面。

以同样的方式,您可以在满足用户期望时制作令人难忘的体验。如果您违反了用户预期的,他们可能会感到不舒服甚至对您的网站感到沮丧。

8.信誉

坚持网络惯例会增加你网站的可信度。换句话说,它增加了您的站点传达的信任级别。如果你正在努力建立一个网站,提供最好的用户体验,信誉是很长的一段路。

提高您信誉的最佳方法之一是清楚,诚实地了解您正在销售的产品或服务。不要让游客挖掘数十个页面以找到您的工作。在您的主页上朝上,并专注一些房地产来解释您所做的事情背后的价值。

另一个可信度提示:有一个定价页面,也在主页上链接。而不是强迫人们联系您了解更多关于定价的信息,并清楚地列出您的网站上的价格。这使您的业务表现得更可靠和合法。

这是一个有效的例子来自框网站的定价页面

box.com的定价页面

图片来源

9.用户中心

最终,可用性和用户体验取决于最终用户的偏好。毕竟,如果你不是为他们设计,那么你是为谁设计呢?

因此,虽然此列表中详细介绍的原则是一个很好的起点,但改进站点设计的最后一个关键是进行用户测试,收集反馈,并根据您所学的内容进行更改。

不要自己去测试可用性。你已经在自己的设计中投入了大量时间,这也将带来你自己的偏见。找那些从未见过你的网站的测试人员,就像第一次访问你的网站一样。

以下是一些用户测试工具可以开始:

  • 网站平地机我们的免费工具评估您的网站基于几个因素:移动,设计,性能,搜索引擎优化,和安全。然后,它提出了有针对性的改进建议。你可以了解更多关于网站评分在我们的专门的博客帖子
  • 疯狂的蛋跟踪一个帐户下的多个域,并使用四种不同的智能工具——热图、滚动图、覆盖和五彩纸屑,发现关于您的网站的性能的洞察力。
  • Loop11:使用此工具轻松创建可用性测试 - 即使您没有任何HTML体验。
  • 用户喝醉了支付Richard Littauer喝醉并查看您的网站。不相信我?我们试过

更多有用的选项,请参阅我们的最佳用户测试工具列表

希望这些指南对你的网页和网站的整体结构有帮助。但是,如何将这些指导方针付诸实践呢?在下一节中,我将详细介绍您应该考虑在设计计划中包括的基本页面元素。

1.页眉和页脚

页眉和页脚是一个关于每个现代网站的主食。尝试在大多数页面中包含它们主页到你的博客帖子,甚至你的“找不到结果”页面

你的标题应以徽标和组织名称,菜单导航和可能为CTA的形式包含您的品牌,如果间隔良好和最小值,则为CTA和/或搜索栏。另一方面,您的页脚是许多用户本能地滚动的基本信息。在您的页脚中,将联系信息,注册表,注册表单,链接到您的通用页面,法律和隐私政策,链接到您网站的翻译版本和社交媒体链接。

2.菜单导航

是否是头部标题的链接列表或整洁和紧凑汉堡包按钮在角落里,每个网站都需要一个导航指南,至少在你的主页和其他页面的顶部重要的页面.一个好的菜单限制点击次数,以便只需几个部分即可到达网站的任何部分。

为了减少杂乱,您可能会考虑使用其中的链接进行一些或所有菜单选项,可以看出HUBSPOT的主页

主页hubspot.com

3.搜索栏

除了菜单导航之外,还要考虑在页面顶部放置一个搜索栏,这样用户就可以通过关键词浏览站点的内容。如果合并了这个功能,请确保您的结果是相关的,原谅拼写错误,并能够大致匹配关键字。我们大多数人每天都使用高质量的搜索引擎,无论是谷歌、亚马逊、YouTube还是其他地方。这些都是你自己网站搜索的标准。

4.品牌

还记得我们讨论过的惯例吗?一个你几乎随处可见的就是左上角的标志。在首次着陆时,许多游客的眼睛会本能地转向这个区域,以确定他们是否在正确的地方。不要让他们悬着。

为了强化这一概念,将你的公司品牌融入到你添加的每一个元素中,你发布的每一个内容,以及你bob全站app创建的配色方案中。这就是为什么我们建议建立品牌指南,如果你还没有-检查我们的风格指南参考。

5.调色板

颜色选择在网站的可用性和用户体验中也扮演着重要的角色。这个决定比这个列表中的其他需求更加主观。但是,就像我们讨论的其他东西一样,尽量简化-限制你的颜色选择最多3-4个突出的颜色。

首次开始从划痕开始调色板可能会令人惊讶。我们似乎直观地拿起哪种颜色在一起工作,但是没有,但我们在试图从可用的无限组合中挑选时偶然。

解决方案?尝试一个调色板,已经显示对其他网站的工作。从您喜爱的站点获得影响,并查看我们的喜爱列表网站颜色方案开始。

6.标题

标题是建立我们之前讨论的视觉层次结构的关键,尤其是在文本重型页面上。当用户浏览您的页面所需的页面,一个清晰而对点标题警报读者在查找所需内容后停止滚动。仅使用与您的页面不同的部分一样多的标题,因为太多的闪烁和粗体文本将抑制这种效果。

7.清除标签

当用户在你的网站上采取行动时,必须清楚地知道他们在做什么和/或他们要去哪里。所有按钮都应该有明确的文本或图标,以准确和简洁地表明其目的。文本链接和小部件(简单的交互元素,如下拉框和文本表单)也是如此。

例如,链接到定价页面的按钮应该只是阅读“定价” - 除此之外(例如,“查看我们的价格”,“查看交易的定价页面)是多余的。搜索栏/按钮只需要搜索玻璃图标(),也许也许是“搜索”一词,以表示其目的。

在这里,用户测试可以提供很大的帮助。虽然您自己知道所有的交互式页面元素是做什么的,但对于新用户来说就不一样了。测试将提供有价值的见解,让你了解用户认为你的标签意味着什么,而不是你自己的观点。

8.视觉和媒体

当将静态图像、gif、视频和其他媒体整合到页面中时,请记住在选择时保持一致和有意。这些元素将吸引用户的注意力,并可能停留在用户的脑海中,所以要明智地选择。

这只是主页上有效媒体的一个例子。请注意,每个图像如何补充页面的美学,并支持个性化健身训练的结果。

用于个人培训健身房的网页上使用的网络设计指南的示例

图片来源

此外,所有的图片和视频应该是为搜索引擎优化并包含描述性的Alt文本以方便访问。

9.呼吁行动(cta)

拥有一个令人愉快的网站很棒,但你如何知道您的访客是否实际上正在做您想要的内容?他们是否与您的内容一起参与?这是CTA发挥作用的地方。

CTA是提示用户操作的任何页面元素。该操作可以将产品添加到卡,下载内容优惠,或注册电子邮件列表。使您的CTA元素在视觉层次结构中突出(记住我们的Spotify示例),但不像许多点击广告一样侵扰或分散注意力倾向于。

如果您需要为Sleek CTA的想法推动更多转换,请查看我们的CTA实例列表

10.空格

没错,有时候是元素的问题包括。在阅读了这些指导方针和需求之后,您可能会忍不住想在页面上填满一个完美的用户体验所需要的所有东西。不要忘记,你的观众需要空间来消化所有这些新信息,所以给你的元素喘息的空间。

但是,多少钱空白如果您有吗?那是另一个私人电话,每个地点都不一样。因此,用户测试在这里也很方便。人们关注的是什么?他们是否会因为内容的密度而感到不知所措?再一次,这一切都与我们的第一个指导原则——简单性有关。

把用户放在第一位的设计

事实上,网页设计很大程度上是主观的——你的网站的外观和体验不会让每个人都满意。然而,也有一些可靠的用户体验原则,当仔细考虑和整合时,可以帮助访问者有宾至如归的感觉。

根据亚马逊网络服务,88%的网站访问者在经验不佳后不太可能返回网站。你怎么能责怪他们?我们肯定都在那里。

所以,作为可用性/UX智慧的最后一点,开始关心更多!想象你自己站在访问者的角度(或者更准确地说,是浏览器窗口),并在设计过程的每一步都记住他们。

博客 - 网站Redesign工作簿指南[列表]

网站重新设计

最初发布9月3日,2020年7:00:00,Updated 3月06日2021年

主题:

网站设计