4分钟网页设计（译文）

4分钟网页设计

作者：Jeremy Thomas

译者：张宝

原文地址：http://jgthms.com/web-design-in-4-minutes/

译文地址：http://123.56.108.61/web-design-in-4-minutes/（推荐）

 

---

 

我假设你有一个产品，文件夹或者仅仅是一个想法，想发布在自己的网站上与大家分享，在这之前，你想让它看起来迷人、专业至少看上去体面些。那么你要做的第一件事是什么?

 

1. 内容（Content）

 

设计的目的，是为了提升你提供的内容的展示效果。 听起来可能是废话, 但是内容确实是一个网站的基本元素，你在建站前就应该考虑它。书写像你现在读到的段落内容, 组成了一个网站 90% 还要多的部分，给这些文本内容添加样式的规则也有很多。我假设你已经准备好了内容，并且刚刚建立好一个空的 style.css 文件, 那么你要书写的第一条规则是什么?

 

2. 居中（Centering）

 

长文本很难解析，也很难阅读。 设置每一行可以显示字数的限制，很大程度上能提升文本墙的可读性和吸引力。

 

body {
    margin: 0 auto;
    max-width: 50em;
}

给文本块添加完样式后, 怎样给文字本身添加样式呢?

 

3. 字体（Font family）

 

浏览器默认字体是“Times”，看上去没有吸引力(大多是因为它是“无样式”字体)。转换到 sans-serif 字体，像 “Helvetica” 或者 “Arial” 可以很大程度上提升页面的观看效果。

 

body {
    font-family: "Helvetica", "Arial", sans-serif;
}

如果你想坚持用 serif 字体，可以试试 "Georgia"。

 

我们已经让文本看起来更加有吸引力了， 让我们再把它变得可读性更好一些。

 

4. 间距（Spacing）

 

当用户觉得页面看起来“很烂”时， 通常是间距的问题。给你的内容周围和内容本身提供间距可以增加页面的吸引力。

 

body {
    line-height: 1.5;
    padding: 4em 1em;
}

h2 {
    margin-top: 1em;
    padding-top: 1em;
}

 

到现在为止，布局发生了很大的改观，让我们再做一些细微的改变。

 

5. 颜色和对比（Color & contrast）

 

白色背景下的黑色字很刺眼，可以为网页文本选择较为柔和的黑色让网页读起来更舒服些。

 

body {
    color: #555;
}

 

为了保持适度的对比，我们选择较深的颜色标记重要的文字。

 

h1,
h2,
strong {
    color: #333;
}

现在，页面中的大部分都已经得到改善了, 可还有一些原 （比如代码段）看起来还有点不合适.

 

6. 平衡（Balance）

 

只需要花费额外的几步，就可以调整页面的平衡:

 

code,
pre {
    background: #eee;
}

code {
    padding: 2px 4px;
    vertical-align: text-bottom;
}

pre {
    padding: 1em;
}

 

到这个节骨眼上了，你也许想让你的页面突出并且有特色。

 

7. 基础颜色（Primary color）

 

许多商标都有基础颜色，扮演着一种视觉上的强调。在一个网站上，这种强调被用来提供给可交互的元素，像超链接。

 

a {
    color: #e81c4f;
}

但是为了保持平衡，我们还需要一些额外的颜色。

 

8. 第二颜色（Secondary colors）

 

强调颜色还可以根据具体情况，分成更多细微的颜色，用在边框、背景甚至是网页的文本。

 

body {
    color: #566b78;
}

code,
pre {
    background: #f5f7f9;
    border-bottom: 1px solid #d8dee9;
    color: #a7adba;
}

pre {
    border-left: 2px solid #69c;
}

 

已经改变了颜色, 为什么不改变形状呢...

 

9. 自定义字体（Custom font）

 

既然文本是一个网页的主要内容，使用自定义字体能给予网页更加引人注意的特征。

 

你可以内嵌你自己的网页字体或者使用线上的服务，比如 Typekit。下面我们采用免费的 Google Fonts 服务的 “Roboto” 字体 :

 

@import 'https://fonts.googleapis.com/css?family=Roboto:300,400,500';

body {
    font-family: "Roboto", "Helvetica", "Arial", sans-serif;
}

 

通过文本提升网页特色后, 我还要添加更多的内容...

 

 

图片和图表可以当做装饰品支持你的页面内容，或者灵活地加入你想传递的信息。

 

让我们用超赞的背景图片来改变我们的网页头部。

 

header {
    background-color: #263d36;
    background-image: url("header.jpg");
    background-position: center top;
    background-repeat: no-repeat;
    background-size: cover;
    line-height: 1.2;
    padding: 10vw 2em;
    text-align: center;
}

再加上 logo。

 

header img {
    display: inline-block;
    height: 120px;
    vertical-align: top;
    width: 120px;
}

再提升一下文本样式。

 

header h1 {
    color: white;
    font-size: 2.5em;
    font-weight: 300;
}

header a {
    border: 1px solid #e81c4f;
    border-radius: 290486px;
    color: white;
    font-size: 0.6em;
    letter-spacing: 0.2em;
    padding: 1em 2em;
    text-transform: uppercase;
    text-decoration: none;
    transition: none 200ms ease-out;
    transition-property: color, background;
}

header a:hover {
    background: #e81c4f;
    color: white;
}

 

看！我们在短短的几分钟之内就设计好了一张页面，遵循网页设计的基本原则。

如果你想学习更多网页设计的知识，可以查看 MarkSheet —— 我提供的免费 HTML 和 CSS 教程。

或者你想马上开始，可以试试 Bulma —— 我开发的基于 Flexbox 的 CSS 框架。

 

感谢阅读！

 

（完）