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

导语：

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

优化背景

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

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

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

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

优化方案

1 博文页面

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

2 个人主页

当前页面主要问题如下：

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

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

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

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

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

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

结束语：

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

UI 意见征集 - 博客文章、个人主页相关推荐

分享制作精良的知识管理系统配置SQL Server文档数据库完美实现博客文章的的下载，存储和浏览...
前一篇文章<分享制作精良的知识管理系统博客备份程序 Site Rebuild>已经提到如何使用Site Rebuild来下载您所喜欢的博客文章,但是还不能实现把下载的文件导入进数据库中, ...
使用IntelliJ IDEA开发SpringMVC网站（五）博客文章管理
原文:使用IntelliJ IDEA开发SpringMVC网站(五)博客文章管理摘要通过对博客文章的管理,实现外键操作. 目录[-] 八.博客文章管理 1.查看文章 2.添加博客 3 ...
博客文章也能中顶会：ICLR 2022开设博客投稿通道，还有机会跟经典论文原作者直接battle...
兴坤发自凹非寺量子位报道 | 公众号 QbitAI 盆友们,ICLR今年有新的打开方式了--博客文章征集. 非正式讨论的自由平台,往往更容易发现问题.激发新的思考.因此新一届ICLR计划增加论 ...
推荐 14 个 GitHub 上优质的原创前端博客文章仓库
大家好,我是你们的猫哥,那个不喜欢吃鱼.又不喜欢喵的超级猫 ~ 博客下面的顺序是随机的,不分先后. SHERlocked93/blog 公众号:前端下午茶作者:SHERlocked93 作者微 ...
wp博客写文章500错误_500多个博客文章教我如何撰写出色的文章
wp博客写文章500错误 I've written a lot of blog posts. Somewhere north of 500 to be exact. All of them are t ...
2018.7.10 个人博客文章=利用ORM创建分类和ORM的内置函数
昨天的注册收尾工作其实就差了和MySql联系起来的部分,这部分很简单,首先要做的就是保存用户通过from传送过来的头像文件: """ 保存头像文件 "&quo ...
Python爬虫自学与实战，爬一下自己的博客文章
文章目录 1. 什么是爬虫 2. 学习爬虫的必备知识 3. 环境准备 4. 爬虫的第一步,获取网页的HTML内容 4.1 GET 4.2 POST 5. 使用BeautifulSoup模块来从HTML ...
统计个人CSDN的博客文章数量
统计个人CSDN的博客文章数量第一版原始版本比较简单只能统计第一页,而且没有进行排序 # coding:utf-8 import urllib2 from bs4 import Beautifu ...
Hexo+Github搭建个人博客和个人主页
Hexo+Github搭建个人博客和个人主页在自己的个人主页搭建起来之前,看到网上其他人酷炫的个人主页,而且有自己专属的域名,羡慕的不行.现在自己的个人主页也做出来了,在这里做一个总结,给也想做个人 ...