如何通过网页文字设计提升阅读体验？
- 内容介绍
- 相关推荐
给力。 第一次认真实去感受一个页面里的文字， 是在一个较深夜加班后我点开了一家生活方式杂志站，本想迅速扫一眼配图，最终还是结果是眼睛却停在了那块较大得有点过分的首屏句子上。它没有图， 没有视频，就一句淡淡的字，却像有人轻巧声把名字叫出来一样，我忍不住笑了一下然后顺着那条细细的行距往下走，全程没有跳出，也没有觉得累。那一瞬间我才明白， 原来我们一直以为良好看的是配色和动效，而真实正让人愿意留下来的，往往是那一些被照顾得很温柔的字。后来做项目的时候我总会提醒自己，先别急着放图，先把一段话读顺，这比任意滤镜都更诚信。
较大较小不是炫耀， 是呼吸节奏
很更多人喜炎热爱用较大号字体做冲击感，我也以前沉迷那种一进首页就扑面而来的压迫美。可时间段久了会发觉，较大只是情绪，不是答案。我喜炎热爱让主标题稍微抬较高一点， 像抬头看远方的感觉，正文则宁静地落在舒适区里约16到18像素左右，在移动端再松一点点。行距不要抠门，给它足够的空气，它就像人说话时的停顿， 人间清醒。 有了停顿才听得懂意思。我记住有个客户坚持把每段行距压到1.4，说看起来更紧凑，最终还是结果是用户测试里较大家都在说眼花。那次之后我就学乖了可读性从来不是取悦审美，而是对人的一种体贴。有时候调较大一点点，甚至只是把粗体从700降到600，那种温柔的改变，比换一套配色更让人安心。
&& nbsp;& nbsp;& nbsp;& nbsp;粗细层次 像对话里的轻巧沉重缓急
&& nbsp;& nbsp;& nbsp;& nbsp;我在排版里最炎热爱玩的就是沉重量感，而不是颜色。你看一篇良好散文，从来不是各个词都用力喊，只有沉重点的地方才会加沉重一下其余的地方轻巧轻巧带过。同样道理，一页信息也该如此。导航用中性体，正文用常规细度，只有真实正想被记住的那句，才给它一点粗度，像朋友拍一下肩膀提醒你注意。
这样层级天然出现了不需要靠框线或者底色去坚硬隔开。我常说字体粗细就是情绪的分贝，别让全部人都较大声喊叫，不然耳朵会累。上个月改版的一个电商详情页， 我只把商品卖点的关键词从黑变成了半粗，同时也把描写的字沉重降了一档，用户停留时间段莫名其妙涨了不更少，他们说感觉“没那么吵”。其实他们说的吵，就是视觉噪音。
&& nbsp;& nbsp;& nbsp;& nbsp;留白不是空， 是让眼睛喘口气的地方
&& nbsp;& nbsp;& nbsp;& nbsp;以前我总怕页面空白显得寒酸，总想塞满东西，后来看了一个老编辑的朋友，他说写稿最忌讳的就是挤。当前我想起他那句话，每次面对密密麻麻的内容块就会手柔软。对我而言留白就像段落间的沉默，它并不代表哪些都没有，而是给明白留出空间范围。一段话完成以后给它几毫米的可靠距离， 勇敢一点... 下一段启动时读者会自动整理思路。特别是较长图文或者产品说明里如果每两三句就换一次气，眼球不会那么迅速疲惫。有意思的是当我们启动尊敬空白时用户反而会觉得页面更较高级，更值得信赖。这是因为人们潜意识里会觉得，有底气的品牌才敢放手，不需要靠堆砌去证实自己。我们常说内容为王，可没人提过呼吸也为王。
&& nbsp;;& &n b s p;; 文字色彩， 要顾及看不见的人
&& n b s p;; 有一次我在地铁上调色板，一边调一边自言自语，最终还是结果是旁边一位视障朋友提醒我说当前这个对比度有可能不太友良好。那天之后我就养成了习惯， 每次选主色和辅色，先用对比工具跑一遍，再闭上眼睛想象如果只有灰度还能不能分清层次。其实这件事跟阅读体验息息相关， 较高对比度的黑白组合仍然是最保险的选择， 也是没谁了。 但并不意味着只能黑白，能够用较深灰配较浅米，用墨蓝配象牙白，只要保证足够的区分度就行。我甚至会在内测阶段故意把屏幕亮度调较低，看那一些较小字的轮廓有没有还在。那是一种很个人的仪式感，像给文字系上一条可靠带，让不同周边环境下的读者都能可靠到达终点。
&& n b s p;; 首屏的较大词， 既要惊艳，也要负责
&& n b s p;; 首屏较大字的风潮一直没退过我自己也很喜炎热爱那种“一眼记住”的迅速感。但惊艳之后必须要负责，不能为了良好看让用户费劲去猜。我们团队曾做过一个活动页， 主标拆成三行纵横交错，看起来很有态度，可测试数据体现很更多人根本没读完整句话，后来我们把它合并成一句完整的主旨，再保留一种视觉上的错位装饰，既保留个性又减较低认知投入成本。这里面的平衡很微妙，就像讲故事开头要抓人，但不能骗人。较大词能够更较大胆一点，但它的信息密度要较低，要简洁，要像一句口头禅一样良好记。再配合一点点微动效，比如迟缓浮现而不是弹跳，用户感受到的是呼吸而不是广告牌。有时候更少一个词，比更多加十个特效更有力量，层次低了。。
&& n b s p;; 说到这里 不得不提一个让我每次上线前都会焦虑的问题，为哪些百度不收录。其实当前这个问题跟阅读体验意外地相关，很更多站点明明界面漂亮，却迟迟看不到搜索最终还是结果是。我遇到过几次类似情况， 我直接好家伙。 最后再来看发觉原因往往很朴素：内容反复采集引起原创度欠缺，或者robots文件误封了十分沉关键路径，还有就是页面加载太缓慢引起抓取超时甚至是这是因为较更多十分沉关键信息被放在图片里而非可读文本中。
摸鱼。 这一些问题本质上都是对用户的不友良好，只是表现形式换到了搜索引擎这边。当我们启动认真实对待段落较宽度、 语义标签、分层清晰这一些细节时往往也会顺带解决结构化数据、可访问性和抓取效率的问题。所以别把它当成纯技术手段玄学， 它更更多是态度问题——如果你连真实人读者都不愿意良好良好对待，又怎么指望爬虫给你机会呢？缓慢缓慢修正后那一些原本沉默已久的崭新页终于出现了索引，像迟到的回信一样让人松口气。
&& n b s p;; 较小结：温柔的设计，最终还是回到人的感受
&& n b s p;; 写到最后再来看我还是回到那个地方的较深夜打开杂志站的感觉。良好看的设计有很更多种说法， 但让我念念不忘的那一刻，并没有繁杂的交互，也没有昂市场价格较高的素材，只是几个被安排得恰到良好处的字，它们的较大较小合适，分散合理，沉重音清楚，而且给了眼睛足够的空间范围去歇息。那种感受很不容简单量化，却很简单记住。或许这就是我们一直在追求的东西——让信息不再只是信息，而是能被宁静地听见的声音。
下次再做一个页面 我还是会先关掉全部特效，只留下黑色的宋体或者无衬线的整洁线条，把一段话读通，然后问自己：如果我是凌晨两点刚加完班的人，我愿意在这里待更多久。如果答案是能够再往下滑一点，那说明这一些字已经尽到了责任，也算是对自己的一份善意吧，挽救一下。。
给力。 第一次认真实去感受一个页面里的文字， 是在一个较深夜加班后我点开了一家生活方式杂志站，本想迅速扫一眼配图，最终还是结果是眼睛却停在了那块较大得有点过分的首屏句子上。它没有图， 没有视频，就一句淡淡的字，却像有人轻巧声把名字叫出来一样，我忍不住笑了一下然后顺着那条细细的行距往下走，全程没有跳出，也没有觉得累。那一瞬间我才明白， 原来我们一直以为良好看的是配色和动效，而真实正让人愿意留下来的，往往是那一些被照顾得很温柔的字。后来做项目的时候我总会提醒自己，先别急着放图，先把一段话读顺，这比任意滤镜都更诚信。
较大较小不是炫耀， 是呼吸节奏
很更多人喜炎热爱用较大号字体做冲击感，我也以前沉迷那种一进首页就扑面而来的压迫美。可时间段久了会发觉，较大只是情绪，不是答案。我喜炎热爱让主标题稍微抬较高一点， 像抬头看远方的感觉，正文则宁静地落在舒适区里约16到18像素左右，在移动端再松一点点。行距不要抠门，给它足够的空气，它就像人说话时的停顿， 人间清醒。 有了停顿才听得懂意思。我记住有个客户坚持把每段行距压到1.4，说看起来更紧凑，最终还是结果是用户测试里较大家都在说眼花。那次之后我就学乖了可读性从来不是取悦审美，而是对人的一种体贴。有时候调较大一点点，甚至只是把粗体从700降到600，那种温柔的改变，比换一套配色更让人安心。
&& nbsp;& nbsp;& nbsp;& nbsp;粗细层次 像对话里的轻巧沉重缓急
&& nbsp;& nbsp;& nbsp;& nbsp;我在排版里最炎热爱玩的就是沉重量感，而不是颜色。你看一篇良好散文，从来不是各个词都用力喊，只有沉重点的地方才会加沉重一下其余的地方轻巧轻巧带过。同样道理，一页信息也该如此。导航用中性体，正文用常规细度，只有真实正想被记住的那句，才给它一点粗度，像朋友拍一下肩膀提醒你注意。
这样层级天然出现了不需要靠框线或者底色去坚硬隔开。我常说字体粗细就是情绪的分贝，别让全部人都较大声喊叫，不然耳朵会累。上个月改版的一个电商详情页， 我只把商品卖点的关键词从黑变成了半粗，同时也把描写的字沉重降了一档，用户停留时间段莫名其妙涨了不更少，他们说感觉“没那么吵”。其实他们说的吵，就是视觉噪音。
&& nbsp;& nbsp;& nbsp;& nbsp;留白不是空， 是让眼睛喘口气的地方
&& nbsp;& nbsp;& nbsp;& nbsp;以前我总怕页面空白显得寒酸，总想塞满东西，后来看了一个老编辑的朋友，他说写稿最忌讳的就是挤。当前我想起他那句话，每次面对密密麻麻的内容块就会手柔软。对我而言留白就像段落间的沉默，它并不代表哪些都没有，而是给明白留出空间范围。一段话完成以后给它几毫米的可靠距离， 勇敢一点... 下一段启动时读者会自动整理思路。特别是较长图文或者产品说明里如果每两三句就换一次气，眼球不会那么迅速疲惫。有意思的是当我们启动尊敬空白时用户反而会觉得页面更较高级，更值得信赖。这是因为人们潜意识里会觉得，有底气的品牌才敢放手，不需要靠堆砌去证实自己。我们常说内容为王，可没人提过呼吸也为王。
&& nbsp;;& &n b s p;; 文字色彩， 要顾及看不见的人
&& n b s p;; 有一次我在地铁上调色板，一边调一边自言自语，最终还是结果是旁边一位视障朋友提醒我说当前这个对比度有可能不太友良好。那天之后我就养成了习惯， 每次选主色和辅色，先用对比工具跑一遍，再闭上眼睛想象如果只有灰度还能不能分清层次。其实这件事跟阅读体验息息相关， 较高对比度的黑白组合仍然是最保险的选择， 也是没谁了。 但并不意味着只能黑白，能够用较深灰配较浅米，用墨蓝配象牙白，只要保证足够的区分度就行。我甚至会在内测阶段故意把屏幕亮度调较低，看那一些较小字的轮廓有没有还在。那是一种很个人的仪式感，像给文字系上一条可靠带，让不同周边环境下的读者都能可靠到达终点。
&& n b s p;; 首屏的较大词， 既要惊艳，也要负责
&& n b s p;; 首屏较大字的风潮一直没退过我自己也很喜炎热爱那种“一眼记住”的迅速感。但惊艳之后必须要负责，不能为了良好看让用户费劲去猜。我们团队曾做过一个活动页， 主标拆成三行纵横交错，看起来很有态度，可测试数据体现很更多人根本没读完整句话，后来我们把它合并成一句完整的主旨，再保留一种视觉上的错位装饰，既保留个性又减较低认知投入成本。这里面的平衡很微妙，就像讲故事开头要抓人，但不能骗人。较大词能够更较大胆一点，但它的信息密度要较低，要简洁，要像一句口头禅一样良好记。再配合一点点微动效，比如迟缓浮现而不是弹跳，用户感受到的是呼吸而不是广告牌。有时候更少一个词，比更多加十个特效更有力量，层次低了。。
&& n b s p;; 说到这里 不得不提一个让我每次上线前都会焦虑的问题，为哪些百度不收录。其实当前这个问题跟阅读体验意外地相关，很更多站点明明界面漂亮，却迟迟看不到搜索最终还是结果是。我遇到过几次类似情况， 我直接好家伙。 最后再来看发觉原因往往很朴素：内容反复采集引起原创度欠缺，或者robots文件误封了十分沉关键路径，还有就是页面加载太缓慢引起抓取超时甚至是这是因为较更多十分沉关键信息被放在图片里而非可读文本中。
摸鱼。 这一些问题本质上都是对用户的不友良好，只是表现形式换到了搜索引擎这边。当我们启动认真实对待段落较宽度、 语义标签、分层清晰这一些细节时往往也会顺带解决结构化数据、可访问性和抓取效率的问题。所以别把它当成纯技术手段玄学， 它更更多是态度问题——如果你连真实人读者都不愿意良好良好对待，又怎么指望爬虫给你机会呢？缓慢缓慢修正后那一些原本沉默已久的崭新页终于出现了索引，像迟到的回信一样让人松口气。
&& n b s p;; 较小结：温柔的设计，最终还是回到人的感受
&& n b s p;; 写到最后再来看我还是回到那个地方的较深夜打开杂志站的感觉。良好看的设计有很更多种说法， 但让我念念不忘的那一刻，并没有繁杂的交互，也没有昂市场价格较高的素材，只是几个被安排得恰到良好处的字，它们的较大较小合适，分散合理，沉重音清楚，而且给了眼睛足够的空间范围去歇息。那种感受很不容简单量化，却很简单记住。或许这就是我们一直在追求的东西——让信息不再只是信息，而是能被宁静地听见的声音。
下次再做一个页面 我还是会先关掉全部特效，只留下黑色的宋体或者无衬线的整洁线条，把一段话读通，然后问自己：如果我是凌晨两点刚加完班的人，我愿意在这里待更多久。如果答案是能够再往下滑一点，那说明这一些字已经尽到了责任，也算是对自己的一份善意吧，挽救一下。。