游戏设计如何设计冷却时间_大的重新设计时间

游戏设计如何设计冷却时间

I first posted in this blog 14 months ago. In the history of humanity, that’s not all that long ago, but for me it feels like an age. When I wrote that original blog post, I was still at university (just). I knew I was going to be a software engineer, but didn’t have much experience. In particular, I knew absolutely nothing about web development.

我14个月前首次在此博客中发布。 在人类历史上，这还不是很久以前，但是对我来说，这就像一个时代。 当我写那篇原始博客文章时，我还在上大学。 我知道我将成为一名软件工程师，但是经验不足。 特别是，我对Web开发一无所知。

The original design was nothing to write home about. It was fairly plain, black-and-white, using a fairly standard set of fonts. This was largely a deliberate decision: back then I knew literally nothing about design. Essentially all I knew is that I couldn’t get anything to look the way I wanted it to, so I should do as little as possible.

最初的设计没什么可写的。 它使用一组相当标准的字体，非常普通，黑白。 这很大程度上是一个故意的决定：那时我对设计几乎一无所知。 从本质上讲，我所知道的是，我无法获得任何想要的外观，所以我应该做的尽可能少。

Over the past year-and-a-bit I’ve extended the design. Just small things, largely stolen from smarter people than myself. I added some horizontal rules, and a few splashes of colour. I spent an evening designing a (less-than-impressive) SVG logo so that the word ‘Lukasa’ wouldn’t be literally everywhere on the page.

在过去的一年多的时间里，我扩展了设计。 只是很小的东西，大部分是比我自己更聪明的人所窃取的。 我添加了一些水平规则，并添加了一些颜色。 我花了一个晚上设计了一个（效果不佳）的SVG徽标，这样，“ Lukasa”一词就不会出现在页面上的任何地方。

Slowly and inevitably, however, I grew tired of the design. Small things came to annoy me. Things like the inconsistent spacing, and the bizarre double-rule at the bottom of most pages that I couldn’t easily get rid of, and the totally boring font choices. It occurred to me I could do better. So over the last few weeks I’ve been quietly working on a new design: the one you’re looking at now.

但是，我缓慢而不可避免地对设计感到厌倦。 小事惹恼了我。 诸如不一致的间距，大多数页面底部奇怪的双重规则（我无法轻易摆脱）之类的东西，以及完全无聊的字体选择等。 我想到我可以做得更好。 因此，在过去的几周中，我一直在悄悄地研究一种新设计：您正在寻找的一种新设计。

I want to take some time to talk over some of the changes I made and some of the tech I’m using. I promise, I’ll go back to HTTP for my next post.

我想花一些时间讨论我所做的一些更改以及我正在使用的某些技术。 我保证，下一篇文章将回到HTTP。

老人 (The Old)

Let’s begin by looking at what I used to have. For those of you who don’t remember, this is what the front page used to look like:

让我们开始看看我以前拥有的东西。 对于那些不记得的人来说，这是首页的样子：

The top of my old home page.

我旧首页的顶部。

The bottom of my old home page.

我旧首页的底部。

There is nothing inherently bad about the design of that page. It looks fine, especially considering the guy who built it didn’t know anything about web design. But looking at it now, there are some things that drive me crazy about it. Little things, really, but here’s a list of them:

该页面的设计本质上没有什么坏处。 看起来不错，特别是考虑到构建它的人对Web设计一无所知。 但是现在来看，有些事情使我对此感到疯狂。 确实有一些小东西，但是下面是它们的列表：

• The body font is just slightly too small (14px).
• The spacing is inconsistent. Look at the spacing around the horizontal rules in particular.
• The horizontal rules aren’t consistent. Either they should all fade or none should, not this weird half-assed thing.
• There is a poor use of width. This was an attempt to make the site responsive by simply refusing to get wider than a certain point, instead putting massive white margins at the side. Not great.
• The top header is left-aligned, which is just weird.
• There’s two horizontal rules at the bottom of the page. Why? Because I sucked at code, that’s why.
• While we’re at the bottom of the page, the copyright license at the bottom is left-aligned for no good reason.
• The design is heavy. The biggest problem here is that the headers are just way too heavy, which totally undermines the otherwise good use of empty space.

• 主体字体略微太小（14px）。
• 间距不一致。 尤其要注意水平尺周围的间距。
• 水平规则不一致。 它们要么全部消失，要么都不消失，而不是这种奇怪的半资产。
• 宽度使用不佳。 这是一种尝试，通过简单地拒绝将宽度扩大到超过某个特定点，而不是在侧面放置大量白色边距来使站点具有响应能力。 不是很好。
• 顶部标头是左对齐的，这很奇怪。
• 页面底部有两个水平规则。 为什么？ 因为我很烂代码，所以。
• 当我们位于页面底部时，底部的版权许可没有充分的理由就左对齐。
• 设计很重。 这里最大的问题是标头太重了，这完全破坏了原本对空白空间的良好利用。

The other page that really drove me nuts was the old ‘About Me’ page. For a page that was supposed to sell me, it did a truly lousy job. Take a look:

另一个让我发疯的页面是旧的“关于我”页面。 对于应该卖给我的页面，它确实做得很糟糕。 看一看：

My old ‘About Me’ page.

我以前的“关于我”页面。

The text was short and didn’t really say anything about me. Let’s not even get started on the weirdly pretentious idea I had to place a quote beside the body text. I think I just liked the way it looked. Don’t get me wrong, Neil Gaiman is a genius and The Sandman is a great work of modern fiction (go read it). But it looks really out of place there.

文字很短，并没有对我说什么。 我们什至不开始使用我必须在正文旁边加上引号的古怪的想法。 我想我只是喜欢它的外观。 别误会，尼尔·盖曼（Neil Gaiman）是一位天才，而桑德曼（Sandman）是现代小说的伟大作品（请阅读）。 但是它看起来确实不合适。

The final problem is the tech. I was using the Skeleton CSS framework (see how much of my design I ‘borrowed’ from there?). The problem is that Skeleton is essentially dead and has been for a year. That doesn’t exactly inspire confidence. So it was time to move to something newer. And shinier.

最终的问题是技术。 我正在使用Skeleton CSS框架（看看我从那里“借了”多少设计？）。 问题在于，骨架本质上已经死了，已经一年了。 那并不能完全激发信心。 因此，该到了更新的时候了。 和更加闪亮。

新的 (The New)

So what did I want from the new design? Minimalism is still the way I wanted to go, because it’s the saving grace of bad designers (like myself). Great designers can do great work using minimalism, but lesser designers can avoid shooting themselves in the foot. That’s awesome for me. So minimal and nearly-flat was the way I decided to go.

那么我想从新设计中得到什么呢？ 极简主义仍然是我想走的路，因为它是糟糕的设计师（例如我自己）的救赎之恩。 优秀的设计师可以使用极简主义来完成出色的工作，但是次要的设计师可以避免脚踏实地。 对我来说太棒了。 因此，我决定走最小的道路，几乎是平坦的。

I also wanted a CSS framework (though I ended up using very little of it, and could probably have avoided it altogether). Because I really didn’t need much, I decided to go for small. For that reason, I chose Pure.

我还想要一个CSS框架（尽管我最终很少使用它，并且可能完全避免了它）。 因为我真的不需要太多，所以我决定花一点钱。 因此，我选择了Pure 。

The first question was the colour scheme. Fitting with minimalism, I wanted predominantly greyscale, but with an accent colour I could use to highlight things. Given the colour used in my logo, there was only one choice: the colour I’m now calling ‘Lukasa Purple’ (#870e87, if you’re interested). And it would be used sparingly: in the end, only on the header and the sidebar links (to suggest ‘clickability’). Finding a sidebar grey that worked with the purple was a bit of work (big thanks to Andrey Petrov for tips with that), but in the end I managed to find one I liked.

第一个问题是配色方案。 为了达到极简主义，我主要希望使用灰度，但是我可以使用带有强调色的颜色来突出显示事物。 鉴于徽标中使用的颜色，只有一种选择：我现在将其称为“ Lukasa Purple”（如果您感兴趣，请使用＃870e87）的颜色。 而且它会很少使用：最后，仅在标题和侧边栏链接上（建议“可点击性”）。 找到适合紫色的侧边栏灰色有点麻烦 （这要感谢Andrey Petrov的技巧），但最终我设法找到了我喜欢的。

Next, fonts. I used Google Web Fonts, and basically searched for a sans-serif that looked good large and at light font weights. I ended up choosing Titillium Web, which now adorns the headers of my page, looking all sharp, modern and graceful.

接下来是字体。 我使用了Google Web字体，并且基本上搜索的是无衬线字体，该字体看起来不错，字体重量很轻。 我最终选择了Titillium Web，它现在装饰了我页面的页眉，看起来十分清晰，现代且优美。

Then I tore everything out. Everything that was in the sidebar came out and I carefully tried to justify their existence. In the end all the social stuff was removed entirely (you can still find it on the ‘About Me’) page. On the other hand, the stuff I liked was accentuated. In particular, the SVG logo became way larger.

然后我把一切都撕了。 侧边栏中的所有内容均已显示，我仔细尝试了证明其存在的合理性。 最后，所有社交内容都被完全删除（您仍然可以在“关于我”中找到它）页面。 另一方面，我喜欢的东西被强调了。 尤其是SVG徽标变得更大了。

I removed the giant horizontal rule, and replaced the rules between posts with smaller horizontal rules that attracted less attention to themselves. Their purpose is not to make the page pretty, it’s to structure it, so they needed to be less garish than the previous purple ones.

我删除了巨大的水平规则，并用较小的水平规则替换了帖子之间的规则，这些水平规则对自己的关注较少。 他们的目的不是使页面漂亮，而是对其进行结构化，因此它们需要比以前的紫色页面少花哨。

And all of a sudden I found I was nearly done. A few little bits and bobs, like making the sidebar elements change colour when they get hovered over, and I was left with what you see now.

突然之间，我发现自己快完成了。 有一些点点滴滴，例如使侧栏元素悬停在其上时会改变颜色，而我留下的是您现在看到的内容。

Then I went in and rewrote the ‘About Me’ page. The biggest improvement on that whole page isn’t the new design or the extra detail, it’s the tone. The main header has changed from “About Me” to “Hi, I’m Cory”. That change in tone from formal to conversational has an unexpectedly large effect on how the whole page reads.

然后我进入并重写了“关于我”页面。 整个页面上最大的改进不是新设计或额外细节，而是基调。 主标题已从“关于我”更改为“嗨，我是科里”。 从正式语调到会话语调的变化对整个页面的阅读方式产生了意想不到的巨大影响。

加起来 (Summing Up)

翻译自: https://www.pybloggers.com/2013/07/big-redesign-time/

游戏设计如何设计冷却时间