這個部落格長什麼樣子:版面設計筆記

發表於 字數總計:545 閱讀時長:2 分鐘

這個站的版面參考了兩個來源:一個是 Apple 官網的區塊節奏與留白,另一個是幾個技術部落格的文章列表與時間線。把兩者合起來,就是你現在看到的樣子。

版面的三個決定

做版面的時候,其實只做了三個比較關鍵的決定。

一、雙欄,側邊欄放右邊

主要內容在左邊,側邊欄在右邊。閱讀時視線從左上開始,把最重要的東西放在視線第一個落點,側邊欄則負責補充作者資訊、分類和標籤。在寬度小於 1068px 時,文章頁的側邊欄會自動隱藏,讓內文佔滿整個畫面。

二、純文字卡片

文章列表不放縮圖,每張卡片只有分類、標籤、標題、兩行摘要,以及底部的發布日期與字數。卡片本身有比較深的投影,滑鼠移上去會整張浮起來、標題轉成藍色,而且整張卡片都可以點。

三、置頂文章獨立成一個區塊

首頁最上方單獨放置頂文章,底下才是最新文章。想一次看完全部,選單的「文章」是一個依年月分組的時間線。

配色

主色是 Apple 藍,搭配淺灰底色。所有顏色都寫成 CSS 變數,要換色只要改幾行:

:root {
  --accent: #0071E3;
  --link:   #0066CC;
  --bg:     #F5F5F7;
  --text:   #1D1D1F;
}

深色模式是獨立的一組變數,會記住你的選擇,也會跟隨系統設定。點右上角的月亮就能切換。

文章頁

單篇文章的上方是一整片漸層封面,放分類、標籤、標題和發表資訊;右側有作者卡與文章目錄,目錄會跟著捲動高亮目前章節;導覽列右上角則顯示閱讀進度。

還可以調整的地方

  • 側邊欄的暱稱、自我介紹,以及首頁大標與副標 → 外觀 → 自訂 → 個人資訊與首頁標題
  • 選單 → 外觀 → 選單
  • 搜尋可以按 ⌘K(Windows 是 Ctrl K)或斜線叫出來

這篇是示範文章,看完可以直接刪掉。

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *