Zhihu Web 重設計思路和個人頁設計過程

時間：2023-08-29 19:18:01 | 來源：網(wǎng)站運營

時間：2023-08-29 19:18:01 來源：網(wǎng)站運營

Zhihu Web 重設計思路和個人頁設計過程：在我們?nèi)粘５脑O計過程中總會遇到些一時難以解決的問題：這個功能放在這里似乎不太對，可是其他位置更不對；在修復一些體驗問題時發(fā)現(xiàn)頁面結(jié)構(gòu)在長期的迭代后做出這種修改的代價過大；所有的東西都被擺在了重要的位置，那真正重要的東西應該在哪里？當一個用戶來到一個頁面，他真正想做的事情是什么？……當這些問題越來越多的時候我們開始想：是不是應該重新考慮本站網(wǎng)頁版應該是什么樣子了？

而就在我們內(nèi)部對此熱烈討論的時候，我們也聽到了眾多知友的呼喚：你們網(wǎng)站已經(jīng)一萬年沒改過了，準備什么時候改一下？后來甚至還有了《本站的前端工程師平時在干什么》這個問題。這個鍋怎么能讓我們辣么強力的前端老師們背呢！于是我們決定要更快的推進這件事：升級我們的個人頁面！ (??ˇ?ˇ??) （廣告時間：如果各位身邊有靠譜的前端請務必推薦他加入我們?。?br>
在新版?zhèn)€人頁面開放公測之前，我先跟知友們分享我們的設計思路，也期待聽到你的反饋，與我們共同提升和改善頁面設計。


在著手設計前的數(shù)次討論中我們逐步清晰了本次優(yōu)化的基本原則：用戶的時間是寶貴的，我們應該通過更好的設計幫助他們節(jié)約時間提高效率?；谶@樣的原則，我們將這次重新設計的核心策略定義為：快。通過設計讓用戶每次想做的事情變得簡單高效、重要且使用高頻的功能和內(nèi)容更容易找到。不僅如此，訪問本站的速度也需要變得更快，不要把時間浪費在等待上。基于此，我們梳理出了如下幾個待修改的點：

• 梳理個人頁面的信息結(jié)構(gòu)，讓想找的內(nèi)容更好找
  
• 梳理內(nèi)容操作欄的優(yōu)先級，突出更重要的操作
  
• 內(nèi)容操作欄應該隨時可訪問
  
• 詳細資料應該可以就地查看而不用跳轉(zhuǎn)頁面
  
• 查看新私信應該更加快速和流暢
  
• 優(yōu)化排版，采用了更易讀的字體和字號，提升閱讀效率
  
• ……
  

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

卡片樣式

隨著頁面復雜度的升級，舊版的線描式卡片逐漸暴露出其局限性，比如內(nèi)容間缺乏清晰的界限、模塊之間的關系不夠明確等等（圖 1）。為了解決這些問題，我們優(yōu)化了卡片樣式，讓重要內(nèi)容從頁面中突顯出來（圖 2）。對比舊版，新的卡片樣式使頁面內(nèi)容更為集中、規(guī)整和明確。我們重新制訂了卡片使用策略，希望通過有節(jié)制地運用卡片，創(chuàng)造合適的頁面秩序和瀏覽節(jié)奏，梯度區(qū)分各模塊內(nèi)容的主次關系。另外，新的卡片樣式讓頁面層次更加豐富，頁面在未來也可以有更靈活的變化。

頭圖

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

兩欄 vs. 三欄

為了能在一屏內(nèi)顯示更多信息，提升頁面空間利用率，起初我們考慮采用三欄結(jié)構(gòu)來組織個人頁面，但實際應用的效果并不理想（圖 1）。三欄的確能承載更多內(nèi)容，但會導致頁面過于擁擠，視覺上缺少主次。雖然可能會提升頁面空間利用率，卻也同時犧牲了用戶瀏覽、篩選信息的效率。相較之下，兩欄布局清晰、簡潔，更好地控制了信息密度（圖 2）。并且，兩欄能兼顧到本站的大部分頁面，考慮到產(chǎn)品內(nèi)的布局一致性和核心原則，它是更合理的選擇。


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


經(jīng)過大量討論、嘗試、調(diào)整，我們得到了個人頁的最終方案：


以上就是本站網(wǎng)頁版重設計的整體思路和個人頁面的設計過程，其他頁面的改進設計也在進行中，如果大家有更好的建議和反饋歡迎寫下評論，在測試過程中我們也會逐步改進大家提到的重要問題 ?(???????)?