文章多的網站怎麼排版？雜誌風、新聞風版面的優缺點

公司網站開始寫文章、放最新消息之後，很快就會遇到一個問題：文章越來越多，首頁和文章列表變成一長串清單，舊文章沉到最下面，再也沒有人看。

新聞網站和雜誌網站每天都在處理這個問題，它們的版面很值得參考。我們看了一個新聞網站和三個雜誌型的版型示範站，整理出 5 個區塊的排法。每個例子都附上連結，網站上的照片和文字屬於各自的網站，這篇只描述版面的做法。

1. 分類：先想好再寫

世界新聞網的頁首，是一整排的分類：即時、美國、移民、中國、台灣、國際、娛樂、生活、運動……因為讀者在北美各地，紐約、洛杉磯、舊金山這些地區也各有一個分類。首頁往下捲，也是依分類排列，每個分類一個區塊。

Newspaper 版型的分類頁示範，分類名稱下面有一排小標籤，可以再切換到子分類，右邊還有一個切換排序方式的選單。

公司網站可以學的：文章的分類要在寫之前先想好，而且是依客人想找的東西來分，不是依公司內部的部門來分。中小企業的網站通常 4 到 6 個分類就夠了，太多分類，每個分類只有一兩篇，看起來反而空。

2. 頭條區：讓最重要的幾篇被看到

• 世界新聞網首頁的中間是一張可以輪播的大照片，標題直接壓在照片上，左邊一欄是即時新聞的標題列表，右邊放廣告。
• Newspaper 的分類頁，最上面並排 4 張大圖，每張照片疊上不同顏色的漸層，標題寫在照片上；下面才是一般的文章列表。

公司網站可以學的：不一定每篇都要照時間排。挑 3 到 4 篇最能代表你們專業、客人最常問的文章，固定放在文章頁的最上面，下面再接最新的文章。

3. 文章卡片：格式一致，才看得下去

Newspaper 的文章列表是兩欄的卡片：一張照片、照片角落一個分類標籤、兩行標題、作者和日期。每一張卡片的照片比例都一樣，整頁看起來很整齊。

公司網站可以學的：

• 每篇文章都要有封面圖，比例統一（例如都用 16:9）。
• 標題控制在兩行以內，太長的標題在卡片上會被切掉。
• 卡片上標出分類，讀者一眼就知道這篇在講什麼。

4. 側欄和頁尾：把舊文章再帶出來

• Newspaper 的側欄有「必讀」文章列表；頁尾有三欄：編輯精選、熱門文章、熱門分類，每個分類旁邊寫出有幾篇文章。
• TrueMag 版型的文章頁，側欄用橘色和咖啡色兩個色塊，分別放「最多人看」和「最多人留言」的文章。

這些區塊的作用都一樣：讓已經發表很久的好文章，還有機會被看到。

公司網站可以學的：側欄或文章最後，放「熱門文章」和「同分類的文章」。另外，新聞網站的側欄大多放廣告，公司網站可以把這個位置換成你自己的服務介紹和「免費諮詢」按鈕，看完文章的人才知道下一步。

5. 文章內頁：讀起來舒服最重要

TrueMag 的文章頁，左邊一小欄是作者的大頭照和簡介，中間是標題、副標、一段影片和內文，內文中間穿插一段放大的引言，文章最後是「你可能也會喜歡」的相關文章和留言區。

SmartScreen 版型的文章頁走的是另一種路線：整個背景是一張全螢幕的風景照，左邊是半透明的深色選單，文章放在中間一個淺色的欄位裡。很有氣氛，但背景照片一直在旁邊，比較適合文字少、照片多的攝影或個人部落格。

公司網站可以學的：

• 內文一行不要太寬，字要夠大（本站內文用 20 像素）。
• 每篇文章最後放相關文章，以及和這篇有關的服務連結。
• 署名寫出作者是誰、有什麼專業，Google 和讀者都比較信任。

要注意：我們打開 TrueMag 這篇示範文章時，裡面嵌入的影片已經被原作者下架，畫面只剩一個「影片無法播放」的黑框。文章裡嵌入別人的影片、貼文，對方一刪除就會壞掉，舊文章要定期檢查。

手機上怎麼看

這幾個網站的手機版都改成一欄：Newspaper 是第一篇一張大圖，下面的卡片一篇一篇往下排；世界新聞網則把標題列表排得很緊湊，一屏可以看到很多則。

手機上的文章列表，最重要的是照片和標題要能點（不是只有「閱讀更多」那幾個字才能點），而且每一張卡片之間要有足夠的間距，不會按錯。

文章只有幾十篇，怎麼簡化

新聞網站一天幾十則，所以需要頭條、即時、各分類專區。一般公司一個月寫幾篇，用不著那麼複雜：

1. 文章總覽頁：上面一排分類按鈕，下面依分類各放最新的幾篇。
2. 分類頁：最上面固定 2 到 3 篇精選，下面是依時間排的卡片。
3. 文章頁：內文、作者、相關文章、服務連結。

文章之間的互相連結，也會幫助 Google 了解你的網站，細節可以看〈WordPress 內部連結怎麼做〉。網站要怎麼寫出客人想看的內容，可以看〈網站文案怎麼寫〉。想參考別人的版面又怕太像，可以先看〈參考別人的網站，學什麼、不學什麼？〉。

正威可以幫什麼

正威網路行銷是 25 年經驗的基隆網頁設計工作室，也提供台北網頁設計與全台灣的網站服務。做網站時，我們會依你要寫的文章規劃分類和文章頁的版面，讓文章越寫越多也不會亂。

想開始寫文章，或現在的文章頁越來越亂？歡迎免費諮詢。