四分鐘交互式地瞭解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à!

咱們已經在短短几分鐘以內設計了個得體的頁面,這些都是遵循基本的網站設計原則,那麼,還有 最後一件事 等着咱們去作~