在我們日常的設計過程中總會遇到些一時難以解決的問題：這個功能放在這裡似乎不太對，可是其他位置更不對；在修復一些體驗問題時發現

頁面結構

在長期的迭代後做出這種修改的代價過大；所有的東西都被擺在了重要的位置，那真正重要的東西應該在哪裡？當一個使用者來到一個頁面，他真正想做的事情是什麼？……當這些問題越來越多的時候我們開始想：是不是應該重新考慮知乎網頁版應該是什麼樣子了？

而就在我們內部對此熱烈討論的時候，我們也聽到了眾多知友的呼喚：你們

網站

已經一萬年沒改過了，準備什麼時候改一下？後來甚至還有了《知乎的前端工程師平時在幹什麼》這個問題。這個鍋怎麼能讓我們辣麼強力的前端老師們背呢！於是我們決定要更快的推進這件事：升級我們的個人頁面！ （｡•ˇ‸ˇ•｡） （廣告時間：如果各位身邊有靠譜的前端請務必推薦他加入我們！）

在新版個人頁面開放公測之前，我先跟知友們分享我們的設計思路，也期待聽到你的反饋，與我們共同提升和改善頁面設計。

在著手設計前的數次討論中我們逐步清晰了本次最佳化的基本原則：使用者的時間是寶貴的，我們應該透過更好的設計幫助他們節約時間提高效率。基於這樣的原則，我們將這次重新設計的核心策略定義為：

快

。透過設計讓使用者每次想做的事情變得簡單高效、重要且使用高頻的功能和內容更容易找到。不僅如此，訪問知乎的速度也需要變得更快，不要把時間浪費在等待上。基於此，我們梳理出了如下幾個待修改的點：

梳理個人頁面的資訊結構，讓想找的內容更好找

梳理內容操作欄的優先順序，突出更重要的操作

內容操作欄應該隨時可訪問

詳細資料應該可以就地檢視而不用跳轉頁面

檢視新私信應該更加快速和流暢

最佳化排版，採用了更易讀的字型和字號，提升閱讀效率

……

針對個人頁的主要功能模組，我們嘗試了不同的佈局形式和設計方案，下面以幾個有代表性的中間方案為例，向大家分享我們主要的重設計過程。

卡片樣式

隨著頁面複雜度的升級，舊版的

線描式卡片

逐漸暴露出其侷限性，比如內容間缺乏清晰的界限、模組之間的關係不夠明確等等（圖 1）。為了解決這些問題，我們優化了卡片樣式，讓重要內容從頁面中突顯出來（圖 2）。對比舊版，新的卡片樣式使頁面內容更為集中、規整和明確。我們重新制訂了卡片使用策略，希望透過有節制地運用卡片，創造合適的頁面秩序和瀏覽節奏，

梯度

區分各模組內容的主次關係。另外，新的卡片樣式讓頁面層次更加豐富，頁面在未來也可以有更靈活的變化。

頭圖

個人頁的頭部是使用者屬性和個人特質的展現，是頁面中最重要的部分，我們在這部分做了不少設計嘗試。遵循舊版結構的做法左右欄完全割裂，導致頁面整體感較弱，且視覺重心過於偏左，效果並不理想（圖 1）。為了減弱頁面內的分裂感，我們曾嘗試打破框架，讓頭部橫跨兩欄，突出頁面中最重要的部分，使得頁面結構更加穩定（圖 2）。而在最近一次的更新中，我們進一步打破了頭部卡片的左右約束，採用與頁面等寬的通欄樣式，使整體的視覺觀感更加開闊，也更加充分的展現出使用者的個性和特質（圖 3）。

兩欄 vs。 三欄

為了能在一屏內顯示更多資訊，提升頁面空間利用率，起初我們考慮採用

三欄結構

來組織個人頁面，但實際應用的效果並不理想（圖 1）。

三欄

的確能承載更多內容，但會導致頁面過於擁擠，視覺上缺少主次。雖然可能會提升頁面空間利用率，卻也同時犧牲了使用者瀏覽、篩選資訊的效率。相較之下，兩欄佈局清晰、簡潔，更好地控制了資訊密度（圖 2）。並且，兩欄能兼顧到知乎的大部分頁面，考慮到產品內的佈局一致性和核心原則，它是更合理的選擇。

下面是除了上面幾個有代表性的方案外，其他的佈局和設計嘗試。

經過大量討論、嘗試、調整，我們得到了個人頁的最終方案：

以上就是知乎網頁版重設計的整體思路和個人頁面的設計過程，其他頁面的改進設計也在進行中，如果大家有更好的建議和反饋歡迎寫下評論，在測試過程中我們也會逐步改進大家提到的重要問題 ୧（๑•̀⌄•́๑）૭