UI 意见征集 - 博客文章个人主页

Posted 2021-12-13 CSDN官方博客

导语：

近期，产品设计团队根据用户体验调查和业务目标，探索性对两个核心页面进行 UI 的迭代，即博文页面和个人主页，本文会将方案公开发布，意在建立与用户沟通的桥梁，无论您是新加入社区的用户或者陪伴 CSDN 多年的伙伴，均可在下方发布您的意见或建议。

优化背景

---

CSDN 网站在不同反馈渠道经常会收到用户表达 UI 过于老旧、信息密度过大等页面设计问题，相信当前正在阅读的您也会有同样的感受。其实作为产品的设计者，我们同样也是很清楚当前的不足，但作为成立 20 年的技术社区，在发展过程中由于产品变更、历史包袱、业务需求、用户偏好、用户习惯等多种复杂因素导致问题迟迟未得到改善。

关于页面设计，用户频繁反馈的不足，包含但不限于如下几点原因：

1. 页面信息结构杂乱、不简洁
2. 页面设计风格较老旧
3. 广告内容画幅占比过大

基于上述核心问题，产品设计团队根据现状，分别进行了轻量型的 UI 迭代，并将会在未来一段时间内陆续解决全部问题，为大家提供易用、舒适、简洁的用户体验。

优化方案

---

1 博文页面

当前页面主要有如下问题：

1. 页面模块及元素过多
2. 设计风格相对较陈旧
3. 正文内容排版较紧密

首先奉上整体的设计效果图，大家可以全局看一下（图1、图2）变化情况：

图 1：博客文章页面全局效果图-信息&成就模块展开状态

 

图 2：博客文章页面全局效果图-信息&成就模块收起状态

 

模块设计细节 1：三栏优化为两栏

针对模块过于拥挤的问题，将整体页面的三栏模式变更为两栏模式，并对所有模块进行整合和归纳梳理（下文将会拆分进行介绍），减少用户浏览时信息过于密集的体验问题。

模块设计细节 2：信息及成就聚合

将作者信息和其成就进行聚合，并突出读者认同且权重较高的成就，同时通过用户调研得知部分创作者会再当前的信息模块进行截图，用于如简历、自我介绍文章等文档中，用于体现在 CSDN 的成就，当前版本进行聚合后，更方便创作者截取全部信息，简单来讲，一个模块即可体现创作者在 CSDN 的整体创作信息。

此模块默认为折叠状态，当用户鼠标滑过后，自动展开全部内容，避免再次出现信息密度过大影响用户阅读体验和页面杂乱的问题。

模块设计细节 3：作者文章推荐

旧版本将创作者的最新文章和热门文章拆分成立两个模块，分散了用户对于创作者其他作品的注意力，新版本将其整理至一个模块，同时将搜索当前创作者作者的便捷搜索框置入，可更便捷的使读者进一步了解和阅读创作者的其他内容。

模块设计细节 4：评论区样式优化

评论区目前信息密度过大，我们在当前基础上，将空间布局进行调整，易读性大大提高。

模块设计细节 5：版权信息前置

在接下来的一段时间内，平台将会着重打击侵权、盗版等问题（目前原创保护功能已上线，处于内测中，想体验的创作者可在评论区回复体验原创保护，工作人员将会为您进行开通体验资格），故将版权信息由折叠至模块内的形式变更为文尾直接露出。

总结：上述为当前版本博客文章页面的优化重点，您可通过投票或评论的方式对博客文章页面的设计表达认同与否，也可在评论区阐述您的建议或意见。

2 个人主页

当前页面主要问题如下：

1. 画幅过大，空间利用率较低
2. 核心信息不聚焦，影响阅读顺序

同样，先奉上整体设计效果图（图 3）：

图 3：个人主页效果图

 

模块设计细节 1：收缩全局页面宽度

相对于旧版留白多、Feed 流信息复杂等问题，针对性进行调整，考虑到旧版在屏幕适配时，由于文章标题及摘要不可控因素过多，导致在分屏幕适配时过短的标题及摘要会导致页面留白过多（据调研留白过多会影响用户对页面的判断，误以为页面未加载完成，导致用户耐心减少离开页面），针对此问题新版博客主页取消屏幕适配，改为固定版 1200px 内容宽度，同时对信息流模板化处理，只分为有封面图和无封面图样式统一梳理减少样式过多页面过于混乱，同时支持新皮肤，皮肤在主页浏览空间增多，个性化突出

模块设计细节 2：优化模块信息排版

在收缩宽度同时，将被访问量、粉丝量等作者基础数据进行重新排版，更加区分主次信息。另增加了一个可视化的写作数据情况，可便捷的通过日历形式的数据图表观察创作情况。

结束语：

以上将本次设计优化分享给大家，伙伴们可参与下方的投票或评论，CSDN 非常重视用户的真实反馈和建议，希望可以陪伴各位开发者一同成长、进步，通过技术不断改变世界，致敬最可爱的开发者！