家好，很高興又見面了，我是"高級前端進階"，由我帶著大家一起關注前端前沿、深入前端底層技術，大家一起進步，也歡迎大家關注、點贊、收藏、轉發!

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 命令嗎？

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