网页设计看这篇文章就够了（一）

　　网页设计看这篇文章就够了（一）

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

　　本文将重点介绍创建出色用户体验的主要原则、方法和具有启发性的案例；从用户体验地图等整体结构开始，到单个页面的设计；还将介绍网页设计中其他重要的方面，例如移动端适配和测试。

　　目录（加粗部分为本文内容）

　　一、设计用户体验地图

　　二、页面设计

　　三、移动端适配

　　四、无障碍设计

　　五、测试

　　六、开发交接

　　七、总结

　　一、设计用户体验地图1.1 信息架构

　　人们经常将网站上的内容列表作为“信息架构”。不对， 虽然它是信息架构的一部分，但它们只是其中的一个方面。信息架构是以一种清晰和合乎逻辑的方式组织信息。信息架构有一个明确的目的：帮助用户浏览一组复杂的信息。好的信息架构会创建一个符合用户期望的层次结构。但良好的内容层级和直观的导航并不容易，需要通过用户研究和测试才能实现。

　　有很多方法可以研究用户需求。通常情况下，信息架构师会采用用户访谈或卡片分类的方式来获知用户的期望，或者找出潜在用户是如何进行信息分类。信息架构师还需要了解可用性测试的结果，以便查看是否能够高效导航。

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

　　对用户访谈的结果进行分类，然后检验卡片分类是否满足用户的心理模型。UX还会使用“Tree Testing”的方法来检验它的作用。信息架构要在设计具体页面之前完成。

　　Tree Testing是一种确定用户是否能够通过所提议的信息结构解决需求的可靠方法。(Image credit: Nielsen Norman Group)

　　1.2 全局导航

　　导航是可用性的基石。如果用户在网站迷失了方向，那你的网站内容有多好也无用。因此网站的导航应该遵循几个原则：

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

　　1.3 链接和导航选项

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

　　1.4 浏览器的返回键

　　“后退”按钮可能是浏览器中使用率第二高的按键（在输入地址之后）。确保“后退”按钮按用户期望运行。当用户访问页面上的链接，然后单击“后退”按钮时，他们希望返回到原始页面上的退出位置。避免点击“后退”将用户带到原始页面的顶部，而不是在页面关闭的地方。如此一来，用户需要滚动他们已经看过的内容，用户会因为没有合适的“返回位置”功能而感到失望。

　　1.5 面包屑式

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

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

　　对于上面的类别，面包屑导航区分不同的层级是比较难的。

　　1.6 搜索

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

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