四分钟交互式地了解Web设计基本规范:从零开始设计得体的我的网站

本文从属于笔者的Web 前端入门与最佳实践,本文只是文字化的概括,
请前往这里交互式的浏览整个文档与查看效果。
重要的事情说三遍,请移步这里
重要的事情说三遍,请移步这里
重要的事情说三遍,请移步这里

当你但愿分享一些产品、文件或者一个新的想法在你 本身的 网站上时,在你正式的发布网站以前,你须要把它打扮的漂漂亮亮,充满吸引力,不必定专业,可是至少要得体 .

那么咱们应该从 哪里 启动呢?若是你想了解我是怎么作的,那么请点击左边的连接

内容

别忘了, 设计 是为了更好地展现内容. 貌似这是一句废话,不过仍是要强调网站中 首要 的元素正是内容, 而不该该置若罔闻,放到最后.

咱们正在编写的内容,就好像你看到的这段话,占据了一个网站90%以上的部分,为文本内容添加合适的样式任重而道远.

假设你已经决定好了要展现的内容,而后建立了一个空白的 style.css 文件,那么 第一条自定义样式规则 会是啥呢?

居中

在单行中放置过长的文本会难以解析,而且难以 阅读. 为每行的单词数目设置一个上限有助于提高总体的可读性,让读者好像为文本创建了一个笆篱

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

咱们已经为 文本块设置了样式, 那么应该如何为 文本自己添加样式呢?

Font family

浏览器默认的字体是 "Times", 有时候看上去是如此的枯燥无味. 尝试使用 无衬线字体譬如 "Helvetica" 或者 "Arial" 可以提高你整个界面的感官

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

若是你打算使用衬线字体,试试 "Georgia".

咱们选择一些有趣的字体,可以让网站更有 吸引力, 下一步,就让咱们再 提升可读性.

王下邀月熊:这里原做者是为英文字体样式作了说明,我没有修改成中文样式,大概是懒吧,不过由于中文字体每每都比较大,建议使用font-spider等相似工具来抽取你所须要的字体

间隔

有时候用户会抱怨网站好像坏掉了,每每都是 间隔 的问题. 在你文档的 四周 与 内部都添加些间隔也可以美化你的网站.

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

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

​ 如今网站看上去好了很多了,布局方面提高了不少,下一步咱们进行些 细节的美化.

颜色 & 反差

白底黑字有时候会看起来很刺眼. 为body选择一个阴影较浅的字体会带来 温馨的 阅读体验.

body {
  color: #555;
}

同时为了保证较好地 反差, 咱们会为 重要的 单词选择使用深色的字体颜色

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

如今页面可视化感觉已经提高了很多, 而一些特殊的文本,譬如代码的显示 仍是不太合适.

和谐

只须要一些小小的操做就能让整个页面更加地和谐:

code,
pre {
  background: #eee;
}

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

pre {
  padding: 1em;
}

到这里你的页面已经达到了平均水平,咱们下面但愿给它一些独特的 标志.

原色

不少的品牌都会选用某个 primary color 做为其独特的标志,而在网站中,咱们每每在某些交互地元素,譬如连接上设置一些醒目的颜色.

a {
  color: #e81c4f;
}

一样是为了和偕,咱们须要添加 额外的色彩.

二次色

咱们能够为边、背景乃至于body字体颜色设置更多的个性化显示.

body {
  color: #566b78;
}

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

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

下面,咱们考虑来改造下字体的 形状...

自定义字体

上文中也提到过,文本是网站的主要内容,那么咱们设置一个 自定义的字体 会为页面添加更多明显的标志.

你能够选择使用相似于 Typekit这样的在线服务或者自定义些webfont, 咱们这里使用来自于 免费的 Google Fonts 服务的: "Roboto"

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

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

咱们已经为 文本作了不少改造, 那么应该如何添加 其余元素呢?...

Graphics 与 icons 也是不错的网站装饰物,可以提高你文本的感染力,或者更积极地传递你在文本中包含的内容

咱们首先为页首设置 背景图 ,这张图片选自 Unsplash

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;
}

And voilà!

咱们已经在短短几分钟以内设计了个得体的页面,这些都是遵循基本的网站设计原则,那么,还有 最后一件事 等着咱们去作~