如何能让页面更好看

0. 写在前面

本文的意图并不在于提出关于设计或者排版的规范或者标准，而是作为笔记，记录一些能让页面更好看的方法，以备有需要的时候参考。

1. 应用场景

现如今，除了印刷品以外，越来越多的信息被承载于数字化的平台。同时，也出现了一些工具“让人们更多地关注内容本身而非排版”，例如编辑本文所使用的 Markdown。然而，当一样东西被呈现在使用者面前，视觉上的感受依然是难以回避的事情。

因此，本文主要关注在数字化平台上展示的内容，包括但不限于 Web 界面、软件 UI、在线文档等供人阅读的非纸质材料。

另外，用于实现上述内容的代码本身也是文本。于是在编辑代码时，也可以考虑美观、易读的问题。

代码是用来让人读的，只是顺便让机器执行而已。

2. 参考资料

美观是件相当主观的事情。这就跟口味一样，甜咸之争能在粽子和豆花等地方遍地开花。

因此本文无法提供量化的指标，而是收集了一些可以参考的材料。当有不确定如何实现的想法时，可以在这些资料中找找方向。有了一根准绳可以避免很多争议。

当然，有时候为了达到某些效果，可能会故意地违背某些原则。这种“明知故犯”的做法就见仁见智了。

2.1 通用设计

对于非设计专业的人员，Robin Williams 的《写给大家看的设计书》（The Non-Designer's Design Book）很适合用于入门和参考。书中归纳的亲密性、对齐、重复、对比 4 大基本设计原则也被许多视频和文章拿来反复讲解。

2.2 文字排版

关于如何对具体的文字进行排版，有许多细节可以考虑。

《中文排版需求》是一份相对比较大而全的文件，详细介绍了中文排版的方方面面。

《中文文案排版指北》则可以作为一个轻量的小册子，日常翻看。

还可以查阅标准文件《中文出版物夹用英文的编辑规范》（CY/T 154-2017）和《标点符号用法》（GB/T 15834-2011）。

2.3 代码优化

编辑代码的过程也是在编辑文本，而可读性对于代码的理解和维护相当重要。所以，对于代码所具有的文本的性质，也可以参考以上的文章。而且，针对编程的场景，后文还会给出一些工具来辅助优化。

正如前文关于口味的比喻，也有人把代码当中一些不好的特征称为“代码坏味道”或“代码异味”（Code Smell）。与之相应，许多程序员会期望自己能写出整洁的代码（Clean Code）。他们可能会想着从一开始就把事情做好，但不少同行都亲历过代码质量的劣化。在事情走向失控之前，重构还来得及。

让代码比你来时更干净。

3. 辅助工具

人是会犯迷糊的，而往往那些被疏忽了的细小的点会留下隐患。所以，我们可以借助一些工具来帮助我们识别这些细节。

场景	工具
JavaScript	ESLint
Vue	eslint-plugin-vue
Python	Pylint
Markdown	markdownlint

4. 不足之处

本文作者毕竟没有设计相关的背景，所以可能许多地方照顾不周，或者在一些细节上有所取舍，例如“避头尾”等等。这可能还涉及到实际用于展示界面的工具的渲染方式。如果要考虑这些，那就费劲了。专业的事还是交给专业人士吧。