美文网首页Web前端之路
怎样的页面更易读?

怎样的页面更易读?

作者: 黄杨ME | 来源:发表于2017-08-15 20:08 被阅读109次

对比

白纸(底)黑字是最安全也是最常用的一种文字颜色呈现方式。之所以易读,是因为背景和文本颜色对比强烈。如果在黑色背景上使用红色的文字,不仅难读,甚至伤身(眼)啊。然而对比太过强烈也更容易造成长时间阅读后的视觉疲劳。可以使用白底配合 #333 的黑(灰)字,或 #f8f8f5 的背景色配合纯黑字,这样尤其当阅读屏幕上长篇文章的时候,看起来会更舒服一些吧。

更大的字号

过去很多国内(外)门户网站都爱使用很小的字号和拥挤的排版布局。密密麻麻的文字简直惨不忍睹。这当然是有一部分历史原因的。互联网兴起早期网民对信息本身的饥渴需求、早期更低的屏幕分辨率以及对用户体验设计和对 typography 的不认知,使得早期网页字号多为 14px 甚至更小的 12px、10px。现在的 Web 则需要更大的字号。Chrome 浏览器对网页字号也做了最小限制(可以通过一定的手段打破这种限制),如果页面定义的字体小于 12px,则会最小显示 12px 字号。要知道,上网人群中,近视群体、学生群体和老年人的总数不占少数。对于网页中的正文段落字号至少应该在 16px,14px 则是底线了。考虑实际上越来越多更大的屏幕尺寸和更高的屏幕分辨率开始普及,网页配合更大的字号也是符合趋势的。

还有,你是否想过,为什么浏览器的默认字号都是 16px 而不是 12px 或 10px 呢?

不论从页面内容的易读性还是从网页设计的渐进增强上考虑,为网页设置更大的字号也是需要的并且是安全的。

呼吸与留白

不要觉得网页上留白是一种空间浪费。好的呼吸与留白可以让阅读不那么累(网页阅读实际上就很累),并且能更好的突出内容,让用户马上看到重点。实际上,人们在屏幕上浏览页面上的文字时,一般都是扫视的,绝大部分文字都不会被人仔细阅读。他们只是想找到自己需要的东西,然后马上离开。

你可以通过简单的技术手段就能实现几乎任何你想要的留白。段落间距,行高等等。这些只需要一点 CSS 的知识。

相关文章

  • 怎样的页面更易读?

    对比 白纸(底)黑字是最安全也是最常用的一种文字颜色呈现方式。之所以易读,是因为背景和文本颜色对比强烈。如果在黑色...

  • 层次化:一个难维护的页面组件的重构方案

    问题分析 要重构考勤页面,使之结构更清晰,更易读易维护,我分析了一下考勤页面存在的问题: 考勤页面的最主要的问题不...

  • react同构直出方案

    react同构直出方案 @(Tech)[React技术栈] 同构直出的好处 SEO,让搜索引擎更容易读取页面内容 ...

  • 2018-08-28

    看书加上APp更容易读进脑袋

  • 基于React+Redux的SSR实现方法

    为什么要实现服务端渲染(SSR) 总结下来有以下几点: SEO,让搜索引擎更容易读取页面内容 首屏渲染速度更快(重...

  • 前端基础html和css常考面试题知识

    如何理解HTML语义化 让人更容易读懂(增加代码可读性) 让搜索引擎更容易读懂(SEO) 盒模型宽度计算 offs...

  • 仔细阅读

    Step 1.先看题目,再读文章,更容易读进去 Tip

  • 公众号页面模板是怎样设置和使用的

    “页面模板”这一块是怎样设置和使用的? “页面模板”的设置,可以让你的读者通过菜单栏,更容易找到你的分类文章。 原...

  • Friendly Date Ranges

    要求 让日期区间更友好! 把常见的日期格式如:YYYY-MM-DD 转换成一种更易读的格式。 易读格式应该是用月份...

  • Friendly Date Ranges

    让日期区间更友好! 把常见的日期格式如:YYYY-MM-DD 转换成一种更易读的格式。 易读格式应该是用月份名称代...

网友评论

    本文标题:怎样的页面更易读?

    本文链接:https://www.haomeiwen.com/subject/koqhtttx.html