平面设计 - 教科书布局包括两种不同计算机编程语言的示例？ - 吾爱随笔录

教科书布局包括两种不同计算机编程语言的示例？

平面设计页面布局排版作品

2022-02-09 17:31:34

我目前正在制作我的一本旧书的新版本；这本新书将包含来自几个不同计算环境的代码示例。

我想知道的是：区分文档中不同环境的最佳方法是什么？我当然可以在文中这么说：

This is how it's done in foogle:
<foogle code example>
and this is how it's done in scronk:
<scronk code example>

这个想法是浏览页面应该立即看到哪些代码示例与哪种语言相关。

这种事情有“最佳实践”吗？大多数文本只关注一种编程语言，因此这很少成为问题。

这是一种可能的布局，我将两种不同的环境放在带有标签的盒子中（这是为了节省空间）。我使用 TeX/LaTeX 作为排版引擎，所以我可以很好地控制布局的各个方面。

（请注意，这只是一个剪切和粘贴示例，因此从示例中间开始似乎是“第 1 章”。）

页面布局示例

这是同一件事的另一个版本，试图将 allcaps 的评论考虑在内：

在此处输入图像描述

1个回答

标题（比例字体）和代码块（背景、等距字体）是印刷最简单和最干净的解决方案。它将适用于小片段和大（页面溢出）示例：

Python

print "Hello world!"

JavaScript

alert('Hello world!');

SQL

SET SERVEROUTPUT ON;
BEGIN
    DBMS_OUTPUT.PUT_LINE('Hello, world!');
END;

标题可能会占用空间。尤其是当您有很多简短的片段时。将语言名称注释为标签是一个不错的选择：

# Python
print "Hello world!"

// JavaScript
alert('Hello world!');

-- SQL
SET SERVEROUTPUT ON;
BEGIN
    DBMS_OUTPUT.PUT_LINE('Hello, world!');
END;

用一个小的白色间隙分隔这些片段。因此，您的读者将其视为三个块。

更新

内联代码示例：

现在键入print 'Hello World!'. 做得好！

再次等宽和灰色背景。代码的等宽字体是一个明显的选择。但是还有其他方法可以在正文和代码之间创建“对比”。用于区分的明显印刷方法是字体、大小、颜色、位置、形状等。

要区分两种编程语言，您可以从同一个托盘中进行选择。

回馈

这是对您的模型的一些反馈：

使代码的字体大小更小。目前，代码看起来比正文大。应该反过来。
没有黑框。有人死了吗？不。
将语言标签放在顶部。这是显而易见的地方。在代码示例流向下一页的情况下，标签将不可见。
向代码块添加左缩进。代码应与文本对齐或向内跳转。目前情况正好相反。
如果您需要区分语言，请使其更加微妙。这些图形元素会重复很多。
也许是图标？.mMATLAB，.pyPython。在一章字体约定中解释它们。http://books.google.nl/books?id=nEJ-jcYF2fMC&lpg=PP1&hl=nl&pg=PR41#v=onepage&q&f=false
我不认为灰色背景是绝对必要的。它们的框架的缺点是增加了额外的边距。从正文到框架，从框架到代码。

没有背景和缩进的例子：

学习 Python

我认为代码示例之前有一个小图标（在边距中，即“画布外”）。将是很好。

保留设计周期的副本，以便能够比较并查看最有效的方法。我通常会做非常小的步骤，节省整个过程。

我的反馈只是提示，您必须自己查看最有效的方法。

其它你可能感兴趣的问题

上一篇如何制作与 Illustrator 中的路径对齐的重叠形状的画笔？下一篇如何在不同的移动显示器上在我的应用程序中实现一致的颜色？