導語：
近期，產品設計團隊根據用戶體驗調查和業務目標，探索性對兩個核心頁面進行 UI 的迭代，即博文頁面和個人主頁，本文會將方案公開發布，意在建立與用戶溝通的橋梁，無論您是新加入社區的用戶或者陪伴 CSDN 多年的伙伴，均可在下方發布您的意見或建議，
優化背景
CSDN 網站在不同反饋渠道經常會收到用戶表達 UI 過于老舊、資訊密度過大等頁面設計問題，相信當前正在閱讀的您也會有同樣的感受，其實作為產品的設計者，我們同樣也是很清楚當前的不足，但作為成立 20 年的技術社區，在發展程序中由于產品變更、歷史包袱、業務需求、用戶偏好、用戶習慣等多種復雜因素導致問題遲遲未得到改善，
關于頁面設計，用戶頻繁反饋的不足，包含但不限于如下幾點原因：
- 頁面資訊結構雜亂、不簡潔
- 頁面設計風格較老舊
- 廣告內容畫幅占比過大
基于上述核心問題，產品設計團隊根據現狀，分別進行了輕量型的 UI 迭代，并將會在未來一段時間內陸續解決全部問題，為大家提供易用、舒適、簡潔的用戶體驗，
優化方案
1 博文頁面
當前頁面主要有如下問題：
- 頁面模塊及元素過多
- 設計風格相對較陳舊
- 正文內容排版較緊密
首先奉上整體的設計效果圖，大家可以全域看一下（圖1、圖2）變化情況：
模塊設計細節 1：三欄優化為兩欄
針對模塊過于擁擠的問題，將整體頁面的三欄模式變更為兩欄模式，并對所有模塊進行整合和歸納梳理（下文將會拆分進行介紹），減少用戶瀏覽時資訊過于密集的體驗問題，
模塊設計細節 2：資訊及成就聚合
將作者資訊和其成就進行聚合，并突出讀者認同且權重較高的成就，同時通過用戶調研得知部分創作者會再當前的資訊模塊進行截圖，用于如簡歷、自我介紹文章等檔案中，用于體現在 CSDN 的成就，當前版本進行聚合后，更方便創作者截取全部資訊，簡單來講，一個模塊即可體現創作者在 CSDN 的整體創作資訊，
此模塊默認為折疊狀態，當用戶滑鼠滑過后，自動展開全部內容，避免再次出現資訊密度過大影響用戶閱讀體驗和頁面雜亂的問題，
模塊設計細節 3：作者文章推薦
舊版本將創作者的最新文章和熱門文章拆分成立兩個模塊，分散了用戶對于創作者其他作品的注意力，新版本將其整理至一個模塊，同時將搜索當前創作者作者的便捷搜索框置入，可更便捷的使讀者進一步了解和閱讀創作者的其他內容，
模塊設計細節 4：評論區樣式優化
評論區目前資訊密度過大，我們在當前基礎上，將空間布局進行調整，易讀性大大提高，
模塊設計細節 5：著作權資訊前置
在接下來的一段時間內，平臺將會著重打擊侵權、盜版等問題（目前原創保護功能已上線，處于內測中，想體驗的創作者可在評論區回復體驗原創保護，作業人員將會為您進行開通體驗資格），故將著作權資訊由折疊至模塊內的形式變更為文尾直接露出，
總結：上述為當前版本博客文章頁面的優化重點，您可通過投票或評論的方式對博客文章頁面的設計表達認同與否，也可在評論區闡述您的建議或意見，
2 個人主頁
當前頁面主要問題如下：
- 畫幅過大，空間利用率較低
- 核心資訊不聚焦，影響閱讀順序
同樣，先奉上整體設計效果圖（圖 3）：
模塊設計細節 1：收縮全域頁面寬度
相對于舊版留白多、Feed 流資訊復雜等問題，針對性進行調整，考慮到舊版在螢屏適配時，由于文章標題及摘要不可控因素過多，導致在分螢屏適配時過短的標題及摘要會導致頁面留白過多（據調研留白過多會影響用戶對頁面的判斷，誤以為頁面未加載完成，導致用戶耐心減少離開頁面），針對此問題新版博客主頁取消螢屏適配，改為固定版 1200px 內容寬度，同時對資訊流模板化處理，只分為有封面圖和無封面圖樣式統一梳理減少樣式過多頁面過于混亂，同時支持新皮膚，皮膚在主頁瀏覽空間增多，個性化突出
模塊設計細節 2：優化模塊資訊排版
在收縮寬度同時，將被訪問量、粉絲量等作者基礎資料進行重新排版，更加區分主次資訊，另增加了一個可視化的寫作資料情況，可便捷的通過日歷形式的資料圖表觀察創作情況，
結束語：
以上將本次設計優化分享給大家，伙伴們可參與下方的投票或評論，CSDN 非常重視用戶的真實反饋和建議，希望可以陪伴各位開發者一同成長、進步，通過技術不斷改變世界，致敬最可愛的開發者！
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/310625.html
標籤：其他