虚假项目 - 重塑 Code Project 系列 第1部分

引言

这可能是我参与过的最不寻常的文章系列了。在这个系列中，我将与 Code Project 的创始人之一合作，通过 Metro 设计语言（很快就会详细介绍）来重新设计一个知名网站。我一直觉得，在开发过程中一些有趣的部分经常被忽略，我想通过实际处理我们开始编码之前所做的事情来解决这个问题。我还认为，探讨 Metro 设计到底意味着什么也会很有趣，所以我想到了用 Metro 的原则来重新设计一个网站。当我向 Chris Maunder 提出这个想法时，他欣然同意帮助我完成这个系列，并暂时借用 Code Project 的品牌，这让我欣喜若狂。

那么，我们到底会涵盖哪些内容呢？嗯，本系列的第一部分将处理网站重新设计时客户和代理机构之间典型的来回沟通。我们将经历通常发生的评审周期、争论和妥协，目标是最终完成一个我们称之为“虚假项目”的重新设计。请耐心等待，因为这里不会有太多代码；但我们希望这会引起大家的兴趣。第一篇文章将把通常需要一周左右完成的工作压缩到两天内完成——我们将制作一系列模拟图中的第一张。

好吧，我们不会完整地走完寻找和聘请设计公司的整个过程。让我们假设 Chris 已经完成了这个过程，并且他“不幸”地被我选中（其他竞标者是填充的猫和一根绳子）。最后，我们终于到了开始构思设计的阶段。但在我们实际开始构思任何设计之前，任何有价值的设计机构都会试图真正理解客户想要什么。他们应该尝试评估品牌意味着什么，客户试图传达什么信息，并在此过程中开始感受真正的界限在哪里。所以，让我们从这次会议开始设计。

提前说明一下

通常，在模拟网站时，最好确保客户知道你正在制作一个模拟图。这样做的方法包括使用夸张的字体或素描风格的图像。这有两个目的：第一，我们想快速地把模拟图组合起来，不想纠结于细节的完善。但也有一个警告——有时客户会纠结于模拟图，并对字体等细节斤斤计较，所以在我们进行这个系列的过程中请记住这一点。我跟 Chris 合作得很愉快，因为他能迅速把握大局，并且对如何推进“虚假项目”有清晰的愿景。

背景

设计器

“好的 Chris。您能给我们介绍一下这个品牌的背景吗？它是如何产生的？”

Chris

Code Project 最初由一位名叫 Glen Price 的设计师于 1999 年 11 月设计。最初的设计是醒目的橙色，但它立即为我们带来了强大、充满活力的品牌形象，我们非常喜欢。这是我们做出的最好的设计决策。

然而，多年来，为了适应新的服务、新的形态因素和屏幕尺寸，以及新世纪，该设计都需要不断演变。几年前我们进行了一次重大改版，使设计更具时代感，但再次，演变的需要变得紧迫，导致了去年最新的改版。

现在是时候重新思考整个设计，以便专注于我们最擅长的事情——通过分享文章和项目，让我们的会员能够分享他们对代码的热情和知识。

我们经常讨论我们喜欢的网站，以及那些很糟糕的网站，以保持设计重要性的概念在我们的谈话中鲜活。话虽如此，设计越简洁，我们（通常）就越喜欢它们，但许多简洁设计的有一个问题是，它们之所以简洁是因为它们的内容很少。我们不是跑车的宣传册。我们是报纸。为了设计而限制信息是违背我们的目标的，而且我们绝对不需要使用 32px 的字体来填充空白。

设计器

好的，这是你们的过去，但你们的品牌未来会走向哪里？你们希望通过品牌重塑来实现什么？毕竟，这可能会对你们的用户群造成真正的文化冲击，那么我们如何帮助你们更新品牌，并让你们能够最大限度地触及读者拥有的不同形态因素呢？

Chris

在审视现有的设计语言和风格时，苹果的网站和谷歌的网站是我们光谱的两端。微软，如果要提及与这两个名字一起经常被提及的另一个主要名字，在设计方面一直是一个“一般般”的玩家。MSDN 不断的改版让我感到非常痛苦，以至于我发现我根本不再使用它了。有很多网站坐落在这个光谱上，我们已经讨论过，但其本质归结为：

1. 将内容作为页面上最重要的东西
2.  给一切留出足够的空间。

花两秒钟思考一下，并将其与微软 Metro 设计语言的设计目标进行比较。它的基本原则是：

1. 内容优先于界面

2. 利用负空间

我们看到的 Metro 设计通常围绕着磁贴，或者推崇那种已经被过度使用且使用不当的刻板印象的“大而超薄的字体和暗淡的文字”模式。我们认为 Metro 语言的底层理念是清晰且合理的，并且可以完美地应用于内容丰富的网站，因为这正是 Metro 的宗旨：推广内容。

所以，抛开我们使用的设计语言，我对 CodeProject 的设计有一些目标。

1. 网站必须清晰地表明它的功能以及如何使用它
2. 最重要的内容应该最吸引注意力
3. 网站必须非常容易辨认为 CodeProject。我的标准测试是，一个开发者，从 10 英尺外看一页，不超过一秒钟，就必须知道读者正在浏览 CodeProject。
4. 我们仍然依靠广告支持，所以必须要有广告，并且广告必须与整体布局相协调。
5. 设计必须灵活，以便我们能够以清晰合理的方式添加新服务和功能。

这归结为几个具体点：

1.  不要动橙色。
2. 不要动我们的 logo。虽然 logo 上的文字可以改变。
3. 不要过多地改动广告。虽然有可能重新协商当前的广告合同并进行调整，但如果不需要，会更容易。此外，我们拥有的广告单元是客户要求的。除了整页插页广告和弹出式广告。它们也是客户要求的，但重复回答这些请求可能不太礼貌。
4. 文章内容的宽度可以假定为至少 640 像素。
5. 网站必须能在触摸设备上运行
6. 我是一个传统主义者，认为链接应该是蓝色的，并且只有链接应该是蓝色的。已访问的链接应该是紫色的。

下一步是定义网站应该做什么，确定信息的层级，并决定什么保留，什么移除，以及我们如何解决一些设计挑战。

后续步骤

好了，我们已经有了简报，是时候开始集思广益了。我们可以从初次会议中提取几点。首先，也是最重要的，我们必须保留某些关键视觉元素；Bob 必须在场，但我们可以根据需要更改 logo，橙色必须是 #FF9900，我们必须为广告提供空间。除此之外，网站元素还有很大的发挥空间，所以我们可以尝试一下，看看哪些元素真的能脱颖而出。

对我们来说，最大的问题是如何从 10 英尺外直观地辨认出 CodeProject 就是 CodeProject？是什么让它脱颖而出，并立即被识别？通过识别这一点，我们就大大确定了我们设计的基础。无论这个标识是什么，它都必须从我们看到的第一屏开始就存在，并且必须保持一致。好吧，让我们后退 10 英尺，看看是什么让 CodeProject 成为 CodeProject。

让我们从首页开始。打开它，我们看到了什么？

 好的，初步看来，似乎有三个清晰的视觉焦点。

所以，1 是网站的页眉，2 是主内容区，3 是提供小部件和广告的侧边栏。显而易见，这个橙色确实有很强的存在感，所以我们可能会想把它用于操作元素，比如按钮。现在 Chris 说他喜欢用蓝色作为链接，默认的已访问链接也是蓝色，但看这张页面，很明显这不是一条硬性规定，因为有一组链接不符合这个规则：菜单。这应该给我们一些空间来提供更强的视觉效果，所以我认为我们可以考虑将 CodeProject 的绿色 (#488E00) 或橙色作为菜单颜色。

好的，这个屏幕上没有页脚，所以很明显页脚在建立视觉身份方面没有起到重要作用。

让我们来看看当前的设计如何在网站的其他区域体现。我们应该能在这里找到共同点。正如 Chris 所暗示的，他认为文章是网站的主要焦点，我们就从那里开始。

 

非常好，这大致与首页的布局相似。小部件已更改，但我们有相同的页眉，主内容区与首页非常相似，包括大量使用选项卡。图标不明显，在小尺寸设备上可能很难使用，所以我们需要在这方面花些精力，看看如何表示它们。

我们确实看到了页眉广告的一致性。看起来是 725 x 90 像素，所以这为该区域设定了一个硬性限制——我们不能提供低于 95 像素的页眉高度。侧边栏的宽度设置为 230 像素，留下主内容区域可供调整。Chris 提到 CodeProject 可以采用固定布局或流体布局。我认为我们应该提供固定布局；侧边栏的宽度将帮助我们确定主内容区域的宽度。

*注意。需要向 Chris 确认我们是否可以将网站限制为固定布局。他可能对此有强烈意见，所以我们可能需要找到一些折衷方案。在我们继续进行线框图之前，我们会澄清这一点。

现在，网站的另外两个主要区域是论坛和问答 (Q&A) 部分。让我们检查一下品牌如何在这些区域延续。首先，让我们看看论坛是什么样的。

 

好的，我们看到了一些与我们前面看过的两个部分不一致的地方。虽然我们仍然可以看到侧边栏，但它已经从右侧切换到了左侧，而且它的整体外观和感觉都改变了。里面没有留白，而且更加醒目，尽管宽度只有 170 像素。主内容区的选项卡也消失了，而且我们还看到这里链接颜色的规则有所放宽。Chris 告诉我，灰色文本表示链接投票数较低，这进一步证实了链接颜色规则是一个指导方针，而不是绝对规定。我们也许可以对此做些什么。

注意*：我想征求 Chris 的意见，让他考虑让侧边栏在整个网站上保持一致，这样在这个页面上它就得移到右侧，并且要更多地利用留白。

从积极的一面来看，页眉仍然存在并且保持一致。这是我们品牌标识的视觉线索——如果我们保持它相对一致，人们应该仍然能够一目了然地看出新网站是 CodeProject。

最后，让我们看看问答 (Q&A) 部分。

 

好的，我们又回到了熟悉的布局，但同样存在链接文本颜色方案的偏差。这次引入了绿色，乍一看似乎与左侧框中的颜色有关，但事实并非如此——如果我们看看那些框，我们可以看到当链接文本是灰色时，它们可以是绿色的。我们要做的第一项任务之一就是为设计制定颜色规则。有了这些规则，我们就可以开始划分网站的主要区域，然后再进行细化。

我有一点担忧的是页眉顶部的留白。对于页眉来说，这是一个令人刺眼的搭配——两者根本不搭。我们将仔细查看该区域，看看是否可以完全移除白色。

所以，看起来我们知道哪些关键元素可以使网站立即被识别

1. 页眉区域将是橙色 #FF9900，并将包含外星人 logo（又名“Bob”）和主要广告。页眉的最小高度将是 90 像素。
2. 将有一个 230 像素宽的侧边栏，该侧边栏将位于右侧，并将包含“小部件”和一个较小的广告
3. 主内容将位于主内容区。它将位于侧边栏的左侧。

一个需要考虑的点。网站应该使用什么标语？“您的开发资源”不是一个强有力的钩子。

第 2 天

好的，我已与 Chris 进行了沟通，他带来了以下反馈：

“感谢您指出我在链接颜色上的不一致。我真不敢相信我之前没意识到这一点。

列在右侧，然后左侧，然后再右侧——是的，不一致，以及问答中的留白。都是很好的评论。

侧边栏需要对于有意义的页面保持一致。拥有更多的留白是一个棘手的平衡，因为我们希望允许 640 像素宽的文章和最小宽度 960 像素（大致如此——这些只是粗略的指导方针）。如果留白指的是额外的填充：绝对可以。

并非所有页面都应该有侧边栏，而且有些页面可能更适合拥有左侧侧边栏。例如，首页可能需要一个右侧侧边栏，但设置会员设置的页面可能需要一个左侧侧边栏。我现在正在使用 Chrome，喜欢它在设置页面的左侧侧边栏中使用链接而不是通常的选项卡。我想尝试这种方法，看看它是否有意义。

现在，关于固定/流体的问题。我对此没有意见，但我认为在保持固定布局基本设计元素的同时，使其流体化非常容易。我倾向于避免固定布局，因为屏幕尺寸越来越大的历史。我认为我们可能已经达到一个点，类似于 CPU 速度达到瓶颈并转向多核：屏幕尺寸可能不会再增大，但分辨率会翻倍，甚至翻三倍。我可以为我的 PC 买一个 23 英寸的显示器，为我的 iMac 买一个 24 英寸的显示器，但我仍然更喜欢 3 个 19 英寸的显示器，这样我就可以最大化文档而不会显得过于庞大。Windows 7 的将文档停靠在显示器侧边的功能在这方面非常棒。

另一方面，固定宽度在浏览器被缩小后确实会导致问题。我经常将浏览器窗口缩小到屏幕的三分之一，仅仅因为我想同时容纳太多的窗口。让设计能够适应这一点是一个有用的功能，这意味着当网站在新形态因素（迷你 iPad？）上查看时，它会进行调整。”

这些信息很好，并开始让我们勾勒出一些东西。如果我们进行计算，可以看到将 230 像素的侧边栏加上最小文章宽度 640 像素，总共只有 870 像素，远低于 Chris 提供的 960 像素的粗略估计。我们有两种选择：要么将 230 像素加宽到 320 像素，要么将最小文章宽度增加到 730 像素。我们将粗略地绘制这两种尺寸，以便对哪种更合适有一个感觉。

在粗略草图中，让我们尝试将侧边栏放在两侧，看看哪种感觉更好。虽然 Chris 说侧边栏的一致性应该在有意义的地方应用——让我们进行试验，以便他能更好地理解。如果我们发现需要调整一些东西，我们总可以在稍后修复。此外，虽然我们还没有讨论页脚的使用，但让我们将其包含在线框图中，以便我们有一个完整的画面。

 由于我们希望这个网站易于在触摸设备上使用，并且在各种尺寸下都能良好运行，我将采纳 Chris 的想法，将其设置为流体响应式布局，并尽可能地避免基于菜单的交互；在手机上通过菜单导航最终会变得非常麻烦。

我们需要做的第一件事是确定什么能满足 Chris 的要求，即从 10 英尺外就能立即识别出 Code Project。乍一看，实心的橙色条和外星人 logo 似乎是主要候选者。因此，我们将设置一个基本模板页面，使用这个标识——并且由于这是广告的焦点，我们将在此处放置广告；这符合 Chris 对广告的要求。

正如我之前提到的，我们可以利用这一点尝试从纯粹的菜单式导航方法转变为更适合触摸交互的方法。这将有助于向平板电脑/手机用户开放网站，因为当前的菜单系统在这些环境中并不是理想的选择。由于我们将更改菜单，因此有机会根据网站的关键元素来组织交互。正如 Chris 之前提到的，网站的关键元素（确实，这是 CodeProject 与其他网站的主要区别之一）是文章，我们将把它们放在我们的“菜单”的首位。

作为初步尝试，我建议这代表了网站其他页面的默认布局。

 

现在我们有了简单的页面布局，我们需要看看它如何与网站融合。显而易见，我们可以从首页开始，所以我们将重新设计它，并借此机会应用一些设计规则。

1. 既然我们已经确定了链接颜色规则是灵活的，我们将选择使用 CodeProject 的橙色作为链接文本颜色。
2. 基于网站的链接文本、菜单文本和标题将使用小写。
3. 标题将使用 CodeProject 的绿色作为视觉线索。
4. 布局系统将基于网格。

对首页的初步风格化，很大程度上借鉴了当前的首页，表明以下设计将满足首页的一些标准。

在对该设计进行内部审查后，我们发现它不适合向客户展示，因为它不符合我们为创建 Metro 设计设定的某些标准。虽然其中一些规则似乎是可以接受的，但整体设计感觉很拥挤，没有有效地利用留白。保留选项卡造成了风格上的奇怪混搭，所以我们将重新审视这种风格并提供更多空间。

首先，我们必须有一个机制来处理不同的选项卡。虽然我们可以保留选项卡，并移除它们的边框，但我认为更好的机制是将选项卡转换为组合框。

 

我在这里添加了语言，以充实它。正如你所看到的，这里有更多的空间可以发挥，所以感觉不那么混乱了。不过，我担心这里有重复的内容（我们在两个地方都有文章）。我们可能很快就需要重新审视这一点。目前，让我们进一步研究这个屏幕。

在这个截图中，我们可以看到正在操作的文章选择。点击列表中的一个项目将更改文章的选择。例如，点击“技巧”将显示最新的技巧和最新的最佳技巧。

同样，在初始设计中看起来很杂乱的“审批”选项卡，显示为下拉选择感觉更整洁。

嗯。到目前为止，设计仍然感觉不太对。我百分之百不满意这种重复，所以让我们重新审视一下。

 

这似乎是一个更具凝聚力的设计，我们在这里引入了一些颜色，但我们也失去了一些东西。考虑到我们想通过这种导航实现的目标，我们必须记住的一点是，首页文章链接与主菜单中的文章列表不是同一回事。我们可以使用下拉菜单的风格来指示两者之间的区别。让我们恢复那个组合框，并将这个呈现给 Chris 以获取他对首页的反馈。在进一步进行之前，我们需要确保 Chris 对我们目前的进展感到满意。