集智學園重大改版終於釋出。
這次改版完全替換了原來傳統頁面,使用一種全新的高維展示方式來展示網站的課程
如何才能訪問到新版本呢?我們提供了兩個途徑
-
你是天選之子,小概率自動被分流到了新版本
-
你的智商超過愛因斯坦,發現了新版本的隱蔽入口
問:我們為什麼要把網站改成這樣?使用起來可真不習慣
答:這次的改版本質是維度的擴充套件,理論上所有一維列表可以表現的,在高維空間上都能表現,而且高維還有很多獨特的優勢。所以我們相信在深度使用後,你會在新版本無法自拔(不要問我是怎麼知道的)
問:那新版本具體都有哪些優勢?
答:不要著急,我這就說
懶癌患者太長不看版:
-
使用二維展示方式,展示的資訊更多維,更豐富。
-
使用層級化展示,每個層級有對應的資訊重點,在展示更多資訊的同時,不產生視覺負擔。
-
高手可便捷地自行探索學習路徑,同時也為初學者提供了推薦的學習路徑。
詳細文字版:
突破傳統列表展示產品的方式,把產品放在更高維的(二維)空間
在一維列表的展示體系中,想要展示產品資訊,通常會在頁面不同位置的佈局,或者突出文字的顏色和大小,來體現資訊的重要程度:比如重要的產品排在前面,比如優惠價格會標紅等等。
但一維列表本身的侷限性,就決定了它無法從更多維度,使用視覺化的方式展示產品資訊,比如產品之間的相關性,比如產品上新和優惠同時存在標識就會混亂等等
而在高維空間,可操作性就強的多。比如在我們的產品中,在一個介面中就表示了多個方面的資訊
我們的介面中出了必備的課程名稱等基本資訊之外,還額外包含以下幾個重要資訊:
-
課程所屬類別
-
點位的座標代表了課程之間的相關性
-
點的大小代表課程的重要程度(熱度,上新時間等幾個指標的綜合結果)
-
閃爍的點代表推薦課程
-
白色高亮的點代表已學課程
-
從當前課程文字中提煉出的關鍵詞
-
......
別擔心有這麼多資訊會眼花,其實下面一張簡單的區域性圖就已經幾乎涵蓋了上面所說的大部分資訊
而對於“資訊的展示量”,和“人腦在一瞬間所能接受的資訊量”這兩點之間的矛盾,我們也從產品設計上給出瞭解決方案。
層級化的資訊展示形式,避免資訊太多產生負擔
當同時出現的資訊量大於人腦處理的能力時,人就會失去視覺焦點,即“太多的資訊等於沒有資訊”。所以,如何保證在發揮高維空間有豐富資訊這一優勢的同時,還要避免因為資訊過多而感到混亂,這是一個產品概念上要解決的問題。
為了平衡“資訊多”和“感到混亂”的矛盾,我們在產品中引入了“層級化”的概念。這也使得我們的產品越發地像一個“知識地圖”
首先,在通常情況下我們要表示一個產品所屬一個類別,會使用頁面巢狀的形式來表示層級關係,比如類別頁—>內容列表頁就是一個典型的層級巢狀。下圖一個版面展示了一個類別的內容,在這種產品展示形態中,切換類別時需要切換頁面不說,不同類別的內容之間也沒有顯著的關聯。
傳統類別和內容的佈局
而在我們的空間中,無需通過頁面跳轉,就能把想要表達的巢狀關係展示出來,充分利用了當前頁面的空間,也減少路由跳轉。
另一個很重要的點就是,我們能在同一個介面下,看到不同類別內容的相關性資訊
-
在全域性檢視,展示全域性的類別資訊,此時課程名稱不可見;
-
當放大(或點選)某個區域性,則隱去全域性類別,顯示區域性的課程資訊。
-
同時,無論在什麼視角,我們都能在同一個介面下,看到不同類別內容的相關性資訊
另外,想必心細的同學已經發現,對某節課程進行放大操作時,還會有更多的細節資訊顯示出來:
1. 檢視中有很多課程的時候,顯示的是課程的名稱縮寫
2. 放大到一定程度,顯示出課程的全稱
3. 再繼續放大,逐漸顯示出這門課程的更多關鍵詞資訊
4. 放大到一定程度,自動開啟課程詳情視窗
下圖是逐漸放大的過程步驟
可根據課程相關性探索學習路徑,同時也為初學者提供學習路徑
在我們產品中,所有的課程都是按照內容相似性通過聚類演算法生成的座標,說人話就是,位置相近的點,內容上也相近。
這就意味著,對於一個在這個領域已經較熟悉的探索者來說,他完全可以根據課程的資訊,以及課程之間的相關性,利用我們的佈局優勢,快速規劃出一條適合自己的學習路徑。
而對於一個不具備規劃學習路徑的初學者,我們也提供了一些推薦的學習路徑。
-
在搜尋框嘗試搜尋關鍵詞。
-
選擇某條路徑,在介面上顯示動態的學習路徑
你是探索者嗎,請盡情前往集智學園探索吧~
接下去,我會發布一系列新版本的技術篇,盡情關注