不同類型網站信息呈現的思路小記

現在看到一箇網站，想的是「這些內容怎樣組織構建的，我的網站能吸收什麼」，今天看到了 XAOXUU 博客，主題是他自己設計的，設計理念非常有意思。以下和其他網站對比起來看看。

頁眉

博客板塊中的切換標籤直接在文章上方，分爲最近、分類、標籤、歸檔，四者邏輯是統一的，都是索引。不同板塊的切換靠的是左上角的標籤，分爲博客、項目、隨記、動態四大板塊，四者邏輯是統一的，都是板塊。

之所以要把這箇網站拿出來說說，是因爲大部分博客站的頁眉邏輯都不一致，比如 土木罈子 的頁眉：

分爲簡介、存檔、公益、留言、聯繫、鏈接、關於，其中存檔是索引，其他都是零散站務頁面，至於索引，則比較難找。不過因爲博客站構造簡單，一般只有「博客」一箇板塊，也就用不著板塊導航了。

我觀念中，頁眉是用來導航的，頁腳纔是用來放零碎站務頁面的，比如關於、招聘、法務、使用條款等，土木壇子 頁眉的內容應該放在頁腳沒有任何批判的意思，只是用來舉例。來看兩箇大網站的頁眉：

AEON 的頁眉左邊是學科索引，右邊是類型板塊文章、視頻、音頻，加上最重要的索引最夯和零散站務關於。

TheVerge 則全都是板塊科技、評測、科學、娛樂。

赫赫文王的頁眉密度比較高，左邊是旗下網站和重要的零散站務稿約，右側是九大板塊，中間是主站名和大板塊文章、知識、通訊、專欄、文王在天。

首頁

XAOXUU 一進入首頁直接就是博客頁，沒有絲毫的動作浪費，大部分博客網站也是這樣的。

AEON 的主頁很簡單，就是按時間排序的文章，用 grid 佈局。

Big Think 是家科普媒體，文章都很短小，但此也很簡單。其中有種索引叫 Big Question，根據話題聚合起相關內容，比如 Will true AI turn against us?。先是導語，右邊是封面文章，接下來是觀點摘錄，接下來是不同方面的文章。排版上，一般網站都在標題下面用小灰字作文章介紹，Big Think 則是在標題右邊用加引號大字的形式，看上去就像引用了某種觀點。

TheVerge 改版後的設計非常激進有新意，乍看眼花撩亂，我都是看了好幾遍纔理解。分兩條線索，主線 是連貫的「故事線」Storystream，完全按照時間流來排列，配上標題和簡介，信息來源以自家文章爲主，也包括各大媒體，乍一看觀感真的很像推特。我想了想，本質上是集成了本站最近文章與推薦信息流，將相關信息全都集中在一起。典型的推薦信息流是 安妮薇時報見下圖。TheVerge 的獨特之處就在於集成了二者，打破了形式上的邊界。站在讀者的視角，這正是最好的狀態，讀者並不在乎是你的網站還是其他網站，只要是同類信息就行。

而 副線 則是不同的卡片，分爲必讀、技術、播客、最夯、評測、科學、創作者七箇部分，不同的板塊用橫線隔開。起初我還以爲時間線也是被隔開的，後來發現不是，橫線只是用來分隔卡片的，時間線則是連續的。卡片實際上就是傳統的最近文章。首頁刷完以後就是故事線歸檔，沒有卡片了。

赫赫文王的思路是在首頁呈現所有的板塊，每箇板塊大致上是呈現最新文章。想了想，如果要模仿 TheVerge，可以把刷微博、史網拆分出來放到主頁時間流。但不太現實，赫赫文王不是資訊站，如果把推薦閱讀放到主頁，那本站文章就沖淡得無影無蹤了。

邊欄

這是 XAOXUU 的邊欄，將文件目錄和本文目錄結合在一起了，非常 accessible。

但文件非常多的話恐怕就不適合了，需要將二者分開，赫赫文王就是這樣，左邊是文件目錄，右邊是本文目錄。