家好，很高兴又见面了，我是"高级前端进阶"，由我带着大家一起关注前端前沿、深入前端底层技术，大家一起进步，也欢迎大家关注、点赞、收藏、转发!

1.什么是 ai2html

ai2html 是 Adob?e Illustrator 的开源脚本，可将 Illustrator 文档转换为 html 和 css，基于 ai2html 的诸多示例登上了 New York Times。

ai2html由不同的组成部分：

• ai2html-css：支持插入到 html 中的 css，可以将其包含在 Illustrator 文档中某处的文本块中，但不要包含在画板上。
• ai2html-js：支持添加始终插入到 html 部分中的 javascript，可以将其包含在 Illustrator 文档中某处的文本块中，但不要包含在画板上。
• ai2html-html：添加始终插入到 html 部分中的 html，请将其包含在 Illustrator 文档中某处的文本块中，但不要包含在画板上。
• ai2html-text：可以将文本存储到变量中，并使用基本的 Mustache 或 erb/ejs 表示法将它们插入到文档中。

目前 ai2html 在 Github 上开源，是一个值得关注的 AI 类前端开源项目。

2.为什么需要 ai2html

很多人会有此疑问，为什么不直接将 Illustrator 文件导出为图像或 SVG？

图像和 SVG 中的文本会随着图像的缩放而缩放，因此当艺术品缩小时，文本很快就会变得难以辨认，或者在放大时看起来非常大。

通过将文本渲染为 html，可以上下缩放“图形”同时保持文本在相同的字体大小和行高下可读，从而适应从手机到巨型桌面显示器的视口。

可以打开链接 http://nyti.ms/1CQdkwq ，然后查看页面时更改窗口大小，此时将看到图稿比例变化，但文本保持相同大小。 更多示例可以查看 https://del.icio.us/archietse/ai2html+responsive

同时，当 Illustrator 保存 SVG 时，每一行文本都会被分解为单独的 SVG 元素，这使得编辑文本变得非常困难。 通过以 HTML 形式渲染文本，编辑人员可以更轻松地进入 CMS 并进行编辑，而无需费力地浏览一堆 SVG 代码。

当然，ai2html 也有一定的局限性，主要体现在以下几点：

• 由于在设置文本格式和定位元素时，网页会将数字四舍五入为整像素，因此图形的 html 版本将不会与其 Illustrator 版本完全一致。 如果文本块跨越多行并且在 Illustrator 中具有小数行距，则舍入差异会特别复杂。
• 设置为 valign:bottom 的非常大的文本目前无法正确定位
• ai2html 只关注文本，而可能忽略艺术的成分
• 画板应该有唯一的名称。
• 图形对象中的标签将渲染为图像的一部分。 如果希望图表标签显示为 html，则需要取消图表分组。
• 在区域文本块中，由于溢出框而隐藏的文本将出现在 html 输出中。

3.安装/使用 ai2html

将 ai2html 的 CDN 文件下载保存到电脑，下载地址已经在文末给出。

将 ai2html.js 文件移动到脚本所在的 Illustrator 文件夹中。 例如，在运行 Adobe Illustrator CC 2015 的 Mac 上，路径为：

/Applications/Adobe Illustrator CC 2015/Presets/en_US/Scripts/ai2html.js

接着按照以下步骤使用 ai2html：

• 创建 Illustrator 作品。例如：将画板调整为希望以 div 在网页上显示的尺寸；确保文档颜色模式设置为 RGB；保存文档；使用 Arial 或 Georgia，除非已将自己的字体添加到脚本中的字体数组中。
• 通过选择以下方式运行脚本：File > Scripts > ai2html
• 转到包含 Illustrator 文件的文件夹， 里面有一个名为 ai2html-output 的输出文件夹， 在浏览器中打开 html 文件以预览输出。

参考资料

http://ai2html.org/

https://github.com/newsdev/ai2html

https://raw.githubusercontent.com/newsdev/ai2html/master/ai2html.js

辑导语：如何优化页面转化，提升用户的相应使用体验，进而推动用户留存与转化？也许，你需要结合一些设计上的小技巧，来帮助你达成所想要的效果。本篇文章里，作者总结了13个提升页面转化的设计技巧，一起来看一下吧。

一、使用颜色衬托图像与文字

有时候你不得不处理一些蹩脚的图像。通过半透明的颜色上衬托你要表达的对象，让它们更像背景纹理而不是主要焦点元素。这将为你提供必要的对比，使叠加的文本可读。在下面的示例中，我对文本应用了深蓝色阴影以进一步提高对比度。

二、不要过度使用负空间

负空间，也叫负形。是指除表达主体本身所占用的画面空间之外的留白部分。而所谓的负空间Logo，则是指的是使用特殊的表现技法让主体之外的空间也展示内容从而创造出的形状简洁却可以表达复杂内容的Logo。

产品设计师往往喜欢负空间。但是，当属于一起的元素之间存在过多的负空间时，眼睛就会变得断断续续，陷入空洞，而不是轻易地在连接的元素上流动。

三、没有人喜欢废话

任何分析过网页数据的人都知道，你只有很少的时间来吸引用户的注意力。比方下面的例子：

四、即使是纯文本布局也应该具有视觉吸引力

页面的纯文本部分可能很难设计，特别是如果你没有机会使用插图、图像，那么你的品牌颜色和一些简单线条也是提高设计质量的利器。

五、图标小，插图大

图标很生动，但他们应该摆清自己的位置。如果把它们做得很大，你的插图就会很糟糕。如果使用带有标题的图标，那么就优先凸显标题。

六、谨慎使用字母间距

我们可以通过多种方式使用字母间距来巧妙地改进排版，但如果你不是经验丰富的排版师，请坚持在大写字母中添加字母间距，而不是在句子大小写文本中添加额外的字母间距，这会会产生可读性问题，并且会破坏字体设计的自然节奏。

七、控制好你的段落行长

很多文本不可读的第一大罪魁祸首可能是行长问题。标准行长应该不超过文字展示区域的三分之二。

八、彰显价值

在下面例子中，真正的价值主张隐藏在一个几乎不可读的字幕中。通过添加真实用户的头像，就可以证明社交的可信性。

九、没有人喜欢小文本

下面的例子中，CSS 中使用了可变的网页排版，创建了正文为 11 像素，导航链接为 9 像素的场景。浏览器默认的 16px 字体大小现在已有 20 年历史了——一定要学会使用为现代屏幕设计的字体， 18-20px 是个可考虑的选择。

十、奇数技巧

布局可尝试包含更多的奇数元素。如果你有 4 个元素，试着把其中的 2 个元素结合在一起。如果不好做，就优先考虑你最想表达的观点并削减最弱的那个。

十一、管理认知超负荷

在可能的情况下结合并减少你要表达的东西。在标题和副本之间创建大小对比以改善视觉层次，并在你有很多话要说时使用负空间来创造更平静的体验。

十二、使用明亮的颜色作为强调

大面积使用明亮的颜色会让你遇到对比度问题，可能无法满足基本的文本可访问性要求。在较小的元素，如按钮，就需要避免白色文本。

十三、经常检查灰色文本的对比度

?使用灰色文本是在文本元素之间创建层次结构的一种流行方法。但这往往会导致严重的易访问性问题，因为文本缺乏足够的对比度。使用在线工具检查对比度，如果你需要建立一个更清晰的视觉层次结构，可以增加字体大小的对比度。

以上是关于优化页面转化的13个技巧，希望你能加以对照并开始着手优化你的产品体验。

本文由@公众号：真的不一定 原创发布于人人都是产品经理。未经许可，禁止转载

题图来自Unsplash，基于CC0协议

士军刀？

不知道你对各种文件的格式转换需求大不大，对于我来说是挺需要的，比如有时候我在 MarkDown 写的文章或者文档，我需要将它们转化成不同的文件形式来给别人阅读，比如网页，比如 PDF，电子书的 epub 等等的格式，甚至我还想要它们在不同的格式之间能够互相转换。

你想不想，把在线的网页变成 PDF， 然后慢慢看？

今天小帅b想要给你介绍的是一个开源的神器——pandoc。

它自称是一把文件格式转换的「瑞士军刀」，因为几乎你能够想到的用标记语言写的文件，都能通过 pandoc 进行转换。

If you need to convert files from one markup format into another, pandoc is your swiss-army knife.

那么，怎么通过 pandoc 来实现我们需要的文件格式转化呢？

安装一波呗～

根据你使用的操作系统，你可以到 GitHub 上下载相应的版本：

https://github.com/jgm/pandoc/releases/tag/2.11.3.2

你也可以使用命令的方式进行安装:

Mac OS 可以这样安装：

brew install pandoc

如果你是 Windows 用户也可以使用 choco 进行安装：

choco install pandoc

Ubuntu 可以这么安装：

sudo apt-get install pandoc

然后你输入以下命令，可以看到版本号就说明你安装成功了：

pandoc --version

如何使用 pandoc ？

pandoc 的命令是这样使用的：

pandoc [选项] [输入文件] ...

将 markdown 转化为 HTML

比如我想把我现在写的 markdown 是这样的：

想要把它转化成 HTML，就可以这样：

pandoc -s --metadata title='帅b讲pandoc' -o out.html Desktop/pandoc.md

这样就可以把我桌面上的 md 直接转出 html 文件了：

一行命令就搞定了，其中 「 -s --metadata title='帅b讲pandoc' -o out.html 」就是「选项」：

• -s 指的是告诉pandoc我要生成有效的 HTML 文件
• --metadata title 指的是说明 HTML 的 title
• -o 指的是我们要输出的文件

而在最后面的 「Desktop/pandoc.md」就是「输入文件」。

pandoc 选项在哪啊？

可能你要问了，这些「选项」在哪里可以得到，分别都是什么意思？

有两个地方你可以查询得到，一个是在你的终端中使用 man 命令：

man pandoc

往下拉你就可以看到各种选项的意思：

另一个地方你可以通过在线文档查询，地址在这：

https://pandoc.org/MANUAL.html#options

内容都是一样的，不过网页更加方便查阅。

将 HTML 转化为 PDF

我们再来玩一下，将 HTML 文件转化为 PDF，因为 pandoc 在转化为 PDF 文件的时候，需要用到 pdf 引擎，pandoc 默认使用的是 pdflatex，如果你没有安装可以先安装一波。

brew install basictex

pandoc 支持的 pdf 引擎有很多，比如：

pdflatex, lualatex, xelatex, latexmk, tectonic, wkhtmltopdf, weasyprint, prince, context

你可以根据自己的需要，选择对应的引擎，比如我们把刚刚生成的 HTML 文件直接转化为 PDF，就可以这样：

pandoc --pdf-engine=xelatex -o out.pdf out.html -V mainfont=STXihei

这里我们使用的 pdf 引擎是 xelatex，使用的中文字体是细黑，运行得到的 pdf 是这样子的：

是不是很方便，还有很多其他的文件格式，你都可以通过 pandoc 进行转化，你还可以对其指定样式，模板等操作，你都可以在这里找到：https://pandoc.org/MANUAL.html。

Python 使用 Pandoc

如果你想在 Python 中使用 pandoc ，也不是不行，你可以安装 pypandoc 这个库，然后使用也是很简单，像这样：

OK，以上就是今天小帅b给你带来的分享，希望对你有帮助！

最后，一直坚持原创分享不易，如果对你有帮助的话点个赞支持一下呗，这样我才有动力给你一直分享个不停嘛，好了，我们下回见，peace！

相关阅读

我是怎么通过 Python 排版公众号的？

你真的会使用 Python 命令吗？

使用终端命令行的一些技巧