`

高效优化博客的用户阅读体验

CSS 
阅读更多

最近越来越多在博客上写些UX相关的内容作为分享,就涉及到跟普通博文不一样的文章建构问题。文章内容固然很重要,但排版、组织也是提高可读性和用户体验的关键呢。于是乎在比较著名的几个UX博客/网站上找了些值得学习的地方。

一、开篇

如果你的文章内容较长,开篇给出一个小总结、简介或内容纲要是不错的做法。


图1
Nielson 的文章全部一个板式,开首必不可少Summary

图2
Smashing Magazine 的文章,一开始除了有内容简介,还会摆出相关文章。
图3A List Apart 的文章一开头肯定在简介旁边配图,风格跟纽约时报很像
图4 :很长的文章,像Usability Post这篇文章 这样给个纲要比较好呢,还能帮助直接跳转。


二、正文
1. 标题的样式

这是首要解决的问题,因为标题是表示文章层次结构的最佳手段。可以通过调整字体颜色、大小,加入分割线等来实现。好的CSS是一劳永逸的基础哦~~~

图5UX Booth 用不同的字体颜色、大小表示层及关系



图6
Smashing Magazine 优雅的二级标题,以及一级标题的分割线
2. 图片

好的图片能让文章增色不少,必须是读图时代嘛。贴图,也有点儿学问哦~~

图7UX Matters 的文章,图题都在上方,且有清晰的标识


图8 :除了图题还有说明文字?可参考下图做法

图9 :用框线将图题与图片装在一起也不错,不过比较花功夫吧


除了做好图题,保持全文图表对齐的一致 也是值得参考的做法。

另外,在文章开始以图表意(如图3所示),也是添加趣味性的做法哦

图10Johnny Holland Magazine 上的文章,开始都是一幅图


3. 引用

我发现这是国外UX博文蛮常见的做法呢。中间穿插一些引用,可以适当减低长篇阅读的疲乏感哦!

图11:A List Apart文章中的引用


图12 :UX Matters文章中的豆腐块引用很经典。有时候只看豆腐块就够了


图13 :引用让累牍有喘息的机会
4. 其他

行与行之间的留白 、恰当使用编号列表 都是提高博文可用性的重要手段。另外,Nielson还有爱用的一招是加粗关键字 ,也不妨学习学习。

图14 :Nielson自己的研究表明,人们阅读网络文献都是跳着挑字眼看的



三、结束部分


对于长文来说,给出个小结总是必要的。除此之外,
“延伸阅读”是一篇好的UX博文应有的部分,让你的读者可以按图索骥。如果有参考其他文章,请给出“参考文献”部分,为你文章的专业程度加分~~~

图15 :Smashing Magazine上的延伸阅读


图16 :UX Booth上的延伸阅读


图17 :良好的参考文献


总而言之 ……

以上几点不是什么八股的东西,毕竟文章个性很重要。不过作为本身研究UX的人,多多考虑读者的用户体验嘛,也是应该哈。当然,最最重要的,还是内容本身。

来源:如何优化UX博文的用户阅读体验?

5
20
分享到:
评论

相关推荐

    Typecho博客主题Joe双栏极致优化博客主题模板

    "Joe"是一款专为Typecho设计的双栏极致优化的博客主题模板,旨在提供更加美观、高效的用户体验,同时优化了加载速度和SEO性能。 1. **双栏布局**:"Joe"主题采用了经典的双栏布局,左侧为主要内容区域,右侧可以...

    简单的多用户博客模板

    2. 性能优化:通过缓存技术、CDN加速、代码优化等方式提高系统性能,减少服务器负载,提升用户体验。 五、部署与维护 1. 部署:将应用部署到云服务器,如AWS、Google Cloud或阿里云,保证服务的稳定性和可扩展性。 ...

    新浪博客高效弹窗代码

    这个脚本可能被设计用来提升用户体验,如快速打开新窗口或者弹出对话框,而不是在当前页面进行跳转,以免打断用户的阅读流程。在网页开发中,弹窗常用于显示警告、确认信息或者加载外部内容。 描述中提到“仅供交流...

    Node.js-制作一个阅读体验舒适的Hexo博客主题

    本主题的制作旨在为用户提供一种阅读体验极佳的Hexo博客风格,使读者能在舒适环境中享受阅读。 【描述】:“制作一个阅读体验舒适的 Hexo 博客主题” 创建一个优质的博客主题涉及多个方面的设计和技术实施。首先,...

    CSDN博客阅读器V1.1

    CSDN博客阅读器V1.1是一款专为CSDN平台定制的博客浏览工具,它旨在为程序员和IT爱好者提供更加便捷、高效的博客阅读体验。通过此应用程序,用户可以直接在移动设备或电脑上访问并阅读CSDN上的技术文章,省去了网页...

    博客精灵 V1.5 博客

    “效果不错”表明该软件在实际应用中得到了用户的认可,可能在用户体验、功能实用性或性能效率等方面表现出色。对于博客管理来说,这可能包括快速的文章导入导出、自动排版、关键词优化等功能,这些都能够提升博主的...

    lxblog多用户博客系统

    lxblog注重用户体验,界面设计简洁大方,符合现代审美趋势。无论是前台的展示还是后台的管理界面,都力求做到清晰易用,让用户在享受写作乐趣的同时,也能感受到良好的视觉体验。 **GBK编码版本** 压缩包中的...

    多人博客系统Blog_多用户博客空间源码下载.rar

    总的来说,多人博客系统开发涵盖了许多IT领域的知识,包括Web开发、数据库管理、网络安全、用户体验设计等,对开发者的技术要求较高。通过学习和理解这样的源码,开发者可以提升自己的技能,并为构建类似的项目提供...

    [博客空间]Emlog单用户博客系统

    通过安装合适的插件,用户可以让博客拥有更丰富的互动性,提升用户体验。 此外,Emlog还注重安全性和稳定性。系统定期发布更新,修复已知的安全漏洞,确保用户的博客数据安全。同时,Emlog的代码结构清晰,便于...

    微信读书 iOS 性能优化总结 | WeRead团队博客1

    此外,预处理和延时加载也是提升用户体验的有效方式,前者如提前计算阅读页面的布局,后者如延迟加载非必需内容,以提高界面绘制速度。 再者,预处理和缓存管理也是性能优化的重要环节。预处理能提前处理后台任务,...

    BLOG源码asp.net_多用户博客空间源码下载.rar

    6. **用户界面和用户体验**:前端可能采用了HTML、CSS和JavaScript,利用AJAX进行异步交互,提升用户体验。 7. **搜索引擎优化(SEO)**:考虑到博客平台的性质,源码可能考虑了SEO优化,如元标签设置、URL重写等。...

    blog源码_多用户博客空间源码下载.rar

    3. **前端框架**:为了提供良好的用户体验,源码可能使用前端框架如Bootstrap或Vue.js来构建响应式布局,确保博客在不同设备上都能良好显示。 4. **后端开发**:后端通常使用PHP、Python、Node.js等服务器端语言...

    开源博客 支持多用户

    开源博客系统是一个允许多个用户创建和管理个人博客的软件解决方案,通常基于Web并提供社区功能。这类系统的核心特性就是支持多用户,...在遇到问题时,利用社区资源和专业指导,通常能有效解决问题,提升用户体验。

    用Python和Django实现多用户博客系统——UUBlog

    同时,系统的安全性、性能优化以及响应式设计也是开发过程中考虑的重要因素,以确保在不同设备上都能提供良好的用户体验。 【标签】: "django"、"多用户"、"博客系统"、"uublog" 1. Django: Django是Python的一个...

    社交网站注册流程用户体验分析PPT学习教案.pptx

    本教程通过对比分析网易博客与新浪博客、新浪微博与网易微博的注册流程,深入探讨了如何优化用户体验,以实现更高效、更便捷的注册过程。 首先,网易博客在注册过程中直接引导用户使用网易邮箱,虽然简化了步骤,但...

    CYQBlog多用户多语言博客平台系统 v2.5.rar

    综上所述,CYQBlog多用户多语言博客平台系统 v2.5是一个全面、功能强大的博客解决方案,它集成了多用户管理、多语言支持、多数据库兼容性以及优化的SEO功能,为用户提供了一个高效且易于定制的博客环境。无论是个人...

    单用户博客.net_多用户博客空间源码下载.rar

    4. **用户管理**:包括用户注册、登录、密码找回、权限控制等,通常涉及OAuth或OpenID集成以提升用户体验。 5. **内容管理系统(CMS)**:博客的核心功能,允许用户创建、编辑、发布和管理文章,支持Markdown或富...

    高效Python Django框架开发的博客平台源码

    项目概述:高效开发的Python Django博客平台 本项目采用Python语言为主开发,融合了HTML、CSS、...本博客平台基于成熟的Django框架开发,简洁高效,易于扩展,旨在为用户提供一个稳定、易用且功能丰富的博客系统。

    博客软件3.0

    这款软件集成了多项先进功能,旨在提升用户的写作体验,优化博客的管理和发布流程。下面将详细介绍这款博客软件的核心特点和使用要点。 1. **用户界面与易用性**: 博客软件3.0的界面设计注重用户体验,采用直观的...

Global site tag (gtag.js) - Google Analytics