《网页设计综合指南》是一篇专业的网站建设指导性技术文章，不受地域限制、文化限制、技术限制，适用于国内任何一个城市，突破思维，设计出最好的版块，打造出最好的网站。本期《网页设计综合指南》(I)的主题是网页设计的设计用户体验图，主要讲的是网站设计的信息架构，帮助用户浏览分析一组复杂的信息，通过结构层次创建符合用户的层次结构，好的内容和直观的导航可以帮助用户快速获取有用的信息。例如，《网页设计综合指南》的导航如下：

　　1.设计网页设计的用户体验图

　　1.1信息架构

　　1.2全球导航

　　1.3链接和导航选项

　　1.4浏览器的返回键

　　1.5面包屑导航

　　1.6搜索

　　二、页面设计

　　第三，网页设计的移动改编

　　4.网页设计中的无障碍设计

　　动词（verb的缩写）网页设计测试

　　不及物动词网页设计的发展与交接

　　七.网页设计综述

　　画

　　1.设计网页设计的用户体验图

　　1.1信息架构

　　人们往往把网站上的内容列表视为“信息架构”。不，虽然它是信息架构的一部分，但它们只是其中的一个方面。

　　信息架构以清晰和逻辑的方式组织信息。信息架构有一个明确的目的：帮助用户浏览一组复杂的信息。一个好的信息架构将创建一个满足用户期望的层次结构。但是好的内容层次和直观的导航并不容易，只有通过用户研究和测试才能实现。

　　研究用户需求的方法有很多。通常信息架构师会利用用户访谈或者卡片分类的方法来了解用户的期望，或者了解潜在用户是如何对信息进行分类的。信息架构师还需要知道可用性测试的结果，看看他们是否能够高效地导航。

　　卡片分类是一种简单的方法，可以根据用户信息找到分类内容的最佳方式。信息架构师喜欢卡片排序的一个原因是他们可以清楚地得到模式。(Image  credit: FosterMilo)

　　对用户访谈的结果进行分类，然后检查卡片分类是否符合用户的心理模型。UX还将使用“树测试”的方法来测试其功能。信息架构要在设计具体页面之前完成。

　　树测试是一种可靠的方法来确定用户是否可以通过所提出的信息结构来解决他们的需求。(影像学分：尼尔森诺曼集团)

　　1.2全球导航

　　导航是可用性的基石。如果用户在网站上迷路了，你网站的内容好了也没用。因此，网站导航应遵循几个原则：简单导航。导航应该允许用户以最少的点击次数访问所需的内容。

　　安全。不应允许用户猜测导航选项的含义；每个导航选项都应该是显式的。

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

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

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

　　设置首选导航选项。对导航选项进行优先排序的简单方法——为用户分配不同的优先级选项进行测试，然后突出显示导航中的高优先级和常用路径。

　　导航应该总是可见的。正如雅各布尼尔森所说，看到什么比记住什么更容易。通过使所有重要的导航选项可见，可以最小化用户的内存。最重要的导航选项应该随时可见和可用，而不仅仅是在我们期望用户使用它们的时候。

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

　　1.3链接和导航选项

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

　　了解内部链接和外部链接的区别。用户期望内部和外部链接行为不同。所有内部链接都应该在同一个选项卡中打开(以便用户可以使用后退按钮)。如果要在新标签页中打开外部链接，应该在打开前通知用户，比如在链接文本中添加一段文字并显示“(在新标签页中打开)”。

　　更改访问链接的颜色。当访问的链接没有改变颜色时，用户可能会无意中重新访问同一个页面。让用户知道哪些链接被访问过，避免无意中再次访问。

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

　　1.4浏览器的返回键

　　后退按钮可能是浏览器中第二常用的按钮(输入地址后)。请确保“后退”按钮按照用户的预期工作。当用户访问页面上的链接，然后单击“后退”按钮时，他们希望返回到原始页面上的退出位置。避免单击“上一步”将用户带到原始页面的顶部，而不是页面关闭的位置。因此，用户需要滚动浏览他们所看到的内容，他们会感到失望，因为他们没有适当的“返回位置”功能。1.5面包屑类型

　　广度导航是一组上下文链接，可以帮助网站导航。这是一个二级导航方案，通常显示用户在网站上的位置。

　　虽然这个元素不需要太多解释，但是有几件事值得一提：

　　不要将其作为主要导航方案。主导航应该用导航选项来引导用户，而面包屑是用户引导的导航选项。以面包屑导航为主，而不是辅助功能，通常是导航失败。

　　使用箭头代替斜线(/)作为分隔符。为了清楚地分开每一层，建议(

　　)或者()，因为这些符号的指向可以帮助用户理解。斜线(/)不建议作为电商网站的分隔符。如果您计划使用它，请确保产品类别不会使用斜线：

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

　　1.6搜索

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

　　设计搜索框时，请考虑以下基本规则：

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

　　在有钱的网站上，搜索框一定要显眼。如果搜索是一个网站的重要功能，那就突出它，因为它可以降低用户找到它的难度。

　　输入框的大小要合适。搜索框输入区域太短是设计上的通病。当然，用户可以在短字段输入一个长查询，但是只能看到部分文本，可用性不好，因为不能马上看到整个查询。事实上，当搜索框太短时，用户被迫使用简短和不精确的查询。尼尔森诺曼集团推荐27个字符的长度，可以覆盖90%的查询。

　　在每个页面上添加一个搜索框。每个页面上都显示一个搜索框，因为无论用户在哪个页面上，当他们无法导航到要查找的内容时，他们都会尝试使用搜索。