4分鐘學(xué)會網(wǎng)頁樣式[譯]

Kylin_Mountain 發(fā)布于2019-08-01 15:40 / 2639人閱讀

摘要：編寫的內(nèi)容，就像你目前正在閱讀的文章，組成了超過的網(wǎng)頁。為這個(gè)文本內(nèi)容添加樣式將有一個(gè)很長的路要走。添加讓我們借這個(gè)機(jī)會，來提高文本格調(diào)。瞧按照網(wǎng)頁設(shè)計(jì)的基本原則，我們在短短幾分鐘內(nèi)設(shè)計(jì)了一個(gè)像樣的頁面。

比方說，你想要在自己網(wǎng)站上分享一個(gè)產(chǎn)品，或者是一個(gè)作品集，又或者僅僅只是一個(gè)靈感。在你發(fā)布到網(wǎng)上之前，你想讓它看起來有吸引力，專業(yè)，或者至少得看起來像那么回事。

那么你接下來該做什么呢？

文本

設(shè)計(jì)的目的是為了增強(qiáng)它所應(yīng)用到的內(nèi)容的表現(xiàn)形式。這看上去是顯而易見的事，但內(nèi)容是一個(gè)網(wǎng)站的主要元素，它不應(yīng)該在發(fā)布后才想到要調(diào)整。
編寫的內(nèi)容，就像你目前正在閱讀的文章，組成了超過90%的網(wǎng)頁。為這個(gè)文本內(nèi)容添加樣式將有一個(gè)很長的路要走。
讓我們假設(shè)你已經(jīng)完成了你想發(fā)布的內(nèi)容，同時(shí)已經(jīng)創(chuàng)建了一個(gè)空的style.css文件，什么是你可以寫的第一條規(guī)則？

居中

長文本很難解析，也因此不易閱讀。每行設(shè)置字符限制，可以大大提高大量文本的可讀性和吸引力。

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

在為文本容器添加了樣式后，為文本本身添加樣式可好？

字體

瀏覽器的默認(rèn)字體為Times，可看起來缺乏吸引力（主要是因?yàn)樗恰盁o樣式”字體）。切換到一個(gè)無襯線字體，如Helvetica或Arial可以大大提高你網(wǎng)頁的可讀性。

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

如果你堅(jiān)持要用襯線體，可以試試Georgia。
當(dāng)我們讓文本更具吸引力時(shí)，也需要讓它更具可讀性。

間隔

當(dāng)用戶覺得一個(gè)頁面崩壞的時(shí)候，通常來說都是間距問題。通過在文本周圍和文本內(nèi)設(shè)置適當(dāng)?shù)拈g距就可以增加頁面的吸引力。

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

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

雖然到目前為止布局已經(jīng)大大改善，但讓我們添加更多細(xì)節(jié)處理。

顏色和對比度

白色背景上的黑色文字看起來會比較扎眼。為文本選擇一款較軟一點(diǎn)的黑色，讓頁面閱讀起來更舒服。

body {
  color: #555;
}

為了保持一個(gè)良好的對比度，讓我們?yōu)?b>重要文本選擇一個(gè)更黑暗的陰影。

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

雖然大部分頁面在視覺上已經(jīng)有所提升，但是一些元素依然顯得格格不入，如代碼段。

平衡

只需要一些額外的調(diào)整就可以平衡頁面：

code,
pre {
  background: #eee;
}

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

pre {
  padding: 1em;
}

在這一點(diǎn)上，你可能想讓你的頁面脫穎而出，讓它更有個(gè)性。

主色調(diào)

大多數(shù)品牌都有一個(gè)主色調(diào)，作為視覺基調(diào)。在一個(gè)網(wǎng)頁上，這個(gè)主色調(diào)可以用來強(qiáng)調(diào)交互元素，如鏈接。

a {
  color: #e81c4f;
}

但是為了保持平衡/協(xié)調(diào)，我們還需要一些額外的顏色。

輔助色

主色調(diào)可以用更微妙的色調(diào)來補(bǔ)充，用于邊框，背景，甚至正文中。

body {
  color: #566b78;
}

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

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

已經(jīng)改變了色調(diào)，為什么不一并改變外形/字體...

自定義字體

由于文本是網(wǎng)頁的主要內(nèi)容，使用自定義字體能使頁面更加引人注目。
當(dāng)你可以嵌入自己的網(wǎng)頁字體或使用類似Typekit的在線服務(wù)時(shí)，讓我們使用免費(fèi)谷歌字體Roboto：

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

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

在通過自定義字體凸顯你的個(gè)性后，想讓頁面更加豐富多彩又怎么辦呢？

圖片和圖標(biāo)既可用來作為支持你的內(nèi)容的裝飾品，還可以在你想要傳達(dá)的信息中擔(dān)當(dāng)積極部分。

讓我們從Unsplash挑選一張漂亮的背景圖片來美化header。

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

讓我們借這個(gè)機(jī)會，來提高文本格調(diào)。

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

瞧！

按照網(wǎng)頁設(shè)計(jì)的基本原則，我們在短短幾分鐘內(nèi)設(shè)計(jì)了一個(gè)像樣的頁面。只剩下最后一件事啦...

分享愛！

GitHub下載鏈接

Facebook分享鏈接

Twitter分享鏈接

如果你想學(xué)習(xí)更過網(wǎng)頁設(shè)計(jì), 查看 MarkSheet, 我的免費(fèi) HTML 和 CSS 指南.
又或者你想馬上開始嘗試網(wǎng)頁設(shè)計(jì), 試試 Bulma, 這是我基于Flexbox的 CSS 框架.

總結(jié) - Web Design in 4 minutes

這篇文章介紹了基本的網(wǎng)頁設(shè)計(jì)過程和設(shè)計(jì)原則，一步步分解過程，讓剛開始接觸網(wǎng)頁設(shè)計(jì)的人，也可以很快找到感覺，希望這篇文章能在你剛接觸網(wǎng)頁設(shè)計(jì)不知所措的時(shí)，給到你些幫助。

感謝閱讀！

本文譯自2016年的《Web Design in 4 minutes》 - Jeremy Thomas，第一次翻譯，同時(shí)對原文有理解性改動，水平有限，歡迎提出意見。
本文轉(zhuǎn)載自：眾成翻譯
譯者：shery
鏈接：http://www.zcfy.cc/article/1237
原文：http://jgthms.com/web-design-in-4-minutes/?utm_source=tuicool&utm_medium=referral#share