网站重新设计的基础——案例研究

完成一个网站重新设计项目只是回顾并思考，“如果我知道我今天所知道的，我会做不同的事情的情况并不少见。”

我们都去过那里。 我们对一个新项目感到兴奋，与客户开玩笑，签订合同，并开始模拟原型。 生活看起来不错，但项目基础却摇摇欲坠。

不可避免的是，一旦提出第一个设计概念，修订和范围蔓延就开始潜入，并且从那里开始走下坡路。 沟通崩溃了，一切都没有按计划进行，最终，新设计的网站就像你被雇来修复的怪物。

世界级的设计和用户体验并不是从一个漂亮的模型开始的——它建立在战略规划和专注于公司目标的设计愿景之上。 主要目标不能是“让我们做一个更漂亮的网站”。

网站设计师负责用户体验（UX）和用户界面（UI）。 我们的工作是确保用户在与我们设计的界面交互时获得最佳体验。 这需要从项目的概念开始就进行彻底的规划。

本文概述了一个可靠的过程，这将有助于确保您的下一个网站重新设计建立在坚实的基础之上。

网站重新设计项目前研究的价值

为了演示这个过程，让我们来看看为 Archeology Southwest 完成的网站重新设计的各个阶段，这是一个探索和保护美国西南部考古遗址的非营利组织。

在对客户的领域和竞争进行初步调查后，仔细检查每个可用的网站资产。 此分析单独计费，并在项目报价被写入之前进行。 以这种方式工作可以防止当网页设计师试图解释可能在项目后期浮出水面的问题时产生的模棱两可或夸大的估计。

在 Archeology Southwest 的案例中，我面临着一个急需关注的网站——一个古老的 CMS 门户内堆积如山的杂乱内容。 这很糟糕，所以我开始创建秩序。

第 1 步：熟悉内容

改造房屋时，重要的是要在拆除前尝试和抢救有价值的材料。 同样的原则也适用于网站设计。 您需要逐页浏览网站并提取所有内容。 作为设计师，我们必须弄清楚哪些内容应该成为独特的帖子类型，哪些页面是静态的。

完成此操作后，制定如何组织所有内容的策略，但不要决定应该保留哪些内容以及应该删除哪些内容。 为什么不？

在与现实世界的企业和组织打交道时，有许多不同的人负责网站的内容，并且存在的内容数量可能是惊人的。 最好的方法是首先对所有内容进行分类。

我通常从主导航开始，逐页浏览。 这样，我将在第一次客户会议之前准备好信息架构和站点地图。

不幸的是，Archaeology Southwest 的遗址并不典型。 大多数链接无法通过顶部导航访问，并且隐藏在内容中。 如果我仅根据导航引用该项目，我会大吃一惊。

通过与客户团队中的各种人员交谈，我能够更好地了解项目的范围，在与客户会面后，我能够确定他们的网站重点、工作流程、内容和功能。 从那里，我们提出了以下核心内容类型（一些新的，一些现有的）：

第 2 步：创建焦点。 简化。 组织。

将所有内容组织到带标签的框中后，就该为新结构制定蓝图了，该蓝图将以最佳形式展示内容。 但首先，我们需要创造焦点。

根据 Archeology Southwest，人们访问他们的网站是为了研究正在进行的项目的信息，了解即将发生的事件，并阅读月刊。 这些活动回答了“人们在网站上做什么？”这个问题。 但不要透露人们首先访问该网站的原因。

“为什么”是网站的焦点。 为了找到重点，请查看组织的核心。

在这种情况下，我将“位置”确定为西南考古学的核心。 没有位置，就没有考古遗址，没有废墟，当然也没有博物馆或展览。 考古学中的一切都与位置有关。

确定重点后，我们可以简化和组织。 对于 Archeology Southwest，我首先将内容分成与地点无关的类别，例如团队页面和年度报告。 经过一番整理，我最终得到了这张粗略的地图：

上图代表了出现的两个核心领域：要做的事情和地点。 要做的事情（左）涵盖网站访问者可以了解和做的活动。 位置（右）专注于与特定位置相关的网站内容。 为什么要这样构造？

这个想法是，普通用户可能不知道视频或项目的名称，但可能知道位置的名称。 通过这种方式，访问者可以找到与位置相关的内容。

此外，位置中的每个颜色块都代表一个独特的帖子类型。 从组织的角度来看，展览、课程和在线展览都是不同性质的事件。

在旧的 Archeology Southwest 网站中，杂志和在线商店有单独的静态页面，访问者可以在其中购买该杂志。 为了使购买更简单，我在杂志模板中集成了一个购买选项。

剩下的组织结构很简单：

• 一个“关于”页面，以了解有关该组织的更多信息
• 直接链接到“商店”页面
• “捐赠”页面
• 新的“更新”页面

商店和捐赠页面是赚钱的，因此它们必须包含在主导航中。

组织蓝图完成后，就可以连接实际内容了。

第 3 步：让客户参与进来

站点地图包括页面类型，但不包括内容映射。 经验丰富的网页设计师知道大多数问题发生在客户开始向其网站添加内容时。 为避免此问题，请从一开始就保持客户端循环。

对于 Archeology Southwest，我创建了一个包含站点地图的 Google Doc，并要求客户将其旧内容映射到新结构。

如果有些东西不太合适，我们稍后会解决。 这是关键的一步。 为什么？ 除了让客户参与流程之外，它还可以在实施开始之前发现结构问题。

在这种情况下，某些站点地图菜单项已更改，并且由于客户有多个捐赠页面，因此为此创建一个独特的帖子类型是有意义的。

通过线框图创建视觉结构

在这一步中，我开始给作品一个视觉结构。 为了让系统运行良好并成功整合“一切都与位置有关”的概念，我在帖子类型之间创建了双向关系。

这是基本的想法：当访问者来到 Archeology Southwest 网站并选择 Grand Canyon 时，他们将看到有关该位置的信息，但他们也会找到与项目、事件、展览以及站点管理员标记为位置的所有其他信息相关的信息-具体的。

由于链接是双向的，因此游客还可以通过访问项目页面到达大峡谷。 最终，我得到了这个：

位置索引页面显示所有位置，最近的位置位于顶部。 搜索栏是用户到达页面后首先看到的内容。 谷歌地图将占据大约 80% 的屏幕。 这允许用户在地图上选择点，并且当他们滚动或搜索时，列表网格将进入视野。

在单个位置页面上，主体位于左侧，因为它是最重要的信息。 相关元信息是次要的，所以它在右边。 为了实现平衡的布局，在第一个、第二个和第三个元素块之间有一个不同的层次结构是至关重要的。 这使眼睛可以毫不费力地在各个部分之间移动。

在 Archeology Southwest 布局中，用户的视线从标题开始，然后移动到内容块，最后跟踪到右侧边栏。 每条相关内容按相关性顺序显示。 例如，如果用户正在阅读有关 Grand Canyon 的信息，则该内容之后可能会出现照片和地图。

由于这主要是一个教育网站，因此有一个“与此位置相关”选项很重要。 但是，与每个位置唯一关联的内容并不多，因此我将很少使用（但相关）的内容合并到正文下方的单个块中。

在相关内容下放置杂志和视频缩略图会增加额外的视觉元素并将用户引导至“购买”页面。 该页面通过显示相关位置来完成。 这是吸引用户进一步探索网站的好方法。 下一步是为其他帖子类型继续此结构。

为主页提供明确的目标

有了帖子类型的通用模型，我可以专注于主页。 第一步是确定主页的目标——这是 UI 设计的重要组成部分。 客户的研究表明，许多用户在没有完全理解它是什么的情况下偶然发现了该网站。 因此，介绍和欢迎文字需要成为用户首先看到的内容。

新的核心重点围绕次要位置块展开。 接下来是archaeologysouthwest.org 上发生的一切（当前的杂志、博客、活动、时事通讯等）。 这是布局过程的迭代：

使用 V1（左），我设计了一个类似于原始主页的基本布局。 没有太多层次感。 用户首先看到的是特色位置，但从那里开始，他们很可能会迷失在列中。

对于 V2（中心），我创建了一个单独的列，更易于观察。 但是，它仍然可以改进。 这就是内容知识发挥重要作用的地方。 我知道 Archeology Southwest 一次举办的活动不会超过两个，因此在主页上为多个活动留出空间是没有意义的。

在 V3（右）中，我专注于即将发生的事件。 如果由于某种原因，有两个以上的事件，用户可以单击“更多”按钮并查看其余的。 我还特别强调了当前的杂志，因为它是客户的赚钱工具。 用户从顶部开始并以 F 模式向下工作。 眼流是：

特色位置 > 欢迎 > 杂志 > 活动 > 新闻

有了视觉线框和网站结构，就可以更容易地巩固功能以及事情的运作方式。 在这一点上，我与客户进行了另一次会议，以讨论用户交互的功能和流程，在这个阶段两者都更加清晰。

以后还会有修改吗？ 是的，但它们将是调整，而不是整个过程的变化。 最重要的是，不会有惊喜。

纳入品牌风格指南

现在是令人兴奋的部分——将线框转换为人们将使用和体验的东西。 对于这个项目，我的目标是通过实施品牌颜色和排版使书面内容易于消化。

尝试排版组合

排版是良好网页设计不可或缺的一部分，因此我们必须尽早弄清楚我们的排版方案。 大部分考古西南标识使用 Univers Condensed Light 和 Adob​​e Caslon 字体。 没有规定何时使用 Adob​​e Caslon，但我注意到它的使用频率不如 Univers。

我进行了一项小型字体研究，以了解哪些配对为专业的非营利组织创造了最佳感觉。 但是，我也不希望我的字体方案看起来与客户的营销材料有太大的不同。

在进行字体比较之后，很明显 Adob​​e Caslon 应该是标题字体，Univers 将用于字幕。 以句子形式设置主要标题可以使品牌更具个人感觉，而全部大写则营造出更多的企业氛围。

润色网站的外观和感觉

我着手创造一种轻松而开放的体验，让用户觉得 Archeology Southwest 既平易近人又非常称职。 根据分析数据，大多数访问者使用桌面浏览器（可能是因为大多数人访问该网站进行研究）。 因此，我最初的重点是为桌面用户设计。

当来自台式机时，我希望访问者立即看到特色位置、欢迎文字和即将发生的事件，然后是部分杂志标题。 这样，人们首先会看到公司是关于什么以及他们正在推广什么。

在移动设备上，优先级略有不同。 由于用户在旅途中访问信息，因此事件更为重要，因此它们在列表中的位置较高。

我还更新了页脚中的捐赠按钮，将其从按钮更改为句子，使其更加友好。

完成强：注意细节

用户访问详细信息页面的原因有两个——他们想要了解有关地标的更多信息，或者他们已经知道某个位置并正在寻找其他信息（方向、电话号码等）。 因此，立即呈现这两个选项非常重要，这样用户就不必去搜索了。

我决定将详细信息列从内容区域中分离出来，以赋予它更多的权重并使页面更有趣。 这有助于创建组合层次结构，因此当访问者访问页面时，他们将首先看到页面标题，然后是一个小的图像库，然后是详细信息列。

这种类型的设计可确保用户立即注意到位置的其他详细信息。 列周围的一些额外填充使眼睛保持专注，并且更容易扫描信息。

正如人们所期望的那样，移动视图会崩溃。 首先擦除内容，然后是元信息。 我将视频和杂志放在移动页面的最后，因为它们对移动用户最不重要。 其他页面遵循相同的结构以创建一致的流程和体验。

网页重新设计建立在精心规划的基础之上

回顾网站重新设计过程，很明显大部分时间都用于组织和规划。 只有 30% 的项目用于设计网站。

通常，当设计师展示他们的作品时，他们无法传达有多少时间用于沟通的具体细节，导致没有经验的设计师直接跳入模型。 结果？ 脱轨的项目和不满意的客户。

为了使网站重新设计成功，必须进行详细的规划。 花时间进行项目前研究，熟悉现有内容并让客户参与是关键步骤。

最终，没有办法解决它。 有条不紊的项目组织方法为令人惊叹的网站重新设计和专业信心铺平了道路。