网站设计指南

日期: 2023-10-23 10:41

1. 简单

虽然您网站的外观当然很重要,但大多数人不会来您的网站评估设计的流畅程度。他们想要完成一些操作,或者找到一些特定的信息。

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

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

颜色: 基本上,不要使用很多。《计算机-人类交互手册》建议在设计中使用最多五种(加减两种)不同的颜色。

字体:您选择的字体应该非常清晰,因此没有太艺术和非常少的字体(如果有的话)。对于文本颜色,同样,请保持最小,并始终确保它与背景颜色形成对比。 常见的建议是最多使用三种不同的字体,最多三种不同的尺寸。

图形:仅当图形帮助用户完成任务或执行特定功能时才使用图形(不要随意添加图形)。

2. 视觉层次结构

视觉层次结构与简单原则密切相关,意味着安排和组织网站元素,以便访问者自然而然地首先被最重要的元素所吸引。

请记住,在优化可用性和用户体验方面,目标是引导访问者完成所需的操作,但要以一种感觉自然和愉快的方式。通过调整某些元素的位置、颜色或大小,您可以构建网站,使查看者首先被这些元素所吸引。

在下面的Spotify示例中,您可以看到主标题“免费获得3个月的高级版”位于视觉层次结构的顶部,其大小和页面位置。它首先将你的目光吸引到他们的使命上。接下来是“免费获得 3 个月”CTA,它会提示采取行动。用户可以单击此CTA,或扫描上面的菜单项以获取更多操作。

3. 可导航性

在您的网站上规划直观的导航对于帮助访问者找到他们正在寻找的内容至关重要。理想情况下,访问者应该登陆您的网站,而不必广泛考虑下一步点击的位置。从 A 点移动到 B 点应尽可能无摩擦。

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

保持主导航的结构简单(靠近页面顶部)。

在网站的页脚中包含导航。

请考虑在每个页面(主页除外)上使用痕迹导航,以便用户记住其导航轨迹。

在网站顶部附近添加搜索栏,以便访问者可以按关键字进行搜索。

不要为每个页面提供太多导航选项。再次,简单!

在页面副本中包含链接,并明确这些链接的去向。

不要让用户挖得太深。尝试制作一个像金字塔一样排列的所有网站页面的基本线框地图:您的主页位于顶部,前一个链接的每个页面都形成下一层。在大多数情况下,最好将地图的深度保持在不超过三层。以HubSpot的网站地图为例。

还有一个提示:一旦你确定了你网站的主要(顶部)导航是什么,就保持一致。导航的标签和位置在每个页面上应保持不变。

这很好地引导我们进入下一个原则......

4. 一致性

除了保持导航一致之外,网站的所有页面的整体外观也应相似。背景、配色方案、字体,甚至写作的语气都是一致性对可用性和用户体验产生积极影响的领域。

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

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

5. 责任

根据Statista的数据,48%的页面全局浏览量来自智能手机和平板电脑等移动设备。根据我们的研究,93% 的人离开了一个网站,因为它没有在他们的设备上正确显示。

这里的要点:为了提供真正出色的用户体验,您的网站必须与访问者使用的许多不同设备兼容。在科技界,这被称为响应式设计。

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

归根结底,跨不同设备提供出色的体验比在这些设备上看起来相同更为重要。

除了移动友好性之外,还值得您花时间测试您网站的跨跨浏览器兼容性。很有可能,您只在一个网络浏览器上查看过您的网站,无论是谷歌浏览器、Safari、火狐还是其他浏览器。

现在是时候在每个浏览器中打开您的页面并评估您的元素的显示方式了。理想情况下,呈现方式不会有太大差异,但在您亲眼看到之前您无法确定。

6. 可访问性

Web 可访问性的目标是创建一个任何人都可以使用的网站,包括影响其浏览体验的残障人士或受限人士。作为网站设计师,您的工作是在用户体验计划中考虑这些用户。

与响应能力一样,可访问性适用于整个网站:结构、页面格式、视觉效果以及书面和视觉内容。由 Web 可访问性倡议和万维网联盟制定的 Web 内容可访问性指南 (WCAG) 为 Web 可访问性设定了指南。从广义上讲,这些准则规定网站必须:

可感知: 访问者知道您网站上的内容。

操作: 您网站的功能应该以不同的方式实现。

可理解的:所有内容和警报都可以轻松理解。

强大的: 您的网站可用于不同的辅助技术、设备和浏览器。

有关此主题的更深入探讨,请参阅我们的 Web 辅助功能终极指南。

7. 常规性

网页设计中的一大挑战是平衡原创性和您的期望。我们大多数人都是专业的互联网用户,随着时间的推移,我们已经习惯了一些特定的约定。此类公约包括:

将主导航放在页面的顶部(或左侧)。

将徽标放在页面的左上角(或中心)。

使徽标可点击,因此它始终将访问者带回主页。

具有链接和按钮,当您将鼠标悬停在它们上方时会改变颜色/外观。

在电子商务网站上使用购物车图标。该图标还有一个数字徽章,表示购物车中的商品数量。

确保图像滑块具有用户可以单击以手动旋转幻灯片的按钮。

虽然有些人可能会为了独特性而选择将这些扔出窗外,但这是一个错误。在网络传统的约束下,仍然有足够的创造力空间。

让我们简要考虑另一个设计领域,建筑。建筑规范已经到位,以便人们可以轻松安全地居住在空间中。建筑师不会抱怨或违反这些准则,因为除了法律影响外,它们还可以确保客人的安全和舒适。不管这座建筑看起来多么耀眼——如果你在不平坦的楼梯上绊倒,或者你在火灾中无法出去,你可能更愿意呆在外面。

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

8. 可信度

坚持网络惯例可以提高您的网站可信度。换句话说,它增加了您的网站传达的信任级别。如果您正在努力建立一个提供最佳用户体验的网站,那么可信度还有很长的路要走。

提高可信度的最佳方法之一是对您销售的产品或服务保持清晰和诚实。不要让访问者翻阅数十页来找到你在做什么。在您的主页上保持领先,并投入一些空间来解释您所做的事情背后的价值。

另一个可信度提示:有一个定价页面,也在主页上链接。与其强迫人们与您联系以了解有关定价的更多信息,不如在您的网站上清楚地列出您的价格。这使您的业务看起来更值得信赖和合法。

9. 以用户为中心

归根结底,可用性和用户体验取决于最终用户的偏好。毕竟,如果你不是为他们设计,你是在为谁设计?

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

不要费心自己测试可用性。你已经在设计中投入了大量时间,这带来了你自己的偏见。吸引以前从未看过您网站的测试人员,就像任何首次访问您的网站一样。

以下是一些用户测试工具,可帮助您入门:

网站评分器:我们的免费工具根据几个因素评估您的网站:移动、设计、性能、SEO 和安全性。然后,它会提供量身定制的改进建议。您可以在我们的专用博客文章中了解有关网站评分器的更多信息。

Crazy Egg:使用四种不同的智能工具(热图、滚动图、叠加层和五彩纸屑)跟踪一个帐户下的多个域,并发现有关您网站性能的见解。

Loop11:使用此工具轻松创建可用性测试 - 即使您没有任何HTML经验。

用户喝醉了:付钱给理查德·利陶尔喝醉并评论您的网站。不相信我?我们试过了。

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


希望这些指南有助于告知您的网页和整个网站的结构。但是,如何将这些准则付诸实践呢?让我们来看看在设计过程中可以遵循的一些可操作的最佳实践。

TAG标签: 网页设计

首页
报价
案例
联系