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

我們已經在短短幾分鐘之內設計了個得體的頁面,這些都是遵循基本的網站設計原則,那麽,還有 最後一件事 等著我們去做~

文章來源：