重新设计 CodeProject
4.94/5 (110投票s)
使用曾经被称为 Metro 的设计语言，重新思考 CodeProject.com 的设计和布局。
引言
正如人们所希望和预期的那样，CodeProject 的设计多年来一直在变化。然而，这种设计往往是权宜之计而非规划的结果，因此它常常变得有些随意，而且常常是将尽可能多的内容塞进一个页面，而不是思考页面上应该有什么内容。
对该网站的一个普遍抱怨——事实上，是关于该网站的“那个”抱怨——是它的外观陈旧、疲惫且拥挤。当你打开网站时，你会被信息淹没和迷惑。我们曾经喜欢旧的风格，就像狗喜欢它到处拖着玩的旧的、磨损的鞋子一样。它舒适。我们知道如何使用它。它有我们需要的一切。
然而……
然而，我们正在寻求改变，而改变的动力来自于许多开发者面临的一个问题：我们一天的时间不够用，需要减少我们所做的事情和维护的东西。这让我们移除了网站上许多成员不常使用的部分（我猜你可能甚至没注意到它们消失了），同时也精简了其他部分的功能集，使它们更易于使用。这样做让我们开始思考每个页面应该做什么，更重要的是，每个页面不应该做什么。
我们还开始专注于文章本身，因为它们是我们保持 CodeProject 热情的动力。Safari 的“阅读器”模式给我们留下了深刻的印象，因为它让你专注于内容，而不是界面，这个主题我们一直在回味。让内容成为页面上最重要的东西，并给内容留出呼吸的空间。这些想法相当简单，而且，巧合的是，这些想法都被封装在 Windows 8 所构建的 Metro 设计语言中。
一段回忆
2000 年，上线不久
2005 年 - 已经发生演变。
2008 年 - 我们最大的重新设计
2011 年 - 清理一些杂乱
曾经被称为 Metro 的设计语言
我不喜欢我看到的许多 Metro 的实现。我在 CodePlex 重新设计上线前瞥了一眼，它很漂亮。然而，上线后，它似乎失去了所有的特色，并且涌入了噪音。我完全理解他们不得不做出的妥协，因此我开始思考我们是否可以或应该使用 Metro 的理念进行重新设计。
初始需求
我们最初的需求非常简单
- 显然是 CodeProject
- 易于阅读
- 我们需要展示的一切都放在页面上。
我用一个开发者走过另一个开发者桌子的例子来解释第一项。当有人走过别人的桌子并瞥了一眼他们的屏幕时，他们应该立即知道这个页面显示的是 CodeProject 页面。我希望它响亮而自豪。我不希望出现另一个设计，它只能通过文本链接颜色等来区分。
第二项很明显，但第三项才是真正的工作，它涉及一些微妙之处。页面上的所有内容是否都需要一直可见？它能否显示在弹出窗口或下拉菜单中？或者标签页？或者点击进入？它应该显示在哪里——在视口上方还是下方？
第三项的一个重要方面是将我们的信息放置在层次结构中。决定什么最重要，然后是次要的，依此类推，直到最不重要的。这能极大地集中你的思路。
什么重要
文章，当然，还有我们的社区、讨论和问答。但首先是文章。永远是文章。在主页上，我们想清楚什么可能，但试图展示一切都是徒劳的——这是我们过去犯的一个错误。此外，主页并不是网站上最受欢迎的页面，文章才是。读者不会通过 Google 或 Bing（这算动词吗？）找到我们然后去主页。他们会直接进入一篇文章或一个问题。如果我们想突出什么，文章页面就是最好的地方。
我们希望我们的读者做什么？
大量阅读，提交大量文章，享受乐趣，并像疯了一样点击广告商的广告。所有这些都很简单，但如何实现呢？
显而易见的答案是，你引导你的读者采取你认为对他们（或对网站）有益的行动。但我发现这个简单的要求在许多网站上都被忽略了——我们自己也曾是如此。在这方面，圣经是这本书 《别让我思考》，因此我们需要为仍在摸索方向的新读者提供即时指导。
设计模式
将这些整合起来，我们的需求是
- 推广品牌
- 推广内容，减少杂乱
- 放松布局 - 不那么拥挤 = 易于阅读和查找内容
- 提供指导
快速浏览一下 Metro 的基本理念，你会发现它基于两件核心事情：
- 内容优先于界面
- 负空间（即空白）的使用
Metro 与磁贴无关。磁贴是 Metro 在触摸设备上的实现方式。我真的不欣赏非触摸环境下的这种设计，而且在一次又一次看到它被过度使用后，我最初对走 Metro 路线犹豫不决。此外，我们看到的例子都显得平淡，缺乏品牌特色。如果我们要做，就必须专注于我们需要什么，而不是别人已经做了什么。
线框图
这似乎很合适，于是我们开始着手制作一些线框图来探索这些想法。
第一个展示了最初的想法，基本上是我们选择的方向。关于链接是橙色的、顶部栏太橙色、以及间距与字体大小相比过大的讨论很多，但想法就在那里：说你需要说的话，不多说。保持简洁。
然后，它演变成了更熟悉的形式
我们对这个版本有一些根本性的问题。布局很好，很整洁，但很无聊。缺乏灵魂，最重要的是，它让我们头痛于阅读白色背景上的橙色文字。争论仍在继续，最终我们达成了妥协，并改用了深色标题。
在此之上，还有人担心主页上的磁贴正是我不想要的：大块的区域，除了占用屏幕空间外，几乎没有其他作用。它们被调整了。
然而，现在的问题是，无法区分哪些是链接，哪些不是。最终，蓝色链接被重新引入，并达到了我们今天的状态。
主要问题
自从我们上次重新设计以来，我们尝试了多次重新设计，但都失败了，因为我们试图坚持旧的做事方式，而不是从零开始。我们试图进行“皮肤”修改而不是真正意义上的重新设计，这永远无法解决根本的信息架构问题。一旦我们开始将内容视为主要焦点，并引导读者关注内容，事情就很快、很快地解决了，而最大的问题反而成了最小的。我们使用什么图标？我们是否使用图标？文章之间有多少内边距？论坛的背景色是什么？最大的头痛问题，链接的颜色是什么。
下面是我们想做的。我非常喜欢它。但它让我头痛。灰色/橙色组合不会给人“清新”或“疲倦时阅读”的感觉。它会悄悄地低语：“眼部疲劳”。所以妥协发生了。
真正改变了什么？
根本上变化不大，但实质上，一切都变了。主页经历了最大的震动（或者说是精简），文章页面的精简程度最为剧烈。
进展图示
在设计最终确定和模型提交后，我花了 9 天时间，共计 115 小时来实现 CSS、布局和后端代码的更改。我广泛使用了 .LESS，因此我利用这个机会将我们庞大的 CSS 文件分解成更小的、更易于管理的块。我强烈推荐 .LESS。它就是 CSS 应该有的样子。
主要工作是通过 Firefox / Firebug，然后是 Chrome 及其开发者工具，最后是 IE，尤其是 IETester。图形工作使用了一个老旧、吱吱作响版本的 Fireworks（我知道，很羞耻），咖啡由 Te Aro 提供。
为了让大家乐一乐，这里有一些进展的小截图。
初期的皮肤修改。啊，我的眼睛。
接近最终版本，显示暗色标题和橙色链接
新文章页面的初始草稿。这需要一些后端改造，但考虑到改动的程度，后端工作量并不大。
接近最终版本。标签仍然有轮廓，顶部导航菜单仍在最终确定中，标题大小在那天像个溜溜球一样上下波动。咖啡因水平已达到危险水平。
最后的截图来自上线前 30 分钟。为了清晰起见，我们希望使用深色链接，让整个页面看起来干净一致，但最终，哪些链接可点击、哪些不可点击的潜在混淆 outweighs 了美学。
最后的几句话
在设计时，至关重要的是我们不仅要有一个坚定的目标，而且要清楚地理解我们认为什么最重要。在每一步，我们都问“我们需要这个吗”，并积极尝试删除我们认为没有增加价值的项目。
这次设计更新只是我们最新一轮变革的开始，我们预计这个设计在至少几个月内不会完全稳定下来。我们总会发现一些收尾工作，我们还有一份待办事项清单，上面列着我们没来得及完成的小页面和设计元素。我们非常喜欢你们的反馈，尤其是“太棒了，我们喜欢它”，但我们也理解并非所有人都喜欢。
但我们请求你：让它沉淀下来。给它时间。