关于排版设计……?
如何能让页面更好看
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. 不足之处
本文作者毕竟没有设计相关的背景,所以可能许多地方照顾不周,或者在一些细节上有所取舍,例如“避头尾”等等。这可能还涉及到实际用于展示界面的工具的渲染方式。如果要考虑这些,那就费劲了。专业的事还是交给专业人士吧。
共有 0 条评论