集智學園知識星空——產品介紹篇

集智學園重大改版終於發佈。

此次改版徹底替換了原來傳統頁面，使用一種全新的高維展現方式來展現網站的課程

如何才能訪問到新版本呢？咱們提供了兩個途徑

1. 你是天選之子，小几率自動被分流到了新版本

2. 你的智商超過愛因斯坦，發現了新版本的隱蔽入口

問：咱們爲何要把網站改爲這樣？使用起來可真不習慣

答：此次的改版本質是維度的擴展，理論上全部一維列表能夠表現的，在高維空間上都能表現，並且高維還有不少獨特的優點。因此咱們相信在深度使用後，你會在新版本沒法自拔（不要問我是怎麼知道的）

問：那新版本具體都有哪些優點？

答：不要着急，我這就說

懶癌患者太長不看版：

1. 使用二維展現方式，展現的信息更多維，更豐富。

2. 使用層級化展現，每一個層級有對應的信息重點，在展現更多信息的同時，不產生視覺負擔。

3. 高手可便捷地自行探索學習路徑，同時也爲初學者提供了推薦的學習路徑。

詳細文字版：

突破傳統列表展現產品的方式，把產品放在更高維的（二維）空間

在一維列表的展現體系中，想要展現產品信息，一般會在頁面不一樣位置的佈局，或者突出文字的顏色和大小，來體現信息的重要程度：好比重要的產品排在前面，好比優惠價格會標紅等等。

但一維列表自己的侷限性，就決定了它沒法從更多維度，使用可視化的方式展現產品信息，好比產品之間的相關性，好比產品上新和優惠同時存在標識就會混亂等等

而在高維空間，可操做性就強的多。好比在咱們的產品中，在一個界面中就表示了多個方面的信息

咱們的界面中出了必備的課程名稱等基本信息以外，還額外包含如下幾個重要信息：

1. 課程所屬類別

2. 點位的座標表明了課程之間的相關性

3. 點的大小表明課程的重要程度（熱度，上新時間等幾個指標的綜合結果）

4. 閃爍的點表明推薦課程

5. 白色高亮的點表明已學課程

6. 從當前課程文本中提煉出的關鍵詞

7. ......

別擔憂有這麼多信息會眼花，其實下面一張簡單的局部圖就已經幾乎涵蓋了上面所說的大部分信息

而對於「信息的展現量」，和「人腦在一瞬間所能接受的信息量」這兩點之間的矛盾，咱們也從產品設計上給出瞭解決方案。

層級化的信息展現形式，避免信息太多產生負擔

當同時出現的信息量大於人腦處理的能力時，人就會失去視覺焦點，即「太多的信息等於沒有信息」。因此，如何保證在發揮高維空間有豐富信息這一優點的同時，還要避免由於信息過多而感到混亂，這是一個產品概念上要解決的問題。

爲了平衡「信息多」和「感到混亂」的矛盾，咱們在產品中引入了「層級化」的概念。這也使得咱們的產品愈加地像一個「知識地圖」

首先，在一般狀況下咱們要表示一個產品所屬一個類別，會使用頁面嵌套的形式來表示層級關係，好比類別頁—>內容列表頁就是一個典型的層級嵌套。下圖一個版面展現了一個類別的內容，在這種產品展現形態中，切換類別時須要切換頁面不說，不一樣類別的內容之間也沒有顯著的關聯。

傳統類別和內容的佈局

而在咱們的空間中，無需經過頁面跳轉，就能把想要表達的嵌套關係展現出來，充分利用了當前頁面的空間，也減小路由跳轉。

另外一個很重要的點就是，咱們能在同一個界面下，看到不一樣類別內容的相關性信息

1. 在全局視圖，展現全局的類別信息，此時課程名稱不可見；

2. 當放大（或點擊）某個局部，則隱去全局類別，顯示局部的課程信息。

3. 同時，不管在什麼視角，咱們都能在同一個界面下，看到不一樣類別內容的相關性信息

另外，想必心細的同窗已經發現，對某節課程進行放大操做時，還會有更多的細節信息顯示出來：

1. 視圖中有不少課程的時候，顯示的是課程的名稱縮寫

2. 放大到必定程度，顯示出課程的全稱

3. 再繼續放大，逐漸顯示出這門課程的更多關鍵詞信息

4. 放大到必定程度，自動打開課程詳情窗口

下圖是逐漸放大的過程步驟

可根據課程相關性探索學習路徑，同時也爲初學者提供學習路徑

在咱們產品中，全部的課程都是按照內容類似性經過聚類算法生成的座標，說人話就是，位置相近的點，內容上也相近。

這就意味着，對於一個在這個領域已經較熟悉的探索者來講，他徹底能夠根據課程的信息，以及課程之間的相關性，利用咱們的佈局優點，快速規劃出一條適合本身的學習路徑。

而對於一個不具有規劃學習路徑的初學者，咱們也提供了一些推薦的學習路徑。

1. 在搜索框嘗試搜索關鍵詞。

2. 選擇某條路徑，在界面上顯示動態的學習路徑

你是探索者嗎，請盡情前往集智學園探索吧～

接下去，我會發布一系列新版本的技術篇，盡情關注