《网页设计综合指南》（1）：本文的网页设计就足够了

资讯热点

当前位置：首页 > 行业资讯 > 《网页设计综合指南》（1）：本文的网页设计就足够了

发布时间：2020-7-1 分类：行业资讯

设计师和开发人员在构建网站时需要考虑很多事情，从视觉外观到功能设计。为简化此过程，我们准备了本指南。由于篇幅限制，本指南分为三个部分，这是第一部分。

本文将重点介绍创建优质用户体验的主要原则，方法和鼓舞人心的案例;从用户体验地图的整体结构开始，到单个页面的设计;和网页设计的其他重要方面，如移动匹配和测试。

目录（粗体部分是本文的内容）

首先，设计用户体验地图

1.1信息架构

1.2全球导航

1.3链接和导航选项

1.4浏览器的后退键

1.5面包屑导航

1.6搜索

二，页面设计

第三，移动端适应

四，无障碍设计

V.测试

6.发展移交

七，总结

首先，设计用户体验地图

1.1信息架构

人们经常使用网站上的内容列表作为“信息架构”。不，虽然它是信息架构的一部分，但它们只是其中之一。

信息架构以清晰和合理的方式组织信息。信息架构有一个明确的目的：帮助用户浏览一组复杂的信息。良好的信息架构可创建满足用户期望的层次结构。但良好的内容级别和直观的导航并不容易，需要通过用户研究和测试来完成。

有很多方法可以研究用户需求。通常，信息架构师使用用户访谈或卡片分类来了解用户期望或识别潜在用户如何对信息进行分类。信息架构师还需要了解可用性测试的结果，以确定它们是否可以有效导航。

卡片分类是一种查找基于用户信息对内容进行分类的最佳方式的简便方法。信息架构师喜欢卡片分类的原因之一是他们获得了清晰的架构模型。（图片来源: FosterMilo）

对用户访谈的结果进行分类，然后检查卡分类是否满足用户的心理模型。 UX还将使用“树测试”方法来验证其角色。信息架构在设计特定页面之前完成。

树测试是确定用户是否可以通过建议的信息结构满足需求的可靠方法。（图片来源:尼尔森诺曼集团）

1.2全球导航

导航是可用性的基石。如果用户在网站上失去方向，那么您的网站内容有多好或多坏。因此，网站的导航应遵循以下几个原则：

简单的导航。导航应该允许用户以最少的点击访问所需的内容。

明确。不应允许用户猜测导航选项的含义;每个导航选项都应该清楚。

一致性：导航系统应该在网站的所有页面上保持一致。

设计导航时需要考虑的一些事项：

根据用户需要选择导航模式。导航应满足大多数用户的大多数需求。如果目标群体期望与网站进行某种类型的互动，那么他们将满足他们的期望。例如，如果大多数用户不熟悉图标的含义，请避免使用汉堡菜单导航。

设置优先导航选项。一种优先考虑导航选项的简单方法——为用户测试分配不同的优先级选项，然后在导航中突出显示高优先级和常用路径。

导航应始终可见。正如雅各布尼尔森所说，更容易看到什么比记忆更好。通过使所有重要的导航选项可见，最大限度地减少用户的内存。最重要的导航选项应始终可见，而不仅仅是在我们希望用户使用它们时。

显示当前位置。 “我在哪里？”这是一个基本问题，用户需要一个有效导航的答案。不显示当前位置是许多网站的常见问题。

1.3链接和导航选项

链接和导航选项是导航过程中的关键因素，并直接影响用户的体验。遵循这些互动元素的规则：

了解内部和外部链接之间的区别。用户希望内部和外部链接的行为不同。应在同一选项卡中打开所有内部链接（以便用户可以使用“返回>”按钮）。如果要在新选项卡中打开外部链接，则应在打开之前通知用户，例如向链接文本添加一段文本，显示“ldquo; （在新标签页中打开）”

更改访问链接的颜色。当访问链接不改变颜色时，用户可能无意中重新访问同一页面。让用户知道访问了哪些链接，避免无意中重新访问。

检查所有链接。单击该链接将出现一个错误页面，这将损害用户体验。当访问者搜索内容时，他们希望每个链接都是准确有效的，而不是404页面或他们不想看到的页面。

1.4浏览器的后退键

“后退”按钮可能是浏览器中的第二个最高按钮（输入地址后）。确保“返回”按钮按预期运行。当用户访问页面上的链接，然后点击“返回”按钮时按钮，他们想要返回原始页面上的退出位置。避免点击“后退”将用户置于原始页面的顶部，而不是页面关闭的位置。因此，用户需要滚动浏览他们已经看到的内容，并且用户会因为没有正确的“返回位置”功能而感到失望。

1.5面包屑

面包屑导航是一组辅助站点导航的上下文链接。这是辅助导航方案，通常显示用户在网站上的位置。

虽然这个元素不需要很多解释，但有一些值得一提的东西：

不要将它用作主要导航解决方案。主导航应具有引导用户的导航选项，而面包屑则是用户指导的导航选项。使用面包屑导航作为主要方法而不是辅助功能通常是失败的导航。

使用箭头作为分隔符而不是斜杠（/）。为了清楚地分隔每一层，建议使用（>）或（→），因为这些符号的方向可以帮助用户理解。建议不要将斜杠（/）用作电子商务网站的分隔符。如果您打算使用它，请确保不会削减产品类别：

对于上述类别，面包屑导航很难区分不同的级别。

1.6搜索

一些用户来到网站查找特定内容。他们不想使用导航选项。他们希望在搜索框中输入文本，提交搜索请求，然后找到他们要查找的页面内容。

在设计搜索框时应考虑这些基本规则：

将搜索框放在用户期望的位置。下图基于A. Dawn Shaikh和Keisi Lenz。根据对142名参与者的调查，预计将找到搜索框的用户。研究发现，最方便的位置是页面的左上角或右上角。用户可以使用F-Browse模式轻松找到搜索框。

在内容丰富的网站上，搜索框必须引人注目。如果搜索是网站的重要功能，则突出显示它，因为它可以降低用户的难度。

输入框的大小应该合适。短搜索字段输入区域是设计中的常见错误。当然，用户可以在短字段中输入长查询，但只有部分文本可见，可用性不好，因为无法立即看到整个查询。实际上，当搜索框太短时，用户被迫使用简短，不准确的查询。 Nielsen Norman Group建议长度为27个字符，覆盖90％的查询。