2019.11.29 更新:文章详情页阅读优化及设计释疑

 阅读约 3 分钟

优化更新

  • 加宽了文章阅读区域的宽度,大屏幕下侧栏宽度固定为 300px,基于 Bootstrap Variable width Content
  • 提高页面的加载速度,方法细节传送门 《我们悄悄优化了页面载入速度》
  • 将撰写页面的预置标签从“按标签属性分组”改为“按开发领域分组”,使分组更有人群针对性
  • 改进侧栏广告尺寸的兼容性(由于改版仍在进行,新老版本仍将持续一段时间)
  • 新版详情页声望值简化处理

缺陷修复

  • 修复举报后返回一串数字的问题
  • 修复 Firefox 下 flex 的 auto 布局时,oveflow 失效导致换行的问题:flex 需要增加 min-width: 0 才行,参见 1参见 2
  • 修复编辑内容时,特殊符号 "'& 的转义问题
  • 修复 markdown 表格表头对齐失效问题

FAQ

为什么文章宽度觉得有点窄?

虽然现在的屏幕越来越大,但从可用性角度来说,正文宽度 650~750px 仍然是理想的阅读可视范围。大家写代码的时候,通常也是推荐每行不超过 80 个字符的宽度。过宽会降低阅读时的专注力,过窄则造成跳跃频繁容易遗漏内容。所以,目前的文章正文宽度仍然控制在这个范围内。

为什么字体要调大?

字体从原有的 14px 增加到 16px,也是因为分辨率越来越高。2016 年起,大量的 13.3 寸笔记本默认分辨率都从 1280*800 提高到了 1440*900,从社区的 GA 的统计来看,前者用户占比已跌至不足 2%,后者是前者的 6 倍。在后者的分辨率下,14px 的字体阅读起来已经比较吃力了。所以这是适应终端设备的合理变化。

为什么用卡片式设计?

SegmentFault 从创立至今,已经有非常多的内容形态。想整合这些内容形态,采用纯栅格的设计让排版变得复杂,开发的工作量也急剧上升。

卡片式设计在栅格的基础上,让不同的内容类型以卡片形式包容,带来视觉上的一致性。也简化不同设备下卡片内容的适配成本。我们在 2017 年的时候就在尝试社区的卡片式设计,最终在这个版本得以正式上线。


最后,感谢 YianMr_houzi二狗蛋丶沙加 等用户反馈的 BUG 和修改意见,我们仍将持续改进。

阅读 410更新于 12月12日
推荐阅读

记录 SegmentFault 成长的点点滴滴

1435 人关注
48 篇文章
专栏主页
目录