网站内容设计(网站设计的“核心-路径法”让设计者从核心内容入手)

　　网站内容设计(网站设计的“核心-路径法”让设计者从核心内容入手)

　　英文原文：

　　译者注：文章 的原名是Designing Screens Using Cores and Paths。受城市规划中“交通需求线”的启发，本文作者提出了网站设计的“核心路径法”。不同于通常的从框架到主页和导航的方法，“核心路径法”允许设计师从核心内容开始，由内而外进行设计。这种非常规的方式可以在网站中创建最直接的路径，让用户找到核心内容。

　　想象一下，当你想穿过草坪到达对面的公交车站时，你是在草坪周围的人行道上走还是从中间穿过？如果草是干的，又不是禁止进入的，那么你可能会选择最近的路线——穿过草地直接到公交车站。如果之前很多人都这样做过，就会有“出路”。

　　这条未规划的道路连接了两点之间的最短距离，这样的例子在我们身边随处可见。在城市规划中，它们被称为“欲望路径”，意思是人类自然行为与人为规划路线的区别。

　　建筑师Christopher Alexander在其著作《模型语言》（1976）.

　　“规划道路的方法是先在自然风景区设置目标点，然后将这些点连接起来，形成一条路径。”

　　——克里斯托弗·亚历山大

　　原则上，亚历山大的方法面向目标——人们最终想要什么，然后以最有用的方式将它们联系起来。

　　但在网页设计中，方法通常是相反的：设计师从主页开始设计。然后他们根据 网站 结构层次制定了一个导航计划，无论是否合适。但是目标（用户正在寻找的主要内容，或者他们想要做什么）已经成为设计过程中最后考虑的事情。

　　受“流量需求线”的启发，我们可以改进这种设计网页的方法。使用core-path方法可以引导你在网站中创建最直接的路径，让用户可以直接到达核心内容。

　　核心路径模型

　　“不要从主页和整体导航计划开始，而是从内而外的核心内容和设计开始。”

　　“目标导向。” 信息架构师 Are Halland 在他的演讲“Core-Path Method: Design for Findability”中提出了建议。他概述了另一种网页设计方法：不要一出现就从主页和整体导航方案开始。你应该从核心内容开始，从内到外进行设计。太直接了

　　该方法基于三个关键要素：

　　一、核心内容

　　核心内容是吸引用户到网站。从开发者的角度来看，核心是网站提供的内容。需要注意的是，核心内容并不总是一个页面。对于 YouTube 来说，核心内容是视频，而不是页面。这使得 YouTube 上可能也有可以在其他 网站 上找到的视频内容。

　　核心内容还可以收录辅助信息。例如，技术细节可以认为是核心内容的延伸。对于像Flickr这样的网站来说，照片的描述和用户给它的标签是核心内容——照片的辅助信息。

　　2. 内向路径

　　用户如何找到核心内容？有时，访问者通过主导航或搜索找到核心内容。但它们也可能直接来自谷歌。或者其他路径，比如来自其他网站，广告，直接在浏览器中输入网址链接，甚至通过RSS和时事通讯。输入路径时也要考虑搜索引擎优化，比如关键词人们搜索什么。

　　3. 外向路径

　　假设用户找到了他们正在寻找的东西，他们可以做什么以及接下来他们会做什么？从根本上说，随后的每一次交互都会为业务带来一些价值。这就是转变发生的地方。外部路径可以是从“将东西放入“购物车”到“向朋友推荐产品”的任何操作。与向内路径一样，向外路径也有很多选项需要考虑，包括离开 网站 的链接。

　　这三个元素中的每一个都有不同的功能。核心内容实际上是为用户和业务创造价值的地方。向外路径的引导在这里起到了很大的作用：网站 最后希望用户有购买等具体行为。向内路径保证了可查找性，这就是用户可以在互联网上找到他们想要的产品和服务的方式。从商业角度来看，外向路径是为网站带来投资回报的东西。

　　下面是core-path方法的*敏*感*词*，以亚马逊为例（图片1）。核心内容是一个产品，用红框内的内容表示，包括一本书的封面和关键细节，左边是用户可以通过多种方式找到这本书，这些是内向路径，亚马逊认为用户可以在核心内容上产生投资回报的行为列在右边是可能的外向路径.

　　图 1 的核心路径模型

　　核心路径法的应用过程

　　想象以下场景：您在一家小型设计公司工作，您收到了自行车 网站 修订版的订单。这家店现在只有一个简单的“小册子”网站，上面写着地址和营业时间。他们想引入电子商务，以便他们可以在线销售。产品包括高端赛车和山地自行车，以及一些配件。该店希望在网上销售总计约1000种产品，主要目标客户群是专业自行车手和业余爱好者。销售的自行车主要来自优质品牌。所以网站的设计应该强调自行车产品的高品质。根据core-path的方法，下面是如何设计这个网站的完整步骤。

　　第一步：定义核心内容

　　核心产品是什么？先列一个入围名单：自行车、配件、服务等。名单来自头脑风暴，没有对错概念。编辑完完整列表后，确定一个核心内容及其辅助信息。在大型团队中，这意味着与团队成员和利益相关者达成共识。

　　在上述场景中，核心产品是自行车。自行车照片是展示核心内容的关键元素。在这种情况下，自行车的功能、品牌和产品系列是从属于核心内容的信息。补充信息包括价格和其他技术细节。

　　在确定这些细节的优先级和确定后，手绘核心内容（图2）。不要绘制包括导航和徽标在内的整个页面，只关注核心内容。

　　客户可能希望详细查看产品详细信息，因此在此阶段应考虑两件事。第一：他们如何与产品内容互动。第二：一旦用户找到核心内容，就考虑使用场景。

　　图2 手绘核心内容及辅助信息

　　请记住，用户还可以从智能手机和平板电脑访问 网站。他们还可以将图片发布到 Facebook 或 Pinterest。这是分布式核心的示例。因此，我们手绘了如何将核心内容放到不同的场景中（图3）。同样，不绘制页面装饰或导航，只关注核心内容。

　　图3 不同场景下不同版本的核心内容展示

　　从这里可以看到核心内容和辅助信息在不同场景下的表现。您可能需要来回迭代版本以更新它们。

　　第 2 步：列出所有可能的向内路径

　　用户可以通过哪些方式联系到您网站？显然第一个想到的就是：网站搜索、主导航、谷歌等网站链接。但是通过头脑风暴，你可以找到更多路径：购物和比价网站链接，甚至来自线下媒体，例如印刷产品目录。

　　对于列表中的每个向内路径，写下设计要求并同时满足这些要求。例如，对于来自谷歌等搜索引擎的访问者，需要进行搜索引擎优化和着陆页优化（图4）.

　　图4 内向路径列表及对应的关键要求

　　第 3 步：列出所有可能的向外路径

　　从核心内容推断路径。与第二步一样，向外的路径也必须满足设计要求。根据业务的重要性对向外的路径进行排序，使后续设计更加清晰。由于外向路径最终会产生商业价值，因此其排名应参考商业目标。在此示例中，使用一个清晰​​的引导按钮将客户带入结帐流程。如果客户不能立即做出决定，那么第二个优先事项是为客户提供一个指向愿望清单的链接，或者一个向其他人推荐产品的链接。

　　图5 向外路径的顺序

　　到目前为止，我们既没有看过主页，也没有考虑过导航。但是，我们已经完成了重要的设计决策，例如核心产品的移动版本是什么样的，以及用户如何与网站的主要内容进行交互。制作高保真模型后，这些初始界面可以由用户进行测试。

　　第 4 步：将所有内容整合在一起

　　在你设计好核心内容并列出内外路径后，再专注于主页和导航。这个阶段的目标是让用户以最简单、最直接的方式找到核心内容。

　　设计网站的首页、指南页和搜索结果页。手绘了几个备选方案。设计时记住核心内容和路径要素：核心内容是什么，用户如何获取，业务如何转型？

　　图6 手绘首页-初稿

　　在这一场景中，为了将客户从首页带到核心内容区，自行车商店的三大产品系列出现在主导航中：专业赛车、山地车和配件。对于目标客户来说，品牌也是一个非常重要的考虑因素，所以品牌化也包括在内。一个明显的链接——购物车和结账流程也位于导航区。

　　图 7：带有过滤和排序选项的手绘指南页面

　　以下是我们在 文章 中捕获的所有关键点和描述的步骤的模板（图 8）.

　　图 8 Core-path 方法模板

　　总结

　　以下几个方面是该方法对设计的改进：

　　确定差距

　　在一开始，质疑主要内容的目的可以揭示差距。

　　设计元素的优先级

　　分解关键元素，并优先考虑它们在整个设计中的呈现方式。

　　专注于设计

　　核心路径方法为整个设计团队提供了明确的方向。

　　核心路径方法与其他方法的直接区别在初始阶段非常小。但影响是巨大的：现在，核心内容在您的设计中占有一席之地。网页设计中的所有其他元素都服务于一个目标，即用户和业务的完美结合。