害，说到网站可读性这事儿吧，我可太有感触了。

咱就是说 很多人做网站，一上来就想着“我要酷炫”、“我要炸裂”、“我要让用户眼前一亮”，反正吧…。

后来啊呢？用户眼是亮了但脑子也晕了。

哈哈，说实话，我自己也踩过不少坑。

以前做的一个小破站，背景用了个深色渐变，字体还整个花体英文， 挖野菜。 自己看着觉得贼有格调。

后来啊呢？用户进来三秒钟就走了连个屁都没留下。

后来才明白——你那个不叫设计，叫自嗨。

什么是好的设计？好的设计就是让用户觉得“嗯，我看得懂，我舒服，我想继续看”，中肯。。

就这么简单。

但简单的事儿，往往最难做好。

呵... 今天咱们就随便聊聊，怎么通过设计让网站的内容更好读。

你懂的，我不喜欢讲那些高大上的理论，就讲点实在的、能用的、接地气的。

放心去做... 对了说到这我突然想起有个哥们儿问我：“为什么百度不收录我的网站？”

哈哈，这个问题其实跟可读性也有点关系。

你想啊，百度爬虫也是个“读者”，它也得“读”你的页面。

如果你的页面乱七八糟、代码混乱、内容结构不清晰，爬虫一样蒙圈，太魔幻了。。

所以很多时候，网站可读性差，不只是用户不喜欢，搜索引擎也不喜欢。

那可不就不收录了嘛。

好了扯远了咱们拉回来。

字体那点事儿， 别不当回事儿

我倾向于... 说实话，字体这事儿，很多人根本没当回事儿。

也要.… 觉得“哎呀随便选一个就行了呗”、“反正能看清就行”。

害，那可差远了。

字体是内容的“衣服”，穿得不对，内容再好也白搭，摆烂。。

你看那些大站，用的字体都是有讲究的。

不是随便找个花里胡哨的字体就往上怼。

通常正文部分的字体，老老实实用无衬线体就对了。

像什么微软雅黑、苹方、思源黑体，这些都不错。

为啥？主要原因是在屏幕上，无衬线体更清晰，更不容易让人眼睛累，栓Q了...。

衬线体比如宋体， 在印刷品上很好看，但在屏幕上，特别是小字号的时候，那细小的衬线就糊成一团了，说白了...。

你想想，用户读个文章还要眯着眼睛使劲看，那不累吗？

还有字号，也很关键。

我见过很多网站，正文用12px，甚至10px。

我滴个天老爷，那是给人看的吗？

琢磨琢磨。 咱就是说现在大家用的屏幕越来越大，分辨率越来越高，字号也得跟上啊。

正文至少16px起步，最好18px。

行距也得拉开一点，1.5倍到1.8倍之间，别挤得跟地铁早高峰似的。

字间距稍微宽松那么一丢丢，读起来就舒服很多，话虽然是这么说…。

说实话，这些细节调整一下可读性直接上一个台阶。

颜色啊颜色，多少人在这上面翻车

颜色这事儿，太容易翻车了。

有的人呢，喜欢用浅灰色字配白色背景，觉得“哎呀高级、简约”。

高级个屁啊，你自己盯着看十分钟试试，眼睛不瞎算我输。

颜色搭配的核心就两个字——对比。

对比要够强，才能看得清楚。

黑字白底，永远是最稳妥的组合，没有之一。

如果你非要玩点花样，那也请确保文字和背景之间有足够的对比度。

据说有个叫WCAG的标准，里面讲对比度要至少4.5:1。

你不用管那个具体数字，你就自己看着觉得“清楚、舒服”，那就差不多了。

还有一种情况——色弱用户。

你造吗？大概每12个男性里就有1个是色弱。

你弄个红底绿字，或者绿底红字，在他们眼里可能就跟一团浆糊似的。

所以别光顾着自己觉得好看，也得考虑一下这些用户，公正地讲...。

也许吧... 说实话，我之前做过一个站，用了浅蓝色和浅灰色搭配，自己觉得挺清新。

后来啊一个朋友跟我说：“你这字我看不清啊，跟背景混在一起了。”，行吧...

我这才意识到，颜色这事儿，真不能想当然。

对了还有个小技巧——如果你不确定颜色搭配行不行，就把页面调成黑白色看看。

如果黑白模式下还能看清内容和层次结构，那颜色搭配基本就没大问题。

这个方法简单粗暴，但贼好用。

留白， 不是浪费，是呼吸

很多人总觉得页面要“填满”，不能有空着的地方，太水了。。

哎呀，那种心理我太懂了——“我都花钱做了这个页面不多放点内容那不是亏了吗？”

哈哈，其实恰恰相反。

留白就像是给内容“呼吸”的空间。

你想想，你跟一个人面对面聊天他贴你脸上说话，你舒服吗？

推倒重来。 肯定不舒服啊，得有距离，才能看得清、听得明。

页面也是一样的道理。

段落之间、图片周围、标题上下都得留点空。

这个空不用多，但得有。

有了留白，用户的视线才能有休息的地方，才能更好地聚焦到下一块内容上，精神内耗。。

咱就是说别把页面搞得跟超市货架似的，满满当当的，看着就让人喘不过气，我持保留意见...。

少放点内容，留点空白，用户反而更愿意看。

这就是所谓的“少即是多”。

说实话，这个道理我懂了好几年，但真正做到还是最近的事儿。

以前总舍不得删东西，觉得每句话都很重要。

后来发现，用户根本不在乎你写了多少，只在乎他能不能快速找到自己想要的。

你要是把页面塞得太满，他找不到重点，直接就走了。

所以大胆地留白吧，别怕“空”。

图片这事儿，不能随便凑合

图片也是可读性的重要一环。

被割韭菜了。 很多人觉得图片就是“装饰”，随便找张图放上去就完事儿了。

其实图片的作用可大了去了——它能吸引注意力、能帮助理解、能调节阅读节奏。

但前提是图片得选对、得用好。

先说说图片要清晰。

你说你放一张糊得跟近视眼没戴眼镜似的图，那不是在帮用户，是在折磨用户。

接下来图片要跟内容相关。

格局小了。 无关的图片就是视觉噪音，会分散用户的注意力。

我见过一篇文章讲的是“如何提高工作效率”，后来啊配了一张猫的图。

猫是很可爱啦，但你到底想说啥？

还有，图片的尺寸和位置也很重要。

我好了。 别让图片把文字挤到一边去，也别让图片太大以至于影响了阅读的连续性。

通常把图片放在相关段落之间，宽度跟正文对齐，这样读起来最舒服。

对了图片的alt属性别忘了写。

这个不只是给搜索引擎看的，也是给那些用屏幕阅读器的用户看的。

你写个“一张好看的图片”，那跟没写一样。

要具体描述图片的内容，比如“一位正在使用笔记本电脑的年轻女性”。

这样既有利于SEO，又能照顾到所有用户。

结构层次 让内容自己会说话

一句话概括... 你有没有这样的经历——打开一篇文章，看到密密麻麻一大片文字，瞬间就不想读了？

我太有了。

研究研究。 那种感觉就像面对一座文字组成的墙，你都不知道从哪儿开始看。

PPT你。 但如果这篇文章有标题、有小标题、有段落、有列表，那就完全不一样了。

你可以先扫一眼标题，看看大概在讲什么然后挑自己感兴趣的部分读。

这就是结构层次的作用。

结构化内容就像给文章建了一个骨架，用户顺着这个骨架走，就不会迷路。

咱们做网站的时候，一定要用好标题标签。

h1是一级标题，整个页面只用一次一般是文章的大标题。

h2是二级标题，用来分章节。

h3是三级标题，用来分小节。

这样一层一层下来内容的层次就非常清晰了。

雪糕刺客。 用户扫一眼就知道这段在讲什么那段在讲什么。

说实话，我自己写文章的时候，也会先搭好框架，再往里面填内容。

不然写着写着就跑偏了用户也跟着跑偏。

对了说到这个，我又想起有人问我“为什么百度不收录”。

其实很多时候，就是主要原因是页面结构不清晰，没有用好标题标签，拉倒吧...。

爬虫抓取页面的时候，也是通过标题标签来理解内容结构的，太刺激了。。

你啥标签都不用，就一堆p标签堆在一起，爬虫也觉得头疼。

到位。 它都不知道你这页面到底在讲啥，怎么会收录呢？

所以啊，用好标题标签，不只是方便用户，也是方便搜索引擎。

一举两得的事儿，干嘛不做呢？

链接要让人看得出来

这个问题有点老生常谈了但我还是得说。

很多设计师为了追求“简洁”、“干净”，把链接的下划线给去掉了。

然后用户就懵了——这到底能不能点？

你可能会说：“我用颜娱乐分了啊，蓝色的就是链接。”，意味着.…

我晕... 但问题是如果用户是色弱呢？或者如果用户的屏幕颜色设置不一样呢？

而且，就算颜色能区分，但用户习惯了下划线作为链接的标志。

没有下划线的链接，总觉得少了点什么。

所以我的建议是——别搞那些花里胡哨的，老老实实给链接加下划线，我服了。。

请大家务必... 或者至少让链接在悬停的时候有明显的视觉反馈。

比如变颜色、加下划线、或者加个背景色什么的。

让用户一眼就能看出“这玩意儿能点”，这才是最重要的。

咱就是说用户体验这事儿，很多时候就是这些细节堆出来的，太离谱了。。

细节做好了用户觉得“嗯，这网站挺舒服”，然后就留下来了。

复盘一下。 细节没做好，用户觉得“这什么玩意儿”，然后头也不回地走了。

列表和引用， 让内容更有节奏感

你有没发现，有时候一大段文字读起来很累，但把它拆成一个列表，就瞬间清晰了。

总的来说... 列表就像是给内容加了“标点符号”，让阅读有了停顿和节奏。

比如我在讲“怎么提升可读性”的时候， 如果我把所有内容都写成一段，你可能会觉得喘不过气。

算是吧... 但如果我用小标题、用列表、用引用，把内容分成一块一块的，你读起来就会轻松很多。

他急了。 不光是列表，引用、提示框、重点标注这些元素也很好用。

它们可以打破平铺直叙的节奏，让页面有起伏、有重点，一句话概括...。

用户的眼睛也能跟着这些“视觉标记”走，不会那么容易疲劳。

但注意啊，这些东西也别用太多。

用太多就显得乱了反而失去了重点。

白嫖。 适当地用，用在刀刃上，才能发挥最大的作用。

移动端可读性，不能忽视

现在的人，大部分都是用手机看网站吧？

至少我身边的朋友，包括我自己，都是手机不离手。

所以在电脑上看着很舒服的页面在手机上可能就完全变样了。

来日方长。 字体变得小小的，图片缩成一团，按钮点都点不准。

那感觉，别提多糟心了。

所以啊，做设计的时候，一定要考虑移动端。

稳了！ 响应式设计现在已经是标配了不是什么高大上的东西。

你做完页面之后一定要在手机上打开看看，自己体验一下。

看看字体大小合不合适、按钮好不好点、内容排列顺不顺眼，我的看法是...。

如果自己都觉得不舒服，那用户肯定也不舒服，摸个底。。

说实话，我以前就吃过这个亏。

在电脑上看着挺美的页面一上手机就崩了字体小得跟蚂蚁似的。

后来花了老鼻子劲才改好，费时费力还费钱。

所以啊，移动端的事儿，一定要从一开始就考虑进去，别等到后面再返工，乱弹琴。。

再说说啰嗦几句

好了 说了这么多，其实核心就一句话——

做网站的时候，多想想用户的感受。

也是没谁了... 你自己觉得好看没用，用户觉得好看、觉得好用、觉得舒服，那才是真的。

可读性这个东西，看着好像很虚，但其实处处都是细节，动手。。

字体、 颜色、留白、图片、结构、链接、列表、移动端……，换言之...

每一个细节都做好了用户的阅读体验自然就好了，礼貌吗？。

用户的阅读体验好了他就愿意在你的网站上多待一会儿。

他待的时间久了搜索引擎也会觉得“嗯，这个网站不错”，然后给你更好的排名。

这就是一个正向循环。

所以啊，别觉得这些事儿麻烦，也别觉得“差不多就行了”，原来小丑是我。。

差不多，其实差很多。

再说了你也不想自己辛辛苦苦写的内容，主要原因是排版设计的问题，没人看吧？

那多冤啊。

好了今天就聊到这儿吧。

不夸张地说... 说实话，我说的这些也都是自己踩坑踩出来的经验，不一定都对，但至少都是真话。

你如果有什么不同的想法，或者自己有啥好经验，也欢迎一起聊聊，最后说一句。。

毕竟做网站这事儿，永远都在学习的路上。

害，谁让咱就是吃这碗饭的呢？

哈哈，那就这样吧，下次再唠。

---