[譯] 4 分鐘學會網頁樣式
- 原文地址: ofollow,noindex" target="_blank">Web Design in 4 minutes
- 原文作者: Jeremy Thomas
- 譯者: Shery
4 分鐘學會網頁樣式
比方說,你想要在自己網站上分享一個產品,或者是一個作品集,又或者僅僅只是一個靈感。在你釋出到網上之前,你想讓它看起來有吸引力,專業,或者至少得看起來像那麼回事。
那麼你接下來該做什麼呢?
文字
設計的目的是為了增強它所應用到的內容的表現形式。這看上去是顯而易見的事,但內容是一個網站的主要元素,它不應該在釋出後才想到要調整。
編寫的內容,就像你目前正在閱讀的文章,組成了超過 90% 的網頁。為這個文字內容新增樣式將有一個很長的路要走。
讓我們假設你已經完成了你想釋出的內容,同時已經建立了一個空的 style.css
檔案,什麼是你可以寫的第一條規則?
居中
長文字很難解析,也因此不易閱讀。每行設定字元限制,可以大大提高大量文字的可讀性和吸引力。
body { margin: 0 auto; max-width: 50em; }
在為文字容器添加了樣式後,為文字本身新增樣式可好?
字型
瀏覽器的預設字型為 Times
,可看起來缺乏吸引力(主要是因為它是“無樣式”字型)。切換到一個無襯線字型,如 Helvetica
或 Arial
可以大大提高你網頁的可讀性。
body { font-family: "Helvetica", "Arial", sans-serif; }
如果你堅持要用襯線體,可以試試 Georgia
。
當我們讓文字更具吸引力時,也需要讓它更具可讀性。
間隔
當用戶覺得一個頁面 崩壞
的時候,通常來說都是 間距
問題。通過在文本週圍和文字內設定適當的間距就可以增加頁面的吸引力。
body { line-height: 1.5; padding: 4em 1em; } h2 { margin-top: 1em; padding-top: 1em; }
雖然到目前為止佈局已經大大改善,但讓我們新增更多細節處理。
顏色和對比度
白色背景上的黑色文字看起來會比較扎眼。為文字選擇一款較軟一點的黑色,讓頁面閱讀起來更舒服。
body { color: #555; }
為了保持一個良好的 對比度
,讓我們為 重要
文字選擇一個更黑暗的陰影。
h1, h2, strong { color: #333; }
雖然大部分頁面在視覺上已經有所提升,但是一些元素依然顯得格格不入,如程式碼段。
平衡
只需要一些額外的調整就可以平衡頁面:
code, pre { background: #eee; } code { padding: 2px 4px; vertical-align: text-bottom; } pre { padding: 1em; }
在這一點上,你可能想讓你的頁面脫穎而出,讓它更有個性。
主色調
大多數品牌都有一個 主色調
,作為視覺基調。在一個網頁上,這個主色調可以用來強調互動元素,如 連結
。
a { color: #e81c4f; }
但是為了保持平衡/協調,我們還需要一些額外的顏色。
輔助色
主色調可以用更微妙的色調來補充,用於邊框,背景,甚至正文中。
body { color: #566b78; } code, pre { background: #f5f7f9; border-bottom: 1px solid #d8dee9; color: #a7adba; } pre { border-left: 2px solid #69c; }
已經改變了色調,為什麼不一併改變外形/字型...
自定義字型
由於文字是網頁的主要內容,使用 自定義字型
能使頁面更加引人注目。
當你可以嵌入自己的網頁字型或使用類似 Typekit 的線上服務時,讓我們使用免費 谷歌字型 Roboto
:
@import 'https://fonts.googleapis.com/css?family=Roboto:300,400,500'; body { font-family: "Roboto", "Helvetica", "Arial", sans-serif; }
在通過自定義字型凸顯你的個性後,想讓頁面更加豐富多彩又怎麼辦呢?
圖片和圖示既可用來作為支援你的內容的裝飾品,還可以在你想要傳達的資訊中擔當積極部分。
讓我們從 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; }
讓我們借這個機會,來提高文字格調。
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 框架。
總結 —— 4 分鐘學會網頁樣式
這篇文章介紹了基本的網頁設計過程和設計原則,一步步分解過程,讓剛開始接觸網頁設計的人,也可以很快找到感覺,希望這篇文章能在你剛接觸網頁設計不知所措的時,給到你些幫助。
感謝閱讀!
本文譯自 2016 年的 《Web Design in 4 minutes》 - Jeremy Thomas 。